@verdocs/web-sdk 2.3.31 → 2.3.33

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 (261) hide show
  1. package/dist/cjs/{Icons-a11fb3fc.js → Icons-3286d014.js} +2 -0
  2. package/dist/cjs/TemplateRoleStore-e17bb006.js +44 -0
  3. package/dist/cjs/{TemplateStore-78b8944b.js → TemplateStore-e62c16a8.js} +2 -39
  4. package/dist/cjs/ipc-test.cjs.entry.js +2 -1
  5. package/dist/cjs/loader.cjs.js +1 -1
  6. package/dist/cjs/{utils-aeaf4a31.js → utils-ac526133.js} +1 -7
  7. package/dist/cjs/verdocs-build.cjs.entry.js +2 -1
  8. package/dist/cjs/verdocs-contact-picker_2.cjs.entry.js +1 -1
  9. package/dist/cjs/verdocs-envelope-document-page.cjs.entry.js +1 -1
  10. package/dist/cjs/verdocs-envelopes-list.cjs.entry.js +1 -1
  11. package/dist/cjs/verdocs-field-attachment.cjs.entry.js +8 -7
  12. package/dist/cjs/verdocs-field-checkbox.cjs.entry.js +8 -7
  13. package/dist/cjs/verdocs-field-date.cjs.entry.js +10 -8
  14. package/dist/cjs/verdocs-field-dropdown.cjs.entry.js +8 -6
  15. package/dist/cjs/verdocs-field-initial.cjs.entry.js +9 -7
  16. package/dist/cjs/verdocs-field-payment.cjs.entry.js +6 -4
  17. package/dist/cjs/verdocs-field-radio-button.cjs.entry.js +8 -6
  18. package/dist/cjs/verdocs-field-signature.cjs.entry.js +9 -7
  19. package/dist/cjs/verdocs-field-textarea.cjs.entry.js +12 -7
  20. package/dist/cjs/verdocs-field-textbox.cjs.entry.js +9 -6
  21. package/dist/cjs/verdocs-field-timestamp.cjs.entry.js +10 -8
  22. package/dist/cjs/verdocs-file-chooser_2.cjs.entry.js +1 -1
  23. package/dist/cjs/verdocs-pagination_2.cjs.entry.js +1 -1
  24. package/dist/cjs/verdocs-portal_2.cjs.entry.js +3 -2
  25. package/dist/cjs/verdocs-preview_8.cjs.entry.js +29 -24
  26. package/dist/cjs/verdocs-settings-api-keys_4.cjs.entry.js +1 -1
  27. package/dist/cjs/verdocs-sign.cjs.entry.js +10 -12
  28. package/dist/cjs/verdocs-template-document-page_2.cjs.entry.js +1 -1
  29. package/dist/cjs/verdocs-template-fields_4.cjs.entry.js +18 -17
  30. package/dist/cjs/verdocs-view.cjs.entry.js +1 -1
  31. package/dist/cjs/verdocs-web-sdk.cjs.js +1 -1
  32. package/dist/collection/components/embeds/verdocs-preview/verdocs-preview.js +11 -8
  33. package/dist/collection/components/embeds/verdocs-send/verdocs-send.js +16 -14
  34. package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.js +10 -12
  35. package/dist/collection/components/fields/verdocs-field-attachment/verdocs-field-attachment.js +7 -42
  36. package/dist/collection/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.js +7 -42
  37. package/dist/collection/components/fields/verdocs-field-date/verdocs-field-date.js +8 -42
  38. package/dist/collection/components/fields/verdocs-field-dropdown/verdocs-field-dropdown.js +7 -41
  39. package/dist/collection/components/fields/verdocs-field-initial/verdocs-field-initial.js +8 -42
  40. package/dist/collection/components/fields/verdocs-field-payment/verdocs-field-payment.js +5 -21
  41. package/dist/collection/components/fields/verdocs-field-radio-button-group/verdocs-field-radio-button.js +7 -41
  42. package/dist/collection/components/fields/verdocs-field-signature/verdocs-field-signature.js +8 -42
  43. package/dist/collection/components/fields/verdocs-field-textarea/verdocs-field-textarea.js +11 -42
  44. package/dist/collection/components/fields/verdocs-field-textbox/verdocs-field-textbox.js +8 -41
  45. package/dist/collection/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.js +8 -42
  46. package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.js +10 -10
  47. package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.stories.js +1 -1
  48. package/dist/collection/components/templates/verdocs-template-roles/verdocs-template-roles.js +2 -3
  49. package/dist/collection/utils/Icons.js +1 -0
  50. package/dist/collection/utils/TemplateRoleStore.js +2 -0
  51. package/dist/collection/utils/TemplateStore.js +1 -2
  52. package/dist/collection/utils/utils.js +1 -15
  53. package/dist/{esm/Icons-c29eb0fa.js → components/Icons.js} +2 -1
  54. package/dist/components/TemplateRoleStore.js +37 -0
  55. package/dist/components/TemplateStore.js +2 -34
  56. package/dist/components/utils.js +2 -7
  57. package/dist/components/verdocs-contact-picker2.js +1 -1
  58. package/dist/components/verdocs-field-attachment.js +7 -8
  59. package/dist/components/verdocs-field-checkbox.js +7 -8
  60. package/dist/components/verdocs-field-date.js +8 -8
  61. package/dist/components/verdocs-field-dropdown.js +7 -7
  62. package/dist/components/verdocs-field-initial.js +8 -8
  63. package/dist/components/verdocs-field-payment.js +5 -4
  64. package/dist/components/verdocs-field-radio-button.js +7 -7
  65. package/dist/components/verdocs-field-signature.js +8 -8
  66. package/dist/components/verdocs-field-textarea.js +11 -8
  67. package/dist/components/verdocs-field-textbox.js +8 -7
  68. package/dist/components/verdocs-field-timestamp.js +8 -8
  69. package/dist/components/verdocs-file-chooser2.js +2 -75
  70. package/dist/components/verdocs-preview2.js +11 -8
  71. package/dist/components/verdocs-quick-filter2.js +1 -1
  72. package/dist/components/verdocs-send2.js +16 -14
  73. package/dist/components/verdocs-settings-organization2.js +1 -1
  74. package/dist/components/verdocs-settings-profile2.js +1 -1
  75. package/dist/components/verdocs-sign.js +10 -12
  76. package/dist/components/verdocs-template-attachments2.js +2 -1
  77. package/dist/components/verdocs-template-field-properties2.js +2 -1
  78. package/dist/components/verdocs-template-fields2.js +10 -9
  79. package/dist/components/verdocs-template-role-properties2.js +2 -1
  80. package/dist/components/verdocs-template-roles2.js +3 -3
  81. package/dist/docs.json +1 -358
  82. package/dist/esm/Icons-ddea87bf.js +76 -0
  83. package/dist/esm/TemplateRoleStore-bbb2b098.js +37 -0
  84. package/dist/esm/{TemplateStore-618fb47f.js → TemplateStore-adbf68a0.js} +2 -34
  85. package/dist/esm/ipc-test.entry.js +2 -1
  86. package/dist/esm/loader.js +1 -1
  87. package/dist/esm/{utils-f76f3448.js → utils-d081a2b9.js} +2 -7
  88. package/dist/esm/verdocs-build.entry.js +2 -1
  89. package/dist/esm/verdocs-contact-picker_2.entry.js +1 -1
  90. package/dist/esm/verdocs-envelope-document-page.entry.js +1 -1
  91. package/dist/esm/verdocs-envelopes-list.entry.js +1 -1
  92. package/dist/esm/verdocs-field-attachment.entry.js +8 -7
  93. package/dist/esm/verdocs-field-checkbox.entry.js +8 -7
  94. package/dist/esm/verdocs-field-date.entry.js +10 -8
  95. package/dist/esm/verdocs-field-dropdown.entry.js +8 -6
  96. package/dist/esm/verdocs-field-initial.entry.js +9 -7
  97. package/dist/esm/verdocs-field-payment.entry.js +6 -4
  98. package/dist/esm/verdocs-field-radio-button.entry.js +8 -6
  99. package/dist/esm/verdocs-field-signature.entry.js +9 -7
  100. package/dist/esm/verdocs-field-textarea.entry.js +12 -7
  101. package/dist/esm/verdocs-field-textbox.entry.js +9 -6
  102. package/dist/esm/verdocs-field-timestamp.entry.js +10 -8
  103. package/dist/esm/verdocs-file-chooser_2.entry.js +1 -1
  104. package/dist/esm/verdocs-pagination_2.entry.js +1 -1
  105. package/dist/esm/verdocs-portal_2.entry.js +2 -1
  106. package/dist/esm/verdocs-preview_8.entry.js +29 -24
  107. package/dist/esm/verdocs-settings-api-keys_4.entry.js +1 -1
  108. package/dist/esm/verdocs-sign.entry.js +10 -12
  109. package/dist/esm/verdocs-template-document-page_2.entry.js +1 -1
  110. package/dist/esm/verdocs-template-fields_4.entry.js +12 -11
  111. package/dist/esm/verdocs-view.entry.js +1 -1
  112. package/dist/esm/verdocs-web-sdk.js +1 -1
  113. package/dist/esm-es5/{Icons-c29eb0fa.js → Icons-ddea87bf.js} +1 -1
  114. package/dist/esm-es5/TemplateRoleStore-bbb2b098.js +1 -0
  115. package/dist/esm-es5/TemplateStore-adbf68a0.js +1 -0
  116. package/dist/esm-es5/ipc-test.entry.js +1 -1
  117. package/dist/esm-es5/loader.js +1 -1
  118. package/dist/esm-es5/{utils-f76f3448.js → utils-d081a2b9.js} +1 -1
  119. package/dist/esm-es5/verdocs-build.entry.js +1 -1
  120. package/dist/esm-es5/verdocs-contact-picker_2.entry.js +1 -1
  121. package/dist/esm-es5/verdocs-envelope-document-page.entry.js +1 -1
  122. package/dist/esm-es5/verdocs-envelopes-list.entry.js +1 -1
  123. package/dist/esm-es5/verdocs-field-attachment.entry.js +1 -1
  124. package/dist/esm-es5/verdocs-field-checkbox.entry.js +1 -1
  125. package/dist/esm-es5/verdocs-field-date.entry.js +1 -1
  126. package/dist/esm-es5/verdocs-field-dropdown.entry.js +1 -1
  127. package/dist/esm-es5/verdocs-field-initial.entry.js +1 -1
  128. package/dist/esm-es5/verdocs-field-payment.entry.js +1 -1
  129. package/dist/esm-es5/verdocs-field-radio-button.entry.js +1 -1
  130. package/dist/esm-es5/verdocs-field-signature.entry.js +1 -1
  131. package/dist/esm-es5/verdocs-field-textarea.entry.js +1 -1
  132. package/dist/esm-es5/verdocs-field-textbox.entry.js +1 -1
  133. package/dist/esm-es5/verdocs-field-timestamp.entry.js +1 -1
  134. package/dist/esm-es5/verdocs-file-chooser_2.entry.js +1 -1
  135. package/dist/esm-es5/verdocs-pagination_2.entry.js +1 -1
  136. package/dist/esm-es5/verdocs-portal_2.entry.js +1 -1
  137. package/dist/esm-es5/verdocs-preview_8.entry.js +1 -1
  138. package/dist/esm-es5/verdocs-settings-api-keys_4.entry.js +1 -1
  139. package/dist/esm-es5/verdocs-sign.entry.js +1 -1
  140. package/dist/esm-es5/verdocs-template-document-page_2.entry.js +1 -1
  141. package/dist/esm-es5/verdocs-template-fields_4.entry.js +1 -1
  142. package/dist/esm-es5/verdocs-view.entry.js +1 -1
  143. package/dist/esm-es5/verdocs-web-sdk.js +1 -1
  144. package/dist/types/components/embeds/verdocs-preview/verdocs-preview.d.ts +4 -2
  145. package/dist/types/components/embeds/verdocs-send/verdocs-send.d.ts +3 -1
  146. package/dist/types/components/embeds/verdocs-sign/verdocs-sign.d.ts +1 -1
  147. package/dist/types/components/fields/verdocs-field-attachment/verdocs-field-attachment.d.ts +2 -8
  148. package/dist/types/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.d.ts +2 -8
  149. package/dist/types/components/fields/verdocs-field-date/verdocs-field-date.d.ts +2 -8
  150. package/dist/types/components/fields/verdocs-field-dropdown/verdocs-field-dropdown.d.ts +2 -8
  151. package/dist/types/components/fields/verdocs-field-initial/verdocs-field-initial.d.ts +2 -8
  152. package/dist/types/components/fields/verdocs-field-payment/verdocs-field-payment.d.ts +2 -4
  153. package/dist/types/components/fields/verdocs-field-radio-button-group/verdocs-field-radio-button.d.ts +2 -8
  154. package/dist/types/components/fields/verdocs-field-signature/verdocs-field-signature.d.ts +2 -8
  155. package/dist/types/components/fields/verdocs-field-textarea/verdocs-field-textarea.d.ts +3 -9
  156. package/dist/types/components/fields/verdocs-field-textbox/verdocs-field-textbox.d.ts +2 -8
  157. package/dist/types/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.d.ts +2 -8
  158. package/dist/types/components/templates/verdocs-template-fields/verdocs-template-fields.d.ts +3 -3
  159. package/dist/types/components.d.ts +0 -168
  160. package/dist/types/utils/Icons.d.ts +1 -0
  161. package/dist/types/utils/TemplateRoleStore.d.ts +2 -0
  162. package/dist/types/utils/TemplateStore.d.ts +0 -1
  163. package/dist/types/utils/utils.d.ts +1 -6
  164. package/dist/verdocs-web-sdk/p-01730f6a.system.entry.js +1 -0
  165. package/dist/verdocs-web-sdk/{p-637fee9b.js → p-029ae656.js} +1 -1
  166. package/dist/verdocs-web-sdk/{p-9b6f0565.entry.js → p-07c30f7e.entry.js} +1 -1
  167. package/dist/verdocs-web-sdk/p-0a93ada5.system.entry.js +1 -0
  168. package/dist/verdocs-web-sdk/p-0aa50735.system.entry.js +1 -0
  169. package/dist/verdocs-web-sdk/p-0ef84cfe.system.entry.js +1 -0
  170. package/dist/verdocs-web-sdk/{p-3898a9b0.entry.js → p-140b8c97.entry.js} +1 -1
  171. package/dist/verdocs-web-sdk/{p-72dc5fb4.system.entry.js → p-15259f81.system.entry.js} +1 -1
  172. package/dist/verdocs-web-sdk/p-17575e47.entry.js +1 -0
  173. package/dist/verdocs-web-sdk/{p-3c5240df.system.entry.js → p-1a70513e.system.entry.js} +1 -1
  174. package/dist/verdocs-web-sdk/p-242a7d5f.entry.js +1 -0
  175. package/dist/verdocs-web-sdk/p-2af02a9e.system.entry.js +1 -0
  176. package/dist/verdocs-web-sdk/p-2c13a315.system.entry.js +1 -0
  177. package/dist/verdocs-web-sdk/p-2dddc88a.js +1 -0
  178. package/dist/verdocs-web-sdk/p-306af4e0.entry.js +1 -0
  179. package/dist/verdocs-web-sdk/{p-e65e9d24.js → p-34f03fee.js} +1 -1
  180. package/dist/verdocs-web-sdk/{p-455d16dc.system.js → p-3f628837.system.js} +1 -1
  181. package/dist/verdocs-web-sdk/p-47b2d159.entry.js +1 -0
  182. package/dist/verdocs-web-sdk/{p-94009f45.entry.js → p-4861684b.entry.js} +1 -1
  183. package/dist/verdocs-web-sdk/p-4c7998f0.entry.js +1 -0
  184. package/dist/verdocs-web-sdk/{p-3f7aa186.system.entry.js → p-56da687c.system.entry.js} +1 -1
  185. package/dist/verdocs-web-sdk/p-579d1e2c.entry.js +1 -0
  186. package/dist/verdocs-web-sdk/{p-9542e890.system.entry.js → p-5a6581cc.system.entry.js} +1 -1
  187. package/dist/verdocs-web-sdk/p-5f96dd8d.entry.js +1 -0
  188. package/dist/verdocs-web-sdk/{p-0685d939.system.entry.js → p-6384f444.system.entry.js} +1 -1
  189. package/dist/verdocs-web-sdk/p-67b93075.system.entry.js +1 -0
  190. package/dist/verdocs-web-sdk/p-794ce527.entry.js +1 -0
  191. package/dist/verdocs-web-sdk/{p-c1f51f1b.system.entry.js → p-7ae877b4.system.entry.js} +1 -1
  192. package/dist/verdocs-web-sdk/p-7dc5daed.entry.js +1 -0
  193. package/dist/verdocs-web-sdk/p-89d8a21e.entry.js +1 -0
  194. package/dist/verdocs-web-sdk/{p-e96924b5.system.entry.js → p-8b111775.system.entry.js} +1 -1
  195. package/dist/verdocs-web-sdk/p-8bbe0209.system.js +1 -0
  196. package/dist/verdocs-web-sdk/p-93aa6f6e.js +1 -0
  197. package/dist/verdocs-web-sdk/p-9d274e45.system.entry.js +1 -0
  198. package/dist/verdocs-web-sdk/{p-3b1711df.entry.js → p-a3326659.entry.js} +1 -1
  199. package/dist/verdocs-web-sdk/p-a7580374.entry.js +1 -0
  200. package/dist/verdocs-web-sdk/{p-623fe013.system.entry.js → p-a91615c2.system.entry.js} +1 -1
  201. package/dist/verdocs-web-sdk/{p-77ca800b.entry.js → p-ac6d0fb0.entry.js} +1 -1
  202. package/dist/verdocs-web-sdk/p-b5aee483.system.entry.js +1 -0
  203. package/dist/verdocs-web-sdk/{p-126c423d.entry.js → p-ba2aa74b.entry.js} +1 -1
  204. package/dist/verdocs-web-sdk/p-bce1fa90.system.entry.js +1 -0
  205. package/dist/verdocs-web-sdk/p-bd8918e3.system.entry.js +1 -0
  206. package/dist/verdocs-web-sdk/p-c10da56f.entry.js +1 -0
  207. package/dist/verdocs-web-sdk/{p-4be3b251.entry.js → p-c3c142f0.entry.js} +1 -1
  208. package/dist/verdocs-web-sdk/p-c67f893d.system.entry.js +1 -0
  209. package/dist/verdocs-web-sdk/p-c72dfb47.system.entry.js +1 -0
  210. package/dist/verdocs-web-sdk/{p-7a47fcd9.system.js → p-c90481a4.system.js} +1 -1
  211. package/dist/verdocs-web-sdk/p-c9e30988.system.entry.js +1 -0
  212. package/dist/verdocs-web-sdk/p-cd7bd84e.entry.js +1 -0
  213. package/dist/verdocs-web-sdk/p-cff1b0e9.entry.js +1 -0
  214. package/dist/verdocs-web-sdk/p-d4cd201f.system.entry.js +1 -0
  215. package/dist/verdocs-web-sdk/{p-cbe7b8c8.system.entry.js → p-d72dc783.system.entry.js} +1 -1
  216. package/dist/verdocs-web-sdk/p-d87c1330.system.js +1 -0
  217. package/dist/verdocs-web-sdk/{p-bfdbd210.entry.js → p-da9462c7.entry.js} +1 -1
  218. package/dist/verdocs-web-sdk/p-f04bf956.system.js +1 -1
  219. package/dist/verdocs-web-sdk/p-f59a30d0.entry.js +1 -0
  220. package/dist/verdocs-web-sdk/p-f9efd9ae.entry.js +1 -0
  221. package/dist/verdocs-web-sdk/p-fb73910e.entry.js +1 -0
  222. package/dist/verdocs-web-sdk/p-fc9067c0.system.entry.js +1 -0
  223. package/dist/verdocs-web-sdk/verdocs-web-sdk.esm.js +1 -1
  224. package/package.json +1 -1
  225. package/dist/custom-elements.json +0 -2175
  226. package/dist/esm-es5/TemplateStore-618fb47f.js +0 -1
  227. package/dist/verdocs-web-sdk/p-058f0e56.system.entry.js +0 -1
  228. package/dist/verdocs-web-sdk/p-093f593d.system.entry.js +0 -1
  229. package/dist/verdocs-web-sdk/p-09babc77.system.entry.js +0 -1
  230. package/dist/verdocs-web-sdk/p-0a5b8a89.entry.js +0 -1
  231. package/dist/verdocs-web-sdk/p-17245241.system.entry.js +0 -1
  232. package/dist/verdocs-web-sdk/p-18cb9ef7.system.entry.js +0 -1
  233. package/dist/verdocs-web-sdk/p-1b661190.entry.js +0 -1
  234. package/dist/verdocs-web-sdk/p-350f1ca4.system.entry.js +0 -1
  235. package/dist/verdocs-web-sdk/p-35720475.entry.js +0 -1
  236. package/dist/verdocs-web-sdk/p-371effb1.system.entry.js +0 -1
  237. package/dist/verdocs-web-sdk/p-3930ee22.js +0 -1
  238. package/dist/verdocs-web-sdk/p-3989e584.entry.js +0 -1
  239. package/dist/verdocs-web-sdk/p-3d9adca7.entry.js +0 -1
  240. package/dist/verdocs-web-sdk/p-413a5b21.entry.js +0 -1
  241. package/dist/verdocs-web-sdk/p-591b695c.entry.js +0 -1
  242. package/dist/verdocs-web-sdk/p-5cd0b997.entry.js +0 -1
  243. package/dist/verdocs-web-sdk/p-62ec3db9.system.entry.js +0 -1
  244. package/dist/verdocs-web-sdk/p-6d42921b.entry.js +0 -1
  245. package/dist/verdocs-web-sdk/p-6d81d774.entry.js +0 -1
  246. package/dist/verdocs-web-sdk/p-6e45e610.system.entry.js +0 -1
  247. package/dist/verdocs-web-sdk/p-71faa59f.entry.js +0 -1
  248. package/dist/verdocs-web-sdk/p-7c8419d7.system.entry.js +0 -1
  249. package/dist/verdocs-web-sdk/p-961ee618.system.entry.js +0 -1
  250. package/dist/verdocs-web-sdk/p-a97512f6.system.entry.js +0 -1
  251. package/dist/verdocs-web-sdk/p-aa29c7ec.system.entry.js +0 -1
  252. package/dist/verdocs-web-sdk/p-bc017ceb.entry.js +0 -1
  253. package/dist/verdocs-web-sdk/p-c11c841c.system.entry.js +0 -1
  254. package/dist/verdocs-web-sdk/p-c82a2a4e.system.entry.js +0 -1
  255. package/dist/verdocs-web-sdk/p-d32278c8.system.entry.js +0 -1
  256. package/dist/verdocs-web-sdk/p-df621f8d.system.js +0 -1
  257. package/dist/verdocs-web-sdk/p-ea52b891.entry.js +0 -1
  258. package/dist/verdocs-web-sdk/p-ebc1c670.entry.js +0 -1
  259. package/dist/verdocs-web-sdk/p-fda04bb0.entry.js +0 -1
  260. package/dist/verdocs-web-sdk/p-ff473972.entry.js +0 -1
  261. package/dist/verdocs-web-sdk/p-ffa4091d.entry.js +0 -1
@@ -2,24 +2,24 @@ import { format } from 'date-fns';
2
2
  import flatpickr from 'flatpickr';
3
3
  import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
4
4
  import { h, Host, Fragment } from '@stencil/core';
5
+ import { getRoleIndex, getTemplateRoleStore } from '../../../utils/TemplateRoleStore';
6
+ import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
5
7
  import { getFieldSettings } from '../../../utils/utils';
8
+ import { SettingsIcon } from '../../../utils/Icons';
6
9
  import { FORMAT_DATE } from '../../../utils/Types';
7
- import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
8
- const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
9
10
  /**
10
11
  * Displays a date field. When tapped or clicked, the input element will display a date picker component.
11
12
  */
12
13
  export class VerdocsFieldDate {
13
14
  constructor() {
14
15
  this.fieldStore = null;
16
+ this.roleStore = null;
15
17
  this.templateid = '';
16
18
  this.fieldname = '';
17
19
  this.disabled = false;
18
20
  this.editable = false;
19
21
  this.moveable = false;
20
22
  this.done = false;
21
- this.roleindex = 0;
22
- this.rerender = 0;
23
23
  this.xscale = 1;
24
24
  this.yscale = 1;
25
25
  this.containerId = `verdocs-date-picker-${Math.random().toString(36).substring(2, 11)}`;
@@ -30,6 +30,7 @@ export class VerdocsFieldDate {
30
30
  }
31
31
  async componentWillLoad() {
32
32
  this.fieldStore = getTemplateFieldStore(this.templateid);
33
+ this.roleStore = getTemplateRoleStore(this.templateid);
33
34
  }
34
35
  componentDidLoad() {
35
36
  const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
@@ -67,17 +68,18 @@ export class VerdocsFieldDate {
67
68
  render() {
68
69
  var _a, _b;
69
70
  const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
71
+ const roleIndex = getRoleIndex(this.roleStore, field.role_name);
72
+ const backgroundColor = field['rgba'] || getRGBA(roleIndex);
70
73
  if (!field) {
71
74
  return h(Fragment, null);
72
75
  }
73
76
  const settings = getFieldSettings(field);
74
77
  const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
75
- const backgroundColor = field['rgba'] || getRGBA(this.roleindex);
76
78
  if (this.done) {
77
79
  const formatted = (settings === null || settings === void 0 ? void 0 : settings.result) ? format(new Date(settings === null || settings === void 0 ? void 0 : settings.result), FORMAT_DATE) : '';
78
80
  return h(Host, { class: { done: this.done } }, formatted);
79
81
  }
80
- return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled }, style: { backgroundColor } }, h("input", { name: field.name, type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, ref: el => (this.el = el) }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: settingsIcon, onClick: (e) => {
82
+ return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled }, style: { backgroundColor } }, h("input", { name: field.name, type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, ref: el => (this.el = el) }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
81
83
  e.stopPropagation();
82
84
  this.showingProperties = !this.showingProperties;
83
85
  } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
@@ -211,42 +213,6 @@ export class VerdocsFieldDate {
211
213
  "reflect": false,
212
214
  "defaultValue": "false"
213
215
  },
214
- "roleindex": {
215
- "type": "number",
216
- "mutable": false,
217
- "complexType": {
218
- "original": "number",
219
- "resolved": "number",
220
- "references": {}
221
- },
222
- "required": false,
223
- "optional": true,
224
- "docs": {
225
- "tags": [],
226
- "text": "If set, the field will be colored using this index value to select the background color."
227
- },
228
- "attribute": "roleindex",
229
- "reflect": false,
230
- "defaultValue": "0"
231
- },
232
- "rerender": {
233
- "type": "number",
234
- "mutable": false,
235
- "complexType": {
236
- "original": "number",
237
- "resolved": "number",
238
- "references": {}
239
- },
240
- "required": false,
241
- "optional": true,
242
- "docs": {
243
- "tags": [],
244
- "text": "May be used to force the field to re-render."
245
- },
246
- "attribute": "rerender",
247
- "reflect": false,
248
- "defaultValue": "0"
249
- },
250
216
  "xscale": {
251
217
  "type": "number",
252
218
  "mutable": false,
@@ -1,8 +1,9 @@
1
1
  import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
2
2
  import { h, Host, Fragment } from '@stencil/core';
3
+ import { getRoleIndex, getTemplateRoleStore } from '../../../utils/TemplateRoleStore';
3
4
  import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
4
5
  import { getFieldSettings } from '../../../utils/utils';
5
- const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
6
+ import { SettingsIcon } from '../../../utils/Icons';
6
7
  /**
7
8
  * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as
8
9
  * input types like text and checkbox.
@@ -10,14 +11,13 @@ const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width=
10
11
  export class VerdocsFieldDropdown {
11
12
  constructor() {
12
13
  this.fieldStore = null;
14
+ this.roleStore = null;
13
15
  this.templateid = '';
14
16
  this.fieldname = '';
15
17
  this.disabled = false;
16
18
  this.editable = false;
17
19
  this.moveable = false;
18
20
  this.done = false;
19
- this.roleindex = 0;
20
- this.rerender = 0;
21
21
  this.xscale = 1;
22
22
  this.yscale = 1;
23
23
  this.showingProperties = false;
@@ -42,21 +42,23 @@ export class VerdocsFieldDropdown {
42
42
  }
43
43
  async componentWillLoad() {
44
44
  this.fieldStore = getTemplateFieldStore(this.templateid);
45
+ this.roleStore = getTemplateRoleStore(this.templateid);
45
46
  }
46
47
  render() {
47
48
  var _a, _b;
48
49
  const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
50
+ const roleIndex = getRoleIndex(this.roleStore, field.role_name);
51
+ const backgroundColor = field['rgba'] || getRGBA(roleIndex);
49
52
  if (!field) {
50
53
  return h(Fragment, null);
51
54
  }
52
55
  const settings = getFieldSettings(field);
53
56
  const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
54
- const backgroundColor = field['rgba'] || getRGBA(this.roleindex);
55
57
  const value = (settings === null || settings === void 0 ? void 0 : settings.value) || '';
56
58
  if (this.done) {
57
59
  return h(Host, { class: { done: this.done } }, value);
58
60
  }
59
- return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("select", { tabIndex: settings.order, disabled: disabled, ref: el => (this.el = el), onChange: e => this.handleChange(e) }, h("option", { value: "" }, "Select..."), (settings.options || []).map(option => (h("option", { value: option.id, selected: option.value === value }, option.value)))), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: settingsIcon, onClick: (e) => {
61
+ return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("select", { tabIndex: settings.order, disabled: disabled, ref: el => (this.el = el), onChange: e => this.handleChange(e) }, h("option", { value: "" }, "Select..."), (settings.options || []).map(option => (h("option", { value: option.id, selected: option.value === value }, option.value)))), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
60
62
  e.stopPropagation();
61
63
  this.showingProperties = !this.showingProperties;
62
64
  } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
@@ -190,42 +192,6 @@ export class VerdocsFieldDropdown {
190
192
  "reflect": false,
191
193
  "defaultValue": "false"
192
194
  },
193
- "roleindex": {
194
- "type": "number",
195
- "mutable": false,
196
- "complexType": {
197
- "original": "number",
198
- "resolved": "number",
199
- "references": {}
200
- },
201
- "required": false,
202
- "optional": true,
203
- "docs": {
204
- "tags": [],
205
- "text": "If set, the field will be colored using this index value to select the background color."
206
- },
207
- "attribute": "roleindex",
208
- "reflect": false,
209
- "defaultValue": "0"
210
- },
211
- "rerender": {
212
- "type": "number",
213
- "mutable": false,
214
- "complexType": {
215
- "original": "number",
216
- "resolved": "number",
217
- "references": {}
218
- },
219
- "required": false,
220
- "optional": true,
221
- "docs": {
222
- "tags": [],
223
- "text": "May be used to force the field to re-render."
224
- },
225
- "attribute": "rerender",
226
- "reflect": false,
227
- "defaultValue": "0"
228
- },
229
195
  "xscale": {
230
196
  "type": "number",
231
197
  "mutable": false,
@@ -1,8 +1,9 @@
1
1
  import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
2
2
  import { h, Host, Fragment } from '@stencil/core';
3
+ import { getRoleIndex, getTemplateRoleStore } from '../../../utils/TemplateRoleStore';
3
4
  import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
4
5
  import { getFieldSettings } from '../../../utils/utils';
5
- const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
6
+ import { SettingsIcon } from '../../../utils/Icons';
6
7
  /**
7
8
  * Displays an initial field. If an initial already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder
8
9
  * button will be shown. Clicking the button will show a dialog to adopt an initial.
@@ -10,6 +11,7 @@ const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width=
10
11
  export class VerdocsFieldInitial {
11
12
  constructor() {
12
13
  this.fieldStore = null;
14
+ this.roleStore = null;
13
15
  this.templateid = '';
14
16
  this.fieldname = '';
15
17
  this.disabled = false;
@@ -17,8 +19,6 @@ export class VerdocsFieldInitial {
17
19
  this.editable = false;
18
20
  this.moveable = false;
19
21
  this.done = false;
20
- this.roleindex = 0;
21
- this.rerender = 0;
22
22
  this.xscale = 1;
23
23
  this.yscale = 1;
24
24
  this.showingProperties = false;
@@ -29,6 +29,7 @@ export class VerdocsFieldInitial {
29
29
  }
30
30
  async componentWillLoad() {
31
31
  this.fieldStore = getTemplateFieldStore(this.templateid);
32
+ this.roleStore = getTemplateRoleStore(this.templateid);
32
33
  }
33
34
  hideDialog() {
34
35
  var _a;
@@ -45,7 +46,7 @@ export class VerdocsFieldInitial {
45
46
  handleShow() {
46
47
  this.dialog = document.createElement('verdocs-initial-dialog');
47
48
  this.dialog.setAttribute('initials', this.initials);
48
- this.dialog.setAttribute('roleindex', this.roleindex);
49
+ // this.dialog.setAttribute('roleindex', this.roleindex);
49
50
  this.dialog.addEventListener('exit', () => this.hideDialog());
50
51
  this.dialog.addEventListener('next', e => this.handleAdopt(e));
51
52
  document.body.append(this.dialog);
@@ -65,17 +66,18 @@ export class VerdocsFieldInitial {
65
66
  render() {
66
67
  var _a, _b;
67
68
  const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
69
+ const roleIndex = getRoleIndex(this.roleStore, field.role_name);
70
+ const backgroundColor = field['rgba'] || getRGBA(roleIndex);
68
71
  if (!field) {
69
72
  return h(Fragment, null);
70
73
  }
71
74
  const settings = getFieldSettings(field);
72
75
  const value = settings.base64 || this.tempInitials;
73
76
  const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
74
- const backgroundColor = field['rgba'] || getRGBA(this.roleindex);
75
77
  if (this.done) {
76
78
  return h(Host, { class: { done: this.done } }, value && h("img", { src: value, alt: "Initials" }));
77
79
  }
78
- return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled }, style: { backgroundColor } }, value ? (h("img", { src: value, alt: "Initials" })) : (h("button", { class: {}, onClick: () => !disabled && this.handleShow() }, "Initials")), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: settingsIcon, onClick: (e) => {
80
+ return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled }, style: { backgroundColor } }, value ? (h("img", { src: value, alt: "Initials" })) : (h("button", { class: {}, onClick: () => !disabled && this.handleShow() }, "Initials")), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
79
81
  e.stopPropagation();
80
82
  this.showingProperties = !this.showingProperties;
81
83
  } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${this.fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
@@ -227,42 +229,6 @@ export class VerdocsFieldInitial {
227
229
  "reflect": false,
228
230
  "defaultValue": "false"
229
231
  },
230
- "roleindex": {
231
- "type": "number",
232
- "mutable": false,
233
- "complexType": {
234
- "original": "number",
235
- "resolved": "number",
236
- "references": {}
237
- },
238
- "required": false,
239
- "optional": true,
240
- "docs": {
241
- "tags": [],
242
- "text": "If set, the field will be colored using this index value to select the background color."
243
- },
244
- "attribute": "roleindex",
245
- "reflect": false,
246
- "defaultValue": "0"
247
- },
248
- "rerender": {
249
- "type": "number",
250
- "mutable": false,
251
- "complexType": {
252
- "original": "number",
253
- "resolved": "number",
254
- "references": {}
255
- },
256
- "required": false,
257
- "optional": true,
258
- "docs": {
259
- "tags": [],
260
- "text": "May be used to force the field to re-render."
261
- },
262
- "attribute": "rerender",
263
- "reflect": false,
264
- "defaultValue": "0"
265
- },
266
232
  "xscale": {
267
233
  "type": "number",
268
234
  "mutable": false,
@@ -1,5 +1,6 @@
1
1
  import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
2
2
  import { h, Host, Fragment } from '@stencil/core';
3
+ import { getRoleIndex, getTemplateRoleStore } from '../../../utils/TemplateRoleStore';
3
4
  import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
4
5
  import { getFieldSettings } from '../../../utils/utils';
5
6
  /**
@@ -9,6 +10,7 @@ import { getFieldSettings } from '../../../utils/utils';
9
10
  export class VerdocsFieldPayment {
10
11
  constructor() {
11
12
  this.fieldStore = null;
13
+ this.roleStore = null;
12
14
  this.templateid = '';
13
15
  this.fieldname = '';
14
16
  this.disabled = false;
@@ -27,7 +29,6 @@ export class VerdocsFieldPayment {
27
29
  this.signed = false;
28
30
  this.xscale = 1;
29
31
  this.yscale = 1;
30
- this.rerender = 0;
31
32
  this.preparedMessage = undefined;
32
33
  this.signatureUrl = '';
33
34
  this.roleindex = 0;
@@ -35,6 +36,7 @@ export class VerdocsFieldPayment {
35
36
  }
36
37
  componentWillLoad() {
37
38
  this.fieldStore = getTemplateFieldStore(this.templateid);
39
+ this.roleStore = getTemplateRoleStore(this.templateid);
38
40
  // Load validators
39
41
  // Load fields
40
42
  // Get role names
@@ -61,13 +63,13 @@ export class VerdocsFieldPayment {
61
63
  render() {
62
64
  var _a, _b;
63
65
  const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
66
+ const roleIndex = getRoleIndex(this.roleStore, field.role_name);
67
+ const backgroundColor = field['rgba'] || getRGBA(roleIndex);
64
68
  if (!field) {
65
69
  return h(Fragment, null);
66
70
  }
67
71
  const settings = getFieldSettings(field);
68
72
  const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
69
- console.log('Payment field', settings);
70
- const backgroundColor = field['rgba'] || getRGBA(this.roleindex);
71
73
  return (h(Host, { class: { focused: this.focused, disabled }, style: { backgroundColor } }, h("button", { class: { hide: this.signed } }, "$"), this.signed ? h("div", { class: "frame" }) : h("div", { style: { display: 'none' } }), h("img", { width: "100%", height: "100%", src: this.signatureUrl, alt: "Payment Icon" })));
72
74
  }
73
75
  static get is() { return "verdocs-field-payment"; }
@@ -392,24 +394,6 @@ export class VerdocsFieldPayment {
392
394
  "reflect": false,
393
395
  "defaultValue": "1"
394
396
  },
395
- "rerender": {
396
- "type": "number",
397
- "mutable": false,
398
- "complexType": {
399
- "original": "number",
400
- "resolved": "number",
401
- "references": {}
402
- },
403
- "required": false,
404
- "optional": true,
405
- "docs": {
406
- "tags": [],
407
- "text": "May be used to force the field to re-render."
408
- },
409
- "attribute": "rerender",
410
- "reflect": false,
411
- "defaultValue": "0"
412
- },
413
397
  "roleindex": {
414
398
  "type": "number",
415
399
  "mutable": false,
@@ -1,25 +1,25 @@
1
1
  import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
2
2
  import { h, Host, Fragment } from '@stencil/core';
3
+ import { getRoleIndex, getTemplateRoleStore } from '../../../utils/TemplateRoleStore';
3
4
  import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
4
5
  import { getFieldSettings } from '../../../utils/utils';
6
+ import { SettingsIcon } from '../../../utils/Icons';
5
7
  const RadioIconUnselected = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>`;
6
8
  const RadioIconSelected = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>`;
7
- const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
8
9
  /**
9
10
  * Displays a radio button.
10
11
  */
11
12
  export class VerdocsFieldRadioButton {
12
13
  constructor() {
13
14
  this.fieldStore = null;
15
+ this.roleStore = null;
14
16
  this.templateid = '';
15
17
  this.fieldname = '';
16
18
  this.option = 0;
17
19
  this.disabled = false;
18
20
  this.done = false;
19
- this.roleindex = 0;
20
21
  this.editable = false;
21
22
  this.moveable = false;
22
- this.rerender = 0;
23
23
  this.xscale = 1;
24
24
  this.yscale = 1;
25
25
  this.showingProperties = false;
@@ -38,23 +38,25 @@ export class VerdocsFieldRadioButton {
38
38
  }
39
39
  async componentWillLoad() {
40
40
  this.fieldStore = getTemplateFieldStore(this.templateid);
41
+ this.roleStore = getTemplateRoleStore(this.templateid);
41
42
  }
42
43
  render() {
43
44
  var _a, _b;
44
45
  const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
46
+ const roleIndex = getRoleIndex(this.roleStore, field.role_name);
47
+ const backgroundColor = field['rgba'] || getRGBA(roleIndex);
45
48
  if (!field) {
46
49
  return h(Fragment, null);
47
50
  }
48
51
  const settings = getFieldSettings(field);
49
52
  const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
50
- const backgroundColor = field['rgba'] || getRGBA(this.roleindex);
51
53
  const required = field.required;
52
54
  const option = settings.options[this.option];
53
55
  const id = `${field.name}-${option.id}`;
54
56
  if (this.done) {
55
57
  return (h(Host, { class: { done: this.done }, style: { maxWidth: '10px' } }, h("span", { innerHTML: !!option.selected ? RadioIconSelected : RadioIconUnselected })));
56
58
  }
57
- return (h(Host, { class: { required, disabled }, style: { backgroundColor } }, h("input", { id: id, type: "radio", name: field.name, value: option.id, tabIndex: settings.order, checked: !!option.selected, disabled: disabled, required: settings.required }), h("label", { htmlFor: id }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: settingsIcon, onClick: (e) => {
59
+ return (h(Host, { class: { required, disabled }, style: { backgroundColor } }, h("input", { id: id, type: "radio", name: field.name, value: option.id, tabIndex: settings.order, checked: !!option.selected, disabled: disabled, required: settings.required }), h("label", { htmlFor: id }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
58
60
  e.stopPropagation();
59
61
  this.showingProperties = !this.showingProperties;
60
62
  } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
@@ -170,24 +172,6 @@ export class VerdocsFieldRadioButton {
170
172
  "reflect": false,
171
173
  "defaultValue": "false"
172
174
  },
173
- "roleindex": {
174
- "type": "number",
175
- "mutable": false,
176
- "complexType": {
177
- "original": "number",
178
- "resolved": "number",
179
- "references": {}
180
- },
181
- "required": false,
182
- "optional": true,
183
- "docs": {
184
- "tags": [],
185
- "text": "If set, the field will be colored using this index value to select the background color."
186
- },
187
- "attribute": "roleindex",
188
- "reflect": false,
189
- "defaultValue": "0"
190
- },
191
175
  "editable": {
192
176
  "type": "boolean",
193
177
  "mutable": false,
@@ -224,24 +208,6 @@ export class VerdocsFieldRadioButton {
224
208
  "reflect": false,
225
209
  "defaultValue": "false"
226
210
  },
227
- "rerender": {
228
- "type": "number",
229
- "mutable": false,
230
- "complexType": {
231
- "original": "number",
232
- "resolved": "number",
233
- "references": {}
234
- },
235
- "required": false,
236
- "optional": true,
237
- "docs": {
238
- "tags": [],
239
- "text": "May be used to force the field to re-render."
240
- },
241
- "attribute": "rerender",
242
- "reflect": false,
243
- "defaultValue": "0"
244
- },
245
211
  "xscale": {
246
212
  "type": "number",
247
213
  "mutable": false,
@@ -1,8 +1,9 @@
1
1
  import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
2
2
  import { h, Host, Fragment } from '@stencil/core';
3
+ import { getRoleIndex, getTemplateRoleStore } from '../../../utils/TemplateRoleStore';
3
4
  import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
4
5
  import { getFieldSettings } from '../../../utils/utils';
5
- const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
6
+ import { SettingsIcon } from '../../../utils/Icons';
6
7
  /**
7
8
  * Displays a signature field. If a signature already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder
8
9
  * button will be shown. Clicking the button will show a dialog to adopt a signature.
@@ -10,6 +11,7 @@ const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width=
10
11
  export class VerdocsFieldSignature {
11
12
  constructor() {
12
13
  this.fieldStore = null;
14
+ this.roleStore = null;
13
15
  this.templateid = '';
14
16
  this.fieldname = '';
15
17
  this.name = '';
@@ -17,8 +19,6 @@ export class VerdocsFieldSignature {
17
19
  this.editable = false;
18
20
  this.moveable = false;
19
21
  this.done = false;
20
- this.roleindex = 0;
21
- this.rerender = 0;
22
22
  this.xscale = 1;
23
23
  this.yscale = 1;
24
24
  this.showingProperties = false;
@@ -43,7 +43,7 @@ export class VerdocsFieldSignature {
43
43
  handleShow() {
44
44
  this.dialog = document.createElement('verdocs-signature-dialog');
45
45
  this.dialog.setAttribute('name', this.name);
46
- this.dialog.setAttribute('roleindex', this.roleindex);
46
+ // this.dialog.setAttribute('roleindex', this.roleindex);
47
47
  this.dialog.addEventListener('exit', () => this.hideDialog());
48
48
  this.dialog.addEventListener('next', e => this.handleAdopt(e));
49
49
  document.body.append(this.dialog);
@@ -62,21 +62,23 @@ export class VerdocsFieldSignature {
62
62
  }
63
63
  async componentWillLoad() {
64
64
  this.fieldStore = getTemplateFieldStore(this.templateid);
65
+ this.roleStore = getTemplateRoleStore(this.templateid);
65
66
  }
66
67
  render() {
67
68
  var _a, _b;
68
69
  const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
70
+ const roleIndex = getRoleIndex(this.roleStore, field.role_name);
71
+ const backgroundColor = field['rgba'] || getRGBA(roleIndex);
69
72
  if (!field) {
70
73
  return h(Fragment, null);
71
74
  }
72
75
  const settings = getFieldSettings(field);
73
76
  const value = settings.base64 || this.tempSignature;
74
77
  const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
75
- const backgroundColor = field['rgba'] || getRGBA(this.roleindex);
76
78
  if (this.done) {
77
79
  return h(Host, { class: { done: this.done } }, value && h("img", { src: value, alt: "Signature" }));
78
80
  }
79
- return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled }, style: { backgroundColor } }, value ? h("img", { src: value, alt: "Signature" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: settingsIcon, onClick: (e) => {
81
+ return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled }, style: { backgroundColor } }, value ? h("img", { src: value, alt: "Signature" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
80
82
  e.stopPropagation();
81
83
  this.showingProperties = !this.showingProperties;
82
84
  } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
@@ -228,42 +230,6 @@ export class VerdocsFieldSignature {
228
230
  "reflect": false,
229
231
  "defaultValue": "false"
230
232
  },
231
- "roleindex": {
232
- "type": "number",
233
- "mutable": false,
234
- "complexType": {
235
- "original": "number",
236
- "resolved": "number",
237
- "references": {}
238
- },
239
- "required": false,
240
- "optional": true,
241
- "docs": {
242
- "tags": [],
243
- "text": "If set, the field will be colored using this index value to select the background color."
244
- },
245
- "attribute": "roleindex",
246
- "reflect": false,
247
- "defaultValue": "0"
248
- },
249
- "rerender": {
250
- "type": "number",
251
- "mutable": false,
252
- "complexType": {
253
- "original": "number",
254
- "resolved": "number",
255
- "references": {}
256
- },
257
- "required": false,
258
- "optional": true,
259
- "docs": {
260
- "tags": [],
261
- "text": "May be used to force the field to re-render."
262
- },
263
- "attribute": "rerender",
264
- "reflect": false,
265
- "defaultValue": "0"
266
- },
267
233
  "xscale": {
268
234
  "type": "number",
269
235
  "mutable": false,