@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.
Files changed (63) hide show
  1. package/dist/cjs/verdocs-auth.cjs.entry.js +1 -1
  2. package/dist/cjs/verdocs-field-textarea.cjs.entry.js +2 -2
  3. package/dist/cjs/verdocs-field-textbox.cjs.entry.js +4 -2
  4. package/dist/cjs/verdocs-template-fields_4.cjs.entry.js +56 -76
  5. package/dist/collection/components/embeds/verdocs-auth/verdocs-auth.js +2 -2
  6. package/dist/collection/components/fields/verdocs-field-attachment/verdocs-field-attachment.js +6 -2
  7. package/dist/collection/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.js +6 -2
  8. package/dist/collection/components/fields/verdocs-field-date/verdocs-field-date.js +6 -2
  9. package/dist/collection/components/fields/verdocs-field-dropdown/verdocs-field-dropdown.js +6 -2
  10. package/dist/collection/components/fields/verdocs-field-initial/verdocs-field-initial.js +6 -2
  11. package/dist/collection/components/fields/verdocs-field-payment/verdocs-field-payment.js +13 -4
  12. package/dist/collection/components/fields/verdocs-field-radio-button-group/verdocs-field-radio-button.js +6 -2
  13. package/dist/collection/components/fields/verdocs-field-signature/verdocs-field-signature.js +6 -2
  14. package/dist/collection/components/fields/verdocs-field-textarea/verdocs-field-textarea.js +8 -4
  15. package/dist/collection/components/fields/verdocs-field-textbox/verdocs-field-textbox.js +10 -4
  16. package/dist/collection/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.js +6 -2
  17. package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.js +56 -76
  18. package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.stories.js +1 -1
  19. package/dist/collection/components/templates/verdocs-templates-list/verdocs-templates-list.stories.js +5 -1
  20. package/dist/components/verdocs-auth.js +1 -1
  21. package/dist/components/verdocs-field-textarea.js +2 -2
  22. package/dist/components/verdocs-field-textbox.js +4 -2
  23. package/dist/components/verdocs-template-fields2.js +56 -76
  24. package/dist/docs.json +14 -14
  25. package/dist/esm/verdocs-auth.entry.js +1 -1
  26. package/dist/esm/verdocs-field-textarea.entry.js +2 -2
  27. package/dist/esm/verdocs-field-textbox.entry.js +4 -2
  28. package/dist/esm/verdocs-template-fields_4.entry.js +56 -76
  29. package/dist/esm-es5/verdocs-auth.entry.js +1 -1
  30. package/dist/esm-es5/verdocs-field-textarea.entry.js +1 -1
  31. package/dist/esm-es5/verdocs-field-textbox.entry.js +1 -1
  32. package/dist/esm-es5/verdocs-template-fields_4.entry.js +1 -1
  33. package/dist/types/components/fields/verdocs-field-attachment/verdocs-field-attachment.d.ts +1 -0
  34. package/dist/types/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.d.ts +1 -0
  35. package/dist/types/components/fields/verdocs-field-date/verdocs-field-date.d.ts +1 -0
  36. package/dist/types/components/fields/verdocs-field-dropdown/verdocs-field-dropdown.d.ts +1 -0
  37. package/dist/types/components/fields/verdocs-field-initial/verdocs-field-initial.d.ts +1 -0
  38. package/dist/types/components/fields/verdocs-field-payment/verdocs-field-payment.d.ts +6 -7
  39. package/dist/types/components/fields/verdocs-field-radio-button-group/verdocs-field-radio-button.d.ts +1 -0
  40. package/dist/types/components/fields/verdocs-field-signature/verdocs-field-signature.d.ts +1 -0
  41. package/dist/types/components/fields/verdocs-field-textarea/verdocs-field-textarea.d.ts +1 -0
  42. package/dist/types/components/fields/verdocs-field-textbox/verdocs-field-textbox.d.ts +1 -0
  43. package/dist/types/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.d.ts +1 -0
  44. package/dist/types/components/templates/verdocs-template-fields/verdocs-template-fields.d.ts +4 -1
  45. package/dist/types/components/templates/verdocs-templates-list/verdocs-templates-list.stories.d.ts +3 -1
  46. package/dist/types/components.d.ts +11 -14
  47. package/dist/verdocs-web-sdk/p-0c85ee4f.system.entry.js +1 -0
  48. package/dist/verdocs-web-sdk/p-0d5757a8.entry.js +1 -0
  49. package/dist/verdocs-web-sdk/p-3872cedf.system.entry.js +1 -0
  50. package/dist/verdocs-web-sdk/{p-5fd70b07.system.entry.js → p-3cff566d.system.entry.js} +1 -1
  51. package/dist/verdocs-web-sdk/p-57aae7f1.entry.js +1 -0
  52. package/dist/verdocs-web-sdk/p-647cdb84.system.js +1 -1
  53. package/dist/verdocs-web-sdk/p-a7b2bda6.entry.js +1 -0
  54. package/dist/verdocs-web-sdk/{p-b49887e6.system.entry.js → p-bc4cda62.system.entry.js} +1 -1
  55. package/dist/verdocs-web-sdk/p-c339ff0f.entry.js +1 -0
  56. package/dist/verdocs-web-sdk/verdocs-web-sdk.esm.js +1 -1
  57. package/package.json +1 -1
  58. package/dist/verdocs-web-sdk/p-223e5517.entry.js +0 -1
  59. package/dist/verdocs-web-sdk/p-3e9c4c8a.entry.js +0 -1
  60. package/dist/verdocs-web-sdk/p-52300880.system.entry.js +0 -1
  61. package/dist/verdocs-web-sdk/p-be8ff081.entry.js +0 -1
  62. package/dist/verdocs-web-sdk/p-e9c00342.system.entry.js +0 -1
  63. package/dist/verdocs-web-sdk/p-ea5cec2d.entry.js +0 -1
@@ -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(e => {
154
- this.attachFieldAttributes(pageInfo, field, roleIndex, e);
155
- interact(e).draggable({
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
- interact(el).draggable({
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
- async handleMoveField(e) {
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 = e.target.getAttribute('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, e.target);
204
- const clientRect = e.target.getBoundingClientRect();
205
- const parent = e.target.parentElement;
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 - e.rect.width, naturalHeight - e.rect.height);
212
- const name = e.target.getAttribute('name');
213
- const option = +(e.target.getAttribute('option') || '0');
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
- this.handlePageRendered({ detail: this.cachedPageInfo[pageNumber] });
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, _b;
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);
@@ -3,7 +3,7 @@ export default {
3
3
  title: 'Templates/Fields',
4
4
  component: 'verdocs-template-fields',
5
5
  args: {
6
- templateId: '',
6
+ templateId: 'd2338742-f3a1-465b-8592-806587413cc1',
7
7
  },
8
8
  argTypes: {},
9
9
  parameters: {
@@ -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 ` <verdocs-templates-list .templateId=${templateId} @close=${onClose} /> `;
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
- (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name, settings: newSettings });
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(e => {
165
- this.attachFieldAttributes(pageInfo, field, roleIndex, e);
166
- interact(e).draggable({
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
- interact(el).draggable({
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
- async handleMoveField(e) {
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 = e.target.getAttribute('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, e.target);
215
- const clientRect = e.target.getBoundingClientRect();
216
- const parent = e.target.parentElement;
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 - e.rect.width, naturalHeight - e.rect.height);
223
- const name = e.target.getAttribute('name');
224
- const option = +(e.target.getAttribute('option') || '0');
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
- this.handlePageRendered({ detail: this.cachedPageInfo[pageNumber] });
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, _b;
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-13T14:29:39",
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": "Event fired when the field's settings are changed.",
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
- (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name, settings: newSettings });
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.' })))));