@verdocs/web-sdk 4.2.123 → 4.2.126

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 (126) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/verdocs-checkbox_4.cjs.entry.js +3 -4
  3. package/dist/cjs/verdocs-envelope-document-page.cjs.entry.js +1 -1
  4. package/dist/cjs/verdocs-envelopes-list.cjs.entry.js +6 -6
  5. package/dist/cjs/verdocs-field-attachment_13.cjs.entry.js +17 -10
  6. package/dist/cjs/verdocs-organization-card_2.cjs.entry.js +1 -1
  7. package/dist/cjs/verdocs-preview_9.cjs.entry.js +42 -33
  8. package/dist/cjs/verdocs-quick-functions.cjs.entry.js +1 -1
  9. package/dist/cjs/verdocs-radio-button_3.cjs.entry.js +9 -9
  10. package/dist/cjs/verdocs-search-tabs.cjs.entry.js +1 -1
  11. package/dist/cjs/verdocs-sign.cjs.entry.js +4 -2
  12. package/dist/cjs/verdocs-status-indicator.cjs.entry.js +2 -2
  13. package/dist/cjs/verdocs-template-card.cjs.entry.js +1 -1
  14. package/dist/cjs/verdocs-template-document-page_2.cjs.entry.js +1 -1
  15. package/dist/cjs/verdocs-template-star.cjs.entry.js +1 -1
  16. package/dist/cjs/verdocs-template-tags.cjs.entry.js +1 -1
  17. package/dist/cjs/verdocs-web-sdk.cjs.js +1 -1
  18. package/dist/collection/components/controls/verdocs-portal/verdocs-portal.js +1 -1
  19. package/dist/collection/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.css +9 -1
  20. package/dist/collection/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.js +35 -5
  21. package/dist/collection/components/elements/verdocs-quick-functions/verdocs-quick-functions.js +1 -1
  22. package/dist/collection/components/elements/verdocs-search-tabs/verdocs-search-tabs.js +1 -1
  23. package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.js +4 -2
  24. package/dist/collection/components/envelopes/verdocs-envelope-document-page/verdocs-envelope-document-page.js +1 -1
  25. package/dist/collection/components/envelopes/verdocs-envelopes-list/verdocs-envelopes-list.js +6 -6
  26. package/dist/collection/components/envelopes/verdocs-status-indicator/verdocs-status-indicator.js +2 -2
  27. package/dist/collection/components/fields/verdocs-field-dropdown/verdocs-field-dropdown.js +1 -5
  28. package/dist/collection/components/templates/verdocs-template-card/verdocs-template-card.js +1 -1
  29. package/dist/collection/components/templates/verdocs-template-document-page/verdocs-template-document-page.js +1 -1
  30. package/dist/collection/components/templates/verdocs-template-field-properties/verdocs-template-field-properties.js +3 -4
  31. package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.js +47 -35
  32. package/dist/collection/components/templates/verdocs-template-role-properties/verdocs-template-role-properties.js +8 -8
  33. package/dist/collection/components/templates/verdocs-template-sender/verdocs-template-sender.js +1 -1
  34. package/dist/collection/components/templates/verdocs-template-star/verdocs-template-star.js +1 -1
  35. package/dist/collection/components/templates/verdocs-template-tags/verdocs-template-tags.js +1 -1
  36. package/dist/components/verdocs-envelope-document-page2.js +1 -1
  37. package/dist/components/verdocs-envelopes-list.js +6 -6
  38. package/dist/components/verdocs-field-dropdown2.js +1 -5
  39. package/dist/components/verdocs-portal2.js +1 -1
  40. package/dist/components/verdocs-quick-functions.js +1 -1
  41. package/dist/components/verdocs-search-tabs.js +1 -1
  42. package/dist/components/verdocs-sign.js +4 -2
  43. package/dist/components/verdocs-status-indicator2.js +2 -2
  44. package/dist/components/verdocs-template-card.js +1 -1
  45. package/dist/components/verdocs-template-document-page2.js +1 -1
  46. package/dist/components/verdocs-template-field-properties2.js +3 -4
  47. package/dist/components/verdocs-template-fields2.js +46 -35
  48. package/dist/components/verdocs-template-role-properties2.js +8 -8
  49. package/dist/components/verdocs-template-sender2.js +1 -1
  50. package/dist/components/verdocs-template-star2.js +1 -1
  51. package/dist/components/verdocs-template-tags.js +1 -1
  52. package/dist/components/verdocs-upload-dialog2.js +19 -6
  53. package/dist/esm/loader.js +1 -1
  54. package/dist/esm/verdocs-checkbox_4.entry.js +3 -4
  55. package/dist/esm/verdocs-envelope-document-page.entry.js +1 -1
  56. package/dist/esm/verdocs-envelopes-list.entry.js +6 -6
  57. package/dist/esm/verdocs-field-attachment_13.entry.js +17 -10
  58. package/dist/esm/verdocs-organization-card_2.entry.js +1 -1
  59. package/dist/esm/verdocs-preview_9.entry.js +42 -33
  60. package/dist/esm/verdocs-quick-functions.entry.js +1 -1
  61. package/dist/esm/verdocs-radio-button_3.entry.js +9 -9
  62. package/dist/esm/verdocs-search-tabs.entry.js +1 -1
  63. package/dist/esm/verdocs-sign.entry.js +4 -2
  64. package/dist/esm/verdocs-status-indicator.entry.js +2 -2
  65. package/dist/esm/verdocs-template-card.entry.js +1 -1
  66. package/dist/esm/verdocs-template-document-page_2.entry.js +1 -1
  67. package/dist/esm/verdocs-template-star.entry.js +1 -1
  68. package/dist/esm/verdocs-template-tags.entry.js +1 -1
  69. package/dist/esm/verdocs-web-sdk.js +1 -1
  70. package/dist/esm-es5/loader.js +1 -1
  71. package/dist/esm-es5/verdocs-checkbox_4.entry.js +1 -1
  72. package/dist/esm-es5/verdocs-envelope-document-page.entry.js +1 -1
  73. package/dist/esm-es5/verdocs-envelopes-list.entry.js +1 -1
  74. package/dist/esm-es5/verdocs-field-attachment_13.entry.js +1 -1
  75. package/dist/esm-es5/verdocs-organization-card_2.entry.js +1 -1
  76. package/dist/esm-es5/verdocs-preview_9.entry.js +1 -1
  77. package/dist/esm-es5/verdocs-quick-functions.entry.js +1 -1
  78. package/dist/esm-es5/verdocs-radio-button_3.entry.js +1 -1
  79. package/dist/esm-es5/verdocs-search-tabs.entry.js +1 -1
  80. package/dist/esm-es5/verdocs-sign.entry.js +1 -1
  81. package/dist/esm-es5/verdocs-status-indicator.entry.js +1 -1
  82. package/dist/esm-es5/verdocs-template-card.entry.js +1 -1
  83. package/dist/esm-es5/verdocs-template-document-page_2.entry.js +1 -1
  84. package/dist/esm-es5/verdocs-template-star.entry.js +1 -1
  85. package/dist/esm-es5/verdocs-template-tags.entry.js +1 -1
  86. package/dist/esm-es5/verdocs-web-sdk.js +1 -1
  87. package/dist/types/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.d.ts +3 -0
  88. package/dist/types/components/templates/verdocs-template-fields/verdocs-template-fields.d.ts +3 -1
  89. package/dist/types/components.d.ts +2 -0
  90. package/dist/verdocs-web-sdk/{p-c9f545fe.entry.js → p-12a39d57.entry.js} +1 -1
  91. package/dist/verdocs-web-sdk/{p-4ee43d61.entry.js → p-1cd86ef4.entry.js} +1 -1
  92. package/dist/verdocs-web-sdk/{p-c43f5df7.system.entry.js → p-1dacf5e4.system.entry.js} +1 -1
  93. package/dist/verdocs-web-sdk/p-267df026.system.js +1 -1
  94. package/dist/verdocs-web-sdk/{p-43a7fce5.system.entry.js → p-2a1bed47.system.entry.js} +1 -1
  95. package/dist/verdocs-web-sdk/p-2adae827.system.entry.js +1 -0
  96. package/dist/verdocs-web-sdk/p-2c40b37a.entry.js +1 -0
  97. package/dist/verdocs-web-sdk/{p-2cc041aa.system.entry.js → p-377858e5.system.entry.js} +1 -1
  98. package/dist/verdocs-web-sdk/{p-2ee3549e.system.entry.js → p-4d071145.system.entry.js} +1 -1
  99. package/dist/verdocs-web-sdk/{p-cc5245b4.system.entry.js → p-53a3cdf3.system.entry.js} +1 -1
  100. package/dist/verdocs-web-sdk/{p-8f3ed4da.system.entry.js → p-54526558.system.entry.js} +1 -1
  101. package/dist/verdocs-web-sdk/{p-c5e65e9d.system.entry.js → p-5b5a0ba2.system.entry.js} +1 -1
  102. package/dist/verdocs-web-sdk/{p-77f12464.entry.js → p-5c9fd1e3.entry.js} +1 -1
  103. package/dist/verdocs-web-sdk/{p-5b7fd148.entry.js → p-5f61d897.entry.js} +1 -1
  104. package/dist/verdocs-web-sdk/{p-98885cd8.entry.js → p-68a37526.entry.js} +1 -1
  105. package/dist/verdocs-web-sdk/p-766e30ab.entry.js +1 -0
  106. package/dist/verdocs-web-sdk/{p-aace040e.entry.js → p-77407be2.entry.js} +1 -1
  107. package/dist/verdocs-web-sdk/{p-779a342d.system.entry.js → p-808f956b.system.entry.js} +1 -1
  108. package/dist/verdocs-web-sdk/{p-c0018ff8.entry.js → p-965464db.entry.js} +1 -1
  109. package/dist/verdocs-web-sdk/{p-48c2f79b.entry.js → p-9750767c.entry.js} +1 -1
  110. package/dist/verdocs-web-sdk/{p-b52b2533.system.entry.js → p-a246dd98.system.entry.js} +1 -1
  111. package/dist/verdocs-web-sdk/{p-72b47a99.entry.js → p-ab385138.entry.js} +1 -1
  112. package/dist/verdocs-web-sdk/{p-3128b508.system.entry.js → p-ad8dfb2b.system.entry.js} +1 -1
  113. package/dist/verdocs-web-sdk/{p-d119854a.system.entry.js → p-aebb6858.system.entry.js} +1 -1
  114. package/dist/verdocs-web-sdk/{p-4fb62279.entry.js → p-b3c4d445.entry.js} +1 -1
  115. package/dist/verdocs-web-sdk/{p-8ce033ef.entry.js → p-c32f6de0.entry.js} +1 -1
  116. package/dist/verdocs-web-sdk/{p-55f49f87.entry.js → p-d1ec0c0e.entry.js} +1 -1
  117. package/dist/verdocs-web-sdk/{p-f96de332.system.entry.js → p-d775d674.system.entry.js} +1 -1
  118. package/dist/verdocs-web-sdk/{p-b5a223b6.system.entry.js → p-d7f0bb8b.system.entry.js} +1 -1
  119. package/dist/verdocs-web-sdk/p-dbce152e.entry.js +1 -0
  120. package/dist/verdocs-web-sdk/{p-826d6fb0.system.entry.js → p-fed1d58a.system.entry.js} +1 -1
  121. package/dist/verdocs-web-sdk/verdocs-web-sdk.esm.js +1 -1
  122. package/package.json +2 -2
  123. package/dist/verdocs-web-sdk/p-02af8123.entry.js +0 -1
  124. package/dist/verdocs-web-sdk/p-12608391.entry.js +0 -1
  125. package/dist/verdocs-web-sdk/p-5313e672.entry.js +0 -1
  126. package/dist/verdocs-web-sdk/p-7cad3ec7.system.entry.js +0 -1
@@ -51,8 +51,17 @@ export class VerdocsTemplateFields {
51
51
  this.selectedRoleName = '';
52
52
  this.loading = true;
53
53
  }
54
+ onTemplateIdChanged(newTemplateId) {
55
+ this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
56
+ }
57
+ // Stop field-placement mode if ESC is pressed
58
+ handleKeyDown(ev) {
59
+ if (ev.key === 'Escape') {
60
+ this.placing = null;
61
+ }
62
+ }
54
63
  async componentWillLoad() {
55
- var _a, _b, _c;
64
+ var _a, _b, _c, _d, _e, _f;
56
65
  try {
57
66
  this.endpoint.loadSession();
58
67
  if (!this.templateId) {
@@ -63,27 +72,17 @@ export class VerdocsTemplateFields {
63
72
  console.log('[FIELDS] Unable to start builder session, must be authenticated');
64
73
  return;
65
74
  }
66
- getTemplateStore(this.endpoint, this.templateId, true)
67
- .then(ts => {
68
- var _a, _b;
69
- this.templateStore = ts;
70
- this.fieldStore = getTemplateFieldStore(this.templateId);
71
- this.roleStore = getTemplateRoleStore(this.templateId);
72
- this.selectedRoleName = ((_b = (_a = this.roleStore.get('roles')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
73
- this.loading = false;
74
- this.fieldStore.onChange('fields', fields => {
75
- var _a;
76
- console.log('[FIELDS] Fields changed', { fields });
77
- (_a = this.fieldsUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'updated', endpoint: this.endpoint, templateId: this.templateId, fields });
78
- });
79
- })
80
- .catch(e => {
81
- console.log(e);
82
- });
75
+ try {
76
+ this.loadTemplate(this.templateId).catch(e => console.log('[BUILD] Unable to load template', e));
77
+ }
78
+ catch (e) {
79
+ console.log('[FIELDS] Error loading template', e);
80
+ (_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));
81
+ }
83
82
  }
84
83
  catch (e) {
85
84
  console.log('[FIELDS] Error with fields session', e);
86
- (_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));
85
+ (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
87
86
  }
88
87
  }
89
88
  componentDidRender() {
@@ -97,23 +96,27 @@ export class VerdocsTemplateFields {
97
96
  }
98
97
  }
99
98
  componentWillUpdate() {
100
- var _a;
99
+ var _a, _b;
101
100
  // If a new role was added and there were none yet so far, or the "selected" role was deleted, reset our selection
102
- const roles = this.roleStore.get('roles');
101
+ const roles = ((_a = this.roleStore) === null || _a === void 0 ? void 0 : _a.get('roles')) || [];
103
102
  if (!this.selectedRoleName || !roles.find(role => role && role.name === this.selectedRoleName)) {
104
- this.selectedRoleName = ((_a = roles[0]) === null || _a === void 0 ? void 0 : _a.name) || '';
103
+ this.selectedRoleName = ((_b = roles[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
105
104
  console.log('[FIELDS] Selected new role', this.selectedRoleName);
106
105
  }
107
106
  }
108
- // Stop field-placement mode if ESC is pressed
109
- handleKeyDown(ev) {
110
- if (ev.key === 'Escape') {
111
- this.placing = null;
107
+ async loadTemplate(templateId) {
108
+ var _a, _b;
109
+ if (templateId) {
110
+ this.loading = true;
111
+ this.templateStore = await getTemplateStore(this.endpoint, templateId, false);
112
+ this.roleStore = getTemplateRoleStore(this.templateId);
113
+ this.fieldStore = getTemplateFieldStore(this.templateId);
114
+ this.selectedRoleName = ((_b = (_a = this.roleStore.get('roles')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
115
+ this.loading = false;
116
+ // TODO: Necessary?
117
+ // this.fieldsUpdated?.emit({event: 'updated', endpoint: this.endpoint, templateId: this.templateId, fields});
112
118
  }
113
119
  }
114
- // async handleFieldChange(field: ITemplateField, e: any, optionId?: string) {
115
- // console.log('[FIELDS] handleFieldChange', field, e, optionId);
116
- // }
117
120
  attachFieldAttributes(pageInfo, field, el) {
118
121
  // el.addEventListener('input', e => this.handleFieldChange(field, e));
119
122
  el.addEventListener('settingsChanged', () => {
@@ -303,10 +306,13 @@ export class VerdocsTemplateFields {
303
306
  }
304
307
  } })))), h("div", { class: "pages" }, (((_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.documents) || []).map(document => {
305
308
  const pageNumbers = integerSequence(1, document.pages);
306
- return pageNumbers.map(page => (h("verdocs-template-document-page", { templateId: this.templateId, documentId: document.id, pageNumber: page, virtualWidth: 612, virtualHeight: 792, disabled: true, editable: true, done: false, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
307
- { name: 'page', type: 'canvas' },
308
- { name: 'controls', type: 'div' },
309
- ] })));
309
+ return pageNumbers.map(page => {
310
+ const pageSize = document.page_sizes[page];
311
+ return (h("verdocs-template-document-page", { templateId: this.templateId, documentId: document.id, pageNumber: page, virtualWidth: (pageSize === null || pageSize === void 0 ? void 0 : pageSize.width) || 612, virtualHeight: (pageSize === null || pageSize === void 0 ? void 0 : pageSize.height) || 792, disabled: true, editable: true, done: false, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
312
+ { name: 'page', type: 'canvas' },
313
+ { name: 'controls', type: 'div' },
314
+ ] }));
315
+ });
310
316
  })), this.showMustSelectRole && (h("verdocs-ok-dialog", { heading: "Unable to add field", message: this.roleStore.get('roles').length > 0 ? 'Please select a role before adding fields.' : 'Please add at least one role before adding fields.', onNext: () => (this.showMustSelectRole = false) }))));
311
317
  }
312
318
  static get is() { return "verdocs-template-fields"; }
@@ -346,7 +352,7 @@ export class VerdocsTemplateFields {
346
352
  },
347
353
  "templateId": {
348
354
  "type": "string",
349
- "mutable": false,
355
+ "mutable": true,
350
356
  "complexType": {
351
357
  "original": "string | null",
352
358
  "resolved": "string",
@@ -359,7 +365,7 @@ export class VerdocsTemplateFields {
359
365
  "text": "The ID of the template to create the document from."
360
366
  },
361
367
  "attribute": "template-id",
362
- "reflect": false,
368
+ "reflect": true,
363
369
  "defaultValue": "null"
364
370
  },
365
371
  "toolbarTargetId": {
@@ -466,6 +472,12 @@ export class VerdocsTemplateFields {
466
472
  }
467
473
  }];
468
474
  }
475
+ static get watchers() {
476
+ return [{
477
+ "propName": "templateId",
478
+ "methodName": "onTemplateIdChanged"
479
+ }];
480
+ }
469
481
  static get listeners() {
470
482
  return [{
471
483
  "name": "keydown",
@@ -116,34 +116,34 @@ export class VerdocsTemplateRoleProperties {
116
116
  }
117
117
  render() {
118
118
  const hasFields = this.fieldStore.get('fields').some(field => field.role_name === this.roleName);
119
- return (h(Host, { key: 'e1713fef30610985e7b198413152ba998aa3d400' }, h("div", { key: '89ea386f74975c52b86fd6c78984edd49837b2de', class: "background-overlay", onClick: e => this.handleCancel(e) }, h("div", { key: '5676470ae1372df1418d7bb2bec1b6f7e25b7939', class: "dialog" }, h("form", { key: '33d2922247d3a510ae4425f028ac9a795efac654', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("verdocs-text-input", { key: '768bc89e775f2d5214fa80b092e1eeee5b113432', id: "verdocs-role-name", label: "Role Name", value: this.name, autocomplete: "off", disabled: hasFields, helpText: hasFields
119
+ return (h(Host, { key: '2344ca9e482f0a9e3d45226dcf60f3082f0b262a' }, h("div", { key: '7f59190bffce63910b4ac8bbf3c18871ec7e07a5', class: "background-overlay", onClick: e => this.handleCancel(e) }, h("div", { key: '468001c9b9bdc563826173f96e5222a616f6f340', class: "dialog" }, h("form", { key: 'e4ff405dad0f312bf121e73aa9c6a6f6b937b768', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("verdocs-text-input", { key: '612dc771f957602284f24fa47b6a140ba02a0f56', id: "verdocs-role-name", label: "Role Name", value: this.name, autocomplete: "off", disabled: hasFields, helpText: hasFields
120
120
  ? 'This role has fields assigned and can no longer be renamed.'
121
121
  : 'A unique name to identify the role in the workflow. Submitted data will also be tagged with this value.', placeholder: "Role Name...", onInput: (e) => {
122
122
  this.name = e.target.value;
123
123
  this.dirty = true;
124
- } }), h("div", { key: '776217b83bd5a63075c71659b866fc66dfa2e7c6', class: "row" }, h("div", { key: '4e279080306d686e92c8a8dc51eb81ee8791a01b', class: "input-label" }, "Type:"), h("verdocs-select-input", { key: '3fe5574371f47d33996e811902c44e4144acc134', value: this.type, options: [
124
+ } }), h("div", { key: 'f3b5472084032d07ec4b5fe6c83250bc93a2e99b', class: "row" }, h("div", { key: 'd13db6776d097fdc8594f127b0ce7a5f82b0d346', class: "input-label" }, "Type:"), h("verdocs-select-input", { key: '35d3c3dfc5b07c8ba4e58a56bb20242b2893080c', value: this.type, options: [
125
125
  { label: 'Signer', value: 'signer' },
126
126
  { label: 'CC', value: 'cc' },
127
127
  { label: 'Approver', value: 'approver' },
128
128
  ], onInput: (e) => {
129
129
  this.type = e.target.value;
130
130
  this.dirty = true;
131
- } }), h("verdocs-help-icon", { key: '53165bb74f7ee07445abb8c123c9b4111f16d48e', text: "Most participants are Signers. CC roles are notified when documents are signed, but have no other actions. Approvers get notified when signing is completed to perform a final review." })), h("verdocs-text-input", { key: '6b7b54ba54e6282f5de0bcaf3e55a6144ea02a1e', id: "verdocs-recipient-first", label: "First Name", value: this.first_name, autocomplete: "off", helpText: "The recipient's first name, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "First Name...", onInput: (e) => {
131
+ } }), h("verdocs-help-icon", { key: 'e4f59b8e5afa43bf495985fbe890dbf782607afe', text: "Most participants are Signers. CC roles are notified when documents are signed, but have no other actions. Approvers get notified when signing is completed to perform a final review." })), h("verdocs-text-input", { key: '90a869359264a8add5c1b75f90ef827bde176c18', id: "verdocs-recipient-first", label: "First Name", value: this.first_name, autocomplete: "off", helpText: "The recipient's first name, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "First Name...", onInput: (e) => {
132
132
  this.first_name = e.target.value;
133
133
  this.dirty = true;
134
- } }), h("verdocs-text-input", { key: 'f950aa5ca8c6d60f099910b1e51a79bc12552112', id: "verdocs-recipient-first", label: "Last Name", value: this.last_name, autocomplete: "off", helpText: "The recipient's last name, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Last Name...", onInput: (e) => {
134
+ } }), h("verdocs-text-input", { key: '0290e4e4965c894a5171dc525c807b6ed79e8509', id: "verdocs-recipient-first", label: "Last Name", value: this.last_name, autocomplete: "off", helpText: "The recipient's last name, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Last Name...", onInput: (e) => {
135
135
  this.last_name = e.target.value;
136
136
  this.dirty = true;
137
- } }), h("verdocs-text-input", { key: '304ed1bf5528a7db9103e1cef62af2628cb09dab', id: "verdocs-recipient-email", label: "Email", value: this.email, autocomplete: "off", helpText: "The recipient's email address, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Email Address...", onInput: (e) => {
137
+ } }), h("verdocs-text-input", { key: '9c0b81fe916d053f342b9864a003cee504ef8e28', id: "verdocs-recipient-email", label: "Email", value: this.email, autocomplete: "off", helpText: "The recipient's email address, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Email Address...", onInput: (e) => {
138
138
  this.email = e.target.value;
139
139
  this.dirty = true;
140
- } }), h("verdocs-text-input", { key: '7d5fb7b56d99a09dc1f4e61744786f23a766a142', id: "verdocs-recipient-phone", label: "Phone", value: this.phone, autocomplete: "off", helpText: "The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Phone Number...", onInput: (e) => {
140
+ } }), h("verdocs-text-input", { key: 'e31ba5928aa9fa5cf294c583381c5a2c45fbe697', id: "verdocs-recipient-phone", label: "Phone", value: this.phone, autocomplete: "off", helpText: "The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Phone Number...", onInput: (e) => {
141
141
  this.phone = e.target.value;
142
142
  this.dirty = true;
143
- } }), h("div", { key: 'fdcffc8bcdb934b850e691b9f133fb0f009546a6', class: "row" }, h("div", { key: '84e445026a799bad4ed33a6e1c7f470f9269249c', class: "input-label" }, "May Delegate:"), h("div", { key: 'ba99473e1b59b0c7977061f5e52a6dbeb017106b', class: "checkbox-wrapper" }, h("verdocs-checkbox", { key: 'b7041e784c399da331820a6b6eaecf98716c91a5', checked: this.delegator, onInput: (e) => {
143
+ } }), h("div", { key: 'de4d2996f7558203a157de4089bd08b03e3ccb4c', class: "row" }, h("div", { key: '5204416e20532f20e7b8800da46af1a819262d47', class: "input-label" }, "May Delegate:"), h("div", { key: 'ea93e1f42e9748aad209a71de59648234c577a72', class: "checkbox-wrapper" }, h("verdocs-checkbox", { key: '55a7d77e35c16bf3f669b62adffac9df4b57462e', checked: this.delegator, onInput: (e) => {
144
144
  this.delegator = e.target.checked;
145
145
  this.dirty = true;
146
- } })), h("verdocs-help-icon", { key: 'e814cd3a3f7cd8b2a3fbe1470b83f8546fbd794d', text: "If enabled, this recipient may delegate their actions to another individual." })), h("div", { key: 'e56e3368bcb7fa24e7b5ff826afbed91694ab377', class: "buttons" }, h("button", { key: '57973ea3a7326bd368d1e555575da5f0c6c083e2', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { key: 'bf8ed30bc50bedc68a98cbcc338b06fdb912e430', style: { flex: '1' } }), h("verdocs-button", { key: 'bd09a8ad07eb043bccb32cee9d1ac5e5d90e1c6b', size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '68d8ff732f3190ef20225c1f50a4ab6425dcad6c', size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))))));
146
+ } })), h("verdocs-help-icon", { key: 'c10dd23ca7b7e47f836dd3839e5749a3c0c76794', text: "If enabled, this recipient may delegate their actions to another individual." })), h("div", { key: '8e2c8d88f213aca0d30dfdb3880b634d878a327e', class: "buttons" }, h("button", { key: '68fc1d701b0519694fecf129ac40ea02bd2a3c5c', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { key: '1c0f4b7f56d564c304cf728d1cc74c10cdb6a452', style: { flex: '1' } }), h("verdocs-button", { key: 'cb4e24c4b49c1505da07b6341229b60e6cd33371', size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '4a170cf772986625008e3550ba167db69d523baa', size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))))));
147
147
  }
148
148
  static get is() { return "verdocs-template-role-properties"; }
149
149
  static get originalStyleUrls() {
@@ -61,7 +61,7 @@ export class VerdocsTemplateSender {
61
61
  });
62
62
  }
63
63
  render() {
64
- return (h(Host, { key: '11d6c9e8b28b149150dc2c8247a9897af3c5be8f' }, h("div", { key: '3aa4135a95fada5ef5ae8dbd6e1f4d5103e331ab', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '82604c1d23b8da0e977f335cc5e91d3f50cf8b9e', class: "dialog" }, h("div", { key: 'f4e75b7ce50372317d39f36896ffb41a1ab62bc4', class: "options" }, h("div", { key: 'e6a53f521720750d9308c6f86b7ec1ce3da5d6f5', class: "option" }, h("verdocs-radio-button", { key: '71a5dee2cdd1714a24b693e43b09a09fb390127a', name: "template-sender", value: 'everyone', checked: this.sender === 'everyone', onInput: () => this.handleSelectSetting('everyone') }), h("div", { key: '96ec93e3673df83d059068a7e6b26c893344b0e1', class: "description" }, h("div", { key: 'f96bec057a8e3813eb5d995a2c3318831dc8833c', class: "name" }, "Anyone on the Web"), h("verdocs-help-icon", { key: '936f9fc0cf13fda75dcd8ba5b7be130a7d509feb', text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), h("div", { key: 'ffd734f9e6b150c8473c73c569f5344db01b33d1', class: "option" }, h("verdocs-radio-button", { key: '44c89ee4fd83268addc932681bac9cc5e4265b11', name: "template-sender", value: 'everyone_as_creator', checked: this.sender === 'everyone_as_creator', onInput: () => this.handleSelectSetting('everyone_as_creator') }), h("div", { key: 'ac2717cceef39304a7a9b3d5b6cdbd7bac459831', class: "description" }, h("div", { key: '95f4a2acb38164158e6de9d7920046a66c9b3edd', class: "name" }, "Anyone on the Web as me"), h("verdocs-help-icon", { key: '977e40893b6660ddbcd3c278e5ae54ca49d61a4d', text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), h("div", { key: '67362c118307c90e5fd40b10321b8875bd771040', class: "option" }, h("verdocs-radio-button", { key: 'd582a6659c8be50cd118690fc91fea18af8026d8', name: "template-sender", value: 'organization_member', checked: this.sender === 'organization_member', onInput: () => this.handleSelectSetting('organization_member') }), h("div", { key: 'e18b002f29dd3dfdcbe742599bfdbd0a20f43697', class: "description" }, h("div", { key: 'ed4ce6c890aa51883ee72e0aff5b296128da1fd9', class: "name" }, "Anyone in my organization"), h("verdocs-help-icon", { key: '82cc8a2ee2da32cda56555d4484bf94ce9e230ed', text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), h("div", { key: 'c6ea6745540bea7d20196fc4d96590f334387333', class: "option" }, h("verdocs-radio-button", { key: '5d941faac5fd0ab09ed531141ab049248de97afd', name: "template-sender", value: 'organization_member_as_creator', checked: this.sender === 'organization_member_as_creator', onInput: () => this.handleSelectSetting('organization_member_as_creator') }), h("div", { key: 'a57cb28c9609a2d6d583b5fb7022866354b95bb2', class: "description" }, h("div", { key: '33561830437d8f604c7cda519617b687b1588e65', class: "name" }, "Anyone in my organization as me"), h("verdocs-help-icon", { key: '65557a2d57bc56c248f13d1b4d1d72305728fb8c', text: "Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)" }))), h("div", { key: 'f6e19ddf05d5468b226a2767e05bdd83efe66e06', class: "option" }, h("verdocs-radio-button", { key: '2d82a2104f9f5c209f560144b8fc6c28b3675889', name: "template-sender", value: 'creator', checked: this.sender === 'creator', onInput: () => this.handleSelectSetting('creator') }), h("div", { key: '8afe677cfca3535e2e372af8a227c91b880af4e4', class: "description" }, h("div", { key: 'd628e15e4223cae86a4152063b91a055b441328b', class: "name" }, "Me"), h("verdocs-help-icon", { key: 'd85b39030f38b05d2a8053950d64a00383a28ca6', text: "Only I can use this template." })))), h("div", { key: '575bdb57d53dac18f852f5f79c370cd186550402', class: "buttons" }, h("verdocs-button", { key: '44f30d116ebfd5618b818b1170881566fadd1e68', label: "Close", onClick: () => this.handleClose() }))))));
64
+ return (h(Host, { key: 'f9ebeecc2d0d2467718e1c54161fd8eee32ba5f6' }, h("div", { key: 'efc13020bd5674c874707cefea2384b52521a85f', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '3c85258b0ea837e4e78ad16eb6cec93cffa6e629', class: "dialog" }, h("div", { key: '46a6eb1bed8de495d834faa73e48547a891aa00e', class: "options" }, h("div", { key: '9425750a4508f6a6c176f0ee88a1674aceec8475', class: "option" }, h("verdocs-radio-button", { key: '65d2059bb0b433e1b95a55273ad7a7ca4734ce51', name: "template-sender", value: 'everyone', checked: this.sender === 'everyone', onInput: () => this.handleSelectSetting('everyone') }), h("div", { key: '119b053c18bffd95451eed224132d1592ccf6004', class: "description" }, h("div", { key: 'c4a3fac447abea997dec0906221df87cc9014e4b', class: "name" }, "Anyone on the Web"), h("verdocs-help-icon", { key: '1e8e078477cdd86100e3b73e275e856449eb84ee', text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), h("div", { key: 'b91f257e6a6c702f2fa0ee147dda5642b6ff514a', class: "option" }, h("verdocs-radio-button", { key: '00a900ef8a3a1e9cb7ca8e1de93bf3528f78b32d', name: "template-sender", value: 'everyone_as_creator', checked: this.sender === 'everyone_as_creator', onInput: () => this.handleSelectSetting('everyone_as_creator') }), h("div", { key: 'f767a5d108262e22fb3f0936379f6b84481801ad', class: "description" }, h("div", { key: '59f6f409b9f51a2ab597241a4052191e46a4d5c1', class: "name" }, "Anyone on the Web as me"), h("verdocs-help-icon", { key: '0b90c72573e4b75c3294e8f95a709ee0559bdbef', text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), h("div", { key: 'afd67488f38d33075a454476be475cd7801c4ed3', class: "option" }, h("verdocs-radio-button", { key: '8c09dc41fbb371c3380a2ddf06a806a131aef8b6', name: "template-sender", value: 'organization_member', checked: this.sender === 'organization_member', onInput: () => this.handleSelectSetting('organization_member') }), h("div", { key: 'caf2a20f93130262b878e9df13e0e569aacffb9c', class: "description" }, h("div", { key: '430ccbe92e4b39a789d215886e9ecbfed0c30f3e', class: "name" }, "Anyone in my organization"), h("verdocs-help-icon", { key: '21a2cec2a249f6e4d6f486f501a813e10bdd1497', text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), h("div", { key: 'a48b2814e9b04e09f6661a754b52e739d0566200', class: "option" }, h("verdocs-radio-button", { key: 'e3f9885aa8215f79686555a1fb85c5b87aa4aa03', name: "template-sender", value: 'organization_member_as_creator', checked: this.sender === 'organization_member_as_creator', onInput: () => this.handleSelectSetting('organization_member_as_creator') }), h("div", { key: '99ea5cdc2c55b0e73d092a1df4fc728f30810059', class: "description" }, h("div", { key: '79109d8cc3845c287fbffdd017695139cfb1a16f', class: "name" }, "Anyone in my organization as me"), h("verdocs-help-icon", { key: 'b093f771c7cf119cbf27c404562bf5029664bb1b', text: "Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)" }))), h("div", { key: '1a250fdd2b385e70d27f0fb6895a5b673c24e655', class: "option" }, h("verdocs-radio-button", { key: '526a88e4e339932623183ec5fa9218adcbb5d832', name: "template-sender", value: 'creator', checked: this.sender === 'creator', onInput: () => this.handleSelectSetting('creator') }), h("div", { key: '94a699f6c4c430cbd3e221c6baf4972ec188260f', class: "description" }, h("div", { key: 'b2c16bda7146c436cd90d919e7c7a7d912c90809', class: "name" }, "Me"), h("verdocs-help-icon", { key: '360ad19358fd4ce6a6f8e3e3e47bb0ff0da18d37', text: "Only I can use this template." })))), h("div", { key: '059e9ebf124ffcd2d45ea4316d1fdd49c4ec36ae', class: "buttons" }, h("verdocs-button", { key: 'b0a0a519eb6b713fa334065de19021369e20ee0b', label: "Close", onClick: () => this.handleClose() }))))));
65
65
  }
66
66
  static get is() { return "verdocs-template-sender"; }
67
67
  static get originalStyleUrls() {
@@ -38,7 +38,7 @@ export class VerdocsTemplateStar {
38
38
  });
39
39
  }
40
40
  render() {
41
- return (h(Host, { key: '380d6e0aa5c8cda93b4d5ed1276da45dafc8c8b4' }, h("div", { key: '04dd0b86049e0dd2ca756c6f209ecce0cda2e22b', class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.star_counter ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), h("div", { key: 'e26658e05d76b6d72fbd434d8b938f61cde39b2a', class: "count" }, this.template.star_counter || '--')));
41
+ return (h(Host, { key: '3bf76e18041a195c1bf050776cd465f7afde3c37' }, h("div", { key: '566edf26b382ce4b758571f6470d1ac873d1e0b6', class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.star_counter ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), h("div", { key: '602436f5d52db7118af35deccb264ccb331d1b72', class: "count" }, this.template.star_counter || '--')));
42
42
  }
43
43
  static get is() { return "verdocs-template-star"; }
44
44
  static get originalStyleUrls() {
@@ -8,7 +8,7 @@ export class VerdocsTemplateTags {
8
8
  }
9
9
  render() {
10
10
  var _a;
11
- return (h(Host, { key: '0935c5356bbfe973758193fb4901abb941827d5b' }, (_a = this.tags) === null || _a === void 0 ? void 0 : _a.map(tag => (h("span", null, tag)))));
11
+ return (h(Host, { key: '2abee2130a12d5165984e025633f419082d02714' }, (_a = this.tags) === null || _a === void 0 ? void 0 : _a.map(tag => (h("span", null, tag)))));
12
12
  }
13
13
  static get is() { return "verdocs-template-tags"; }
14
14
  static get originalStyleUrls() {
@@ -75,7 +75,7 @@ const VerdocsEnvelopeDocumentPage = /*@__PURE__*/ proxyCustomElement(class Verdo
75
75
  }
76
76
  render() {
77
77
  const height = `${this.renderedHeight}px`;
78
- return (h(Host, { key: 'cca4f6b0c00556a1662ee175292d59b249b17604', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-envelope-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (h("img", { class: "verdocs-envelope-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
78
+ return (h(Host, { key: 'a81d2ebfb4583ff9817dceff69838a2a38d51c58', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-envelope-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (h("img", { class: "verdocs-envelope-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
79
79
  // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
80
80
  // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
81
81
  // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values
@@ -204,18 +204,18 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsEnv
204
204
  });
205
205
  }
206
206
  render() {
207
- return (h(Host, { key: '65d29f9d52c1e4580e335015941be7f8f20197a9' }, h("div", { key: '64a021af11c8a291981bb49f88cddedf5253593d', class: "header" }, h("div", { key: '12ae24224cc5bae515cad1b6382b1fa64fce1223', class: "filter" }, h("verdocs-text-input", { key: 'b895bcdfa7829a5a78460759291890859d5cf6b5', id: "verdocs-filter-name", value: this.match, clearable: true, autocomplete: "off", placeholder: "Filter by Name, Recipient, or Field...", onFocusout: (e) => {
207
+ return (h(Host, { key: '16ef23582bd602e8f1d73d6dededfbb9034411a3' }, h("div", { key: '08a44cfcd5b9c4c99196192889cd04b2b28d16dd', class: "header" }, h("div", { key: '1e52bd468584ed21fec2e82fab55df929fa6a882', class: "filter" }, h("verdocs-text-input", { key: 'da6f8fe6d6c7c890a50d89e754f0f6e8cf0dc1f5', id: "verdocs-filter-name", value: this.match, clearable: true, autocomplete: "off", placeholder: "Filter by Name, Recipient, or Field...", onFocusout: (e) => {
208
208
  var _a;
209
209
  // We don't locally filter envelopes because there are too many fields to match against efficiently.
210
210
  this.match = e.target.value.trim();
211
211
  (_a = this.changeMatch) === null || _a === void 0 ? void 0 : _a.emit(this.match);
212
- } })), h("verdocs-quick-filter", { key: '72e6e429edabd43c71a24d5d74e7be57b44073b8', label: "View", value: this.view, options: ViewFilters, onOptionSelected: e => {
212
+ } })), h("verdocs-quick-filter", { key: '3c530e4b939ea9beb56fb6a8ef185aefda997b5c', label: "View", value: this.view, options: ViewFilters, onOptionSelected: e => {
213
213
  this.view = e.detail.value;
214
- } }), this.view === 'all' && (h("verdocs-quick-filter", { key: '883d9ed133ad696a6fa1a572aa331aad753296ea', label: "Status", value: this.status, options: StatusFilters, onOptionSelected: e => {
214
+ } }), this.view === 'all' && (h("verdocs-quick-filter", { key: 'c1dea5014f12031c2811a3a420638dcf9a629518', label: "Status", value: this.status, options: StatusFilters, onOptionSelected: e => {
215
215
  this.status = e.detail.value;
216
- } })), this.view === 'all' && (h("verdocs-quick-filter", { key: '626d712a6760eb30c9d10a142358f0e9c3ad6548', label: "Sort By", value: this.sort, options: SortFilters, onOptionSelected: e => {
216
+ } })), this.view === 'all' && (h("verdocs-quick-filter", { key: '3709b032cc82bf52bcd1b0502bc320378d80321a', label: "Sort By", value: this.sort, options: SortFilters, onOptionSelected: e => {
217
217
  this.sort = e.detail.value;
218
- } })), this.loading && h("verdocs-spinner", { key: '391ee75435dfe6203eef29e29b14f74cda3a32ab', mode: "dark", size: 24 }), h("div", { key: 'd12b2ce01d44e81728189968947c7b5e9e778293', style: { display: 'flex', flex: '1' } }), this.selectedEnvelopes.length > 0 && h("verdocs-button", { key: 'c2d20419257993759e8cd7c5ea5e58a20db5b15e', label: `Download (${this.selectedEnvelopes.length})`, onClick: () => this.handleDownload() })), this.envelopes.map(envelope => {
218
+ } })), this.loading && h("verdocs-spinner", { key: '41543cc37ff98e5b6243e26ad557c4db702b3785', mode: "dark", size: 24 }), h("div", { key: '3cb1462b5701c9845097d667eda3fcef56c6adf2', style: { display: 'flex', flex: '1' } }), this.selectedEnvelopes.length > 0 && h("verdocs-button", { key: 'ebd3fc5c23bd0c26bc0044dcbc26b967e70ae3da', label: `Download (${this.selectedEnvelopes.length})`, onClick: () => this.handleDownload() })), this.envelopes.map(envelope => {
219
219
  var _a;
220
220
  const recipientsWithActions = getRecipientsWithActions(envelope);
221
221
  const userCanCancel = userCanCancelEnvelope(this.endpoint.profile, envelope);
@@ -256,7 +256,7 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsEnv
256
256
  break;
257
257
  }
258
258
  } }))));
259
- }), !this.initiallyLoaded && (h("div", { key: '3c1f1711abdeaaf92c12129e8f7e5ab13c06db1d', style: { width: '100%' } }, integerSequence(0, this.rowsPerPage).map(() => (h("div", { class: "envelope-placeholder" }))))), this.initiallyLoaded && !this.envelopes.length && h("div", { key: '1f14c23162b105b4947e3b574e0192fee0f164b5', class: "empty-text" }, "No matching envelopes found. Please adjust your filters and try again."), this.initiallyLoaded && this.envelopes.length && this.showPagination ? (h("div", { style: { marginTop: '20px' } }, h("verdocs-pagination", { selectedPage: this.selectedPage, perPage: this.rowsPerPage, itemCount: this.count, onSelectPage: e => {
259
+ }), !this.initiallyLoaded && (h("div", { key: '0d44a7b663ea9220fa43665f6245a78187ae6ef0', style: { width: '100%' } }, integerSequence(0, this.rowsPerPage).map(() => (h("div", { class: "envelope-placeholder" }))))), this.initiallyLoaded && !this.envelopes.length && h("div", { key: 'c024bc67a3360c9350b65bbd40948a63eb47f6bb', class: "empty-text" }, "No matching envelopes found. Please adjust your filters and try again."), this.initiallyLoaded && this.envelopes.length && this.showPagination ? (h("div", { style: { marginTop: '20px' } }, h("verdocs-pagination", { selectedPage: this.selectedPage, perPage: this.rowsPerPage, itemCount: this.count, onSelectPage: e => {
260
260
  this.selectedPage = e.detail.selectedPage;
261
261
  } }))) : (h("div", null))));
262
262
  }
@@ -73,11 +73,7 @@ const VerdocsFieldDropdown = /*@__PURE__*/ proxyCustomElement(class VerdocsField
73
73
  // TODO: Look for other places this mistaken assumption was made.
74
74
  // Defaults only apply in destructuring if undefined. null doesn't trigger it.
75
75
  options || (options = []);
76
- if (!options.length) {
77
- console.log('[DROPDOWN] Dropdown has no options, hiding field...', fieldname);
78
- return h(Host, null);
79
- }
80
- return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), h("select", { disabled: disabled, onChange: e => this.handleChange(e) }, h("option", { value: "" }, "Select..."), options.map(option => (h("option", { value: option.id, selected: option.id === value }, option.label)))), 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) => {
76
+ return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), h("select", { disabled: disabled, onChange: e => this.handleChange(e) }, h("option", { value: "" }, "Select..."), options.map(option => (h("option", { value: option.id, selected: option.id === value }, option.label))), !options.length && h("option", { value: "NA" }, "N/A")), 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) => {
81
77
  e.stopPropagation();
82
78
  this.showingProperties = !this.showingProperties;
83
79
  } }), 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: () => {
@@ -39,7 +39,7 @@ const VerdocsPortal = /*@__PURE__*/ proxyCustomElement(class VerdocsPortal exten
39
39
  // Math.max(anchorRect.left + anchorRect.width - this.portal.offsetWidth, 0);
40
40
  const popupWidth = ((_a = this.element) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 400;
41
41
  const offRightEdge = leftOfPopup + popupWidth > rightOfViewportWithScroll;
42
- return offRightEdge ? leftOfPopup + anchorRect.width - popupWidth : leftOfPopup;
42
+ return offRightEdge ? rightOfViewportWithScroll - popupWidth - 20 : leftOfPopup;
43
43
  }
44
44
  calculateTop() {
45
45
  var _a;
@@ -21,7 +21,7 @@ const VerdocsQuickFunctions$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsQu
21
21
  this.createDocument.emit();
22
22
  }
23
23
  render() {
24
- return (h("div", { key: '99840e81fe2f2b825efb6253f72a6583d0354504', class: "container" }, h("p", { key: '7a814db57ae3bfad6aaba12cdab17b0e900e9080', class: "title" }, "Quick Create"), h("button", { key: '84d518a21e8fb43818efbc26f94b545821465af1', onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), h("button", { key: 'c7b9ea58cf880ef8356e2fdb80a1f76b4ab8b014', onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document")));
24
+ return (h("div", { key: '0cff01678f477efbb74f37a070db94c6ffa195a1', class: "container" }, h("p", { key: '2b781540591813f4955324bfb89084ad2b0a5132', class: "title" }, "Quick Create"), h("button", { key: '1530472b7904a08465cb27e61b2adc84d0ff7560', onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), h("button", { key: '7f07268a4aaa6dbb610815af95f27025c0d91c41', onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document")));
25
25
  }
26
26
  static get style() { return VerdocsQuickFunctionsStyle0; }
27
27
  }, [0, "verdocs-quick-functions", {
@@ -10,7 +10,7 @@ const VerdocsSearchTabs$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSearch
10
10
  this.selected = 'all';
11
11
  }
12
12
  render() {
13
- return h("div", { key: '476b2a3baba29b498e5d91a9866f8e1f5070b8c3' }, "\u00A0");
13
+ return h("div", { key: '33700d0c932da7138bf44f6dd69501d8c652bb4d' }, "\u00A0");
14
14
  }
15
15
  static get style() { return VerdocsSearchTabsStyle0; }
16
16
  }, [0, "verdocs-search-tabs", {
@@ -247,6 +247,8 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
247
247
  async handleFieldChange(field, e) {
248
248
  const { value, checked } = e.target;
249
249
  switch (field.type) {
250
+ // TODO: Remove legacy type when no longer needed
251
+ case 'textarea':
250
252
  case 'textbox':
251
253
  return this.saveFieldChange(field.name, { prepared: false, value });
252
254
  case 'checkbox': {
@@ -388,7 +390,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
388
390
  nextFocusedIndex = 0;
389
391
  }
390
392
  let nextRequiredField = emptyFields[nextFocusedIndex];
391
- console.log('Next field', nextRequiredField);
393
+ console.log('Next field', nextRequiredField, emptyFields);
392
394
  // Skip signature and initial fields that are already filled in. We have to count our "skips" just in case, to avoid infinite loops.
393
395
  let skips = 0;
394
396
  if (skips < emptyFields.length && ['signature', 'initial'].includes(nextRequiredField.type) && ['initialed', 'signed'].includes(nextRequiredField.value)) {
@@ -405,8 +407,8 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
405
407
  if (nextRequiredField) {
406
408
  const id = getFieldId(nextRequiredField);
407
409
  const el = document.getElementById(id);
410
+ el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth' });
408
411
  el === null || el === void 0 ? void 0 : el.focusField();
409
- el === null || el === void 0 ? void 0 : el.scrollTo({ behavior: 'smooth', top: 0 });
410
412
  this.focusedField = nextRequiredField.name;
411
413
  }
412
414
  }
@@ -7190,11 +7190,11 @@ const VerdocsStatusIndicator = /*@__PURE__*/ proxyCustomElement(class VerdocsSta
7190
7190
  }
7191
7191
  const icon = this.getStatusIcon(status);
7192
7192
  const statusMessage = this.getStatusMessage(status);
7193
- return (h(Host, { key: '3111e544a8f287a2b5a501cae08fc88752186477', ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
7193
+ return (h(Host, { key: '26b42a98a4f70d09aeb1721916f3a6239b73b1cb', ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
7194
7194
  e.stopPropagation();
7195
7195
  e.preventDefault();
7196
7196
  this.envelope && this.toggleDropdown();
7197
- }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, h("span", { key: '2dd4397db22358d7dd8e495f601c3f31687e400e', class: "icon", innerHTML: icon }), h("span", { key: 'fb37993d036b1a1552f19fc2bc57565bf3026a44', class: "content" }, statusMessage), h("div", { key: '5bc4ea53d9eec94c0dfd34662437bf90aaf76d60', class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { key: 'e073e793dc4f0bef2d9826fb5b70f62f2495fa45', id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
7197
+ }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, h("span", { key: '755c501d67a395d153c2433bcd0593931aed3b13', class: "icon", innerHTML: icon }), h("span", { key: '393027372c519cff2fbdf391cbd1325e880f46d0', class: "content" }, statusMessage), h("div", { key: '7e0168d274fa853e5b74ccadbc3cd1fc06751280', class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { key: 'ef04e1f77c3cfbab5054946d7c48de5f60e9ee06', id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
7198
7198
  }
7199
7199
  static get style() { return VerdocsStatusIndicatorStyle0; }
7200
7200
  }, [0, "verdocs-status-indicator", {
@@ -15,7 +15,7 @@ const VerdocsTemplateCard$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsTemp
15
15
  }
16
16
  render() {
17
17
  var _a, _b, _c, _d;
18
- return (h(Host, { key: '34dbb55f6c6b8afe8e2a27142d1edd560aa8123e' }, h("span", { key: '83a70355f7d740968113d4b7c70223b8b1728199', class: "name" }, this.template.name), h("span", { key: 'daba1bec48afa7914db6812c092ecc9006f0c0fa', class: "org-name" }, ((_a = this.template.organization) === null || _a === void 0 ? void 0 : _a.name) || 'Public'), h("hr", { key: 'f33a1caa30b0e73e490c353aeda95f03ccc8cdc9' }), h("div", { key: '132457e5862298418311e5630cf91ee4c388eb53', class: "controls" }, h("div", { key: '4d6a907defae65e3e71468227ff01bf378349325', class: "control" }, h("span", { key: '859bf9965d4d4d666b191410269c8e4733abdc3b', class: "icon", innerHTML: StarIcon }), h("span", { key: 'bb2aa5c6f908aad15c3ffaec48786bf32e4afafe', class: "value" }, this.template.star_counter)), h("div", { key: 'f908946f9052972407ec26065774aeffe86fd370', class: "control secondary" }, h("span", { key: '8703c428b3154521c3156b32a95267fcda3a73ab', class: "icon", innerHTML: PagesIcon }), h("span", { key: '811320f402296ac578418a0ae4a6b0403455fadc', class: "value" }, ((_d = (_c = (_b = this.template) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.pages) || 1)), h("div", { key: '3fdbd916fd49d41b9c8254d78bce60eff644d008', class: "control secondary" }, h("span", { key: '5ca32fdaa0f2fb7ea7a093169d2abc4a531462e3', class: "icon", innerHTML: EmailIcon }), h("span", { key: '0e37528844b8097102ecd8c5a48fa59efe8a6705', class: "value" }, this.template.counter)), h("span", { key: '8877d1faf766e75f1198a5842cf97ec6be28fb6b', class: "additional-controls", innerHTML: ActionsIcon }))));
18
+ return (h(Host, { key: '5d51a6309b35282260e0b5a9accb65368f66e137' }, h("span", { key: '5077d1f9917cd63eba77d19efa46854000d2285d', class: "name" }, this.template.name), h("span", { key: '3dfe49dbf90de379d47e6a4b9b1583ac38ff4abd', class: "org-name" }, ((_a = this.template.organization) === null || _a === void 0 ? void 0 : _a.name) || 'Public'), h("hr", { key: '9cf9967baf829422608934bb3cdc44e872655b6a' }), h("div", { key: 'a778ca45266cf6915903885658914388e2fb6482', class: "controls" }, h("div", { key: '3ac820a94080adccf68076cfd2c5acf795ad7fc8', class: "control" }, h("span", { key: '0f852a590b4ea1c7c523aa2d132de6a502ca64a3', class: "icon", innerHTML: StarIcon }), h("span", { key: 'b6d8ff745a148d734a443d6975546018c38d720c', class: "value" }, this.template.star_counter)), h("div", { key: '66ad10b503b311b1e474ac5a757eda68d7c14da9', class: "control secondary" }, h("span", { key: '5a799e82a7e982a3878267ba7142968a9ae57ed9', class: "icon", innerHTML: PagesIcon }), h("span", { key: '786f8e6e4c7d8050754d4c4879b7eb16c0f8616b', class: "value" }, ((_d = (_c = (_b = this.template) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.pages) || 1)), h("div", { key: '8beaba61ba61c3d65b3b7f3e8a353ac4e851eeae', class: "control secondary" }, h("span", { key: 'af4de26fb0adc0b3dce0dd902b770870a1aeae50', class: "icon", innerHTML: EmailIcon }), h("span", { key: '98e12c32e97de73267f511ea736a9bcb1d63d027', class: "value" }, this.template.counter)), h("span", { key: 'df0f16420601b26ff1263370b92335df3fe0e80f', class: "additional-controls", innerHTML: ActionsIcon }))));
19
19
  }
20
20
  static get style() { return VerdocsTemplateCardStyle0; }
21
21
  }, [0, "verdocs-template-card", {
@@ -116,7 +116,7 @@ const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class Verdo
116
116
  }
117
117
  render() {
118
118
  const height = `${this.renderedHeight}px`;
119
- return (h(Host, { key: '2c5cc60056b48fbcb7de1e1abffdbb3753b38e10', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } }, layer.name === 'controls' &&
119
+ return (h(Host, { key: 'ddeacbfbd9f38bddfbb5c9886df494881b4e38cf', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } }, layer.name === 'controls' &&
120
120
  this.fieldStore
121
121
  .get('fields')
122
122
  .filter(field => field && field.page === this.pageNumber)
@@ -79,9 +79,6 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class Ve
79
79
  console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in fields`);
80
80
  return;
81
81
  }
82
- else {
83
- console.log('[FIELD PROPERTIES]', field);
84
- }
85
82
  this.type = field.type;
86
83
  this.name = field.name;
87
84
  this.label = field.label;
@@ -162,6 +159,8 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class Ve
162
159
  if (this.helpText && this.showingHelp) {
163
160
  return (h(Host, null, h("h6", null, capitalize(this.fieldType), " Settings ", h("div", { style: { flex: '1' } }), h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = false) })), h("p", { class: "instructions", innerHTML: this.helpText })));
164
161
  }
162
+ const hasOptions = this.options.filter(opt => (opt.id || '').trim() !== '' || (opt.label || '').trim() !== '').length > 0;
163
+ const saveDisabled = !this.dirty || (this.type === 'dropdown' && !hasOptions);
165
164
  return (h(Host, { id: "verdocs-template-field-properties" }, h("h6", null, capitalize(this.fieldType.replace(/_/g, ' ')), " Settings ", h("div", { style: { flex: '1' } }), this.helpText && h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = true) })), h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-name", label: "Field Name", value: this.name, autocomplete: "off",
166
165
  // helpText="The internal name of the field. Must be unique, and contain only letters, numbers, and dashes. After an envelope is completed, the value entered by the signer will be tagged with this key."
167
166
  placeholder: "Field Name...", onInput: (e) => {
@@ -200,7 +199,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class Ve
200
199
  this.options = this.options.filter(opt => opt.id !== option.id);
201
200
  this.dirty = true;
202
201
  this.cleanupOptions();
203
- } })))))), h("div", { class: "buttons" }, h("button", { class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { style: { flex: '1' } }), h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))));
202
+ } })))))), h("div", { class: "buttons" }, h("button", { class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { style: { flex: '1' } }), h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: saveDisabled, onClick: e => !saveDisabled && this.handleSave(e) })))));
204
203
  }
205
204
  get el() { return this; }
206
205
  static get style() { return VerdocsTemplateFieldPropertiesStyle0; }
@@ -81,8 +81,17 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class VerdocsTemp
81
81
  this.selectedRoleName = '';
82
82
  this.loading = true;
83
83
  }
84
+ onTemplateIdChanged(newTemplateId) {
85
+ this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
86
+ }
87
+ // Stop field-placement mode if ESC is pressed
88
+ handleKeyDown(ev) {
89
+ if (ev.key === 'Escape') {
90
+ this.placing = null;
91
+ }
92
+ }
84
93
  async componentWillLoad() {
85
- var _a, _b, _c;
94
+ var _a, _b, _c, _d, _e, _f;
86
95
  try {
87
96
  this.endpoint.loadSession();
88
97
  if (!this.templateId) {
@@ -93,27 +102,17 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class VerdocsTemp
93
102
  console.log('[FIELDS] Unable to start builder session, must be authenticated');
94
103
  return;
95
104
  }
96
- getTemplateStore(this.endpoint, this.templateId, true)
97
- .then(ts => {
98
- var _a, _b;
99
- this.templateStore = ts;
100
- this.fieldStore = getTemplateFieldStore(this.templateId);
101
- this.roleStore = getTemplateRoleStore(this.templateId);
102
- this.selectedRoleName = ((_b = (_a = this.roleStore.get('roles')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
103
- this.loading = false;
104
- this.fieldStore.onChange('fields', fields => {
105
- var _a;
106
- console.log('[FIELDS] Fields changed', { fields });
107
- (_a = this.fieldsUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'updated', endpoint: this.endpoint, templateId: this.templateId, fields });
108
- });
109
- })
110
- .catch(e => {
111
- console.log(e);
112
- });
105
+ try {
106
+ this.loadTemplate(this.templateId).catch(e => console.log('[BUILD] Unable to load template', e));
107
+ }
108
+ catch (e) {
109
+ console.log('[FIELDS] Error loading template', e);
110
+ (_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));
111
+ }
113
112
  }
114
113
  catch (e) {
115
114
  console.log('[FIELDS] Error with fields session', e);
116
- (_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));
115
+ (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
117
116
  }
118
117
  }
119
118
  componentDidRender() {
@@ -127,23 +126,27 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class VerdocsTemp
127
126
  }
128
127
  }
129
128
  componentWillUpdate() {
130
- var _a;
129
+ var _a, _b;
131
130
  // If a new role was added and there were none yet so far, or the "selected" role was deleted, reset our selection
132
- const roles = this.roleStore.get('roles');
131
+ const roles = ((_a = this.roleStore) === null || _a === void 0 ? void 0 : _a.get('roles')) || [];
133
132
  if (!this.selectedRoleName || !roles.find(role => role && role.name === this.selectedRoleName)) {
134
- this.selectedRoleName = ((_a = roles[0]) === null || _a === void 0 ? void 0 : _a.name) || '';
133
+ this.selectedRoleName = ((_b = roles[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
135
134
  console.log('[FIELDS] Selected new role', this.selectedRoleName);
136
135
  }
137
136
  }
138
- // Stop field-placement mode if ESC is pressed
139
- handleKeyDown(ev) {
140
- if (ev.key === 'Escape') {
141
- this.placing = null;
137
+ async loadTemplate(templateId) {
138
+ var _a, _b;
139
+ if (templateId) {
140
+ this.loading = true;
141
+ this.templateStore = await getTemplateStore(this.endpoint, templateId, false);
142
+ this.roleStore = getTemplateRoleStore(this.templateId);
143
+ this.fieldStore = getTemplateFieldStore(this.templateId);
144
+ this.selectedRoleName = ((_b = (_a = this.roleStore.get('roles')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
145
+ this.loading = false;
146
+ // TODO: Necessary?
147
+ // this.fieldsUpdated?.emit({event: 'updated', endpoint: this.endpoint, templateId: this.templateId, fields});
142
148
  }
143
149
  }
144
- // async handleFieldChange(field: ITemplateField, e: any, optionId?: string) {
145
- // console.log('[FIELDS] handleFieldChange', field, e, optionId);
146
- // }
147
150
  attachFieldAttributes(pageInfo, field, el) {
148
151
  // el.addEventListener('input', e => this.handleFieldChange(field, e));
149
152
  el.addEventListener('settingsChanged', () => {
@@ -333,22 +336,30 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class VerdocsTemp
333
336
  }
334
337
  } })))), h("div", { class: "pages" }, (((_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.documents) || []).map(document => {
335
338
  const pageNumbers = integerSequence(1, document.pages);
336
- return pageNumbers.map(page => (h("verdocs-template-document-page", { templateId: this.templateId, documentId: document.id, pageNumber: page, virtualWidth: 612, virtualHeight: 792, disabled: true, editable: true, done: false, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
337
- { name: 'page', type: 'canvas' },
338
- { name: 'controls', type: 'div' },
339
- ] })));
339
+ return pageNumbers.map(page => {
340
+ const pageSize = document.page_sizes[page];
341
+ return (h("verdocs-template-document-page", { templateId: this.templateId, documentId: document.id, pageNumber: page, virtualWidth: (pageSize === null || pageSize === void 0 ? void 0 : pageSize.width) || 612, virtualHeight: (pageSize === null || pageSize === void 0 ? void 0 : pageSize.height) || 792, disabled: true, editable: true, done: false, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
342
+ { name: 'page', type: 'canvas' },
343
+ { name: 'controls', type: 'div' },
344
+ ] }));
345
+ });
340
346
  })), this.showMustSelectRole && (h("verdocs-ok-dialog", { heading: "Unable to add field", message: this.roleStore.get('roles').length > 0 ? 'Please select a role before adding fields.' : 'Please add at least one role before adding fields.', onNext: () => (this.showMustSelectRole = false) }))));
341
347
  }
348
+ static get watchers() { return {
349
+ "templateId": ["onTemplateIdChanged"]
350
+ }; }
342
351
  static get style() { return VerdocsTemplateFieldsStyle0; }
343
352
  }, [0, "verdocs-template-fields", {
344
353
  "endpoint": [16],
345
- "templateId": [1, "template-id"],
354
+ "templateId": [1537, "template-id"],
346
355
  "toolbarTargetId": [1, "toolbar-target-id"],
347
356
  "placing": [32],
348
357
  "showMustSelectRole": [32],
349
358
  "selectedRoleName": [32],
350
359
  "loading": [32]
351
- }, [[4, "keydown", "handleKeyDown"]]]);
360
+ }, [[4, "keydown", "handleKeyDown"]], {
361
+ "templateId": ["onTemplateIdChanged"]
362
+ }]);
352
363
  function defineCustomElement() {
353
364
  if (typeof customElements === "undefined") {
354
365
  return;