@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.
Files changed (111) hide show
  1. package/dist/cjs/{Types-db1bd1d8.js → Types-7a726ff3.js} +1 -1
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/{utils-b7682f9b.js → utils-2da37620.js} +3 -7
  4. package/dist/cjs/verdocs-contact-picker_2.cjs.entry.js +2 -2
  5. package/dist/cjs/verdocs-envelope-document-page.cjs.entry.js +2 -2
  6. package/dist/cjs/verdocs-envelope-sidebar.cjs.entry.js +4 -1
  7. package/dist/cjs/verdocs-envelopes-list.cjs.entry.js +2 -2
  8. package/dist/cjs/verdocs-field-attachment_13.cjs.entry.js +63 -88
  9. package/dist/cjs/verdocs-organization-card_2.cjs.entry.js +18 -16
  10. package/dist/cjs/verdocs-pagination_2.cjs.entry.js +2 -2
  11. package/dist/cjs/verdocs-preview_9.cjs.entry.js +2 -2
  12. package/dist/cjs/verdocs-sign.cjs.entry.js +27 -24
  13. package/dist/cjs/verdocs-template-document-page_2.cjs.entry.js +2 -2
  14. package/dist/cjs/verdocs-view.cjs.entry.js +2 -2
  15. package/dist/cjs/verdocs-web-sdk.cjs.js +1 -1
  16. package/dist/collection/components/controls/verdocs-portal/verdocs-portal.js +18 -34
  17. package/dist/collection/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.css +1 -1
  18. package/dist/collection/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.js +44 -30
  19. package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.js +25 -22
  20. package/dist/collection/components/envelopes/verdocs-envelope-sidebar/verdocs-envelope-sidebar.js +3 -0
  21. package/dist/collection/components/fields/verdocs-field-attachment/verdocs-field-attachment.js +3 -47
  22. package/dist/collection/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.css +6 -3
  23. package/dist/collection/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.js +35 -8
  24. package/dist/collection/components/fields/verdocs-field-radio/verdocs-field-radio.css +2 -2
  25. package/dist/collection/components/fields/verdocs-field-radio/verdocs-field-radio.js +5 -6
  26. package/dist/collection/components/fields/verdocs-field-signature/verdocs-field-signature.js +1 -2
  27. package/dist/collection/utils/Types.js +1 -1
  28. package/dist/collection/utils/utils.js +2 -6
  29. package/dist/components/Types.js +1 -1
  30. package/dist/components/utils.js +2 -6
  31. package/dist/components/verdocs-envelope-sidebar.js +3 -0
  32. package/dist/components/verdocs-field-attachment2.js +3 -47
  33. package/dist/components/verdocs-field-checkbox2.js +19 -8
  34. package/dist/components/verdocs-field-radio2.js +6 -7
  35. package/dist/components/verdocs-field-signature2.js +1 -2
  36. package/dist/components/verdocs-portal2.js +19 -18
  37. package/dist/components/verdocs-sign.js +25 -22
  38. package/dist/components/verdocs-upload-dialog2.js +37 -27
  39. package/dist/esm/{Types-e4a6eba5.js → Types-95d86a44.js} +1 -1
  40. package/dist/esm/loader.js +1 -1
  41. package/dist/esm/{utils-7b0b77d8.js → utils-a79aa5dd.js} +3 -7
  42. package/dist/esm/verdocs-contact-picker_2.entry.js +2 -2
  43. package/dist/esm/verdocs-envelope-document-page.entry.js +2 -2
  44. package/dist/esm/verdocs-envelope-sidebar.entry.js +4 -1
  45. package/dist/esm/verdocs-envelopes-list.entry.js +2 -2
  46. package/dist/esm/verdocs-field-attachment_13.entry.js +64 -89
  47. package/dist/esm/verdocs-organization-card_2.entry.js +18 -16
  48. package/dist/esm/verdocs-pagination_2.entry.js +2 -2
  49. package/dist/esm/verdocs-preview_9.entry.js +2 -2
  50. package/dist/esm/verdocs-sign.entry.js +27 -24
  51. package/dist/esm/verdocs-template-document-page_2.entry.js +2 -2
  52. package/dist/esm/verdocs-view.entry.js +2 -2
  53. package/dist/esm/verdocs-web-sdk.js +1 -1
  54. package/dist/esm-es5/Types-95d86a44.js +1 -0
  55. package/dist/esm-es5/loader.js +1 -1
  56. package/dist/esm-es5/{utils-7b0b77d8.js → utils-a79aa5dd.js} +2 -2
  57. package/dist/esm-es5/verdocs-contact-picker_2.entry.js +1 -1
  58. package/dist/esm-es5/verdocs-envelope-document-page.entry.js +1 -1
  59. package/dist/esm-es5/verdocs-envelope-sidebar.entry.js +1 -1
  60. package/dist/esm-es5/verdocs-envelopes-list.entry.js +1 -1
  61. package/dist/esm-es5/verdocs-field-attachment_13.entry.js +1 -1
  62. package/dist/esm-es5/verdocs-organization-card_2.entry.js +1 -1
  63. package/dist/esm-es5/verdocs-pagination_2.entry.js +1 -1
  64. package/dist/esm-es5/verdocs-preview_9.entry.js +1 -1
  65. package/dist/esm-es5/verdocs-sign.entry.js +1 -1
  66. package/dist/esm-es5/verdocs-template-document-page_2.entry.js +1 -1
  67. package/dist/esm-es5/verdocs-view.entry.js +1 -1
  68. package/dist/esm-es5/verdocs-web-sdk.js +1 -1
  69. package/dist/types/components/controls/verdocs-portal/verdocs-portal.d.ts +0 -4
  70. package/dist/types/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.d.ts +2 -3
  71. package/dist/types/components/fields/verdocs-field-attachment/verdocs-field-attachment.d.ts +0 -4
  72. package/dist/types/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.d.ts +2 -0
  73. package/dist/types/components.d.ts +5 -12
  74. package/dist/types/utils/Types.d.ts +1 -1
  75. package/dist/types/utils/utils.d.ts +0 -1
  76. package/dist/verdocs-web-sdk/{p-04e53cb3.entry.js → p-01199d7a.entry.js} +1 -1
  77. package/dist/verdocs-web-sdk/{p-18dd4952.system.entry.js → p-143f1bdf.system.entry.js} +1 -1
  78. package/dist/verdocs-web-sdk/p-185dac12.entry.js +1 -0
  79. package/dist/verdocs-web-sdk/{p-c8e439cc.entry.js → p-1c04628f.entry.js} +1 -1
  80. package/dist/verdocs-web-sdk/{p-dc4a5bc3.entry.js → p-2531fcad.entry.js} +1 -1
  81. package/dist/verdocs-web-sdk/p-267df026.system.js +1 -1
  82. package/dist/verdocs-web-sdk/{p-44ef8fc5.system.entry.js → p-35ca7ec1.system.entry.js} +1 -1
  83. package/dist/verdocs-web-sdk/{p-0833c8d4.system.entry.js → p-39453c48.system.entry.js} +1 -1
  84. package/dist/verdocs-web-sdk/{p-9cde1db5.entry.js → p-4e97fc5c.entry.js} +1 -1
  85. package/dist/verdocs-web-sdk/{p-38ab701b.entry.js → p-61860777.entry.js} +1 -1
  86. package/dist/verdocs-web-sdk/{p-965631d9.entry.js → p-61a3e6ab.entry.js} +1 -1
  87. package/dist/verdocs-web-sdk/p-73f2e118.entry.js +1 -0
  88. package/dist/verdocs-web-sdk/{p-7f52a1c4.entry.js → p-85aaa229.entry.js} +1 -1
  89. package/dist/verdocs-web-sdk/p-8b707999.system.entry.js +1 -0
  90. package/dist/verdocs-web-sdk/p-8ef13092.entry.js +1 -0
  91. package/dist/verdocs-web-sdk/{p-6589d38a.system.entry.js → p-96276131.system.entry.js} +1 -1
  92. package/dist/verdocs-web-sdk/{p-a4a60476.system.entry.js → p-9d383fad.system.entry.js} +1 -1
  93. package/dist/verdocs-web-sdk/{p-5c50ce79.system.entry.js → p-a5b56406.system.entry.js} +1 -1
  94. package/dist/verdocs-web-sdk/{p-86ccc8c9.system.js → p-ae347813.system.js} +2 -2
  95. package/dist/verdocs-web-sdk/{p-e8dd697f.system.entry.js → p-be7fa476.system.entry.js} +1 -1
  96. package/dist/verdocs-web-sdk/p-bf698049.system.entry.js +1 -0
  97. package/dist/verdocs-web-sdk/{p-2c2a9483.entry.js → p-c6549055.entry.js} +1 -1
  98. package/dist/verdocs-web-sdk/p-c7ee88c7.js +1 -0
  99. package/dist/verdocs-web-sdk/{p-1289c3d5.js → p-ca7ef3ff.js} +1 -1
  100. package/dist/verdocs-web-sdk/{p-1a180595.system.js → p-d738b5db.system.js} +1 -1
  101. package/dist/verdocs-web-sdk/{p-c1978016.system.entry.js → p-d971f8f0.system.entry.js} +1 -1
  102. package/dist/verdocs-web-sdk/{p-a324eeca.system.entry.js → p-fe1b68ae.system.entry.js} +1 -1
  103. package/dist/verdocs-web-sdk/verdocs-web-sdk.esm.js +1 -1
  104. package/package.json +3 -3
  105. package/dist/esm-es5/Types-e4a6eba5.js +0 -1
  106. package/dist/verdocs-web-sdk/p-1acc504b.system.entry.js +0 -1
  107. package/dist/verdocs-web-sdk/p-251c4106.js +0 -1
  108. package/dist/verdocs-web-sdk/p-88437b42.entry.js +0 -1
  109. package/dist/verdocs-web-sdk/p-bb4674a6.system.entry.js +0 -1
  110. package/dist/verdocs-web-sdk/p-e5e05e63.entry.js +0 -1
  111. 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 { i as interact } from './interact.min.js';
3
- import { VerdocsEndpoint, updateField, getRGBA } from '@verdocs/js-sdk';
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: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}";
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
- // TODO
59
- const { id = 'option1', checked = false } = {};
60
- // const {id = 'option1', checked = false} = options[option] || {};
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, 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) => {
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: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}";
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
- // TODO
61
- const { id = 'option1', selected = false } = {};
62
- // const {id = 'option1', selected = false} = options[option] || {};
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: 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) => {
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: value, alt: "Signature" }));
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
- if (this.align === 'left') {
35
- return Math.max(anchorRect.left, 0);
36
- }
37
- if (this.align === 'right') {
38
- return Math.max(anchorRect.left + anchorRect.width - this.portal.offsetWidth, 0);
39
- }
40
- return Math.max(anchorRect.left - this.portal.offsetWidth / 2 + anchorRect.width / 2, 0);
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
- return anchorRect.bottom + this.voffset + document.documentElement.scrollTop;
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: '9929603a3ff04c0d2315b082cc23ec41394fad74', ref: el => (this.element = el) }, h("slot", { key: 'cbde23964359e4a9bbe7f41bd3ed13576c159aa5' })));
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.value === e.target.checked });
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 { date, formattedDate } = e.detail;
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 && 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 !!value;
293
+ return value === 'true';
293
294
  case 'radio':
294
- return !!value;
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
- const { required = false } = field;
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
- if (e.target.name.includes('date') || e.target.name.includes('checkbox') || e.target.name.includes('radio')) {
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, this.roleId, field.name, e.detail);
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: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}";
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.decodedFiles = [];
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.decodedFiles);
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
- for (let i = 0; i < e.dataTransfer.items.length; i++) {
47
- if (e.dataTransfer.items[i].kind === 'file') {
48
- const file = e.dataTransfer.items[i].getAsFile();
49
- droppedFiles.push(file);
50
- }
51
- }
52
- }
53
- else {
54
- droppedFiles = e.dataTransfer.files;
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.decodedFiles];
60
+ const newFiles = [...this.selectedFiles];
60
61
  newFiles.splice(index, 1);
61
- this.decodedFiles = newFiles;
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, _b;
69
- let droppedFiles = [];
70
- for (let i = 0; i < ((_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files.length); i++) {
71
- droppedFiles.push((_b = this.fileInput) === null || _b === void 0 ? void 0 : _b.files[i]);
72
- }
73
- this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
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: '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 }))))));
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
- "decodedFiles": [32]
91
+ "selectedFiles": [32]
82
92
  }]);
83
93
  function defineCustomElement() {
84
94
  if (typeof customElements === "undefined") {
@@ -1,5 +1,5 @@
1
1
  const FORMAT_TIMESTAMP = 'P pp';
2
2
  // export const FORMAT_TIMESTAMP = 'Y-MM-dd hh:mm:ss a';
3
- const FORMAT_DATE = 'Y-MM-dd';
3
+ const FORMAT_DATE = 'y-MM-dd';
4
4
 
5
5
  export { FORMAT_TIMESTAMP as F, FORMAT_DATE as a };