@verdocs/web-sdk 4.2.93 → 4.2.95
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{Types-db1bd1d8.js → Types-7a726ff3.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{utils-b7682f9b.js → utils-2da37620.js} +3 -7
- package/dist/cjs/verdocs-contact-picker_2.cjs.entry.js +2 -2
- package/dist/cjs/verdocs-envelope-document-page.cjs.entry.js +2 -2
- package/dist/cjs/verdocs-envelope-sidebar.cjs.entry.js +4 -1
- package/dist/cjs/verdocs-envelopes-list.cjs.entry.js +2 -2
- package/dist/cjs/verdocs-field-attachment_13.cjs.entry.js +63 -88
- package/dist/cjs/verdocs-organization-card_2.cjs.entry.js +18 -16
- package/dist/cjs/verdocs-pagination_2.cjs.entry.js +2 -2
- package/dist/cjs/verdocs-preview_9.cjs.entry.js +2 -2
- package/dist/cjs/verdocs-sign.cjs.entry.js +27 -24
- package/dist/cjs/verdocs-template-document-page_2.cjs.entry.js +2 -2
- package/dist/cjs/verdocs-view.cjs.entry.js +2 -2
- package/dist/cjs/verdocs-web-sdk.cjs.js +1 -1
- package/dist/collection/components/controls/verdocs-portal/verdocs-portal.js +18 -34
- package/dist/collection/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.css +1 -1
- package/dist/collection/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.js +44 -30
- package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.js +25 -22
- package/dist/collection/components/envelopes/verdocs-envelope-sidebar/verdocs-envelope-sidebar.js +3 -0
- package/dist/collection/components/fields/verdocs-field-attachment/verdocs-field-attachment.js +3 -47
- package/dist/collection/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.css +6 -3
- package/dist/collection/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.js +35 -8
- package/dist/collection/components/fields/verdocs-field-radio/verdocs-field-radio.css +2 -2
- package/dist/collection/components/fields/verdocs-field-radio/verdocs-field-radio.js +5 -6
- package/dist/collection/components/fields/verdocs-field-signature/verdocs-field-signature.js +1 -2
- package/dist/collection/utils/Types.js +1 -1
- package/dist/collection/utils/utils.js +2 -6
- package/dist/components/Types.js +1 -1
- package/dist/components/utils.js +2 -6
- package/dist/components/verdocs-envelope-sidebar.js +3 -0
- package/dist/components/verdocs-field-attachment2.js +3 -47
- package/dist/components/verdocs-field-checkbox2.js +19 -8
- package/dist/components/verdocs-field-radio2.js +6 -7
- package/dist/components/verdocs-field-signature2.js +1 -2
- package/dist/components/verdocs-portal2.js +19 -18
- package/dist/components/verdocs-sign.js +25 -22
- package/dist/components/verdocs-upload-dialog2.js +37 -27
- package/dist/esm/{Types-e4a6eba5.js → Types-95d86a44.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{utils-7b0b77d8.js → utils-a79aa5dd.js} +3 -7
- package/dist/esm/verdocs-contact-picker_2.entry.js +2 -2
- package/dist/esm/verdocs-envelope-document-page.entry.js +2 -2
- package/dist/esm/verdocs-envelope-sidebar.entry.js +4 -1
- package/dist/esm/verdocs-envelopes-list.entry.js +2 -2
- package/dist/esm/verdocs-field-attachment_13.entry.js +64 -89
- package/dist/esm/verdocs-organization-card_2.entry.js +18 -16
- package/dist/esm/verdocs-pagination_2.entry.js +2 -2
- package/dist/esm/verdocs-preview_9.entry.js +2 -2
- package/dist/esm/verdocs-sign.entry.js +27 -24
- package/dist/esm/verdocs-template-document-page_2.entry.js +2 -2
- package/dist/esm/verdocs-view.entry.js +2 -2
- package/dist/esm/verdocs-web-sdk.js +1 -1
- package/dist/esm-es5/Types-95d86a44.js +1 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/{utils-7b0b77d8.js → utils-a79aa5dd.js} +2 -2
- package/dist/esm-es5/verdocs-contact-picker_2.entry.js +1 -1
- package/dist/esm-es5/verdocs-envelope-document-page.entry.js +1 -1
- package/dist/esm-es5/verdocs-envelope-sidebar.entry.js +1 -1
- package/dist/esm-es5/verdocs-envelopes-list.entry.js +1 -1
- package/dist/esm-es5/verdocs-field-attachment_13.entry.js +1 -1
- package/dist/esm-es5/verdocs-organization-card_2.entry.js +1 -1
- package/dist/esm-es5/verdocs-pagination_2.entry.js +1 -1
- package/dist/esm-es5/verdocs-preview_9.entry.js +1 -1
- package/dist/esm-es5/verdocs-sign.entry.js +1 -1
- package/dist/esm-es5/verdocs-template-document-page_2.entry.js +1 -1
- package/dist/esm-es5/verdocs-view.entry.js +1 -1
- package/dist/esm-es5/verdocs-web-sdk.js +1 -1
- package/dist/types/components/controls/verdocs-portal/verdocs-portal.d.ts +0 -4
- package/dist/types/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.d.ts +2 -3
- package/dist/types/components/fields/verdocs-field-attachment/verdocs-field-attachment.d.ts +0 -4
- package/dist/types/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.d.ts +2 -0
- package/dist/types/components.d.ts +5 -12
- package/dist/types/utils/Types.d.ts +1 -1
- package/dist/types/utils/utils.d.ts +0 -1
- package/dist/verdocs-web-sdk/{p-04e53cb3.entry.js → p-01199d7a.entry.js} +1 -1
- package/dist/verdocs-web-sdk/{p-18dd4952.system.entry.js → p-143f1bdf.system.entry.js} +1 -1
- package/dist/verdocs-web-sdk/p-185dac12.entry.js +1 -0
- package/dist/verdocs-web-sdk/{p-c8e439cc.entry.js → p-1c04628f.entry.js} +1 -1
- package/dist/verdocs-web-sdk/{p-dc4a5bc3.entry.js → p-2531fcad.entry.js} +1 -1
- package/dist/verdocs-web-sdk/p-267df026.system.js +1 -1
- package/dist/verdocs-web-sdk/{p-44ef8fc5.system.entry.js → p-35ca7ec1.system.entry.js} +1 -1
- package/dist/verdocs-web-sdk/{p-0833c8d4.system.entry.js → p-39453c48.system.entry.js} +1 -1
- package/dist/verdocs-web-sdk/{p-9cde1db5.entry.js → p-4e97fc5c.entry.js} +1 -1
- package/dist/verdocs-web-sdk/{p-38ab701b.entry.js → p-61860777.entry.js} +1 -1
- package/dist/verdocs-web-sdk/{p-965631d9.entry.js → p-61a3e6ab.entry.js} +1 -1
- package/dist/verdocs-web-sdk/p-73f2e118.entry.js +1 -0
- package/dist/verdocs-web-sdk/{p-7f52a1c4.entry.js → p-85aaa229.entry.js} +1 -1
- package/dist/verdocs-web-sdk/p-8b707999.system.entry.js +1 -0
- package/dist/verdocs-web-sdk/p-8ef13092.entry.js +1 -0
- package/dist/verdocs-web-sdk/{p-6589d38a.system.entry.js → p-96276131.system.entry.js} +1 -1
- package/dist/verdocs-web-sdk/{p-a4a60476.system.entry.js → p-9d383fad.system.entry.js} +1 -1
- package/dist/verdocs-web-sdk/{p-5c50ce79.system.entry.js → p-a5b56406.system.entry.js} +1 -1
- package/dist/verdocs-web-sdk/{p-86ccc8c9.system.js → p-ae347813.system.js} +2 -2
- package/dist/verdocs-web-sdk/{p-e8dd697f.system.entry.js → p-be7fa476.system.entry.js} +1 -1
- package/dist/verdocs-web-sdk/p-bf698049.system.entry.js +1 -0
- package/dist/verdocs-web-sdk/{p-2c2a9483.entry.js → p-c6549055.entry.js} +1 -1
- package/dist/verdocs-web-sdk/p-c7ee88c7.js +1 -0
- package/dist/verdocs-web-sdk/{p-1289c3d5.js → p-ca7ef3ff.js} +1 -1
- package/dist/verdocs-web-sdk/{p-1a180595.system.js → p-d738b5db.system.js} +1 -1
- package/dist/verdocs-web-sdk/{p-c1978016.system.entry.js → p-d971f8f0.system.entry.js} +1 -1
- package/dist/verdocs-web-sdk/{p-a324eeca.system.entry.js → p-fe1b68ae.system.entry.js} +1 -1
- package/dist/verdocs-web-sdk/verdocs-web-sdk.esm.js +1 -1
- package/package.json +3 -3
- package/dist/esm-es5/Types-e4a6eba5.js +0 -1
- package/dist/verdocs-web-sdk/p-1acc504b.system.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-251c4106.js +0 -1
- package/dist/verdocs-web-sdk/p-88437b42.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-bb4674a6.system.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-e5e05e63.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-f0449967.entry.js +0 -1
@@ -1,7 +1,6 @@
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
|
2
|
-
import {
|
3
|
-
import {
|
4
|
-
import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore.js';
|
2
|
+
import { VerdocsEndpoint, getRGBA } from '@verdocs/js-sdk';
|
3
|
+
import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
|
5
4
|
import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
|
6
5
|
import { S as SettingsIcon } from './Icons.js';
|
7
6
|
import { d as defineCustomElement$9 } from './verdocs-button2.js';
|
@@ -60,56 +59,13 @@ const VerdocsFieldAttachment = /*@__PURE__*/ proxyCustomElement(class VerdocsFie
|
|
60
59
|
this.fieldStore = getTemplateFieldStore(this.templateid);
|
61
60
|
this.roleStore = getTemplateRoleStore(this.templateid);
|
62
61
|
}
|
63
|
-
componentDidRender() {
|
64
|
-
interact.dynamicDrop(true);
|
65
|
-
if (this.editable) {
|
66
|
-
interact(this.el).resizable({
|
67
|
-
edges: { top: false, bottom: false, left: true, right: true },
|
68
|
-
listeners: {
|
69
|
-
start: this.handleResizeStart.bind(this),
|
70
|
-
move: this.handleResize.bind(this),
|
71
|
-
end: this.handleResizeEnd.bind(this),
|
72
|
-
},
|
73
|
-
});
|
74
|
-
}
|
75
|
-
}
|
76
|
-
handleResizeStart(e) {
|
77
|
-
e.preventDefault();
|
78
|
-
e.stopPropagation();
|
79
|
-
}
|
80
|
-
handleResize(e) {
|
81
|
-
let { x = 0, y = 0, h = 0 } = e.target.dataset;
|
82
|
-
let { width, height } = e.rect;
|
83
|
-
x = (parseFloat(x) || 0) + e.deltaRect.left;
|
84
|
-
y = (parseFloat(y) || 0) + e.deltaRect.top;
|
85
|
-
h = (parseFloat(h) || 0) + e.deltaRect.height;
|
86
|
-
width /= this.xscale;
|
87
|
-
height /= this.yscale;
|
88
|
-
Object.assign(e.target.style, {
|
89
|
-
width: `${width}px`,
|
90
|
-
height: `${height}px`,
|
91
|
-
transform: `scale(${this.xscale}, ${this.yscale}); translate(${x}px, ${y + h}px)`,
|
92
|
-
});
|
93
|
-
Object.assign(e.target.dataset, { x, y, h });
|
94
|
-
}
|
95
|
-
handleResizeEnd(e) {
|
96
|
-
const width = Math.round(parseFloat(e.target.style.width));
|
97
|
-
const height = Math.round(parseFloat(e.target.style.height));
|
98
|
-
updateField(this.endpoint, this.templateid, this.fieldname, { width, height })
|
99
|
-
.then(field => {
|
100
|
-
var _a;
|
101
|
-
updateStoreField(this.fieldStore, this.fieldname, field);
|
102
|
-
(_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name, field });
|
103
|
-
Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
|
104
|
-
})
|
105
|
-
.catch(e => console.log('Field update failed', e));
|
106
|
-
}
|
107
62
|
handleShow() {
|
108
63
|
this.dialog = document.createElement('verdocs-upload-dialog');
|
109
64
|
this.dialog.open = true;
|
110
65
|
this.dialog.addEventListener('exit', () => { var _a; return (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove(); });
|
111
66
|
document.addEventListener('next', (e) => {
|
112
67
|
var _a, _b;
|
68
|
+
console.log('attach onNext', e.detail[0]);
|
113
69
|
this.selectedFile = e.detail[0];
|
114
70
|
(_a = this.attached) === null || _a === void 0 ? void 0 : _a.emit(e.detail[0]);
|
115
71
|
(_b = this.dialog) === null || _b === void 0 ? void 0 : _b.remove();
|
@@ -12,7 +12,7 @@ import { d as defineCustomElement$3 } from './verdocs-select-input2.js';
|
|
12
12
|
import { d as defineCustomElement$2 } from './verdocs-template-field-properties2.js';
|
13
13
|
import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
|
14
14
|
|
15
|
-
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:
|
15
|
+
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}";
|
16
16
|
const VerdocsFieldCheckboxStyle0 = verdocsFieldCheckboxCss;
|
17
17
|
|
18
18
|
const VerdocsFieldCheckbox = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldCheckbox extends HTMLElement {
|
@@ -33,6 +33,16 @@ const VerdocsFieldCheckbox = /*@__PURE__*/ proxyCustomElement(class VerdocsField
|
|
33
33
|
this.yscale = 1;
|
34
34
|
this.pagenumber = 1;
|
35
35
|
this.showingProperties = false;
|
36
|
+
this.focused = false;
|
37
|
+
}
|
38
|
+
async focusField() {
|
39
|
+
// We don't have a visible input that we can actually focus on, so we fake it
|
40
|
+
console.log('Focusing me', this.fieldname);
|
41
|
+
this.focused = false;
|
42
|
+
this.focused = true;
|
43
|
+
setTimeout(() => {
|
44
|
+
this.focused = false;
|
45
|
+
}, 500);
|
36
46
|
}
|
37
47
|
async showSettingsPanel() {
|
38
48
|
const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
|
@@ -51,18 +61,17 @@ const VerdocsFieldCheckbox = /*@__PURE__*/ proxyCustomElement(class VerdocsField
|
|
51
61
|
this.roleStore = getTemplateRoleStore(this.templateid);
|
52
62
|
}
|
53
63
|
render() {
|
54
|
-
const { templateid, fieldname = '', editable = false, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
|
64
|
+
const { templateid, fieldname = '', editable = false, done = false, disabled = false, xscale = 1, yscale = 1, focused } = this;
|
55
65
|
const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
|
56
|
-
const { required = false, role_name = '', label = '' } = field || {};
|
66
|
+
const { required = false, role_name = '', label = '', value = false } = field || {};
|
57
67
|
const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
|
58
|
-
|
59
|
-
const
|
60
|
-
|
61
|
-
const fieldId = `${fieldname}-${id}`;
|
68
|
+
const fieldId = `${fieldname}`;
|
69
|
+
// const fieldId = `${fieldname}-${id}`;
|
70
|
+
const checked = value === 'true';
|
62
71
|
if (done) {
|
63
72
|
return h(Host, { class: { done } }, checked ? '✓' : '☐');
|
64
73
|
}
|
65
|
-
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
|
74
|
+
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) => {
|
66
75
|
e.stopPropagation();
|
67
76
|
this.showingProperties = !this.showingProperties;
|
68
77
|
} }), 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
|
|
87
96
|
"yscale": [514],
|
88
97
|
"pagenumber": [514],
|
89
98
|
"showingProperties": [32],
|
99
|
+
"focused": [32],
|
100
|
+
"focusField": [64],
|
90
101
|
"showSettingsPanel": [64],
|
91
102
|
"hideSettingsPanel": [64]
|
92
103
|
}]);
|
@@ -12,7 +12,7 @@ import { d as defineCustomElement$3 } from './verdocs-select-input2.js';
|
|
12
12
|
import { d as defineCustomElement$2 } from './verdocs-template-field-properties2.js';
|
13
13
|
import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
|
14
14
|
|
15
|
-
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:
|
15
|
+
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}";
|
16
16
|
const VerdocsFieldRadioStyle0 = verdocsFieldRadioCss;
|
17
17
|
|
18
18
|
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
|
|
55
55
|
render() {
|
56
56
|
const { templateid, fieldname = '', editable = false, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
|
57
57
|
const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
|
58
|
-
const { required = false, role_name = '', label = '', group = '' } = field || {};
|
58
|
+
const { name, required = false, role_name = '', label = '', group = '', value = false } = field || {};
|
59
59
|
const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
|
60
|
-
|
61
|
-
const
|
62
|
-
|
63
|
-
const fieldId = `${fieldname}-${id}`;
|
60
|
+
const fieldId = `${fieldname}`;
|
61
|
+
// const fieldId = `${fieldname}-${id}`;
|
62
|
+
const selected = value === 'true';
|
64
63
|
if (done) {
|
65
64
|
return (h(Host, { class: { done }, style: { maxWidth: '10px' } }, h("span", { innerHTML: selected ? RadioIconSelected : RadioIconUnselected })));
|
66
65
|
}
|
67
|
-
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:
|
66
|
+
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) => {
|
68
67
|
e.stopPropagation();
|
69
68
|
this.showingProperties = !this.showingProperties;
|
70
69
|
} }), 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: () => {
|
@@ -88,9 +88,8 @@ const VerdocsFieldSignature = /*@__PURE__*/ proxyCustomElement(class VerdocsFiel
|
|
88
88
|
const { required = false, role_name = '', value = '', label = '' } = field || {};
|
89
89
|
const { base64 } = field.settings || {};
|
90
90
|
const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
|
91
|
-
console.log('sig', field, value, base64);
|
92
91
|
if (done) {
|
93
|
-
return h(Host, { class: { done } }, value && h("img", { src:
|
92
|
+
return h(Host, { class: { done } }, value && h("img", { src: base64, alt: "Signature" }));
|
94
93
|
}
|
95
94
|
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) => {
|
96
95
|
e.stopPropagation();
|
@@ -12,7 +12,6 @@ const VerdocsPortal = /*@__PURE__*/ proxyCustomElement(class VerdocsPortal exten
|
|
12
12
|
this.moved = false;
|
13
13
|
this.anchor = undefined;
|
14
14
|
this.voffset = 0;
|
15
|
-
this.align = 'left';
|
16
15
|
}
|
17
16
|
handleScroll() {
|
18
17
|
this.calculatePosition();
|
@@ -27,24 +26,33 @@ const VerdocsPortal = /*@__PURE__*/ proxyCustomElement(class VerdocsPortal exten
|
|
27
26
|
}
|
28
27
|
}
|
29
28
|
calculateLeft() {
|
29
|
+
var _a;
|
30
30
|
const anchorEl = document.getElementById(this.anchor);
|
31
31
|
if (!anchorEl)
|
32
32
|
return 0;
|
33
33
|
const anchorRect = anchorEl.getBoundingClientRect();
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
34
|
+
const rightOfViewportWithScroll = document.documentElement.clientWidth + document.documentElement.scrollLeft;
|
35
|
+
const leftOfPopup = Math.max(anchorRect.left, 0);
|
36
|
+
// Old centering logic, disabled temporarily
|
37
|
+
// Math.max(anchorRect.left - this.portal.offsetWidth / 2 + anchorRect.width / 2, 0);
|
38
|
+
// Old right-align logic, disabled temporarily
|
39
|
+
// Math.max(anchorRect.left + anchorRect.width - this.portal.offsetWidth, 0);
|
40
|
+
const popupWidth = ((_a = this.element) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 400;
|
41
|
+
const offRightEdge = leftOfPopup + popupWidth > rightOfViewportWithScroll;
|
42
|
+
console.log('Portal', { leftOfPopup, offRightEdge, popupWidth, rightOfViewportWithScroll });
|
43
|
+
return offRightEdge ? leftOfPopup - popupWidth : leftOfPopup;
|
41
44
|
}
|
42
45
|
calculateTop() {
|
46
|
+
var _a;
|
43
47
|
const anchorEl = document.getElementById(this.anchor);
|
44
48
|
if (!anchorEl)
|
45
49
|
return 0;
|
46
50
|
const anchorRect = anchorEl.getBoundingClientRect();
|
47
|
-
|
51
|
+
const bottomOfViewportWithScroll = document.documentElement.clientHeight + document.documentElement.scrollTop;
|
52
|
+
const topOfPopup = anchorRect.bottom + this.voffset + document.documentElement.scrollTop;
|
53
|
+
const popupHeight = ((_a = this.element) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 300;
|
54
|
+
const offBottomEdge = topOfPopup + popupHeight > bottomOfViewportWithScroll;
|
55
|
+
return offBottomEdge ? topOfPopup - popupHeight - anchorRect.height : topOfPopup;
|
48
56
|
}
|
49
57
|
calculatePosition() {
|
50
58
|
this.portal.style.top = `${this.calculateTop()}px`;
|
@@ -59,12 +67,6 @@ const VerdocsPortal = /*@__PURE__*/ proxyCustomElement(class VerdocsPortal exten
|
|
59
67
|
this.portal.style.zIndex = Z_INDEX;
|
60
68
|
this.portal.style.position = 'absolute';
|
61
69
|
document.body.append(this.portal);
|
62
|
-
// function debounce(method, delay) {
|
63
|
-
// clearTimeout(method._tId);
|
64
|
-
// method._tId = setTimeout(function () {
|
65
|
-
// method();
|
66
|
-
// }, delay);
|
67
|
-
// }
|
68
70
|
}
|
69
71
|
componentDidLoad() {
|
70
72
|
this.portal.appendChild(this.element);
|
@@ -74,13 +76,12 @@ const VerdocsPortal = /*@__PURE__*/ proxyCustomElement(class VerdocsPortal exten
|
|
74
76
|
this.moved ? this.portal.remove() : (this.moved = true);
|
75
77
|
}
|
76
78
|
render() {
|
77
|
-
return (h(Host, { key: '
|
79
|
+
return (h(Host, { key: 'a69b388835d23116fdab01d461c2a6c6c1cd3dd8', ref: el => (this.element = el) }, h("slot", { key: '93b7a1bfae1c721b85291270aabf1953cb5d72ea' })));
|
78
80
|
}
|
79
81
|
static get style() { return VerdocsPortalStyle0; }
|
80
82
|
}, [4, "verdocs-portal", {
|
81
83
|
"anchor": [1],
|
82
|
-
"voffset": [2]
|
83
|
-
"align": [1]
|
84
|
+
"voffset": [2]
|
84
85
|
}, [[11, "scroll", "handleScroll"], [9, "resize", "handleResize"], [4, "click", "handleClick"]]]);
|
85
86
|
function defineCustomElement() {
|
86
87
|
if (typeof customElements === "undefined") {
|
@@ -108,7 +108,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
|
|
108
108
|
(_d = this.envelopeLoaded) === null || _d === void 0 ? void 0 : _d.emit({ endpoint: this.endpoint, envelope: this.envelope });
|
109
109
|
}
|
110
110
|
catch (e) {
|
111
|
-
console.log('Error with signing session', e);
|
111
|
+
console.log('[SIGN] Error with signing session', e);
|
112
112
|
(_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));
|
113
113
|
this.showLoadError = true;
|
114
114
|
}
|
@@ -135,7 +135,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
|
|
135
135
|
})
|
136
136
|
.catch(e => {
|
137
137
|
var _a, _b, _c;
|
138
|
-
console.log('Update failure', e);
|
138
|
+
console.log('[SIGN] Update failure', e);
|
139
139
|
this.submitting = false;
|
140
140
|
(_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));
|
141
141
|
});
|
@@ -156,7 +156,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
|
|
156
156
|
{
|
157
157
|
this.submitting = true;
|
158
158
|
const declineResult = await envelopeRecipientDecline(this.endpoint, this.envelopeId, this.roleId);
|
159
|
-
console.log('Decline result', declineResult);
|
159
|
+
console.log('[SIGN] Decline result', declineResult);
|
160
160
|
(_c = this.envelopeUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'declined' });
|
161
161
|
this.submitting = false;
|
162
162
|
this.isDone = true;
|
@@ -171,7 +171,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
|
|
171
171
|
const firstDoc = this.envelope.documents.find(doc => doc.type === 'attachment');
|
172
172
|
if (firstDoc) {
|
173
173
|
saveAttachment(this.endpoint, this.envelope, firstDoc.id).catch(e => {
|
174
|
-
console.log('Error downloading PDF', e);
|
174
|
+
console.log('[SIGN] Error downloading PDF', e);
|
175
175
|
});
|
176
176
|
(_e = this.envelopeUpdated) === null || _e === void 0 ? void 0 : _e.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'downloaded' });
|
177
177
|
}
|
@@ -215,7 +215,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
|
|
215
215
|
return this.saveFieldChange(field.name, { prepared: false, value: e.target.checked });
|
216
216
|
}
|
217
217
|
case 'radio': {
|
218
|
-
return this.saveFieldChange(field.name, { prepared: false, value: e.target.
|
218
|
+
return this.saveFieldChange(field.name, { prepared: false, value: e.target.checked });
|
219
219
|
}
|
220
220
|
case 'dropdown':
|
221
221
|
return this.saveFieldChange(field.name, { prepared: false, value: e.detail });
|
@@ -247,20 +247,19 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
|
|
247
247
|
this.updateRecipientFieldValue(field.name, updateResult);
|
248
248
|
})
|
249
249
|
.catch(e => {
|
250
|
-
console.warn('Error updating signature', e);
|
250
|
+
console.warn('[SIGN] Error updating signature', e);
|
251
251
|
});
|
252
252
|
case 'date':
|
253
|
-
const {
|
253
|
+
const { formattedDate } = e.detail;
|
254
254
|
if (formattedDate) {
|
255
|
-
console.log('dt', { date, formattedDate });
|
256
255
|
return this.saveFieldChange(field.name, { prepared: false, value: formattedDate });
|
257
256
|
}
|
258
257
|
break;
|
259
258
|
case 'timestamp':
|
260
|
-
console.log('Updating timestamp', { value, ts: e.target.getAttribute('timestamp') });
|
259
|
+
console.log('[SIGN] Updating timestamp', { value, ts: e.target.getAttribute('timestamp') });
|
261
260
|
break;
|
262
261
|
default:
|
263
|
-
console.log('Unhandled field update', { value, checked }, field);
|
262
|
+
console.log('[SIGN] Unhandled field update', { value, checked }, field);
|
264
263
|
break;
|
265
264
|
}
|
266
265
|
}
|
@@ -277,28 +276,34 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
|
|
277
276
|
return value !== '';
|
278
277
|
}
|
279
278
|
case 'signature':
|
279
|
+
return value === 'signed';
|
280
280
|
case 'initial':
|
281
|
-
return value
|
281
|
+
return value === 'initialed';
|
282
282
|
// Timestamp fields get automatically filled when the envelope is submitted.
|
283
283
|
case 'timestamp':
|
284
284
|
return true;
|
285
285
|
case 'textarea':
|
286
286
|
case 'date':
|
287
|
-
case 'attachment':
|
288
287
|
return value !== '';
|
288
|
+
case 'attachment':
|
289
|
+
return value === 'attached';
|
289
290
|
case 'dropdown':
|
290
291
|
return value !== '';
|
291
292
|
case 'checkbox':
|
292
|
-
return
|
293
|
+
return value === 'true';
|
293
294
|
case 'radio':
|
294
|
-
|
295
|
+
if (!!field.group) {
|
296
|
+
return this.getRecipientFields()
|
297
|
+
.filter(f => f.group === field.group)
|
298
|
+
.some(field => field.value === 'true');
|
299
|
+
}
|
300
|
+
return field.value === 'true';
|
295
301
|
default:
|
296
302
|
return false;
|
297
303
|
}
|
298
304
|
}
|
299
305
|
isFieldValid(field) {
|
300
|
-
|
301
|
-
return !required || this.isFieldFilled(field);
|
306
|
+
return !field.required || this.isFieldFilled(field);
|
302
307
|
}
|
303
308
|
getSortedFillableFields() {
|
304
309
|
const recipientFields = this.getRecipientFields().filter(field => field.type !== 'timestamp');
|
@@ -373,7 +378,6 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
|
|
373
378
|
if (nextRequiredField) {
|
374
379
|
const id = getFieldId(nextRequiredField);
|
375
380
|
const el = document.getElementById(id);
|
376
|
-
console.log('Jumping to next field', nextRequiredField);
|
377
381
|
el === null || el === void 0 ? void 0 : el.focusField();
|
378
382
|
el === null || el === void 0 ? void 0 : el.scrollTo({ behavior: 'smooth', top: 0 });
|
379
383
|
this.focusedField = nextRequiredField.name;
|
@@ -402,7 +406,9 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
|
|
402
406
|
// console.log('[SIGN] onfieldInput', e.detail, e.target.value);
|
403
407
|
// These field types don't emit fieldChange. Should we standardize on that? We don't tap "input" for fields like
|
404
408
|
// text boxes because we'd be updating the field on every keystroke. We do those on blur which fires fieldChange.
|
405
|
-
|
409
|
+
console.log('onInput', e.target.type, e.target.name);
|
410
|
+
if (e.target.type === 'radio' || e.target.type === 'checkbox') {
|
411
|
+
// if (e.target.type === 'radio' || e.target.name.includes('date') || e.target.name.includes('checkbox')) {
|
406
412
|
this.handleFieldChange(field, e).finally(() => this.checkRecipientFields());
|
407
413
|
}
|
408
414
|
else {
|
@@ -411,7 +417,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
|
|
411
417
|
});
|
412
418
|
el.addEventListener('attached', async (e) => {
|
413
419
|
console.log('[SIGN] onAttached', e.detail, e.target.value);
|
414
|
-
const r = await uploadEnvelopeFieldAttachment(this.endpoint, this.envelopeId,
|
420
|
+
const r = await uploadEnvelopeFieldAttachment(this.endpoint, this.envelopeId, field.name, e.detail);
|
415
421
|
console.log('upload result', r);
|
416
422
|
this.checkRecipientFields();
|
417
423
|
});
|
@@ -444,9 +450,6 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
|
|
444
450
|
if (field.page !== pageInfo.pageNumber) {
|
445
451
|
return;
|
446
452
|
}
|
447
|
-
if (field.type === 'signature') {
|
448
|
-
console.log('rendering', field);
|
449
|
-
}
|
450
453
|
const el = renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone }, tabIndex);
|
451
454
|
if (!el) {
|
452
455
|
return;
|
@@ -1,8 +1,7 @@
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
2
|
-
import { fileToDataUrl } from '@verdocs/js-sdk';
|
3
2
|
import { d as defineCustomElement$1 } from './verdocs-button2.js';
|
4
3
|
|
5
|
-
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:
|
4
|
+
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}";
|
6
5
|
const VerdocsUploadDialogStyle0 = verdocsUploadDialogCss;
|
7
6
|
|
8
7
|
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
|
|
14
13
|
this.exit = createEvent(this, "exit", 7);
|
15
14
|
this.next = createEvent(this, "next", 7);
|
16
15
|
this.draggingOver = false;
|
17
|
-
this.
|
16
|
+
this.selectedFiles = [];
|
18
17
|
}
|
18
|
+
// @State() droppedFiles = [] as IFileWithData[];
|
19
19
|
handleCancel() {
|
20
20
|
this.exit.emit();
|
21
21
|
}
|
@@ -27,7 +27,8 @@ const VerdocsUploadDialog = /*@__PURE__*/ proxyCustomElement(class VerdocsUpload
|
|
27
27
|
}
|
28
28
|
}
|
29
29
|
handleDone() {
|
30
|
-
this.next.emit(this.
|
30
|
+
this.next.emit(this.selectedFiles);
|
31
|
+
// this.next.emit(this.droppedFiles);
|
31
32
|
}
|
32
33
|
handleDragOver(e) {
|
33
34
|
e.preventDefault();
|
@@ -40,45 +41,54 @@ const VerdocsUploadDialog = /*@__PURE__*/ proxyCustomElement(class VerdocsUpload
|
|
40
41
|
async handleDrop(e) {
|
41
42
|
e.preventDefault();
|
42
43
|
this.draggingOver = false;
|
44
|
+
this.selectedFiles = Array.from(e.dataTransfer.items);
|
43
45
|
// Required for cross-browser support. Note that dataTransfer.items is of type DataTransferItemList and is not an array.
|
44
|
-
let droppedFiles = [];
|
45
|
-
if (e.dataTransfer.items) {
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
}
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
|
46
|
+
// let droppedFiles = [] as File[];
|
47
|
+
// if (e.dataTransfer.items) {
|
48
|
+
// for (let i = 0; i < e.dataTransfer.items.length; i++) {
|
49
|
+
// if (e.dataTransfer.items[i].kind === 'file') {
|
50
|
+
// const file = e.dataTransfer.items[i].getAsFile();
|
51
|
+
// droppedFiles.push(file);
|
52
|
+
// }
|
53
|
+
// }
|
54
|
+
// } else {
|
55
|
+
// droppedFiles = e.dataTransfer.files;
|
56
|
+
// }
|
57
|
+
// this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
|
57
58
|
}
|
58
59
|
handleRemoveAttachment(index) {
|
59
|
-
const newFiles = [...this.
|
60
|
+
const newFiles = [...this.selectedFiles];
|
60
61
|
newFiles.splice(index, 1);
|
61
|
-
this.
|
62
|
+
this.selectedFiles = newFiles;
|
63
|
+
// const newFiles = [...this.decodedFiles];
|
64
|
+
// newFiles.splice(index, 1);
|
65
|
+
// this.decodedFiles = newFiles;
|
62
66
|
}
|
63
67
|
handleSelectFile() {
|
64
68
|
var _a;
|
65
69
|
(_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.click();
|
66
70
|
}
|
67
71
|
async handleFileChange() {
|
68
|
-
var _a
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
72
|
+
var _a;
|
73
|
+
this.selectedFiles = Array.from((_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files);
|
74
|
+
// this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
|
75
|
+
// let droppedFiles = [] as File[];
|
76
|
+
// for (let i = 0; i < this.fileInput?.files.length; i++) {
|
77
|
+
// droppedFiles.push(this.fileInput?.files[i]);
|
78
|
+
// }
|
79
|
+
// this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
|
74
80
|
}
|
75
81
|
render() {
|
76
|
-
return (h(Host, { key: '
|
82
|
+
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 ? (
|
83
|
+
// {this.decodedFiles.length < 1 ? (
|
84
|
+
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) => (
|
85
|
+
// {this.decodedFiles.map((file, index) => (
|
86
|
+
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 }))))));
|
77
87
|
}
|
78
88
|
static get style() { return VerdocsUploadDialogStyle0; }
|
79
89
|
}, [0, "verdocs-upload-dialog", {
|
80
90
|
"draggingOver": [32],
|
81
|
-
"
|
91
|
+
"selectedFiles": [32]
|
82
92
|
}]);
|
83
93
|
function defineCustomElement() {
|
84
94
|
if (typeof customElements === "undefined") {
|