@unifylib/ui-lib 1.0.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 (129) hide show
  1. package/README.md +0 -0
  2. package/ng-package.json +7 -0
  3. package/package.json +12 -0
  4. package/src/lib/base-model/SearchStrConfig.ts +12 -0
  5. package/src/lib/base-model/api-response.ts +23 -0
  6. package/src/lib/base-model/audit-log-entry.ts +7 -0
  7. package/src/lib/base-model/button-action-settings.ts +25 -0
  8. package/src/lib/base-model/column-def.model.ts +34 -0
  9. package/src/lib/base-model/do-action-request.ts +11 -0
  10. package/src/lib/base-model/field-action.ts +7 -0
  11. package/src/lib/base-model/field-filter.model.ts +14 -0
  12. package/src/lib/base-model/field-info.ts +98 -0
  13. package/src/lib/base-model/field-predicate.model.ts +7 -0
  14. package/src/lib/base-model/filter-request.ts +27 -0
  15. package/src/lib/base-model/filter.model.ts +49 -0
  16. package/src/lib/base-model/get-items-list.ts +24 -0
  17. package/src/lib/base-model/index.ts +11 -0
  18. package/src/lib/base-model/lookupItem.ts +21 -0
  19. package/src/lib/base-model/null-snackmessage.ts +9 -0
  20. package/src/lib/base-model/page-info.ts +51 -0
  21. package/src/lib/base-model/report-request.model.ts +33 -0
  22. package/src/lib/base-model/response-envelop.model.ts +15 -0
  23. package/src/lib/base-model/snack-message.model.ts +14 -0
  24. package/src/lib/base-model/snackmessage-interface.ts +7 -0
  25. package/src/lib/base-model/table-column.interface.ts +29 -0
  26. package/src/lib/base-model/table-page-user-action.interface.ts +33 -0
  27. package/src/lib/base-model/workflow/workflow-steps.model.ts +9 -0
  28. package/src/lib/base-model/workflow/workflow.model.ts +52 -0
  29. package/src/lib/components/action-confirmation/action-confirmation.component.css +34 -0
  30. package/src/lib/components/action-confirmation/action-confirmation.component.html +18 -0
  31. package/src/lib/components/action-confirmation/action-confirmation.component.spec.ts +23 -0
  32. package/src/lib/components/action-confirmation/action-confirmation.component.ts +58 -0
  33. package/src/lib/components/activity-report-form/activity-report-form.component.html +109 -0
  34. package/src/lib/components/activity-report-form/activity-report-form.component.scss +0 -0
  35. package/src/lib/components/activity-report-form/activity-report-form.component.spec.ts +25 -0
  36. package/src/lib/components/activity-report-form/activity-report-form.component.ts +605 -0
  37. package/src/lib/components/audit-log-details-dialog/audit-log-details-dialog.component.css +51 -0
  38. package/src/lib/components/audit-log-details-dialog/audit-log-details-dialog.component.html +23 -0
  39. package/src/lib/components/audit-log-details-dialog/audit-log-details-dialog.component.spec.ts +23 -0
  40. package/src/lib/components/audit-log-details-dialog/audit-log-details-dialog.component.ts +69 -0
  41. package/src/lib/components/audit-log-list/audit-log.component.html +23 -0
  42. package/src/lib/components/audit-log-list/audit-log.component.scss +0 -0
  43. package/src/lib/components/audit-log-list/audit-log.component.spec.ts +25 -0
  44. package/src/lib/components/audit-log-list/audit-log.component.ts +116 -0
  45. package/src/lib/components/auto-complete/auto-complete.component.css +14 -0
  46. package/src/lib/components/auto-complete/auto-complete.component.html +29 -0
  47. package/src/lib/components/auto-complete/auto-complete.component.spec.ts +23 -0
  48. package/src/lib/components/auto-complete/auto-complete.component.ts +330 -0
  49. package/src/lib/components/base-form/base-form.component.html +58 -0
  50. package/src/lib/components/base-form/base-form.component.scss +0 -0
  51. package/src/lib/components/base-form/base-form.component.spec.ts +25 -0
  52. package/src/lib/components/base-form/base-form.component.ts +305 -0
  53. package/src/lib/components/base-form-canvas/base-form-canvas.component.css +22 -0
  54. package/src/lib/components/base-form-canvas/base-form-canvas.component.html +1006 -0
  55. package/src/lib/components/base-form-canvas/base-form-canvas.component.spec.ts +23 -0
  56. package/src/lib/components/base-form-canvas/base-form-canvas.component.ts +573 -0
  57. package/src/lib/components/base-input-dialog/base-input-dialog.component.css +0 -0
  58. package/src/lib/components/base-input-dialog/base-input-dialog.component.html +42 -0
  59. package/src/lib/components/base-input-dialog/base-input-dialog.component.spec.ts +23 -0
  60. package/src/lib/components/base-input-dialog/base-input-dialog.component.ts +78 -0
  61. package/src/lib/components/base-table/base-table.component.html +242 -0
  62. package/src/lib/components/base-table/base-table.component.scss +31 -0
  63. package/src/lib/components/base-table/base-table.component.spec.ts +25 -0
  64. package/src/lib/components/base-table/base-table.component.ts +568 -0
  65. package/src/lib/components/button-actions/button-actions.component.html +28 -0
  66. package/src/lib/components/button-actions/button-actions.component.scss +6 -0
  67. package/src/lib/components/button-actions/button-actions.component.spec.ts +23 -0
  68. package/src/lib/components/button-actions/button-actions.component.ts +72 -0
  69. package/src/lib/components/editable-base-table/editable-base-table.component.html +372 -0
  70. package/src/lib/components/editable-base-table/editable-base-table.component.scss +44 -0
  71. package/src/lib/components/editable-base-table/editable-base-table.component.spec.ts +25 -0
  72. package/src/lib/components/editable-base-table/editable-base-table.component.ts +570 -0
  73. package/src/lib/components/equation-builder/equation-builder.component.css +0 -0
  74. package/src/lib/components/equation-builder/equation-builder.component.html +31 -0
  75. package/src/lib/components/equation-builder/equation-builder.component.spec.ts +23 -0
  76. package/src/lib/components/equation-builder/equation-builder.component.ts +121 -0
  77. package/src/lib/components/multi-auto-complete/multi-auto-complete.component.css +11 -0
  78. package/src/lib/components/multi-auto-complete/multi-auto-complete.component.html +38 -0
  79. package/src/lib/components/multi-auto-complete/multi-auto-complete.component.spec.ts +23 -0
  80. package/src/lib/components/multi-auto-complete/multi-auto-complete.component.ts +317 -0
  81. package/src/lib/components/paginator/paginator.component.css +25 -0
  82. package/src/lib/components/paginator/paginator.component.html +34 -0
  83. package/src/lib/components/paginator/paginator.component.ts +94 -0
  84. package/src/lib/components/rejection-comment/action-comment.component.css +33 -0
  85. package/src/lib/components/rejection-comment/action-comment.component.html +46 -0
  86. package/src/lib/components/rejection-comment/action-comment.component.spec.ts +23 -0
  87. package/src/lib/components/rejection-comment/action-comment.component.ts +86 -0
  88. package/src/lib/components/report-details-dialog/report-details-dialog.component.css +17 -0
  89. package/src/lib/components/report-details-dialog/report-details-dialog.component.html +16 -0
  90. package/src/lib/components/report-details-dialog/report-details-dialog.component.spec.ts +23 -0
  91. package/src/lib/components/report-details-dialog/report-details-dialog.component.ts +113 -0
  92. package/src/lib/components/report-form/report-form.component.html +94 -0
  93. package/src/lib/components/report-form/report-form.component.scss +0 -0
  94. package/src/lib/components/report-form/report-form.component.spec.ts +25 -0
  95. package/src/lib/components/report-form/report-form.component.ts +588 -0
  96. package/src/lib/components/search-bar/search-bar.component.html +62 -0
  97. package/src/lib/components/search-bar/search-bar.component.scss +8 -0
  98. package/src/lib/components/search-bar/search-bar.component.spec.ts +25 -0
  99. package/src/lib/components/search-bar/search-bar.component.ts +70 -0
  100. package/src/lib/components/shared/attachment-uploader/attachment-uploader.component.css +54 -0
  101. package/src/lib/components/shared/attachment-uploader/attachment-uploader.component.html +22 -0
  102. package/src/lib/components/shared/attachment-uploader/attachment-uploader.component.spec.ts +23 -0
  103. package/src/lib/components/shared/attachment-uploader/attachment-uploader.component.ts +45 -0
  104. package/src/lib/components/shared-list/shared-list.component.css +0 -0
  105. package/src/lib/components/shared-list/shared-list.component.html +17 -0
  106. package/src/lib/components/shared-list/shared-list.component.spec.ts +23 -0
  107. package/src/lib/components/shared-list/shared-list.component.ts +53 -0
  108. package/src/lib/components/title-bar/title-bar.component.css +0 -0
  109. package/src/lib/components/title-bar/title-bar.component.css.map +1 -0
  110. package/src/lib/components/title-bar/title-bar.component.html +31 -0
  111. package/src/lib/components/title-bar/title-bar.component.scss +23 -0
  112. package/src/lib/components/title-bar/title-bar.component.spec.ts +23 -0
  113. package/src/lib/components/title-bar/title-bar.component.ts +119 -0
  114. package/src/lib/services/backend-service.ts +286 -0
  115. package/src/lib/services/index.ts +3 -0
  116. package/src/lib/services/top-panel.ts +17 -0
  117. package/src/lib/services/trigger-form.service.ts +11 -0
  118. package/src/lib/share-module/shared-module.ts +10 -0
  119. package/src/lib/styles/invoiceq-theme.scss +252 -0
  120. package/src/lib/styles/styles.scss +1723 -0
  121. package/src/lib/utils/base-utils.ts +102 -0
  122. package/src/lib/validators/date-range-validator.ts +31 -0
  123. package/src/lib/validators/index.ts +3 -0
  124. package/src/lib/validators/match-list.validator.ts +10 -0
  125. package/src/lib/validators/multi-email-validator.ts +15 -0
  126. package/src/public-api.ts +21 -0
  127. package/tsconfig.lib.json +15 -0
  128. package/tsconfig.lib.prod.json +11 -0
  129. package/tsconfig.spec.json +15 -0
package/src/lib/components/base-form-canvas/base-form-canvas.component.html ADDED
@@ -0,0 +1,1006 @@
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>