@unifylib/ui-lib 1.1.3 → 1.1.5

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 (286) hide show
  1. package/esm2022/iq-ui-lib.mjs +5 -0
  2. package/esm2022/lib/base-model/SearchStrConfig.mjs +11 -0
  3. package/esm2022/lib/base-model/api-response.mjs +2 -0
  4. package/esm2022/lib/base-model/audit-log-entry.mjs +3 -0
  5. package/esm2022/lib/base-model/button-action-settings.mjs +16 -0
  6. package/esm2022/lib/base-model/column-def.model.mjs +28 -0
  7. package/esm2022/lib/base-model/do-action-request.mjs +8 -0
  8. package/esm2022/lib/base-model/field-action.mjs +6 -0
  9. package/esm2022/lib/base-model/field-filter.model.mjs +3 -0
  10. package/esm2022/lib/base-model/field-info.mjs +57 -0
  11. package/esm2022/lib/base-model/field-predicate.model.mjs +10 -0
  12. package/esm2022/lib/base-model/filter-request.mjs +13 -0
  13. package/esm2022/lib/base-model/filter.model.mjs +25 -0
  14. package/esm2022/lib/base-model/get-items-list.mjs +10 -0
  15. package/esm2022/lib/base-model/index.mjs +12 -0
  16. package/esm2022/lib/base-model/items-total.model.mjs +8 -0
  17. package/esm2022/lib/base-model/line-item.model.mjs +11 -0
  18. package/esm2022/lib/base-model/lookupItem.mjs +16 -0
  19. package/esm2022/lib/base-model/page-info.mjs +17 -0
  20. package/esm2022/lib/base-model/report-request.model.mjs +17 -0
  21. package/esm2022/lib/base-model/response-envelop.model.mjs +10 -0
  22. package/esm2022/lib/base-model/snack-message.model.mjs +11 -0
  23. package/esm2022/lib/base-model/table-column.interface.mjs +2 -0
  24. package/esm2022/lib/base-model/table-page-user-action.interface.mjs +21 -0
  25. package/esm2022/lib/base-model/workflow/workflow-steps.model.mjs +9 -0
  26. package/esm2022/lib/base-model/workflow/workflow.model.mjs +42 -0
  27. package/esm2022/lib/components/action-comment/action-comment.component.mjs +101 -0
  28. package/esm2022/lib/components/action-confirmation/action-confirmation.component.mjs +55 -0
  29. package/esm2022/lib/components/activity-report-form/activity-report-form.component.mjs +499 -0
  30. package/esm2022/lib/components/advanced-filter/field-filter/field-filter.component.mjs +41 -0
  31. package/esm2022/lib/components/advanced-filter/filter-builder/filter-builder.component.mjs +162 -0
  32. package/esm2022/lib/components/audit-log-details-dialog/audit-log-details-dialog.component.mjs +70 -0
  33. package/esm2022/lib/components/audit-log-list/audit-log.component.mjs +99 -0
  34. package/esm2022/lib/components/auto-complete/auto-complete.component.mjs +292 -0
  35. package/esm2022/lib/components/base-form/base-form.component.mjs +297 -0
  36. package/esm2022/lib/components/base-form-canvas/base-form-canvas.component.mjs +591 -0
  37. package/esm2022/lib/components/base-input-dialog/base-input-dialog.component.mjs +72 -0
  38. package/esm2022/lib/components/base-table/base-table.component.mjs +514 -0
  39. package/esm2022/lib/components/button-actions/button-actions.component.mjs +70 -0
  40. package/esm2022/lib/components/editable-base-table/editable-base-table.component.mjs +496 -0
  41. package/esm2022/lib/components/equation-builder/equation-builder.component.mjs +112 -0
  42. package/esm2022/lib/components/item-line-editor/item-line-editor.component.mjs +299 -0
  43. package/esm2022/lib/components/multi-auto-complete/multi-auto-complete.component.mjs +278 -0
  44. package/esm2022/lib/components/paginator/paginator.component.mjs +91 -0
  45. package/esm2022/lib/components/report-details-dialog/report-details-dialog.component.mjs +102 -0
  46. package/esm2022/lib/components/report-form/report-form.component.mjs +498 -0
  47. package/esm2022/lib/components/search-bar/search-bar.component.mjs +62 -0
  48. package/esm2022/lib/components/section-form-canvas/section-form-canvas.component.mjs +81 -0
  49. package/esm2022/lib/components/shared/action-button/action-button.component.mjs +59 -0
  50. package/esm2022/lib/components/shared/action-card/action-card.component.mjs +93 -0
  51. package/esm2022/lib/components/shared/attachment-uploader/attachment-uploader.component.mjs +70 -0
  52. package/esm2022/lib/components/shared-list/shared-list.component.mjs +47 -0
  53. package/esm2022/lib/components/snackbar-static/snackbar-static.component.mjs +43 -0
  54. package/esm2022/lib/components/title-bar/title-bar.component.mjs +119 -0
  55. package/esm2022/lib/services/backend-service.mjs +240 -0
  56. package/esm2022/lib/services/index.mjs +4 -0
  57. package/esm2022/lib/services/top-panel.mjs +22 -0
  58. package/esm2022/lib/services/trigger-form.service.mjs +17 -0
  59. package/esm2022/lib/utils/base-utils.mjs +97 -0
  60. package/esm2022/lib/validators/date-range-validator.mjs +27 -0
  61. package/esm2022/lib/validators/index.mjs +4 -0
  62. package/esm2022/lib/validators/match-list.validator.mjs +9 -0
  63. package/esm2022/lib/validators/multi-email-validator.mjs +13 -0
  64. package/esm2022/public-api.mjs +29 -0
  65. package/esm2022/q-btech-ui-lib.mjs +5 -0
  66. package/esm2022/unifylib-ui-lib.mjs +5 -0
  67. package/fesm2022/iq-ui-lib.mjs +5625 -0
  68. package/fesm2022/iq-ui-lib.mjs.map +1 -0
  69. package/fesm2022/q-btech-ui-lib.mjs +5619 -0
  70. package/fesm2022/q-btech-ui-lib.mjs.map +1 -0
  71. package/fesm2022/unifylib-ui-lib.mjs +5625 -0
  72. package/fesm2022/unifylib-ui-lib.mjs.map +1 -0
  73. package/index.d.ts +5 -0
  74. package/lib/base-model/SearchStrConfig.d.ts +8 -0
  75. package/{src/lib/base-model/api-response.ts → lib/base-model/api-response.d.ts} +21 -23
  76. package/lib/base-model/audit-log-entry.d.ts +7 -0
  77. package/lib/base-model/button-action-settings.d.ts +15 -0
  78. package/lib/base-model/column-def.model.d.ts +11 -0
  79. package/lib/base-model/do-action-request.d.ts +10 -0
  80. package/lib/base-model/field-action.d.ts +6 -0
  81. package/lib/base-model/field-filter.model.d.ts +7 -0
  82. package/lib/base-model/field-info.d.ts +53 -0
  83. package/lib/base-model/field-predicate.model.d.ts +7 -0
  84. package/lib/base-model/filter-request.d.ts +15 -0
  85. package/lib/base-model/filter.model.d.ts +22 -0
  86. package/lib/base-model/get-items-list.d.ts +21 -0
  87. package/lib/base-model/index.d.ts +11 -0
  88. package/lib/base-model/items-total.model.d.ts +6 -0
  89. package/lib/base-model/line-item.model.d.ts +9 -0
  90. package/lib/base-model/lookupItem.d.ts +13 -0
  91. package/lib/base-model/page-info.d.ts +52 -0
  92. package/lib/base-model/report-request.model.d.ts +18 -0
  93. package/lib/base-model/response-envelop.model.d.ts +8 -0
  94. package/lib/base-model/snack-message.model.d.ts +7 -0
  95. package/lib/base-model/table-column.interface.d.ts +28 -0
  96. package/lib/base-model/table-page-user-action.interface.d.ts +14 -0
  97. package/lib/base-model/workflow/workflow-steps.model.d.ts +7 -0
  98. package/lib/base-model/workflow/workflow.model.d.ts +13 -0
  99. package/lib/components/action-comment/action-comment.component.d.ts +32 -0
  100. package/lib/components/action-confirmation/action-confirmation.component.d.ts +19 -0
  101. package/lib/components/activity-report-form/activity-report-form.component.d.ts +93 -0
  102. package/lib/components/advanced-filter/field-filter/field-filter.component.d.ts +20 -0
  103. package/lib/components/advanced-filter/filter-builder/filter-builder.component.d.ts +28 -0
  104. package/lib/components/audit-log-details-dialog/audit-log-details-dialog.component.d.ts +25 -0
  105. package/lib/components/audit-log-list/audit-log.component.d.ts +36 -0
  106. package/lib/components/auto-complete/auto-complete.component.d.ts +51 -0
  107. package/lib/components/base-form/base-form.component.d.ts +59 -0
  108. package/lib/components/base-form-canvas/base-form-canvas.component.d.ts +124 -0
  109. package/lib/components/base-input-dialog/base-input-dialog.component.d.ts +23 -0
  110. package/lib/components/base-table/base-table.component.d.ts +128 -0
  111. package/lib/components/button-actions/button-actions.component.d.ts +17 -0
  112. package/lib/components/editable-base-table/editable-base-table.component.d.ts +106 -0
  113. package/lib/components/equation-builder/equation-builder.component.d.ts +23 -0
  114. package/lib/components/item-line-editor/item-line-editor.component.d.ts +64 -0
  115. package/lib/components/multi-auto-complete/multi-auto-complete.component.d.ts +51 -0
  116. package/lib/components/paginator/paginator.component.d.ts +26 -0
  117. package/lib/components/report-details-dialog/report-details-dialog.component.d.ts +34 -0
  118. package/lib/components/report-form/report-form.component.d.ts +92 -0
  119. package/lib/components/search-bar/search-bar.component.d.ts +29 -0
  120. package/lib/components/section-form-canvas/section-form-canvas.component.d.ts +27 -0
  121. package/lib/components/shared/action-button/action-button.component.d.ts +17 -0
  122. package/lib/components/shared/action-card/action-card.component.d.ts +37 -0
  123. package/lib/components/shared/attachment-uploader/attachment-uploader.component.d.ts +16 -0
  124. package/lib/components/shared-list/shared-list.component.d.ts +21 -0
  125. package/lib/components/snackbar-static/snackbar-static.component.d.ts +15 -0
  126. package/lib/components/title-bar/title-bar.component.d.ts +42 -0
  127. package/lib/services/backend-service.d.ts +59 -0
  128. package/{src/lib/services/index.ts → lib/services/index.d.ts} +3 -3
  129. package/lib/services/top-panel.d.ts +8 -0
  130. package/lib/services/trigger-form.service.d.ts +7 -0
  131. package/lib/utils/base-utils.d.ts +13 -0
  132. package/lib/validators/date-range-validator.d.ts +2 -0
  133. package/{src/lib/validators/index.ts → lib/validators/index.d.ts} +3 -3
  134. package/lib/validators/match-list.validator.d.ts +4 -0
  135. package/lib/validators/multi-email-validator.d.ts +6 -0
  136. package/package.json +27 -14
  137. package/{src/public-api.ts → public-api.d.ts} +25 -29
  138. package/ng-package.json +0 -7
  139. package/src/lib/base-model/SearchStrConfig.ts +0 -12
  140. package/src/lib/base-model/audit-log-entry.ts +0 -7
  141. package/src/lib/base-model/button-action-settings.ts +0 -29
  142. package/src/lib/base-model/column-def.model.ts +0 -34
  143. package/src/lib/base-model/do-action-request.ts +0 -11
  144. package/src/lib/base-model/feature-item.ts +0 -9
  145. package/src/lib/base-model/field-action.ts +0 -7
  146. package/src/lib/base-model/field-filter.model.ts +0 -7
  147. package/src/lib/base-model/field-info.ts +0 -102
  148. package/src/lib/base-model/field-predicate.model.ts +0 -7
  149. package/src/lib/base-model/filter-request.ts +0 -27
  150. package/src/lib/base-model/filter.model.ts +0 -49
  151. package/src/lib/base-model/get-items-list.ts +0 -24
  152. package/src/lib/base-model/index.ts +0 -11
  153. package/src/lib/base-model/items-total.model.ts +0 -12
  154. package/src/lib/base-model/line-item.model.ts +0 -18
  155. package/src/lib/base-model/lookupItem.ts +0 -21
  156. package/src/lib/base-model/null-snackmessage.ts +0 -9
  157. package/src/lib/base-model/page-info.ts +0 -54
  158. package/src/lib/base-model/report-request.model.ts +0 -33
  159. package/src/lib/base-model/response-envelop.model.ts +0 -15
  160. package/src/lib/base-model/snack-message.model.ts +0 -14
  161. package/src/lib/base-model/snackmessage-interface.ts +0 -7
  162. package/src/lib/base-model/table-column.interface.ts +0 -29
  163. package/src/lib/base-model/table-page-user-action.interface.ts +0 -33
  164. package/src/lib/base-model/workflow/workflow-steps.model.ts +0 -9
  165. package/src/lib/base-model/workflow/workflow.model.ts +0 -52
  166. package/src/lib/components/action-comment/action-comment.component.css +0 -52
  167. package/src/lib/components/action-comment/action-comment.component.html +0 -47
  168. package/src/lib/components/action-comment/action-comment.component.spec.ts +0 -23
  169. package/src/lib/components/action-comment/action-comment.component.ts +0 -102
  170. package/src/lib/components/action-confirmation/action-confirmation.component.css +0 -46
  171. package/src/lib/components/action-confirmation/action-confirmation.component.html +0 -32
  172. package/src/lib/components/action-confirmation/action-confirmation.component.spec.ts +0 -23
  173. package/src/lib/components/action-confirmation/action-confirmation.component.ts +0 -58
  174. package/src/lib/components/activity-report-form/activity-report-form.component.html +0 -110
  175. package/src/lib/components/activity-report-form/activity-report-form.component.scss +0 -69
  176. package/src/lib/components/activity-report-form/activity-report-form.component.spec.ts +0 -25
  177. package/src/lib/components/activity-report-form/activity-report-form.component.ts +0 -616
  178. package/src/lib/components/advanced-filter/field-filter/field-filter.component.html +0 -8
  179. package/src/lib/components/advanced-filter/field-filter/field-filter.component.scss +0 -0
  180. package/src/lib/components/advanced-filter/field-filter/field-filter.component.spec.ts +0 -25
  181. package/src/lib/components/advanced-filter/field-filter/field-filter.component.ts +0 -55
  182. package/src/lib/components/advanced-filter/filter-builder/filter-builder.component.html +0 -36
  183. package/src/lib/components/advanced-filter/filter-builder/filter-builder.component.scss +0 -130
  184. package/src/lib/components/advanced-filter/filter-builder/filter-builder.component.spec.ts +0 -25
  185. package/src/lib/components/advanced-filter/filter-builder/filter-builder.component.ts +0 -186
  186. package/src/lib/components/audit-log-details-dialog/audit-log-details-dialog.component.css +0 -51
  187. package/src/lib/components/audit-log-details-dialog/audit-log-details-dialog.component.html +0 -23
  188. package/src/lib/components/audit-log-details-dialog/audit-log-details-dialog.component.spec.ts +0 -23
  189. package/src/lib/components/audit-log-details-dialog/audit-log-details-dialog.component.ts +0 -69
  190. package/src/lib/components/audit-log-list/audit-log.component.html +0 -26
  191. package/src/lib/components/audit-log-list/audit-log.component.scss +0 -50
  192. package/src/lib/components/audit-log-list/audit-log.component.spec.ts +0 -25
  193. package/src/lib/components/audit-log-list/audit-log.component.ts +0 -114
  194. package/src/lib/components/auto-complete/auto-complete.component.css +0 -55
  195. package/src/lib/components/auto-complete/auto-complete.component.html +0 -45
  196. package/src/lib/components/auto-complete/auto-complete.component.spec.ts +0 -23
  197. package/src/lib/components/auto-complete/auto-complete.component.ts +0 -331
  198. package/src/lib/components/base-form/base-form.component.html +0 -59
  199. package/src/lib/components/base-form/base-form.component.scss +0 -68
  200. package/src/lib/components/base-form/base-form.component.spec.ts +0 -25
  201. package/src/lib/components/base-form/base-form.component.ts +0 -323
  202. package/src/lib/components/base-form-canvas/base-form-canvas.component.css +0 -196
  203. package/src/lib/components/base-form-canvas/base-form-canvas.component.html +0 -1095
  204. package/src/lib/components/base-form-canvas/base-form-canvas.component.spec.ts +0 -23
  205. package/src/lib/components/base-form-canvas/base-form-canvas.component.ts +0 -680
  206. package/src/lib/components/base-input-dialog/base-input-dialog.component.css +0 -67
  207. package/src/lib/components/base-input-dialog/base-input-dialog.component.html +0 -47
  208. package/src/lib/components/base-input-dialog/base-input-dialog.component.spec.ts +0 -23
  209. package/src/lib/components/base-input-dialog/base-input-dialog.component.ts +0 -77
  210. package/src/lib/components/base-table/base-table.component.html +0 -268
  211. package/src/lib/components/base-table/base-table.component.scss +0 -140
  212. package/src/lib/components/base-table/base-table.component.spec.ts +0 -25
  213. package/src/lib/components/base-table/base-table.component.ts +0 -621
  214. package/src/lib/components/button-actions/button-actions.component.html +0 -27
  215. package/src/lib/components/button-actions/button-actions.component.scss +0 -101
  216. package/src/lib/components/button-actions/button-actions.component.spec.ts +0 -23
  217. package/src/lib/components/button-actions/button-actions.component.ts +0 -70
  218. package/src/lib/components/editable-base-table/editable-base-table.component.html +0 -337
  219. package/src/lib/components/editable-base-table/editable-base-table.component.scss +0 -126
  220. package/src/lib/components/editable-base-table/editable-base-table.component.spec.ts +0 -25
  221. package/src/lib/components/editable-base-table/editable-base-table.component.ts +0 -579
  222. package/src/lib/components/equation-builder/equation-builder.component.css +0 -39
  223. package/src/lib/components/equation-builder/equation-builder.component.html +0 -31
  224. package/src/lib/components/equation-builder/equation-builder.component.spec.ts +0 -23
  225. package/src/lib/components/equation-builder/equation-builder.component.ts +0 -119
  226. package/src/lib/components/item-line-editor/item-line-editor.component.html +0 -102
  227. package/src/lib/components/item-line-editor/item-line-editor.component.scss +0 -152
  228. package/src/lib/components/item-line-editor/item-line-editor.component.spec.ts +0 -23
  229. package/src/lib/components/item-line-editor/item-line-editor.component.ts +0 -306
  230. package/src/lib/components/multi-auto-complete/multi-auto-complete.component.css +0 -19
  231. package/src/lib/components/multi-auto-complete/multi-auto-complete.component.html +0 -38
  232. package/src/lib/components/multi-auto-complete/multi-auto-complete.component.spec.ts +0 -23
  233. package/src/lib/components/multi-auto-complete/multi-auto-complete.component.ts +0 -315
  234. package/src/lib/components/paginator/paginator.component.css +0 -65
  235. package/src/lib/components/paginator/paginator.component.html +0 -30
  236. package/src/lib/components/paginator/paginator.component.ts +0 -87
  237. package/src/lib/components/report-details-dialog/report-details-dialog.component.css +0 -17
  238. package/src/lib/components/report-details-dialog/report-details-dialog.component.html +0 -16
  239. package/src/lib/components/report-details-dialog/report-details-dialog.component.spec.ts +0 -23
  240. package/src/lib/components/report-details-dialog/report-details-dialog.component.ts +0 -111
  241. package/src/lib/components/report-form/report-form.component.html +0 -92
  242. package/src/lib/components/report-form/report-form.component.scss +0 -51
  243. package/src/lib/components/report-form/report-form.component.spec.ts +0 -25
  244. package/src/lib/components/report-form/report-form.component.ts +0 -599
  245. package/src/lib/components/search-bar/search-bar.component.html +0 -51
  246. package/src/lib/components/search-bar/search-bar.component.scss +0 -63
  247. package/src/lib/components/search-bar/search-bar.component.spec.ts +0 -25
  248. package/src/lib/components/search-bar/search-bar.component.ts +0 -68
  249. package/src/lib/components/section-form-canvas/section-form-canvas.component.html +0 -43
  250. package/src/lib/components/section-form-canvas/section-form-canvas.component.scss +0 -81
  251. package/src/lib/components/section-form-canvas/section-form-canvas.component.spec.ts +0 -23
  252. package/src/lib/components/section-form-canvas/section-form-canvas.component.ts +0 -67
  253. package/src/lib/components/shared/action-button/action-button.component.html +0 -12
  254. package/src/lib/components/shared/action-button/action-button.component.scss +0 -45
  255. package/src/lib/components/shared/action-button/action-button.component.ts +0 -51
  256. package/src/lib/components/shared/action-card/action-card.component.html +0 -78
  257. package/src/lib/components/shared/action-card/action-card.component.scss +0 -238
  258. package/src/lib/components/shared/action-card/action-card.component.ts +0 -56
  259. package/src/lib/components/shared/attachment-uploader/attachment-uploader.component.css +0 -135
  260. package/src/lib/components/shared/attachment-uploader/attachment-uploader.component.html +0 -36
  261. package/src/lib/components/shared/attachment-uploader/attachment-uploader.component.spec.ts +0 -23
  262. package/src/lib/components/shared/attachment-uploader/attachment-uploader.component.ts +0 -71
  263. package/src/lib/components/shared-list/shared-list.component.css +0 -0
  264. package/src/lib/components/shared-list/shared-list.component.html +0 -17
  265. package/src/lib/components/shared-list/shared-list.component.spec.ts +0 -23
  266. package/src/lib/components/shared-list/shared-list.component.ts +0 -53
  267. package/src/lib/components/snackbar-static/snackbar-static.component.html +0 -20
  268. package/src/lib/components/snackbar-static/snackbar-static.component.scss +0 -135
  269. package/src/lib/components/snackbar-static/snackbar-static.component.ts +0 -26
  270. package/src/lib/components/title-bar/title-bar.component.css +0 -0
  271. package/src/lib/components/title-bar/title-bar.component.css.map +0 -1
  272. package/src/lib/components/title-bar/title-bar.component.html +0 -35
  273. package/src/lib/components/title-bar/title-bar.component.scss +0 -126
  274. package/src/lib/components/title-bar/title-bar.component.spec.ts +0 -23
  275. package/src/lib/components/title-bar/title-bar.component.ts +0 -126
  276. package/src/lib/services/backend-service.ts +0 -287
  277. package/src/lib/services/top-panel.ts +0 -17
  278. package/src/lib/services/trigger-form.service.ts +0 -11
  279. package/src/lib/share-module/shared-module.ts +0 -10
  280. package/src/lib/utils/base-utils.ts +0 -102
  281. package/src/lib/validators/date-range-validator.ts +0 -31
  282. package/src/lib/validators/match-list.validator.ts +0 -10
  283. package/src/lib/validators/multi-email-validator.ts +0 -15
  284. package/tsconfig.lib.json +0 -15
  285. package/tsconfig.lib.prod.json +0 -11
  286. package/tsconfig.spec.json +0 -15
package/src/lib/components/base-form-canvas/base-form-canvas.component.html DELETED
@@ -1,1095 +0,0 @@
1
- <div class="main-form-canvas">
2
- <div class="form-wrapper">
3
- <ng-container *ngIf="defaults">
4
- <ng-container *ngIf="editable; else readonlyView" class="form-container">
5
- <form [formGroup]="formParam" class="form-content">
6
- <div class="form-row">
7
- <div class="form-column">
8
- <ng-container *ngFor="let row of screenFields | keyvalue">
9
- <div class="row-container">
10
- <ng-container *ngFor="let field of row.value">
11
- <div class="field-column" [style.flex]="field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'">
12
- <ng-container [ngSwitch]="field.type">
13
- <ng-container *ngSwitchCase="'date'">
14
- <ng-container *ngIf="showField(defaults, field)">
15
- <ng-container *ngIf="workflowEditableField(field)">
16
- <div class="label-and-asterisk-container">
17
- <span *ngIf="!field.hideLabel" class="custom-label" id="label-{{field.property}}">
18
- {{ field.label! | translate }}
19
- </span>
20
- <span *ngIf="field.required" class="required-asterisk"> * </span>
21
- </div>
22
-
23
- <mat-form-field appearance="outline">
24
- <input matInput
25
- [matDatepicker]="picker"
26
- [value]="formParam.get(field.property)?.value"
27
- (dateChange)="formParam.get(field.property).setValue($event.value)"
28
- [placeholder]="field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''"
29
- [readonly]="field.readonly"
30
- formControlName="{{field.property}}"
31
- [required]="field.required"
32
- [attr.aria-invalid]="showError(field.property)"
33
- [attr.aria-labelledby]="'label-' + field.property"
34
- [attr.aria-describedby]="'error-' + field.property">
35
-
36
- <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
37
-
38
- <mat-datepicker #picker
39
- [startView]="getView(field)"
40
- (yearSelected)="setMonthAndYear($event, picker, field)"
41
- panelClass="example-month-picker">
42
- </mat-datepicker>
43
-
44
- <mat-error *ngIf="showError(field.property)" aria-live="assertive">
45
- {{ getErrors(field.property) | translate }}
46
- </mat-error>
47
- </mat-form-field>
48
-
49
- </ng-container>
50
- </ng-container>
51
- </ng-container>
52
-
53
- <ng-container *ngSwitchCase="'phone-number'">
54
- <ng-container *ngIf="showField(defaults, field)">
55
- <ng-container class="custom-ngx-mat-intl-tel-input" *ngIf="workflowEditableField(field)">
56
- <div class="label-and-asterisk-container">
57
- <span *ngIf="!field.hideLabel" class="custom-label" id="label-{{field.property}}">
58
- {{ field.label! | translate }}
59
- </span>
60
- <span *ngIf="field.required" class="required-asterisk"> * </span>
61
- </div>
62
- <mat-form-field appearance="outline">
63
- <div class="phone-input-wrapper">
64
- <ngx-mat-intl-tel-input
65
- formControlName="{{ field.property }}"
66
- [inputPlaceholder]="field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''"
67
- [preferredCountries]="['qa']"
68
- [enablePlaceholder]="true"
69
- [enableSearch]="true"
70
- [onlyCountries]="getCountryCodeList()"
71
- [required]="field.required"
72
- [attr.aria-required]="field.required"
73
- [attr.aria-invalid]="showError(field.property)"
74
- [attr.aria-labelledby]="'label-' + field.property"
75
- [attr.aria-describedby]="'error-' + field.property">
76
- </ngx-mat-intl-tel-input>
77
- </div>
78
-
79
- <mat-error
80
- id="error-{{ field.property }}"
81
- *ngIf="showError(field.property)"
82
- aria-live="assertive">
83
- {{ getErrors(field.property) | translate }}
84
- </mat-error>
85
- </mat-form-field>
86
-
87
- </ng-container>
88
- </ng-container>
89
- </ng-container>
90
-
91
-
92
- <ng-container *ngSwitchCase="'iban-text'">
93
- <ng-container *ngIf="showField(defaults, field)">
94
- <ng-container *ngIf="!workflowEditableField(field)">
95
- <ng-container
96
- [ngTemplateOutlet]="textReadonly"
97
- [ngTemplateOutletContext]="{ field: field }">
98
- </ng-container>
99
- </ng-container>
100
-
101
- <ng-container *ngIf="workflowEditableField(field)">
102
- <div class="label-and-asterisk-container">
103
- <span *ngIf="!field.hideLabel" class="custom-label" id="label-{{field.property}}">
104
- {{ field.label! | translate }}
105
- </span>
106
- <span *ngIf="field.required" class="required-asterisk"> * </span>
107
- </div>
108
- <mat-form-field appearance="outline">
109
- <input class="app-input"
110
- formControlName="{{ field.property }}"
111
- matInput
112
- [placeholder]="field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''"
113
- [readonly]="field.readonly"
114
- [required]="field.required"
115
- [attr.aria-required]="field.required"
116
- [attr.aria-invalid]="showError(field.property)"
117
- [attr.aria-labelledby]="'label-' + field.property"
118
- [attr.aria-describedby]="'error-' + field.property">
119
- <mat-error
120
- id="error-{{ field.property }}"
121
- *ngIf="showError(field.property)"
122
- aria-live="assertive">
123
- {{ getErrors(field.property) | translate }}
124
- </mat-error>
125
- </mat-form-field>
126
-
127
-
128
- </ng-container>
129
- </ng-container>
130
- </ng-container>
131
-
132
- <ng-container *ngSwitchCase="'password'">
133
- <ng-container *ngIf="showField(defaults, field)">
134
- <div class="label-and-asterisk-container">
135
- <span *ngIf="!field.hideLabel" class="custom-label" id="label-{{field.property}}">
136
- {{ field.label! | translate }}
137
- </span>
138
- <span *ngIf="field.required" class="required-asterisk"> * </span>
139
- </div>
140
- <mat-form-field appearance="outline">
141
- <input matInput
142
- class="app-input"
143
- formControlName="{{ field.property }}"
144
- [type]="hide && !field.disabled ? 'password' : 'text'"
145
- [readonly]="field.readonly"
146
- [required]="field.required"
147
- [placeholder]="field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''"
148
- [attr.aria-required]="field.required"
149
- [attr.aria-invalid]="showError(field.property)"
150
- [attr.aria-labelledby]="'label-' + field.property"
151
- [attr.aria-describedby]="'error-' + field.property">
152
- <!-- <mat-icon matSuffix-->
153
- <!-- (click)="hide = !hide">-->
154
- <!-- {{ hide ? 'visibility_off' : 'visibility' }}-->
155
- <!-- </mat-icon>-->
156
- <mat-error
157
- id="error-{{ field.property }}"
158
- *ngIf="showError(field.property)"
159
- aria-live="assertive">
160
- {{ getErrors(field.property) | translate }}
161
- </mat-error>
162
- </mat-form-field>
163
- </ng-container>
164
- </ng-container>
165
-
166
- <ng-container *ngSwitchCase="'text'">
167
- <ng-container *ngIf="showField(defaults, field)">
168
- <ng-container *ngIf="!workflowEditableField(field)">
169
- <ng-container
170
- [ngTemplateOutlet]="textReadonly"
171
- [ngTemplateOutletContext]="{ field: field }">
172
- </ng-container>
173
- </ng-container>
174
-
175
- <ng-container *ngIf="workflowEditableField(field)">
176
- <div class="label-and-asterisk-container">
177
- <span *ngIf="!field.hideLabel" class="custom-label" id="label-{{field.property}}">
178
- {{ field.label! | translate }}
179
- </span>
180
- <span *ngIf="field.required" class="required-asterisk"> * </span>
181
- </div>
182
- <mat-form-field appearance="outline">
183
- <input class="app-input"
184
- formControlName="{{ field.property }}"
185
- matInput
186
- [placeholder]="field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''"
187
- [readonly]="field.readonly"
188
- [required]="field.required"
189
- (keyup)="fixArabicNumbers($event.target)"
190
- [attr.aria-required]="field.required"
191
- [attr.aria-invalid]="showError(field.property)"
192
- [attr.aria-labelledby]="'label-' + field.property"
193
- [attr.aria-describedby]="'error-' + field.property">
194
- <mat-error
195
- id="error-{{ field.property }}"
196
- *ngIf="showError(field.property)"
197
- aria-live="assertive">
198
- {{ getErrors(field.property) | translate }}
199
- </mat-error>
200
- </mat-form-field>
201
-
202
-
203
- </ng-container>
204
- </ng-container>
205
- </ng-container>
206
-
207
- <ng-container *ngSwitchCase="'chip-list'">
208
- <ng-container *ngIf="showField(defaults, field)">
209
- <div class="label-and-asterisk-container">
210
- <span *ngIf="!field.hideLabel" class="custom-label" id="label-{{field.property}}">
211
- {{ field.label! | translate }}
212
- </span>
213
- <span *ngIf="field.required" class="required-asterisk"> * </span>
214
- </div>
215
- <mat-form-field appearance="outline">
216
-
217
- <mat-chip-grid [attr.aria-labelledby]="'label-' + field.property"
218
- formControlName="{{ field.property }}">
219
- <mat-chip-row
220
- *ngFor="let mail of splittedChips(formParam, field.property); let idx = index"
221
- [removable]="removable"
222
- (removed)="removeChipsItem(formParam, field.property, idx)">
223
- {{ mail }}
224
- <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
225
- </mat-chip-row>
226
-
227
- <input [attr.aria-labelledby]="'label-' + field.property" [matChipInputFor]="null"
228
- [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
229
- [matChipInputAddOnBlur]="addOnBlur"
230
- (matChipInputTokenEnd)="addEmailToChips($event, formParam, field.property)">
231
- </mat-chip-grid>
232
- <mat-error id="error-{{ field.property }}" *ngIf="showError(field.property)"
233
- aria-live="assertive">
234
- {{ getErrors(field.property) | translate }}
235
- </mat-error>
236
- </mat-form-field>
237
-
238
-
239
- </ng-container>
240
- </ng-container>
241
-
242
- <ng-container *ngSwitchCase="'amount'">
243
- <ng-container *ngIf="showField(defaults, field)">
244
- <ng-container *ngIf="!workflowEditableField(field)">
245
- <ng-container
246
- [ngTemplateOutlet]="amountReadonly"
247
- [ngTemplateOutletContext]="{ field: field }">
248
- </ng-container>
249
- </ng-container>
250
-
251
- <ng-container *ngIf="workflowEditableField(field)">
252
- <div class="label-and-asterisk-container">
253
- <span *ngIf="!field.hideLabel" class="custom-label" id="label-{{field.property}}">
254
- {{ field.label! | translate }}
255
- </span>
256
- <span *ngIf="field.required" class="required-asterisk"> * </span>
257
- </div>
258
- <mat-form-field appearance="outline">
259
- <input class="app-input"
260
- formControlName="{{ field.property }}"
261
- matInput
262
- type="number"
263
- [placeholder]="field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''"
264
- [readonly]="field.readonly"
265
- [required]="field.required"
266
- [attr.aria-required]="field.required"
267
- [attr.aria-invalid]="showError(field.property)"
268
- [attr.aria-labelledby]="'label-' + field.property"
269
- [attr.aria-describedby]="'error-' + field.property">
270
- <mat-error
271
- id="error-{{ field.property }}"
272
- *ngIf="showError(field.property)"
273
- aria-live="assertive">
274
- {{ getErrors(field.property) | translate }}
275
- </mat-error>
276
- </mat-form-field>
277
-
278
-
279
- </ng-container>
280
- </ng-container>
281
- </ng-container>
282
-
283
- <ng-container *ngSwitchCase="'sequence'">
284
- <ng-container
285
- *ngIf="referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence">
286
- <div class="label-and-asterisk-container">
287
- <span *ngIf="!field.hideLabel" class="custom-label" id="label-{{field.property}}">
288
- {{ field.label! | translate }}
289
- </span>
290
- <span *ngIf="field.required" class="required-asterisk"> * </span>
291
- </div>
292
- <mat-form-field appearance="outline">
293
- <input class="app-input"
294
- formControlName="{{ field.property }}"
295
- matInput
296
- [placeholder]="field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''"
297
- [readonly]="true"
298
- [disabled]="true"
299
- [attr.aria-labelledby]="'label-' + field.property">
300
- <mat-error
301
- id="error-{{ field.property }}"
302
- *ngIf="showError(field.property)"
303
- aria-live="assertive">
304
- {{ getErrors(field.property) | translate }}
305
- </mat-error>
306
- </mat-form-field>
307
-
308
- </ng-container>
309
- </ng-container>
310
-
311
- <ng-template #noSequence>
312
- <div class="label-and-asterisk-container">
313
- <span *ngIf="!field.hideLabel" class="custom-label" id="label-{{field.property}}">
314
- {{ field.label! | translate }}
315
- </span>
316
- <span *ngIf="field.required" class="required-asterisk"> * </span>
317
- </div>
318
- <mat-form-field appearance="outline">
319
- <input class="app-input"
320
- formControlName="{{ field.property }}"
321
- matInput
322
- [readonly]="false"
323
- [disabled]="false"
324
- [placeholder]="field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''"
325
- [required]="field.required"
326
- [attr.aria-labelledby]="'label-' + field.property"
327
- [attr.aria-required]="field.required"
328
- [attr.aria-invalid]="showError(field.property)"
329
- [attr.aria-describedby]="'error-' + field.property">
330
- <mat-error
331
- id="error-{{ field.property }}"
332
- *ngIf="showError(field.property)"
333
- aria-live="assertive">
334
- {{ getErrors(field.property) | translate }}
335
- </mat-error>
336
- </mat-form-field>
337
-
338
- </ng-template>
339
-
340
- <ng-container *ngSwitchCase="'textarea'">
341
- <ng-container *ngIf="showField(defaults, field)">
342
- <ng-container *ngIf="!workflowEditableField(field)">
343
- <ng-container
344
- [ngTemplateOutlet]="textareaReadonly"
345
- [ngTemplateOutletContext]="{ field: field }">
346
- </ng-container>
347
- </ng-container>
348
-
349
- <ng-container *ngIf="workflowEditableField(field)">
350
- <div class="label-and-asterisk-container">
351
- <span *ngIf="!field.hideLabel" class="custom-label" id="label-{{field.property}}">
352
- {{ field.label! | translate }}
353
- </span>
354
- <span *ngIf="field.required" class="required-asterisk"> * </span>
355
- </div>
356
- <mat-form-field appearance="outline">
357
- <textarea cdkFocusInitial
358
- formControlName="{{ field.property }}"
359
- matInput
360
- cdkTextareaAutosize
361
- cdkAutosizeMinRows="3"
362
- [placeholder]="field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''"
363
- [attr.aria-labelledby]="'label-' + field.property"
364
- [attr.aria-required]="field.required"
365
- [attr.aria-invalid]="showError(field.property)"
366
- [attr.aria-describedby]="'error-' + field.property"
367
- [readonly]="field.readonly"
368
- [required]="field.required"></textarea>
369
- <mat-error
370
- id="error-{{ field.property }}"
371
- *ngIf="showError(field.property)"
372
- aria-live="assertive">
373
- {{ getErrors(field.property) | translate }}
374
- </mat-error>
375
- </mat-form-field>
376
-
377
- </ng-container>
378
- </ng-container>
379
- </ng-container>
380
-
381
- <ng-container *ngSwitchCase="'number'">
382
- <ng-container *ngIf="showField(defaults, field)">
383
- <ng-container *ngIf="!workflowEditableField(field)">
384
- <ng-container
385
- [ngTemplateOutlet]="numberReadonly"
386
- [ngTemplateOutletContext]="{ field: field }">
387
- </ng-container>
388
- </ng-container>
389
-
390
- <ng-container *ngIf="workflowEditableField(field)">
391
- <div class="label-and-asterisk-container">
392
- <span *ngIf="!field.hideLabel" class="custom-label" id="label-{{field.property}}">
393
- {{ field.label! | translate }}
394
- </span>
395
- <span *ngIf="field.required" class="required-asterisk"> * </span>
396
- </div>
397
- <mat-form-field appearance="outline">
398
- <input class="app-input"
399
- formControlName="{{ field.property }}"
400
- matInput
401
- type="number"
402
- [placeholder]="field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''"
403
- [attr.aria-labelledby]="'label-' + field.property"
404
- [attr.aria-required]="field.required"
405
- [attr.aria-invalid]="showError(field.property)"
406
- [attr.aria-describedby]="'error-' + field.property"
407
- [required]="field.readonly ? false : field.required"
408
- [readonly]="field.readonly"
409
- [pattern]="field.pattern">
410
- <mat-error id="error-{{ field.property }}" *ngIf="showError(field.property)"
411
- aria-live="assertive">
412
- {{ getErrors(field.property) | translate }}
413
- </mat-error>
414
- </mat-form-field>
415
-
416
- </ng-container>
417
- </ng-container>
418
- </ng-container>
419
-
420
-
421
- <ng-container *ngSwitchCase="'time'">
422
- <ng-container *ngIf="showField(defaults, field)">
423
- <ng-container *ngIf="!workflowEditableField(field)">
424
- <ng-container
425
- [ngTemplateOutlet]="timeReadonly"
426
- [ngTemplateOutletContext]="{ field: field }">
427
- </ng-container>
428
- </ng-container>
429
-
430
- <ng-container *ngIf="workflowEditableField(field)">
431
- <div class="label-and-asterisk-container">
432
- <span *ngIf="!field.hideLabel" class="custom-label" id="label-{{field.property}}">
433
- {{ field.label! | translate }}
434
- </span>
435
- <span *ngIf="field.required" class="required-asterisk"> * </span>
436
- </div>
437
- <mat-form-field appearance="outline">
438
- <input
439
- matInput
440
- class="app-input"
441
- formControlName="{{ field.property }}"
442
- type="time"
443
- [placeholder]="field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''"
444
- [readonly]="field.readonly"
445
- [attr.aria-labelledby]="'label-' + field.property"
446
- [attr.aria-required]="field.required"
447
- [attr.aria-invalid]="showError(field.property)"
448
- [attr.aria-describedby]="'error-' + field.property"
449
- [required]="field.required">
450
- <mat-error
451
- id="error-{{ field.property }}"
452
- *ngIf="showError(field.property)"
453
- aria-live="assertive">
454
- {{ getErrors(field.property) | translate }}
455
- </mat-error>
456
- </mat-form-field>
457
-
458
- </ng-container>
459
- </ng-container>
460
- </ng-container>
461
-
462
- <ng-container *ngSwitchCase="'checkbox'">
463
- <ng-container *ngIf="showField(defaults, field)">
464
- <ng-container *ngIf="!workflowEditableField(field)">
465
- <ng-container
466
- [ngTemplateOutlet]="checkboxReadonly"
467
- [ngTemplateOutletContext]="{ field: field }">
468
- </ng-container>
469
- </ng-container>
470
-
471
- <ng-container *ngIf="workflowEditableField(field)">
472
- <mat-checkbox
473
- appearance="outline"
474
- style="padding-bottom: 14px; padding-top: 14px;"
475
- [disabled]="field.readonly"
476
- [attr.aria-required]="field.required"
477
- [attr.aria-invalid]="showError(field.property)"
478
- formControlName="{{ field.property }}">
479
- {{ field.label! | translate }}
480
- <mat-error *ngIf="showError(field.property)" aria-live="assertive">
481
- {{ getErrors(field.property) | translate }}
482
- </mat-error>
483
- </mat-checkbox>
484
-
485
- </ng-container>
486
- </ng-container>
487
- </ng-container>
488
-
489
- <ng-container *ngSwitchCase="'color-picker'">
490
- <ng-container *ngIf="showField(defaults, field)">
491
- <div fxLayout="row" fxLayoutAlign="center">
492
- <h4 style="margin-right: 10px">{{ field.label! | translate }}</h4>
493
- <input
494
- ejs-colorpicker
495
- type="color"
496
- id="colorpicker"
497
- formControlName="{{ field.property }}"
498
- [attr.aria-label]="field.label! | translate"
499
- [attr.aria-required]="field.required"
500
- [attr.aria-invalid]="showError(field.property)"
501
- />
502
- </div>
503
- <mat-error *ngIf="showError(field.property)" aria-live="assertive">
504
- {{ getErrors(field.property) | translate }}
505
- </mat-error>
506
- </ng-container>
507
- </ng-container>
508
-
509
-
510
- <ng-container *ngSwitchCase="'radio-button'">
511
- <ng-container *ngIf="showField(defaults, field)">
512
- <ng-container *ngIf="!workflowEditableField(field)">
513
- <ng-container
514
- [ngTemplateOutlet]="radioButtonReadonly"
515
- [ngTemplateOutletContext]="{ field: field }">
516
- </ng-container>
517
- </ng-container>
518
- <ng-container *ngIf="workflowEditableField(field)">
519
- <mat-radio-group
520
- formControlName="{{field.property}}"
521
- class="app-radio"
522
- [attr.aria-label]="field.label! | translate"
523
- [attr.aria-required]="field.required"
524
- [attr.aria-invalid]="showError(field.property)">
525
- <div class="field-row">
526
- <div class="field-label">
527
- <span class="custom-label">{{ field.label! | translate }}</span>
528
- </div>
529
- <div class="field-input">
530
- <div class="radio-group-custom">
531
- <mat-radio-button
532
- *ngFor="let option of field.listOptions"
533
- [value]="option"
534
- [attr.aria-labelledby]="option">
535
- {{ option | translate }}
536
- </mat-radio-button>
537
- </div>
538
- </div>
539
- </div>
540
-
541
- <mat-error
542
- *ngIf="showError(field.property)"
543
- aria-live="assertive">
544
- {{ getErrors(field.property) | translate }}
545
- </mat-error>
546
- </mat-radio-group>
547
-
548
- </ng-container>
549
- </ng-container>
550
- </ng-container>
551
-
552
- <ng-container *ngSwitchCase="'list'">
553
- <ng-container *ngIf="showField(defaults, field)">
554
- <ng-container *ngIf="!workflowEditableField(field)">
555
- <ng-container
556
- [ngTemplateOutlet]="listReadonly"
557
- [ngTemplateOutletContext]="{ field: field }">
558
- </ng-container>
559
- </ng-container>
560
- <ng-container *ngIf="workflowEditableField(field)">
561
- <div class="label-and-asterisk-container">
562
- <span *ngIf="!field.hideLabel" class="custom-label" id="label-{{field.property}}">
563
- {{ field.label! | translate }}
564
- </span>
565
- <span *ngIf="field.required" class="required-asterisk"> * </span>
566
- </div>
567
- <mat-form-field appearance="outline" style="width: 100%">
568
- <mat-select
569
- formControlName="{{field.property}}"
570
- [attr.aria-label]="field.label! | translate"
571
- [attr.aria-required]="field.required"
572
- [placeholder]="field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''"
573
- [attr.aria-invalid]="showError(field.property)"
574
- [disabled]="field.readonly"
575
- [multiple]="field.multi || false"
576
- [required]="field.readonly ? false : field.required"
577
- [(value)]="field.defaultListOption">
578
- <ng-container *ngIf="field.translate; else lookup_no_translation">
579
- <mat-option
580
- *ngFor="let item of field.listOptions; let i = index"
581
- [value]="item">
582
- {{ friendlyName(field.label, field.property, item) | translate }}
583
- </mat-option>
584
- </ng-container>
585
- <ng-template #lookup_no_translation>
586
- <mat-option
587
- *ngFor="let item of field.listOptions"
588
- [value]="item">
589
- {{ getOptionValue(item) }}
590
- </mat-option>
591
- </ng-template>
592
- </mat-select>
593
- <mat-error
594
- *ngIf="showError(field.property)"
595
- aria-live="assertive">
596
- {{ getErrors(field.property) | translate }}
597
- </mat-error>
598
- </mat-form-field>
599
-
600
- </ng-container>
601
- </ng-container>
602
- </ng-container>
603
-
604
- <ng-container *ngSwitchCase="'attachment'" [formGroup]="formParam">
605
- <ng-container *ngIf="showField(defaults, field)">
606
- <!-- Uncomment and use the attachment control when ready -->
607
- <!-- <ag-attachment-control
608
- [allowMulti]="field.multi"
609
- [attachmentDefaultExternal]="pageInfo?.attachmentDefaultExternal"
610
- [supportedTypes]="field.supportedTypes"
611
- [buttonType]="field.buttonType"
612
- [hideListOfFiles]="field.hideFiles"
613
- (filesList)="updateFilesList($event, field)"
614
- (actionExecuted)="actionExecuted($event, field)"
615
- style="margin-top: 5px"
616
- label="{{field.label! | translate}}">
617
- </ag-attachment-control> -->
618
- <mat-error class="iq-error"
619
- *ngIf="showError(field.property)"
620
- aria-live="assertive">
621
- {{ getErrors(field.property) | translate }}
622
- </mat-error>
623
- </ng-container>
624
- </ng-container>
625
-
626
- <ng-container *ngSwitchCase="'lookup'" [formGroup]="formParam">
627
- <ng-container *ngIf="showField(defaults, field)">
628
- <ng-container *ngIf="!workflowEditableField(field)">
629
- <ng-container
630
- [ngTemplateOutlet]="lookupReadonly"
631
- [ngTemplateOutletContext]="{ field: field }">
632
- </ng-container>
633
- </ng-container>
634
- <ng-container *ngIf="workflowEditableField(field)">
635
- <app-auto-complete
636
- [form]="formParam"
637
- [field]="field"
638
- [supportingAttributes]="supportingAttributes"
639
- [defaultValue]="this.formParam.get(field.property)?.value"
640
- (selectedValue)="patchLookupValue($event, field.property)">
641
- <mat-error
642
- *ngIf="showError(field.property)"
643
- aria-live="assertive">
644
- {{ getErrors(field.property) | translate }}
645
- </mat-error>
646
- </app-auto-complete>
647
-
648
- </ng-container>
649
- </ng-container>
650
- </ng-container>
651
-
652
- <ng-container *ngSwitchCase="'currency'" [formGroup]="formParam">
653
- <ng-container *ngIf="showField(defaults, field)">
654
- <ng-container *ngIf="!workflowEditableField(field)">
655
- <ng-container
656
- [ngTemplateOutlet]="currencyReadonly"
657
- [ngTemplateOutletContext]="{ field: field }">
658
- </ng-container>
659
- </ng-container>
660
- <ng-container *ngIf="workflowEditableField(field)">
661
- <!-- Uncomment and use the currency control when ready -->
662
- <!-- <app-currency
663
- [form]="formParam"
664
- [field]="field"
665
- [defaultValue]="this.formParam.get(field.property)?.value"
666
- (selectedValue)="patchCurrencyValue($event, field.property)">
667
- </app-currency> -->
668
- <mat-error
669
- *ngIf="showError(field.property)"
670
- aria-live="assertive">
671
- {{ getErrors(field.property) | translate }}
672
- </mat-error>
673
- </ng-container>
674
- </ng-container>
675
- </ng-container>
676
-
677
- <ng-container *ngSwitchCase="'multi-select'" [formGroup]="formParam">
678
- <ng-container *ngIf="showField(defaults, field)">
679
- <ng-container *ngIf="!workflowEditableField(field)">
680
- <ng-container
681
- [ngTemplateOutlet]="multiSelectReadonly"
682
- [ngTemplateOutletContext]="{ field: field }">
683
- </ng-container>
684
- </ng-container>
685
- <ng-container *ngIf="workflowEditableField(field)">
686
- <app-multi-auto-complete
687
- [form]="formParam"
688
- [field]="field"
689
- [defaultValue]="getMultiValue(field)"
690
- (selectedValue)="patchMultiSelectValue($event, field.property)">
691
- <mat-error
692
- *ngIf="showError(field.property)"
693
- aria-live="assertive">
694
- {{ getErrors(field.property) | translate }}
695
- </mat-error>
696
- </app-multi-auto-complete>
697
-
698
- </ng-container>
699
- </ng-container>
700
- </ng-container>
701
-
702
-
703
- <ng-container *ngSwitchCase="'rich-text'" [formGroup]="formParam">
704
- <ng-container *ngIf="showField(defaults, field)">
705
- <!-- Uncomment and use the rich text editor when ready -->
706
- <!-- <ckeditor
707
- [editor]="Editor"
708
- [disabled]="field.readonly"
709
- formControlName="{{field.property}}">
710
- </ckeditor> -->
711
- </ng-container>
712
- </ng-container>
713
-
714
- <ng-container *ngSwitchCase="'divider'">
715
- <mat-divider></mat-divider>
716
- </ng-container>
717
-
718
- <ng-container *ngSwitchCase="'hyper-text'">
719
- <div>
720
- <mat-label
721
- (click)="getHyperTextEvent()"
722
- class="hyper-link">
723
- {{ field.label! | translate }}
724
- </mat-label>
725
- </div>
726
- </ng-container>
727
-
728
- <ng-container *ngSwitchCase="'section-title'">
729
- <ng-container *ngIf="showField(defaults, field)">
730
- <div class="hrdivider-mid">
731
- <span>{{ field.label | translate }}</span>
732
- </div>
733
- </ng-container>
734
- </ng-container>
735
-
736
- <ng-container *ngSwitchCase="'equation-builder'">
737
- <ng-container *ngIf="showField(defaults, field)">
738
- <ng-container *ngIf="!workflowEditableField(field)">
739
- <ng-container
740
- [ngTemplateOutlet]="textReadonly"
741
- [ngTemplateOutletContext]="{ field: field }">
742
- </ng-container>
743
- </ng-container>
744
-
745
- <ng-container *ngIf="workflowEditableField(field)">
746
- <div class="label-and-asterisk-container">
747
- <span *ngIf="!field.hideLabel" class="custom-label" id="label-{{field.property}}">
748
- {{ field.label! | translate }}
749
- </span>
750
- <span *ngIf="field.required" class="required-asterisk"> * </span>
751
- </div>
752
- <mat-form-field appearance="outline">
753
- <input class="app-input" dir="ltr"
754
- formControlName="{{ field.property }}"
755
- matInput
756
- [placeholder]="field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''"
757
- [readonly]="field.readonly"
758
- [required]="field.required"
759
- [attr.aria-required]="field.required"
760
- [attr.aria-invalid]="showError(field.property)"
761
- [attr.aria-labelledby]="'label-' + field.property"
762
- [attr.aria-describedby]="'error-' + field.property">
763
- <mat-error
764
- id="error-{{ field.property }}"
765
- *ngIf="showError(field.property)"
766
- aria-live="assertive">
767
- {{ getErrors(field.property) | translate }}
768
- </mat-error>
769
- </mat-form-field>
770
-
771
-
772
- </ng-container>
773
- </ng-container>
774
- </ng-container>
775
- <!-- <ng-container *ngSwitchCase="'equation-builder'" [formGroup]="formParam">-->
776
- <!-- <ng-container *ngIf="showField(defaults, field)">-->
777
- <!-- <ng-container *ngIf="!workflowEditableField(field)">-->
778
- <!-- <ng-container-->
779
- <!-- [ngTemplateOutlet]="dateReadonly"-->
780
- <!-- [ngTemplateOutletContext]="{ field: field }">-->
781
- <!-- </ng-container>-->
782
- <!-- </ng-container>-->
783
- <!-- <ng-container *ngIf="workflowEditableField(field)">-->
784
- <!-- <div style="display: flex; width: 350%">-->
785
- <!-- <mat-label>{{ field.label! | translate }}</mat-label>-->
786
- <!-- <mat-form-field style="width: 400%" appearance="outline">-->
787
- <!-- <mat-chip-grid #chipGrid>-->
788
- <!-- <ng-container *ngFor="let equationValue of equationValues(); let i = index">-->
789
- <!-- <mat-chip-row (removed)="remove(equationValue, i)">-->
790
- <!-- {{ equationValue }}-->
791
- <!-- <button-->
792
- <!-- matChipRemove-->
793
- <!-- [attr.aria-label]="'remove ' + equationValue">-->
794
- <!-- <mat-icon>cancel</mat-icon>-->
795
- <!-- </button>-->
796
- <!-- </mat-chip-row>-->
797
- <!-- </ng-container>-->
798
- <!-- </mat-chip-grid>-->
799
- <!-- <input-->
800
- <!-- [(ngModel)]="currentEquationValue"-->
801
- <!-- [matChipInputFor]="chipGrid"-->
802
- <!-- [matAutocomplete]="auto"-->
803
- <!-- [ngModelOptions]="{ standalone: true }"-->
804
- <!-- [matChipInputSeparatorKeyCodes]="separatorKeysCodes"-->
805
- <!-- (matChipInputTokenEnd)="add($event)"-->
806
- <!-- aria-label="Add equation value" />-->
807
- <!-- <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">-->
808
- <!-- <ng-container *ngFor="let filteredField of (equationFilteredFields() | async)">-->
809
- <!-- <mat-option [value]="filteredField">{{ filteredField }}</mat-option>-->
810
- <!-- </ng-container>-->
811
- <!-- </mat-autocomplete>-->
812
- <!-- </mat-form-field>-->
813
- <!-- </div>-->
814
- <!-- <mat-error class="iq-error" *ngIf="showError(field.property)" aria-live="assertive">-->
815
- <!-- {{ getErrors(field.property) | translate }}-->
816
- <!-- </mat-error>-->
817
- <!-- </ng-container>-->
818
- <!-- </ng-container>-->
819
- <!-- </ng-container>-->
820
-
821
- </ng-container>
822
- </div>
823
- </ng-container>
824
- </div>
825
- </ng-container>
826
- </div>
827
- </div>
828
- </form>
829
- </ng-container>
830
- </ng-container>
831
- </div>
832
-
833
- </div>
834
- <ng-template #dateReadonly let-field="field">
835
- <div class="readonly-item">
836
- <label class="readonly-label" [innerHtml]="!field.hideLabel ? (field.label | translate) : ''"></label>
837
- <span class="readonly-value">{{ extractFieldName(defaults, field.property) | date: 'dd/MM/yyyy' }}</span>
838
- </div>
839
- </ng-template>
840
-
841
- <ng-template #timeReadonly let-field="field">
842
- <div class="readonly-item">
843
- <label class="readonly-label" [innerHtml]="!field.hideLabel ? (field.label | translate) : ''"></label>
844
- <span class="readonly-value">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>
845
- </div>
846
- </ng-template>
847
-
848
- <ng-template #phoneNumberReadonly let-field="field">
849
- <div class="readonly-item">
850
- <label class="readonly-label" [innerHtml]="!field.hideLabel ? (field.label | translate) : ''"></label>
851
- <span class="readonly-value">{{ extractFieldName(defaults, field.property) }}</span>
852
- </div>
853
- </ng-template>
854
-
855
- <ng-template #textReadonly let-field="field">
856
- <div class="readonly-item">
857
- <label class="readonly-label" [innerHtml]="!field.hideLabel ? (field.label | translate) : ''" *ngIf="!field.advancedFilter"></label>
858
- <span class="readonly-value">{{ extractFieldName(defaults, field.property) }}</span>
859
- </div>
860
- </ng-template>
861
-
862
- <ng-template #textareaReadonly let-field="field">
863
- <ng-container *ngIf="field.textFormat === 'json'; else normalText">
864
- <div class="readonly-item">
865
- <label class="readonly-label" [innerHtml]="!field.hideLabel ? (field.label | translate) : ''"></label>
866
- <div class="readonly-value json-viewer">
867
- <ngx-json-viewer [json]="extractJsonFieldName(defaults, field.property)" [expanded]="true"></ngx-json-viewer>
868
- </div>
869
- </div>
870
- </ng-container>
871
- <ng-template #normalText>
872
- <div class="readonly-item">
873
- <label class="readonly-label" [innerHtml]="!field.hideLabel ? (field.label | translate) : ''"></label>
874
- <span class="readonly-value">{{ extractFieldName(defaults, field.property) }}</span>
875
- </div>
876
- </ng-template>
877
- </ng-template>
878
-
879
- <ng-template #numberReadonly let-field="field">
880
- <div class="readonly-item">
881
- <label class="readonly-label" [innerHtml]="!field.hideLabel ? (field.label | translate) : ''"></label>
882
- <span class="readonly-value">{{ extractFieldName(defaults, field.property) }}</span>
883
- </div>
884
- </ng-template>
885
-
886
- <ng-template #currencyReadonly let-field="field">
887
- <div class="readonly-item">
888
- <label class="readonly-label" [innerHtml]="!field.hideLabel ? (field.label | translate) : ''"></label>
889
- <span class="readonly-value">{{ extractFieldName(defaults, field.property) }}</span>
890
- </div>
891
- </ng-template>
892
-
893
- <ng-template #radioButtonReadonly let-field="field">
894
- <div class="readonly-item">
895
- <label class="readonly-label" [innerHtml]="!field.hideLabel ? (field.label | translate) : ''"></label>
896
- <span class="readonly-value">{{ translateLable(defaults[field.property]) }}</span>
897
- </div>
898
- </ng-template>
899
-
900
- <ng-template #richTextReadonly let-field="field">
901
- <div class="readonly-item">
902
- <label class="readonly-label" [innerHtml]="!field.hideLabel ? (field.label | translate) : ''"></label>
903
- <span class="readonly-value" [innerHtml]="extractFieldName(defaults, field.property)"></span>
904
- </div>
905
- </ng-template>
906
-
907
- <ng-template #checkboxReadonly let-field="field">
908
- <div class="readonly-item">
909
- <label class="readonly-label" [innerHtml]="!field.hideLabel ? (field.label | translate) : ''"></label>
910
- <span class="readonly-value">
911
- <mat-icon color="warn" *ngIf="extractFieldName(defaults, field.property); else showNo">done</mat-icon>
912
- <ng-template #showNo>
913
- <mat-icon color="warn">close</mat-icon>
914
- </ng-template>
915
- </span>
916
- </div>
917
- </ng-template>
918
-
919
- <ng-template #listReadonly let-field="field">
920
- <div class="readonly-item">
921
- <label class="readonly-label" [innerHtml]="!field.hideLabel ? (field.label | translate) : ''"></label>
922
- <span class="readonly-value" *ngIf="field.translate; else noTranslate">
923
- {{ listShowValue(defaults, field) | translate }}
924
- </span>
925
- <ng-template #noTranslate>
926
- <span class="readonly-value">{{ extractFieldName(defaults, field.property) }}</span>
927
- </ng-template>
928
- </div>
929
- </ng-template>
930
-
931
- <ng-template #sequenceReadonly let-field="field">
932
- <div class="readonly-item">
933
- <label class="readonly-label" [innerHtml]="!field.hideLabel ? (field.label | translate) : ''"></label>
934
- <span class="readonly-value">{{ extractFieldName(defaults, field.property) }}</span>
935
- </div>
936
- </ng-template>
937
-
938
- <ng-template #lookupReadonly let-field="field">
939
- <div class="readonly-item">
940
- <label class="readonly-label" [innerHtml]="!field.hideLabel ? (field.label | translate) : ''"></label>
941
- <span class="readonly-value">
942
- {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}
943
- </span>
944
- </div>
945
- </ng-template>
946
-
947
- <ng-template #amountReadonly let-field="field">
948
- <div class="readonly-item">
949
- <label class="readonly-label" [innerHtml]="!field.hideLabel ? (field.label | translate) : ''"></label>
950
- <span class="readonly-value">
951
- {{ extractFieldName(defaults, field.property) | currency: currency }}
952
- </span>
953
- </div>
954
- </ng-template>
955
-
956
- <ng-template #multiSelectReadonly let-field="field">
957
- <div class="readonly-item">
958
- <label class="readonly-label" [innerHtml]="!field.hideLabel ? (field.label | translate) : ''"></label>
959
- <mat-chip-grid class="readonly-value chipList">
960
- <mat-chip *ngFor="let filedProp of showMultiSelectValuesAsReadonly(field)">
961
- {{ filedProp }}
962
- </mat-chip>
963
- </mat-chip-grid>
964
- </div>
965
- </ng-template>
966
-
967
- <ng-template #chipListReadonly let-field="field">
968
- <div class="readonly-item">
969
- <label class="readonly-label" [innerHTML]="field.label | translate"></label>
970
- <mat-chip-listbox class="readonly-value chipList">
971
- <mat-chip-option *ngFor="let loc of splitReadonly(extractFieldName(defaults, field.property))"
972
- [selectable]="true"
973
- color="warn"
974
- [removable]="false">
975
- {{ loc }}
976
- </mat-chip-option>
977
- </mat-chip-listbox>
978
- </div>
979
- </ng-template>
980
-
981
-
982
- <ng-template #readonlyView>
983
- <div class="row-wrapper">
984
- <div class="column-wrapper">
985
- <ng-container *ngFor="let row of screenFields | keyvalue">
986
- <div class="row-container">
987
- <ng-container *ngFor="let field of row.value">
988
- <div class="field-column readonly-item" [style.flex]="field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'">
989
-
990
- <ng-container [ngSwitch]="field.type">
991
-
992
- <ng-container *ngSwitchCase="'date'">
993
- <ng-container [ngTemplateOutlet]="dateReadonly"
994
- [ngTemplateOutletContext]="{ field: field }"></ng-container>
995
- </ng-container>
996
-
997
- <ng-container *ngSwitchCase="'time'">
998
- <ng-container [ngTemplateOutlet]="timeReadonly"
999
- [ngTemplateOutletContext]="{ field: field }"></ng-container>
1000
- </ng-container>
1001
-
1002
- <ng-container *ngSwitchCase="'phone-number'">
1003
- <ng-container [ngTemplateOutlet]="phoneNumberReadonly"
1004
- [ngTemplateOutletContext]="{ field: field }"></ng-container>
1005
- </ng-container>
1006
-
1007
- <ng-container *ngSwitchCase="'text'">
1008
- <ng-container [ngTemplateOutlet]="textReadonly"
1009
- [ngTemplateOutletContext]="{ field: field }"></ng-container>
1010
- </ng-container>
1011
-
1012
- <ng-container *ngSwitchCase="'textarea'">
1013
- <ng-container [ngTemplateOutlet]="textareaReadonly"
1014
- [ngTemplateOutletContext]="{ field: field }"></ng-container>
1015
- </ng-container>
1016
-
1017
- <ng-container *ngSwitchCase="'number'">
1018
- <ng-container [ngTemplateOutlet]="numberReadonly"
1019
- [ngTemplateOutletContext]="{ field: field }"></ng-container>
1020
- </ng-container>
1021
-
1022
- <ng-container *ngSwitchCase="'currency'">
1023
- <ng-container [ngTemplateOutlet]="currencyReadonly"
1024
- [ngTemplateOutletContext]="{ field: field }"></ng-container>
1025
- </ng-container>
1026
-
1027
- <ng-container *ngSwitchCase="'radio-button'">
1028
- <ng-container [ngTemplateOutlet]="radioButtonReadonly"
1029
- [ngTemplateOutletContext]="{ field: field }"></ng-container>
1030
- </ng-container>
1031
-
1032
- <ng-container *ngSwitchCase="'checkbox'">
1033
- <ng-container [ngTemplateOutlet]="checkboxReadonly"
1034
- [ngTemplateOutletContext]="{ field: field }"></ng-container>
1035
- </ng-container>
1036
-
1037
- <ng-container *ngSwitchCase="'status'">
1038
- <ng-container [ngTemplateOutlet]="checkboxReadonly"
1039
- [ngTemplateOutletContext]="{ field: field }"></ng-container>
1040
- </ng-container>
1041
-
1042
- <ng-container *ngSwitchCase="'lookup'">
1043
- <ng-container [ngTemplateOutlet]="lookupReadonly"
1044
- [ngTemplateOutletContext]="{ field: field }"></ng-container>
1045
- </ng-container>
1046
-
1047
- <ng-container *ngSwitchCase="'amount'">
1048
- <ng-container [ngTemplateOutlet]="amountReadonly"
1049
- [ngTemplateOutletContext]="{ field: field }"></ng-container>
1050
- </ng-container>
1051
-
1052
- <ng-container *ngSwitchCase="'multi-select'">
1053
- <ng-container [ngTemplateOutlet]="multiSelectReadonly"
1054
- [ngTemplateOutletContext]="{ field: field }"></ng-container>
1055
- </ng-container>
1056
-
1057
- <ng-container *ngSwitchCase="'chip-list'">
1058
- <ng-container [ngTemplateOutlet]="chipListReadonly"
1059
- [ngTemplateOutletContext]="{ field: field }"></ng-container>
1060
- </ng-container>
1061
-
1062
- <ng-container *ngSwitchCase="'sequence'">
1063
- <ng-container [ngTemplateOutlet]="sequenceReadonly"
1064
- [ngTemplateOutletContext]="{ field: field }"></ng-container>
1065
- </ng-container>
1066
-
1067
- <ng-container *ngSwitchCase="'list'">
1068
- <ng-container [ngTemplateOutlet]="listReadonly"
1069
- [ngTemplateOutletContext]="{ field: field }"></ng-container>
1070
- </ng-container>
1071
-
1072
- <ng-container *ngSwitchCase="'iban-text'">
1073
- <p class="label">
1074
- <span [innerHtml]="!field.hideLabel ? (field.label | translate) : ''"></span>
1075
- <span> : </span>
1076
- <span class="value" [innerHtml]="extractFieldName(defaults, field.property)"></span>
1077
- </p>
1078
- </ng-container>
1079
-
1080
- <ng-container *ngSwitchCase="'section-title'">
1081
- <div class="hrdivider-mid">
1082
- <span>{{ field.label | translate }}</span>
1083
- </div>
1084
- </ng-container>
1085
-
1086
- </ng-container>
1087
- </div>
1088
- </ng-container>
1089
- </div>
1090
- </ng-container>
1091
- </div>
1092
- </div>
1093
- </ng-template>
1094
-
1095
-