@verdocs/web-sdk 2.0.0 → 2.0.2
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/verdocs-auth.cjs.entry.js +1 -1
- package/dist/cjs/verdocs-field-textarea.cjs.entry.js +2 -2
- package/dist/cjs/verdocs-field-textbox.cjs.entry.js +4 -2
- package/dist/cjs/verdocs-template-fields_4.cjs.entry.js +56 -76
- package/dist/collection/components/embeds/verdocs-auth/verdocs-auth.js +2 -2
- package/dist/collection/components/fields/verdocs-field-attachment/verdocs-field-attachment.js +6 -2
- package/dist/collection/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.js +6 -2
- package/dist/collection/components/fields/verdocs-field-date/verdocs-field-date.js +6 -2
- package/dist/collection/components/fields/verdocs-field-dropdown/verdocs-field-dropdown.js +6 -2
- package/dist/collection/components/fields/verdocs-field-initial/verdocs-field-initial.js +6 -2
- package/dist/collection/components/fields/verdocs-field-payment/verdocs-field-payment.js +13 -4
- package/dist/collection/components/fields/verdocs-field-radio-button-group/verdocs-field-radio-button.js +6 -2
- package/dist/collection/components/fields/verdocs-field-signature/verdocs-field-signature.js +6 -2
- package/dist/collection/components/fields/verdocs-field-textarea/verdocs-field-textarea.js +8 -4
- package/dist/collection/components/fields/verdocs-field-textbox/verdocs-field-textbox.js +10 -4
- package/dist/collection/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.js +6 -2
- package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.js +56 -76
- package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.stories.js +1 -1
- package/dist/collection/components/templates/verdocs-templates-list/verdocs-templates-list.stories.js +5 -1
- package/dist/components/verdocs-auth.js +1 -1
- package/dist/components/verdocs-field-textarea.js +2 -2
- package/dist/components/verdocs-field-textbox.js +4 -2
- package/dist/components/verdocs-template-fields2.js +56 -76
- package/dist/docs.json +14 -14
- package/dist/esm/verdocs-auth.entry.js +1 -1
- package/dist/esm/verdocs-field-textarea.entry.js +2 -2
- package/dist/esm/verdocs-field-textbox.entry.js +4 -2
- package/dist/esm/verdocs-template-fields_4.entry.js +56 -76
- package/dist/esm-es5/verdocs-auth.entry.js +1 -1
- package/dist/esm-es5/verdocs-field-textarea.entry.js +1 -1
- package/dist/esm-es5/verdocs-field-textbox.entry.js +1 -1
- package/dist/esm-es5/verdocs-template-fields_4.entry.js +1 -1
- package/dist/types/components/fields/verdocs-field-attachment/verdocs-field-attachment.d.ts +1 -0
- package/dist/types/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.d.ts +1 -0
- package/dist/types/components/fields/verdocs-field-date/verdocs-field-date.d.ts +1 -0
- package/dist/types/components/fields/verdocs-field-dropdown/verdocs-field-dropdown.d.ts +1 -0
- package/dist/types/components/fields/verdocs-field-initial/verdocs-field-initial.d.ts +1 -0
- package/dist/types/components/fields/verdocs-field-payment/verdocs-field-payment.d.ts +6 -7
- package/dist/types/components/fields/verdocs-field-radio-button-group/verdocs-field-radio-button.d.ts +1 -0
- package/dist/types/components/fields/verdocs-field-signature/verdocs-field-signature.d.ts +1 -0
- package/dist/types/components/fields/verdocs-field-textarea/verdocs-field-textarea.d.ts +1 -0
- package/dist/types/components/fields/verdocs-field-textbox/verdocs-field-textbox.d.ts +1 -0
- package/dist/types/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.d.ts +1 -0
- package/dist/types/components/templates/verdocs-template-fields/verdocs-template-fields.d.ts +4 -1
- package/dist/types/components/templates/verdocs-templates-list/verdocs-templates-list.stories.d.ts +3 -1
- package/dist/types/components.d.ts +11 -14
- package/dist/verdocs-web-sdk/p-0c85ee4f.system.entry.js +1 -0
- package/dist/verdocs-web-sdk/p-0d5757a8.entry.js +1 -0
- package/dist/verdocs-web-sdk/p-3872cedf.system.entry.js +1 -0
- package/dist/verdocs-web-sdk/{p-5fd70b07.system.entry.js → p-3cff566d.system.entry.js} +1 -1
- package/dist/verdocs-web-sdk/p-57aae7f1.entry.js +1 -0
- package/dist/verdocs-web-sdk/p-647cdb84.system.js +1 -1
- package/dist/verdocs-web-sdk/p-a7b2bda6.entry.js +1 -0
- package/dist/verdocs-web-sdk/{p-b49887e6.system.entry.js → p-bc4cda62.system.entry.js} +1 -1
- package/dist/verdocs-web-sdk/p-c339ff0f.entry.js +1 -0
- package/dist/verdocs-web-sdk/verdocs-web-sdk.esm.js +1 -1
- package/package.json +1 -1
- package/dist/verdocs-web-sdk/p-223e5517.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-3e9c4c8a.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-52300880.system.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-be8ff081.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-e9c00342.system.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-ea5cec2d.entry.js +0 -1
package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.js
CHANGED
@@ -99,26 +99,27 @@ export class VerdocsTemplateFields {
|
|
99
99
|
console.log('[FIELDS] handleFieldChange', field, e, optionId);
|
100
100
|
this.rerender++;
|
101
101
|
}
|
102
|
+
handleFieldSettingsChange(pageInfo, field, roleIndex, el, newFieldData) {
|
103
|
+
var _a, _b, _c, _d;
|
104
|
+
console.log('[FIELDS] Field settings changed', field.name, newFieldData);
|
105
|
+
Object.assign(field, newFieldData);
|
106
|
+
el.field = newFieldData;
|
107
|
+
this.selectedRoleName = field.role_name;
|
108
|
+
el.setAttribute('roleindex', getRoleIndex(getRoleNames(this.store), field.role_name));
|
109
|
+
el.field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(f => f.name === field.name);
|
110
|
+
this.rerender++;
|
111
|
+
el.setAttribute('rerender', this.rerender);
|
112
|
+
(_c = this.templateUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, template: (_d = this.store) === null || _d === void 0 ? void 0 : _d.state, event: 'updated-field' });
|
113
|
+
console.log('[FIELDS] Re-rendering field', field.name, pageInfo.pageNumber);
|
114
|
+
this.reRenderField(field, pageInfo.pageNumber);
|
115
|
+
const newEl = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
|
116
|
+
if (!newEl) {
|
117
|
+
return;
|
118
|
+
}
|
119
|
+
}
|
102
120
|
attachFieldAttributes(pageInfo, field, roleIndex, el) {
|
103
121
|
el.addEventListener('input', e => this.handleFieldChange(field, e));
|
104
|
-
el.addEventListener('settingsChanged', e =>
|
105
|
-
var _a, _b, _c, _d;
|
106
|
-
console.log('[FIELDS] settingsChanged', e.detail);
|
107
|
-
Object.assign(field, e.detail.field);
|
108
|
-
this.selectedRoleName = field.role_name;
|
109
|
-
el.field = e.detail.field;
|
110
|
-
el.setAttribute('roleindex', getRoleIndex(getRoleNames(this.store), field.role_name));
|
111
|
-
el.field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(f => f.name === field.name);
|
112
|
-
this.rerender++;
|
113
|
-
el.setAttribute('rerender', this.rerender);
|
114
|
-
(_c = this.templateUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, template: (_d = this.store) === null || _d === void 0 ? void 0 : _d.state, event: 'updated-field' });
|
115
|
-
console.log('[FIELDS] Re-rendering field', field.name, pageInfo.pageNumber);
|
116
|
-
this.reRenderField(field, pageInfo.pageNumber);
|
117
|
-
const newEl = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
|
118
|
-
if (!newEl) {
|
119
|
-
return;
|
120
|
-
}
|
121
|
-
});
|
122
|
+
el.addEventListener('settingsChanged', e => this.handleFieldSettingsChange(pageInfo, field, roleIndex, el, e.detail.field));
|
122
123
|
el.addEventListener('deleted', () => {
|
123
124
|
var _a, _b;
|
124
125
|
console.log('[FIELDS] Deleted', this, field);
|
@@ -150,69 +151,52 @@ export class VerdocsTemplateFields {
|
|
150
151
|
return;
|
151
152
|
}
|
152
153
|
if (Array.isArray(el)) {
|
153
|
-
el.forEach(
|
154
|
-
this.attachFieldAttributes(pageInfo, field, roleIndex,
|
155
|
-
|
156
|
-
listeners: {
|
157
|
-
start(event) {
|
158
|
-
console.log('[FIELDS] Drag started', event.type, event.target);
|
159
|
-
},
|
160
|
-
move(event) {
|
161
|
-
const oldX = +(event.target.getAttribute('posX') || 0);
|
162
|
-
const oldY = +(event.target.getAttribute('posY') || 0);
|
163
|
-
const xScale = +(event.target.getAttribute('xScale') || 1);
|
164
|
-
const yScale = +(event.target.getAttribute('yScale') || 1);
|
165
|
-
const newX = event.dx / xScale + oldX;
|
166
|
-
const newY = event.dy / yScale + oldY;
|
167
|
-
event.target.setAttribute('posX', newX);
|
168
|
-
event.target.setAttribute('posy', newY);
|
169
|
-
updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
|
170
|
-
},
|
171
|
-
end: this.handleMoveField.bind(this),
|
172
|
-
},
|
173
|
-
});
|
154
|
+
el.forEach(childEl => {
|
155
|
+
this.attachFieldAttributes(pageInfo, field, roleIndex, childEl);
|
156
|
+
this.makeDraggable(childEl);
|
174
157
|
});
|
175
158
|
}
|
176
159
|
else {
|
177
160
|
this.attachFieldAttributes(pageInfo, field, roleIndex, el);
|
178
|
-
|
179
|
-
listeners: {
|
180
|
-
start(event) {
|
181
|
-
console.log('[FIELDS] Drag started', event.type, event.target);
|
182
|
-
},
|
183
|
-
move(event) {
|
184
|
-
const oldX = +(event.target.getAttribute('posX') || 0);
|
185
|
-
const oldY = +(event.target.getAttribute('posY') || 0);
|
186
|
-
const xScale = +(event.target.getAttribute('xScale') || 1);
|
187
|
-
const yScale = +(event.target.getAttribute('yScale') || 1);
|
188
|
-
const newX = event.dx / xScale + oldX;
|
189
|
-
const newY = event.dy / yScale + oldY;
|
190
|
-
event.target.setAttribute('posX', newX);
|
191
|
-
event.target.setAttribute('posy', newY);
|
192
|
-
updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
|
193
|
-
},
|
194
|
-
end: this.handleMoveField.bind(this),
|
195
|
-
},
|
196
|
-
});
|
161
|
+
this.makeDraggable(el);
|
197
162
|
}
|
198
163
|
}
|
199
|
-
|
164
|
+
makeDraggable(el) {
|
165
|
+
interact(el).draggable({
|
166
|
+
listeners: {
|
167
|
+
move: this.handleMoveField.bind(this),
|
168
|
+
end: this.handleMoveEnd.bind(this),
|
169
|
+
},
|
170
|
+
});
|
171
|
+
}
|
172
|
+
async handleMoveField(event) {
|
173
|
+
const oldX = +(event.target.getAttribute('posX') || 0);
|
174
|
+
const oldY = +(event.target.getAttribute('posY') || 0);
|
175
|
+
const xScale = +(event.target.getAttribute('xScale') || 1);
|
176
|
+
const yScale = +(event.target.getAttribute('yScale') || 1);
|
177
|
+
const newX = event.dx / xScale + oldX;
|
178
|
+
const newY = event.dy / yScale + oldY;
|
179
|
+
event.target.setAttribute('posX', newX);
|
180
|
+
event.target.setAttribute('posy', newY);
|
181
|
+
updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
|
182
|
+
}
|
183
|
+
async handleMoveEnd(event) {
|
200
184
|
var _a;
|
201
|
-
const pageNumber =
|
185
|
+
const pageNumber = event.target.getAttribute('pageNumber');
|
202
186
|
const { naturalWidth = 612, naturalHeight = 792, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
|
203
|
-
console.log('[FIELDS] Drag ended', pageNumber,
|
204
|
-
const clientRect =
|
205
|
-
const parent =
|
187
|
+
console.log('[FIELDS] Drag ended', pageNumber, event.target);
|
188
|
+
const clientRect = event.target.getBoundingClientRect();
|
189
|
+
const parent = event.target.parentElement;
|
206
190
|
const parentRect = parent.getBoundingClientRect();
|
207
191
|
// These two being backwards is not a mistake. Left measures "over" from the left (positive displacement) while bottom measures
|
208
192
|
// "up" from the bottom (negative displacement).
|
209
193
|
const newX = Math.max(clientRect.left - parentRect.left, 0);
|
210
194
|
const newY = Math.max(renderedHeight - (parentRect.bottom - clientRect.bottom), 0);
|
211
|
-
const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth -
|
212
|
-
const name =
|
213
|
-
const option = +(
|
195
|
+
const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth - event.rect.width, naturalHeight - event.rect.height);
|
196
|
+
const name = event.target.getAttribute('name');
|
197
|
+
const option = +(event.target.getAttribute('option') || '0');
|
214
198
|
const field = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.find(field => field.name === name);
|
215
|
-
console.log('Will update', name, option, field);
|
199
|
+
console.log('[FIELDS] Will update', name, option, field);
|
216
200
|
if (field) {
|
217
201
|
switch (field.type) {
|
218
202
|
case 'attachment':
|
@@ -238,20 +222,20 @@ export class VerdocsTemplateFields {
|
|
238
222
|
}
|
239
223
|
break;
|
240
224
|
}
|
241
|
-
await updateField(this.endpoint, this.templateId, name, field);
|
242
|
-
|
225
|
+
const newFieldData = await updateField(this.endpoint, this.templateId, name, field);
|
226
|
+
const pageInfo = this.cachedPageInfo[pageNumber];
|
227
|
+
const roleIndex = getRoleIndex(getRoleNames(this.store), field.role_name);
|
228
|
+
this.handleFieldSettingsChange(pageInfo, field, roleIndex, event.target, newFieldData);
|
243
229
|
}
|
244
230
|
}
|
245
231
|
generateFieldName(type, pageNumber) {
|
246
|
-
var _a
|
232
|
+
var _a;
|
247
233
|
let i = 1;
|
248
234
|
let fieldName;
|
249
235
|
do {
|
250
236
|
fieldName = `${type}P${pageNumber}-${i}`;
|
251
|
-
console.log('testing field', fieldName);
|
252
237
|
i++;
|
253
238
|
} while ((_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.some(field => field.name === fieldName));
|
254
|
-
console.log('Will use field name', this, fieldName, (_b = this.store) === null || _b === void 0 ? void 0 : _b.state.fields);
|
255
239
|
return fieldName;
|
256
240
|
}
|
257
241
|
// Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.
|
@@ -264,15 +248,11 @@ export class VerdocsTemplateFields {
|
|
264
248
|
async handleClickPage(e, pageNumber) {
|
265
249
|
var _a, _b, _c;
|
266
250
|
if (this.placing) {
|
267
|
-
console.log('Placing field', this, this.selectedRoleName, this.placing, pageNumber, e.offsetX, e.offsetY);
|
268
|
-
// console.log('Placing field', this.placing, page.sequence, e.offsetX, e.offsetY);
|
269
|
-
// const pageNumber = page.sequence;
|
270
251
|
const clickedX = e.offsetX;
|
271
252
|
const clickedY = e.offsetY;
|
272
253
|
const width = defaultWidth(this.placing);
|
273
254
|
const height = defaultHeight(this.placing);
|
274
255
|
const cachedPage = this.cachedPageInfo[pageNumber];
|
275
|
-
// console.log('Cached page', cachedPage);
|
276
256
|
const { naturalWidth = 612, naturalHeight = 792 } = cachedPage;
|
277
257
|
const coords = this.viewCoordinatesToPageCoordinates(clickedX, clickedY, pageNumber, naturalWidth - width, naturalHeight - height);
|
278
258
|
const x = Math.floor(coords.x);
|
@@ -10,9 +10,13 @@ export default {
|
|
10
10
|
},
|
11
11
|
argTypes: {
|
12
12
|
onClose: { action: 'close' },
|
13
|
+
onEditTemplate: { action: 'editTemplate' },
|
14
|
+
onViewTemplate: { action: 'viewTemplate' },
|
13
15
|
},
|
14
16
|
parameters: {
|
15
17
|
layout: 'fullscreen',
|
16
18
|
},
|
17
19
|
};
|
18
|
-
export const TemplatesList = ({ onClose, templateId }) => html `
|
20
|
+
export const TemplatesList = ({ onClose, onEditTemplate, onViewTemplate, templateId }) => html `
|
21
|
+
<verdocs-templates-list .templateId=${templateId} @close=${onClose} @viewTemplate=${onViewTemplate} @editTemplate=${onEditTemplate} />
|
22
|
+
`;
|
@@ -90,7 +90,7 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
|
|
90
90
|
this.sdkError = createEvent(this, "sdkError", 7);
|
91
91
|
this.endpoint = VerdocsEndpoint.getDefault();
|
92
92
|
this.visible = true;
|
93
|
-
this.logo = 'https://verdocs.com/assets/blue-logo.svg';
|
93
|
+
this.logo = 'https://app.verdocs.com/assets/blue-logo.svg';
|
94
94
|
this.isAuthenticated = false;
|
95
95
|
this.displayMode = 'login';
|
96
96
|
this.orgname = '';
|
@@ -89,9 +89,9 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
|
|
89
89
|
newSettings.x = Math.round(newSettings.x + translateX / this.xscale);
|
90
90
|
newSettings.y = Math.round(newSettings.y - translateY / this.yscale);
|
91
91
|
updateField(this.endpoint, this.templateid, this.field.name, { setting: newSettings })
|
92
|
-
.then(
|
92
|
+
.then(field => {
|
93
93
|
var _a;
|
94
|
-
(_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name, settings: newSettings });
|
94
|
+
(_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name, settings: newSettings, field });
|
95
95
|
Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
|
96
96
|
})
|
97
97
|
.catch(e => console.log('Field update failed', e));
|
@@ -89,9 +89,10 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
89
89
|
newSettings.x = Math.round(newSettings.x + translateX / this.xscale);
|
90
90
|
newSettings.y = Math.round(newSettings.y - translateY / this.yscale);
|
91
91
|
updateField(this.endpoint, this.templateid, this.field.name, { setting: newSettings })
|
92
|
-
.then(
|
92
|
+
.then(field => {
|
93
93
|
var _a;
|
94
|
-
|
94
|
+
console.log('update result', field);
|
95
|
+
(_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name, settings: newSettings, field });
|
95
96
|
Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
|
96
97
|
})
|
97
98
|
.catch(e => console.log('Field update failed', e));
|
@@ -114,6 +115,7 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
114
115
|
return this.hideSettingsPanel();
|
115
116
|
}, onSettingsChanged: e => {
|
116
117
|
var _a;
|
118
|
+
console.log('here');
|
117
119
|
(_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
|
118
120
|
return this.hideSettingsPanel();
|
119
121
|
}, helpText: 'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the "name" field.<br /><br />If marked required, the participant must complete the field before proceeding.' })))));
|
@@ -110,26 +110,27 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
110
110
|
console.log('[FIELDS] handleFieldChange', field, e, optionId);
|
111
111
|
this.rerender++;
|
112
112
|
}
|
113
|
+
handleFieldSettingsChange(pageInfo, field, roleIndex, el, newFieldData) {
|
114
|
+
var _a, _b, _c, _d;
|
115
|
+
console.log('[FIELDS] Field settings changed', field.name, newFieldData);
|
116
|
+
Object.assign(field, newFieldData);
|
117
|
+
el.field = newFieldData;
|
118
|
+
this.selectedRoleName = field.role_name;
|
119
|
+
el.setAttribute('roleindex', getRoleIndex(getRoleNames(this.store), field.role_name));
|
120
|
+
el.field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(f => f.name === field.name);
|
121
|
+
this.rerender++;
|
122
|
+
el.setAttribute('rerender', this.rerender);
|
123
|
+
(_c = this.templateUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, template: (_d = this.store) === null || _d === void 0 ? void 0 : _d.state, event: 'updated-field' });
|
124
|
+
console.log('[FIELDS] Re-rendering field', field.name, pageInfo.pageNumber);
|
125
|
+
this.reRenderField(field, pageInfo.pageNumber);
|
126
|
+
const newEl = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
|
127
|
+
if (!newEl) {
|
128
|
+
return;
|
129
|
+
}
|
130
|
+
}
|
113
131
|
attachFieldAttributes(pageInfo, field, roleIndex, el) {
|
114
132
|
el.addEventListener('input', e => this.handleFieldChange(field, e));
|
115
|
-
el.addEventListener('settingsChanged', e =>
|
116
|
-
var _a, _b, _c, _d;
|
117
|
-
console.log('[FIELDS] settingsChanged', e.detail);
|
118
|
-
Object.assign(field, e.detail.field);
|
119
|
-
this.selectedRoleName = field.role_name;
|
120
|
-
el.field = e.detail.field;
|
121
|
-
el.setAttribute('roleindex', getRoleIndex(getRoleNames(this.store), field.role_name));
|
122
|
-
el.field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(f => f.name === field.name);
|
123
|
-
this.rerender++;
|
124
|
-
el.setAttribute('rerender', this.rerender);
|
125
|
-
(_c = this.templateUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, template: (_d = this.store) === null || _d === void 0 ? void 0 : _d.state, event: 'updated-field' });
|
126
|
-
console.log('[FIELDS] Re-rendering field', field.name, pageInfo.pageNumber);
|
127
|
-
this.reRenderField(field, pageInfo.pageNumber);
|
128
|
-
const newEl = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
|
129
|
-
if (!newEl) {
|
130
|
-
return;
|
131
|
-
}
|
132
|
-
});
|
133
|
+
el.addEventListener('settingsChanged', e => this.handleFieldSettingsChange(pageInfo, field, roleIndex, el, e.detail.field));
|
133
134
|
el.addEventListener('deleted', () => {
|
134
135
|
var _a, _b;
|
135
136
|
console.log('[FIELDS] Deleted', this, field);
|
@@ -161,69 +162,52 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
161
162
|
return;
|
162
163
|
}
|
163
164
|
if (Array.isArray(el)) {
|
164
|
-
el.forEach(
|
165
|
-
this.attachFieldAttributes(pageInfo, field, roleIndex,
|
166
|
-
|
167
|
-
listeners: {
|
168
|
-
start(event) {
|
169
|
-
console.log('[FIELDS] Drag started', event.type, event.target);
|
170
|
-
},
|
171
|
-
move(event) {
|
172
|
-
const oldX = +(event.target.getAttribute('posX') || 0);
|
173
|
-
const oldY = +(event.target.getAttribute('posY') || 0);
|
174
|
-
const xScale = +(event.target.getAttribute('xScale') || 1);
|
175
|
-
const yScale = +(event.target.getAttribute('yScale') || 1);
|
176
|
-
const newX = event.dx / xScale + oldX;
|
177
|
-
const newY = event.dy / yScale + oldY;
|
178
|
-
event.target.setAttribute('posX', newX);
|
179
|
-
event.target.setAttribute('posy', newY);
|
180
|
-
updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
|
181
|
-
},
|
182
|
-
end: this.handleMoveField.bind(this),
|
183
|
-
},
|
184
|
-
});
|
165
|
+
el.forEach(childEl => {
|
166
|
+
this.attachFieldAttributes(pageInfo, field, roleIndex, childEl);
|
167
|
+
this.makeDraggable(childEl);
|
185
168
|
});
|
186
169
|
}
|
187
170
|
else {
|
188
171
|
this.attachFieldAttributes(pageInfo, field, roleIndex, el);
|
189
|
-
|
190
|
-
listeners: {
|
191
|
-
start(event) {
|
192
|
-
console.log('[FIELDS] Drag started', event.type, event.target);
|
193
|
-
},
|
194
|
-
move(event) {
|
195
|
-
const oldX = +(event.target.getAttribute('posX') || 0);
|
196
|
-
const oldY = +(event.target.getAttribute('posY') || 0);
|
197
|
-
const xScale = +(event.target.getAttribute('xScale') || 1);
|
198
|
-
const yScale = +(event.target.getAttribute('yScale') || 1);
|
199
|
-
const newX = event.dx / xScale + oldX;
|
200
|
-
const newY = event.dy / yScale + oldY;
|
201
|
-
event.target.setAttribute('posX', newX);
|
202
|
-
event.target.setAttribute('posy', newY);
|
203
|
-
updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
|
204
|
-
},
|
205
|
-
end: this.handleMoveField.bind(this),
|
206
|
-
},
|
207
|
-
});
|
172
|
+
this.makeDraggable(el);
|
208
173
|
}
|
209
174
|
}
|
210
|
-
|
175
|
+
makeDraggable(el) {
|
176
|
+
interact(el).draggable({
|
177
|
+
listeners: {
|
178
|
+
move: this.handleMoveField.bind(this),
|
179
|
+
end: this.handleMoveEnd.bind(this),
|
180
|
+
},
|
181
|
+
});
|
182
|
+
}
|
183
|
+
async handleMoveField(event) {
|
184
|
+
const oldX = +(event.target.getAttribute('posX') || 0);
|
185
|
+
const oldY = +(event.target.getAttribute('posY') || 0);
|
186
|
+
const xScale = +(event.target.getAttribute('xScale') || 1);
|
187
|
+
const yScale = +(event.target.getAttribute('yScale') || 1);
|
188
|
+
const newX = event.dx / xScale + oldX;
|
189
|
+
const newY = event.dy / yScale + oldY;
|
190
|
+
event.target.setAttribute('posX', newX);
|
191
|
+
event.target.setAttribute('posy', newY);
|
192
|
+
updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
|
193
|
+
}
|
194
|
+
async handleMoveEnd(event) {
|
211
195
|
var _a;
|
212
|
-
const pageNumber =
|
196
|
+
const pageNumber = event.target.getAttribute('pageNumber');
|
213
197
|
const { naturalWidth = 612, naturalHeight = 792, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
|
214
|
-
console.log('[FIELDS] Drag ended', pageNumber,
|
215
|
-
const clientRect =
|
216
|
-
const parent =
|
198
|
+
console.log('[FIELDS] Drag ended', pageNumber, event.target);
|
199
|
+
const clientRect = event.target.getBoundingClientRect();
|
200
|
+
const parent = event.target.parentElement;
|
217
201
|
const parentRect = parent.getBoundingClientRect();
|
218
202
|
// These two being backwards is not a mistake. Left measures "over" from the left (positive displacement) while bottom measures
|
219
203
|
// "up" from the bottom (negative displacement).
|
220
204
|
const newX = Math.max(clientRect.left - parentRect.left, 0);
|
221
205
|
const newY = Math.max(renderedHeight - (parentRect.bottom - clientRect.bottom), 0);
|
222
|
-
const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth -
|
223
|
-
const name =
|
224
|
-
const option = +(
|
206
|
+
const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth - event.rect.width, naturalHeight - event.rect.height);
|
207
|
+
const name = event.target.getAttribute('name');
|
208
|
+
const option = +(event.target.getAttribute('option') || '0');
|
225
209
|
const field = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.find(field => field.name === name);
|
226
|
-
console.log('Will update', name, option, field);
|
210
|
+
console.log('[FIELDS] Will update', name, option, field);
|
227
211
|
if (field) {
|
228
212
|
switch (field.type) {
|
229
213
|
case 'attachment':
|
@@ -249,20 +233,20 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
249
233
|
}
|
250
234
|
break;
|
251
235
|
}
|
252
|
-
await updateField(this.endpoint, this.templateId, name, field);
|
253
|
-
|
236
|
+
const newFieldData = await updateField(this.endpoint, this.templateId, name, field);
|
237
|
+
const pageInfo = this.cachedPageInfo[pageNumber];
|
238
|
+
const roleIndex = getRoleIndex(getRoleNames(this.store), field.role_name);
|
239
|
+
this.handleFieldSettingsChange(pageInfo, field, roleIndex, event.target, newFieldData);
|
254
240
|
}
|
255
241
|
}
|
256
242
|
generateFieldName(type, pageNumber) {
|
257
|
-
var _a
|
243
|
+
var _a;
|
258
244
|
let i = 1;
|
259
245
|
let fieldName;
|
260
246
|
do {
|
261
247
|
fieldName = `${type}P${pageNumber}-${i}`;
|
262
|
-
console.log('testing field', fieldName);
|
263
248
|
i++;
|
264
249
|
} while ((_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.some(field => field.name === fieldName));
|
265
|
-
console.log('Will use field name', this, fieldName, (_b = this.store) === null || _b === void 0 ? void 0 : _b.state.fields);
|
266
250
|
return fieldName;
|
267
251
|
}
|
268
252
|
// Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.
|
@@ -275,15 +259,11 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
275
259
|
async handleClickPage(e, pageNumber) {
|
276
260
|
var _a, _b, _c;
|
277
261
|
if (this.placing) {
|
278
|
-
console.log('Placing field', this, this.selectedRoleName, this.placing, pageNumber, e.offsetX, e.offsetY);
|
279
|
-
// console.log('Placing field', this.placing, page.sequence, e.offsetX, e.offsetY);
|
280
|
-
// const pageNumber = page.sequence;
|
281
262
|
const clickedX = e.offsetX;
|
282
263
|
const clickedY = e.offsetY;
|
283
264
|
const width = defaultWidth(this.placing);
|
284
265
|
const height = defaultHeight(this.placing);
|
285
266
|
const cachedPage = this.cachedPageInfo[pageNumber];
|
286
|
-
// console.log('Cached page', cachedPage);
|
287
267
|
const { naturalWidth = 612, naturalHeight = 792 } = cachedPage;
|
288
268
|
const coords = this.viewCoordinatesToPageCoordinates(clickedX, clickedY, pageNumber, naturalWidth - width, naturalHeight - height);
|
289
269
|
const x = Math.floor(coords.x);
|
package/dist/docs.json
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
{
|
2
|
-
"timestamp": "2023-07-
|
2
|
+
"timestamp": "2023-07-14T21:15:06",
|
3
3
|
"compiler": {
|
4
4
|
"name": "@stencil/core",
|
5
5
|
"version": "2.20.0",
|
@@ -260,7 +260,7 @@
|
|
260
260
|
"reflectToAttr": false,
|
261
261
|
"docs": "By default, a Verdocs logo will be displayed above the login/signup forms. This may be used to\noverride its source. (Alternatively, you may simply hide it via CSS overrides.) Logos should be\nin SVG format for best results.",
|
262
262
|
"docsTags": [],
|
263
|
-
"default": "'https://verdocs.com/assets/blue-logo.svg'",
|
263
|
+
"default": "'https://app.verdocs.com/assets/blue-logo.svg'",
|
264
264
|
"values": [
|
265
265
|
{
|
266
266
|
"type": "string"
|
@@ -2112,7 +2112,7 @@
|
|
2112
2112
|
"events": [
|
2113
2113
|
{
|
2114
2114
|
"event": "settingsChanged",
|
2115
|
-
"detail": "{ fieldName: string; settings: ITemplateFieldSetting; }",
|
2115
|
+
"detail": "{ fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField; }",
|
2116
2116
|
"bubbles": true,
|
2117
2117
|
"cancelable": true,
|
2118
2118
|
"composed": true,
|
@@ -2337,7 +2337,7 @@
|
|
2337
2337
|
},
|
2338
2338
|
{
|
2339
2339
|
"event": "settingsChanged",
|
2340
|
-
"detail": "{ fieldName: string; settings: ITemplateFieldSetting; }",
|
2340
|
+
"detail": "{ fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField; }",
|
2341
2341
|
"bubbles": true,
|
2342
2342
|
"cancelable": true,
|
2343
2343
|
"composed": true,
|
@@ -2565,7 +2565,7 @@
|
|
2565
2565
|
},
|
2566
2566
|
{
|
2567
2567
|
"event": "settingsChanged",
|
2568
|
-
"detail": "{ fieldName: string; settings: ITemplateFieldSetting; }",
|
2568
|
+
"detail": "{ fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField; }",
|
2569
2569
|
"bubbles": true,
|
2570
2570
|
"cancelable": true,
|
2571
2571
|
"composed": true,
|
@@ -2811,7 +2811,7 @@
|
|
2811
2811
|
},
|
2812
2812
|
{
|
2813
2813
|
"event": "settingsChanged",
|
2814
|
-
"detail": "{ fieldName: string; settings: ITemplateFieldSetting; }",
|
2814
|
+
"detail": "{ fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField; }",
|
2815
2815
|
"bubbles": true,
|
2816
2816
|
"cancelable": true,
|
2817
2817
|
"composed": true,
|
@@ -3083,7 +3083,7 @@
|
|
3083
3083
|
},
|
3084
3084
|
{
|
3085
3085
|
"event": "settingsChanged",
|
3086
|
-
"detail": "{ fieldName: string; settings: ITemplateFieldSetting; }",
|
3086
|
+
"detail": "{ fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField; }",
|
3087
3087
|
"bubbles": true,
|
3088
3088
|
"cancelable": true,
|
3089
3089
|
"composed": true,
|
@@ -3481,11 +3481,11 @@
|
|
3481
3481
|
},
|
3482
3482
|
{
|
3483
3483
|
"event": "settingsChanged",
|
3484
|
-
"detail": "{ fieldName: string; }",
|
3484
|
+
"detail": "{ fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField; }",
|
3485
3485
|
"bubbles": true,
|
3486
3486
|
"cancelable": true,
|
3487
3487
|
"composed": true,
|
3488
|
-
"docs": "
|
3488
|
+
"docs": "",
|
3489
3489
|
"docsTags": []
|
3490
3490
|
},
|
3491
3491
|
{
|
@@ -3706,7 +3706,7 @@
|
|
3706
3706
|
},
|
3707
3707
|
{
|
3708
3708
|
"event": "settingsChanged",
|
3709
|
-
"detail": "{ fieldName: string; settings: ITemplateFieldSetting; }",
|
3709
|
+
"detail": "{ fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField; }",
|
3710
3710
|
"bubbles": true,
|
3711
3711
|
"cancelable": true,
|
3712
3712
|
"composed": true,
|
@@ -3960,7 +3960,7 @@
|
|
3960
3960
|
},
|
3961
3961
|
{
|
3962
3962
|
"event": "settingsChanged",
|
3963
|
-
"detail": "{ fieldName: string; settings: ITemplateFieldSetting; }",
|
3963
|
+
"detail": "{ fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField; }",
|
3964
3964
|
"bubbles": true,
|
3965
3965
|
"cancelable": true,
|
3966
3966
|
"composed": true,
|
@@ -4253,7 +4253,7 @@
|
|
4253
4253
|
},
|
4254
4254
|
{
|
4255
4255
|
"event": "settingsChanged",
|
4256
|
-
"detail": "{ fieldName: string; settings: ITemplateFieldSetting; }",
|
4256
|
+
"detail": "{ fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField; }",
|
4257
4257
|
"bubbles": true,
|
4258
4258
|
"cancelable": true,
|
4259
4259
|
"composed": true,
|
@@ -4531,7 +4531,7 @@
|
|
4531
4531
|
},
|
4532
4532
|
{
|
4533
4533
|
"event": "settingsChanged",
|
4534
|
-
"detail": "{ fieldName: string; settings: ITemplateFieldSetting; }",
|
4534
|
+
"detail": "{ fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField; }",
|
4535
4535
|
"bubbles": true,
|
4536
4536
|
"cancelable": true,
|
4537
4537
|
"composed": true,
|
@@ -4759,7 +4759,7 @@
|
|
4759
4759
|
},
|
4760
4760
|
{
|
4761
4761
|
"event": "settingsChanged",
|
4762
|
-
"detail": "{ fieldName: string; settings: ITemplateFieldSetting; }",
|
4762
|
+
"detail": "{ fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField; }",
|
4763
4763
|
"bubbles": true,
|
4764
4764
|
"cancelable": true,
|
4765
4765
|
"composed": true,
|
@@ -85,7 +85,7 @@ const VerdocsAuth = class {
|
|
85
85
|
this.sdkError = createEvent(this, "sdkError", 7);
|
86
86
|
this.endpoint = VerdocsEndpoint.getDefault();
|
87
87
|
this.visible = true;
|
88
|
-
this.logo = 'https://verdocs.com/assets/blue-logo.svg';
|
88
|
+
this.logo = 'https://app.verdocs.com/assets/blue-logo.svg';
|
89
89
|
this.isAuthenticated = false;
|
90
90
|
this.displayMode = 'login';
|
91
91
|
this.orgname = '';
|
@@ -86,9 +86,9 @@ const VerdocsFieldTextarea = class {
|
|
86
86
|
newSettings.x = Math.round(newSettings.x + translateX / this.xscale);
|
87
87
|
newSettings.y = Math.round(newSettings.y - translateY / this.yscale);
|
88
88
|
updateField(this.endpoint, this.templateid, this.field.name, { setting: newSettings })
|
89
|
-
.then(
|
89
|
+
.then(field => {
|
90
90
|
var _a;
|
91
|
-
(_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name, settings: newSettings });
|
91
|
+
(_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name, settings: newSettings, field });
|
92
92
|
Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
|
93
93
|
})
|
94
94
|
.catch(e => console.log('Field update failed', e));
|
@@ -86,9 +86,10 @@ const VerdocsFieldTextbox = class {
|
|
86
86
|
newSettings.x = Math.round(newSettings.x + translateX / this.xscale);
|
87
87
|
newSettings.y = Math.round(newSettings.y - translateY / this.yscale);
|
88
88
|
updateField(this.endpoint, this.templateid, this.field.name, { setting: newSettings })
|
89
|
-
.then(
|
89
|
+
.then(field => {
|
90
90
|
var _a;
|
91
|
-
|
91
|
+
console.log('update result', field);
|
92
|
+
(_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name, settings: newSettings, field });
|
92
93
|
Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
|
93
94
|
})
|
94
95
|
.catch(e => console.log('Field update failed', e));
|
@@ -111,6 +112,7 @@ const VerdocsFieldTextbox = class {
|
|
111
112
|
return this.hideSettingsPanel();
|
112
113
|
}, onSettingsChanged: e => {
|
113
114
|
var _a;
|
115
|
+
console.log('here');
|
114
116
|
(_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
|
115
117
|
return this.hideSettingsPanel();
|
116
118
|
}, helpText: 'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the "name" field.<br /><br />If marked required, the participant must complete the field before proceeding.' })))));
|