@unifylib/ui-lib 1.0.3 → 1.1.3

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