@yomotech/view-toolkit 0.0.30 → 0.0.32

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 (72) hide show
  1. package/ng-package.json +7 -0
  2. package/package.json +38 -49
  3. package/src/lib/app-version.ts +2 -0
  4. package/src/lib/components/autocomplete/autocomplete.css +0 -0
  5. package/src/lib/components/autocomplete/autocomplete.html +23 -0
  6. package/src/lib/components/autocomplete/autocomplete.ts +71 -0
  7. package/src/lib/components/button/button.css +0 -0
  8. package/src/lib/components/button/button.html +1 -0
  9. package/src/lib/components/button/button.ts +11 -0
  10. package/src/lib/components/date/date.css +0 -0
  11. package/src/lib/components/date/date.html +1 -0
  12. package/src/lib/components/date/date.ts +11 -0
  13. package/src/lib/components/dropdown/dropdown.css +0 -0
  14. package/src/lib/components/dropdown/dropdown.html +1 -0
  15. package/src/lib/components/dropdown/dropdown.ts +11 -0
  16. package/src/lib/components/error-message/error-message.css +0 -0
  17. package/src/lib/components/error-message/error-message.html +1 -0
  18. package/src/lib/components/error-message/error-message.ts +11 -0
  19. package/src/lib/components/label/label.css +0 -0
  20. package/src/lib/components/label/label.html +7 -0
  21. package/src/lib/components/label/label.ts +33 -0
  22. package/src/lib/components/string/string.css +0 -0
  23. package/src/lib/components/string/string.html +4 -0
  24. package/src/lib/components/string/string.ts +22 -0
  25. package/src/lib/components/textbox/textbox.css +0 -0
  26. package/src/lib/components/textbox/textbox.html +7 -0
  27. package/src/lib/components/textbox/textbox.ts +33 -0
  28. package/src/lib/components/time/time.css +0 -0
  29. package/src/lib/components/time/time.html +1 -0
  30. package/src/lib/components/time/time.ts +11 -0
  31. package/src/lib/containers/card/card.component.css +0 -0
  32. package/src/lib/containers/card/card.component.html +450 -0
  33. package/src/lib/containers/card/card.component.ts +474 -0
  34. package/src/lib/containers/form/form.component.css +101 -0
  35. package/src/lib/containers/form/form.component.html +305 -0
  36. package/src/lib/containers/form/form.component.ts +333 -0
  37. package/src/lib/containers/grid/grid.component.css +0 -0
  38. package/src/lib/containers/grid/grid.component.html +212 -0
  39. package/src/lib/containers/grid/grid.component.ts +228 -0
  40. package/src/lib/containers/header-menu/header-menu.component.css +0 -0
  41. package/src/lib/containers/header-menu/header-menu.component.html +72 -0
  42. package/src/lib/containers/header-menu/header-menu.component.ts +105 -0
  43. package/src/lib/containers/logs/logs.component.css +160 -0
  44. package/src/lib/containers/logs/logs.component.html +89 -0
  45. package/src/lib/containers/logs/logs.component.ts +29 -0
  46. package/src/lib/containers/model/model.component.css +0 -0
  47. package/src/lib/containers/model/model.component.html +351 -0
  48. package/src/lib/containers/model/model.component.ts +436 -0
  49. package/src/lib/containers/pagination/pagination.component.css +0 -0
  50. package/src/lib/containers/pagination/pagination.component.html +41 -0
  51. package/src/lib/containers/pagination/pagination.component.ts +100 -0
  52. package/src/lib/containers/side-menu/side-menu.component.css +173 -0
  53. package/src/lib/containers/side-menu/side-menu.component.html +126 -0
  54. package/src/lib/containers/side-menu/side-menu.component.ts +458 -0
  55. package/src/lib/services/app-version-reset.service.ts +59 -0
  56. package/src/lib/services/config.service.ts +144 -0
  57. package/src/lib/services/couchdb.ts +275 -0
  58. package/src/lib/services/mobile-keycloak.service.ts +116 -0
  59. package/src/lib/services/network-log.service.ts +27 -0
  60. package/src/lib/services/notification.service.ts +26 -0
  61. package/src/lib/services/request.service.ts +125 -0
  62. package/src/lib/services/utility.service.ts +600 -0
  63. package/src/lib/view-toolkit.module.ts +57 -0
  64. package/src/lib/view-toolkit.spec.ts +23 -0
  65. package/src/lib/view-toolkit.ts +15 -0
  66. package/src/public-api.ts +25 -0
  67. package/tsconfig.lib.json +17 -0
  68. package/tsconfig.lib.prod.json +11 -0
  69. package/tsconfig.spec.json +15 -0
  70. package/fesm2022/yomotech-view-toolkit.mjs +0 -3538
  71. package/fesm2022/yomotech-view-toolkit.mjs.map +0 -1
  72. package/types/yomotech-view-toolkit.d.ts +0 -644
package/src/lib/containers/card/card.component.html ADDED
@@ -0,0 +1,450 @@
1
+ <!-- Loader Spinner -->
2
+ <div *ngIf="isLoading" class="loader-overlay">
3
+ <div class="spinner"></div>
4
+ </div>
5
+ <span *ngIf="this.selectedLanguageInfo?.selectedLanguage">
6
+ <!-- top pagination on card -->
7
+ <div *ngIf="itemInfo?.layoutSchema?.pagination?.pageSize && itemInfo?.layoutSchema?.pagination?.top">
8
+ <vl-pagination [itemInfo]="itemInfo" [pageSize]="pageSize" [currentPage]="currentPage" [pages]="pages"
9
+ (pageSizeChange)="invokeOnPageSizeChange($event)" (onGoToPage)="invokeGoToPage($event)">
10
+ </vl-pagination>
11
+ </div>
12
+ <div *ngIf="itemInfo?.header?.elements" [style]="getStyleWithoutClasses(itemInfo?.header?.style).style"
13
+ [class]="getStyleWithoutClasses(itemInfo?.header?.style).classes">
14
+ <span *ngFor="let element of itemInfo.header?.elements; let c = index">
15
+ <ng-container
16
+ [ngSwitch]="element.scope?.reference && itemInfo.propertySchema[getScope(element.scope?.reference)] ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.type : 'default'">
17
+
18
+ <!-- String Control -->
19
+ <div *ngSwitchCase="'string'" [class]="element.option?.visible ? 'card-field-wrapper' : 'hidden'">
20
+
21
+ <!-- LABEL -->
22
+ <span *ngIf="element.label?.caption" [style]="getStyleWithoutClasses(element.label?.style).style"
23
+ [class]="element.label?.style?.classes?.[0]">
24
+ {{ element.label.caption }}
25
+ </span>
26
+ </div>
27
+
28
+ <!-- Date control -->
29
+ <div *ngSwitchCase="'date'" class="mb-3">
30
+ <span *ngIf="element.option.protected" [style]="getStyleWithoutClasses(element?.label?.style).style"
31
+ [class]="element?.label?.style?.classes[0]">
32
+ <vl-string [formField]="element" [modalItemInfo]="itemInfo">
33
+ </vl-string>
34
+ </span>
35
+ <div *ngIf="!element.option.protected"
36
+ [class]="element?.layout == 'horizontal' ? 'horizontal-layout' : ''"
37
+ [ngClass]="element?.style?.classes[0]" [style]="getStyleWithoutClasses(element?.style).style">
38
+ <label [style]="getStyleWithoutClasses(element?.label?.style).style"
39
+ [class]="element?.label?.style?.classes[0]">{{ element.label?.value
40
+ ?
41
+ element.label?.value : element.label?.caption ?
42
+ element.label?.caption :
43
+ itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption
44
+ }}</label>
45
+ <p-datepicker (ngModelChange)="dateChangeEvent(element, $event)" [showIcon]="true" type="number"
46
+ inputmode="numeric"
47
+ [dateFormat]="itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].format : 'yy-mm-dd'"
48
+ [(ngModel)]="itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].value"
49
+ (onFocus)="forceNumericKeyboard($event)" (onInput)="onDateTyping($event)"
50
+ [class]="element?.scope?.style?.classes[0]"
51
+ [style]="getStyleWithoutClasses(element?.scope?.style).style">
52
+ </p-datepicker>
53
+ </div>
54
+ </div>
55
+
56
+ <!-- Button Control -->
57
+ <div *ngSwitchCase="'default'" [class]="element.option?.visible ? 'row' : 'hidden'"
58
+ (click)="invokeOnCardHeader(element)">
59
+ <button nz-button [style]="getStyleWithoutClasses(element.style).style"
60
+ [class]="element.option.protected ? 'disabled-button' : getStyleWithoutClasses(element.style).classes">
61
+ <ng-container *ngIf="!element.caption; else textContent">
62
+ <i nz-icon [nzType]="element.icon" nzTheme="outline"></i>
63
+ </ng-container>
64
+ <ng-template #textContent>
65
+ {{ element.caption }}
66
+ </ng-template>
67
+ </button>
68
+ </div>
69
+ </ng-container>
70
+ </span>
71
+ </div>
72
+ <div [class]="itemInfo.class" [style]="itemInfo.style">
73
+ <div *ngFor="let record of itemInfo.data; let k = index"
74
+ [ngClass]="mobileDisplay ? '' : itemInfo.layoutSchema.pagination ? cardPerRow + itemInfo.layoutSchema?.stylePerCard?.elementPerRow[k % itemInfo.layoutSchema?.stylePerCard?.elementPerRow.length] : ''">
75
+ <div [class]="itemInfo.layoutSchema?.stylePerCard?.classes[0]"
76
+ [style]="getStyleWithoutClasses(itemInfo.layoutSchema?.stylePerCard).style">
77
+ <div *ngFor="let layout of itemInfo.layoutSchema.cards">
78
+ <ng-container
79
+ [ngSwitch]="layout?.scope?.reference && itemInfo.propertySchema[getScope(layout.scope?.reference)] ? itemInfo.propertySchema[getScope(layout.scope?.reference)][layout.scope?.reference.split('/').pop()]?.type : layout?.type == 'HorizontalLayout' ? 'HorizontalLayout' : 'default'">
80
+ <!-- Image Control -->
81
+ <div *ngSwitchCase="'image'" [class]="layout.option?.visible ? 'row' : 'hidden'">
82
+ <img [class]="getStyleWithoutClasses(layout?.scope?.style).classes"
83
+ [style]="getStyleWithoutClasses(layout?.scope?.style).style"
84
+ [src]="layout?.option?.src ? layout?.option?.src : record[layout.scope?.reference.split('/').pop()]"
85
+ alt="{{ layout.label ? layout.label : getProperty(layout.scope?.reference).productSchema.caption }}"
86
+ (click)="showImageDetails(layout.option, record)" />
87
+ </div>
88
+
89
+ <!-- String Control -->
90
+ <div *ngSwitchCase="'string'" [class]="layout.option?.visible ? 'card-field-wrapper' : 'hidden'"
91
+ [style]="getStyleWithoutClasses(layout?.scope?.style).style">
92
+
93
+ <!-- LABEL -->
94
+ <span *ngIf="layout?.label?.caption" [class]="layout.label?.style?.classes?.[0]">
95
+ {{ layout.label.caption }}
96
+ </span>
97
+
98
+ <!-- VALUE -->
99
+ <p *ngIf="layout.option?.protected && layout.option?.visible"
100
+ [class]="getStyleWithoutClasses(layout?.scope?.style).classes"
101
+ (click)="showLinkDetails(layout.option, record)">
102
+ {{
103
+ record?.[layout.scope?.reference.split('/').pop()]
104
+ ?? itemInfo.propertySchema[
105
+ getScope(layout.scope?.reference)
106
+ ]?.[layout.scope?.reference.split('/').pop()]?.default
107
+ ?? '--'
108
+ }}
109
+ </p>
110
+ </div>
111
+
112
+ <!-- Date Control -->
113
+ <div *ngSwitchCase="'date'" [class]="layout.option?.visible ? 'card-field-wrapper' : 'hidden'"
114
+ [style]="getStyleWithoutClasses(layout?.scope?.style).style">
115
+
116
+ <!-- LABEL -->
117
+ <span *ngIf="layout?.label?.caption" [class]="layout.label?.style?.classes?.[0]">
118
+ {{ layout.label.caption }}
119
+ </span>
120
+
121
+ <!-- VALUE -->
122
+ <p *ngIf="layout.option?.protected && layout.option?.visible"
123
+ [class]="getStyleWithoutClasses(layout?.scope?.style).classes"
124
+ (click)="showLinkDetails(layout.option, record)">
125
+ {{
126
+ record?.[layout.scope?.reference.split('/').pop()]
127
+ ?? itemInfo.propertySchema[
128
+ getScope(layout.scope?.reference)
129
+ ]?.[layout.scope?.reference.split('/').pop()]?.default
130
+ ?? '--'
131
+ }}
132
+ </p>
133
+ </div>
134
+
135
+ <!-- Time Control -->
136
+ <div *ngSwitchCase="'time'" [class]="layout.option?.visible ? 'card-field-wrapper' : 'hidden'"
137
+ [style]="getStyleWithoutClasses(layout?.scope?.style).style">
138
+
139
+ <!-- LABEL -->
140
+ <span *ngIf="layout?.label?.caption" [class]="layout.label?.style?.classes?.[0]">
141
+ {{ layout.label.caption }}
142
+ </span>
143
+
144
+ <!-- VALUE -->
145
+ <p *ngIf="layout.option?.protected && layout.option?.visible"
146
+ [class]="getStyleWithoutClasses(layout?.scope?.style).classes"
147
+ (click)="showLinkDetails(layout.option, record)">
148
+ {{
149
+ record?.[layout.scope?.reference.split('/').pop()]
150
+ ?? itemInfo.propertySchema[
151
+ getScope(layout.scope?.reference)
152
+ ]?.[layout.scope?.reference.split('/').pop()]?.default
153
+ ?? '--'
154
+ }}
155
+ </p>
156
+ </div>
157
+
158
+ <!-- number Control -->
159
+ <div *ngSwitchCase="'number'" [class]="layout.option?.visible ? 'row' : 'hidden'">
160
+ <h3 *ngIf="itemInfo.propertySchema[getScope(layout.scope?.reference)] && itemInfo.propertySchema[getScope(layout.scope?.reference)][layout.scope?.reference.split('/').pop()]?.format.currency"
161
+ [class]="getStyleWithoutClasses(layout?.scope?.style).classes"
162
+ [style]="getStyleWithoutClasses(layout?.scope?.style).style">
163
+ {{ record[layout.scope?.reference.split('/').pop()] | currency: layout.option?.currency
164
+ ?
165
+ layout.option.currency
166
+ :
167
+ 'USD' }}
168
+ </h3>
169
+ </div>
170
+
171
+ <!-- Button Control -->
172
+ <div *ngSwitchCase="'default'" [class]="layout.option?.visible ? 'row' : 'hidden'">
173
+ <button [style]="getStyleWithoutClasses(layout?.style).style"
174
+ [class]="layout.option.protected ? 'disabled-button' : getStyleWithoutClasses(layout?.style).classes"
175
+ (click)="invokeButtonClick(layout, record, k)">
176
+ <ng-container *ngIf="!layout.caption; else textContent">
177
+ <i nz-icon [nzType]="layout.icon" nzTheme="outline"></i>
178
+ </ng-container>
179
+ <ng-template #textContent>
180
+ {{ layout.caption }}
181
+ </ng-template>
182
+ </button>
183
+ </div>
184
+
185
+ <!-- HorizontalLayout Control -->
186
+ <div *ngSwitchCase="'HorizontalLayout'">
187
+ <div [class]="getStyleWithoutClasses(layout?.style).classes"
188
+ [style]="getStyleWithoutClasses(layout?.style).style">
189
+ <ng-container *ngFor="let innerLayout of layout.elements">
190
+ <ng-container
191
+ [ngSwitch]="innerLayout.scope?.reference && itemInfo.propertySchema[getScope(innerLayout.scope?.reference)] ? itemInfo.propertySchema[getScope(innerLayout.scope?.reference)][innerLayout.scope?.reference.split('/').pop()]?.type : 'default'">
192
+ <!-- Image Control -->
193
+ <div *ngSwitchCase="'image'"
194
+ [class]="innerLayout.option?.visible ? 'row' : 'hidden'">
195
+ <img [class]="getStyleWithoutClasses(innerLayout?.scope?.style).classes"
196
+ [style]="getStyleWithoutClasses(innerLayout?.scope?.style).style"
197
+ [src]="innerLayout?.option?.src ? innerLayout?.option?.src : record[innerLayout.scope?.reference.split('/').pop()]"
198
+ alt="{{ innerLayout.label ? innerLayout.label : getProperty(innerLayout.scope?.reference).productSchema.caption }}"
199
+ (click)="showImageDetails(innerLayout.option, record)" />
200
+ </div>
201
+
202
+ <!-- String Control -->
203
+ <div *ngSwitchCase="'string'"
204
+ [class]="innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'">
205
+
206
+ <!-- LABEL -->
207
+ <span *ngIf="innerLayout.label?.caption"
208
+ [style]="getStyleWithoutClasses(innerLayout.label?.style).style"
209
+ [class]="innerLayout.label?.style?.classes?.[0]">
210
+ {{ innerLayout.label.caption }}
211
+ </span>
212
+
213
+ <!-- VALUE -->
214
+ <h3 *ngIf="innerLayout.option?.protected && innerLayout.option?.visible"
215
+ [class]="getStyleWithoutClasses(innerLayout?.scope?.style).classes"
216
+ [style]="getStyleWithoutClasses(innerLayout?.scope?.style).style"
217
+ (click)="showLinkDetails(innerLayout.option, record)">
218
+
219
+ <!-- DATE FORMAT -->
220
+ <ng-container *ngIf="innerLayout.option?.dateFormat; else checkTime">
221
+ {{
222
+ record?.[innerLayout.scope?.reference.split('/').pop()]
223
+ ? (record[innerLayout.scope?.reference.split('/').pop()] | date:
224
+ innerLayout.option.dateFormat)
225
+ : '--'
226
+ }}
227
+ </ng-container>
228
+
229
+ <!-- TIME FORMAT -->
230
+ <ng-template #checkTime>
231
+ <ng-container
232
+ *ngIf="innerLayout.option?.timeFormat; else normalValue">
233
+ {{
234
+ record?.[innerLayout.scope?.reference.split('/').pop()]
235
+ ? (record[innerLayout.scope?.reference.split('/').pop()] | date:
236
+ innerLayout.option.timeFormat)
237
+ : '--'
238
+ }}
239
+ </ng-container>
240
+ </ng-template>
241
+
242
+ <!-- NORMAL STRING -->
243
+ <ng-template #normalValue>
244
+ {{
245
+ record?.[innerLayout.scope?.reference.split('/').pop()]
246
+ ?? '--'
247
+ }}
248
+ </ng-template>
249
+
250
+ </h3>
251
+ </div>
252
+
253
+ <!-- number Control -->
254
+ <div *ngSwitchCase="'number'"
255
+ [class]="innerLayout.option?.visible ? 'row' : 'hidden'">
256
+ <h3 *ngIf="itemInfo.propertySchema[getScope(innerLayout.scope?.reference)] &&itemInfo.propertySchema[getScope(innerLayout.scope?.reference)][innerLayout.scope?.reference.split('/').pop()]?.format.currency"
257
+ [class]="getStyleWithoutClasses(innerLayout?.scope?.style).classes"
258
+ [style]="getStyleWithoutClasses(innerLayout?.scope?.style).style">
259
+ {{ record[innerLayout.scope?.reference.split('/').pop()] | currency:
260
+ innerLayout.option?.currency ?
261
+ innerLayout.option.currency
262
+ :
263
+ 'USD' }}
264
+ </h3>
265
+ </div>
266
+
267
+ <!-- Date Control -->
268
+ <div *ngSwitchCase="'date'"
269
+ [class]="innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'">
270
+
271
+ <!-- LABEL -->
272
+ <span *ngIf="innerLayout.label?.caption"
273
+ [style]="getStyleWithoutClasses(innerLayout.label?.style).style"
274
+ [class]="innerLayout.label?.style?.classes?.[0]">
275
+ {{ innerLayout.label.caption }}
276
+ </span>
277
+
278
+ <!-- VALUE -->
279
+ <h3 *ngIf="innerLayout.option?.protected && innerLayout.option?.visible"
280
+ [class]="getStyleWithoutClasses(innerLayout?.scope?.style).classes"
281
+ [style]="getStyleWithoutClasses(innerLayout?.scope?.style).style"
282
+ (click)="showLinkDetails(innerLayout.option, record)">
283
+
284
+ <!-- DATE FORMAT -->
285
+ <ng-container *ngIf="innerLayout.option?.dateFormat; else checkTime">
286
+ {{
287
+ record?.[innerLayout.scope?.reference.split('/').pop()]
288
+ ? (record[innerLayout.scope?.reference.split('/').pop()] | date:
289
+ innerLayout.option.dateFormat)
290
+ : '--'
291
+ }}
292
+ </ng-container>
293
+
294
+ <!-- TIME FORMAT -->
295
+ <ng-template #checkTime>
296
+ <ng-container
297
+ *ngIf="innerLayout.option?.timeFormat; else normalValue">
298
+ {{
299
+ record?.[innerLayout.scope?.reference.split('/').pop()]
300
+ ? (record[innerLayout.scope?.reference.split('/').pop()] | date:
301
+ innerLayout.option.timeFormat)
302
+ : '--'
303
+ }}
304
+ </ng-container>
305
+ </ng-template>
306
+
307
+ <!-- NORMAL STRING -->
308
+ <ng-template #normalValue>
309
+ {{
310
+ record?.[innerLayout.scope?.reference.split('/').pop()]
311
+ ?? '--'
312
+ }}
313
+ </ng-template>
314
+
315
+ </h3>
316
+ </div>
317
+
318
+ <!-- Time Control -->
319
+ <div *ngSwitchCase="'time'"
320
+ [class]="innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'">
321
+
322
+ <!-- LABEL -->
323
+ <span *ngIf="innerLayout.label?.caption"
324
+ [style]="getStyleWithoutClasses(innerLayout.label?.style).style"
325
+ [class]="innerLayout.label?.style?.classes?.[0]">
326
+ {{ innerLayout.label.caption }}
327
+ </span>
328
+
329
+ <!-- VALUE -->
330
+ <h3 *ngIf="innerLayout.option?.protected && innerLayout.option?.visible"
331
+ [class]="getStyleWithoutClasses(innerLayout?.scope?.style).classes"
332
+ [style]="getStyleWithoutClasses(innerLayout?.scope?.style).style"
333
+ (click)="showLinkDetails(innerLayout.option, record)">
334
+
335
+ <!-- DATE FORMAT -->
336
+ <ng-container *ngIf="innerLayout.option?.dateFormat; else checkTime">
337
+ {{
338
+ record?.[innerLayout.scope?.reference.split('/').pop()]
339
+ ? (record[innerLayout.scope?.reference.split('/').pop()] | date:
340
+ innerLayout.option.dateFormat)
341
+ : '--'
342
+ }}
343
+ </ng-container>
344
+
345
+ <!-- TIME FORMAT -->
346
+ <ng-template #checkTime>
347
+ <ng-container
348
+ *ngIf="innerLayout.option?.timeFormat; else normalValue">
349
+ {{
350
+ record?.[innerLayout.scope?.reference.split('/').pop()]
351
+ ? (record[innerLayout.scope?.reference.split('/').pop()] | date:
352
+ innerLayout.option.timeFormat)
353
+ : '--'
354
+ }}
355
+ </ng-container>
356
+ </ng-template>
357
+
358
+ <!-- NORMAL STRING -->
359
+ <ng-template #normalValue>
360
+ {{
361
+ record?.[innerLayout.scope?.reference.split('/').pop()]
362
+ ?? '--'
363
+ }}
364
+ </ng-template>
365
+
366
+ </h3>
367
+ </div>
368
+
369
+ <!-- Button Control -->
370
+ <div *ngSwitchCase="'default'">
371
+ <button nz-button [style]="getStyleWithoutClasses(innerLayout?.style).style"
372
+ [class]="innerLayout.option?.visible ? innerLayout.option.protected ? 'disabled-button' : getStyleWithoutClasses(innerLayout?.style).classes : 'hidden'"
373
+ (click)="invokeButtonClick(innerLayout, record, k)">
374
+ <ng-container *ngIf="!innerLayout.caption; else textContent">
375
+ <i nz-icon [nzType]="innerLayout.icon" nzTheme="outline"></i>
376
+ </ng-container>
377
+ <ng-template #textContent>
378
+ {{ innerLayout.caption }}
379
+ </ng-template>
380
+ </button>
381
+ </div>
382
+
383
+ </ng-container>
384
+ </ng-container>
385
+ </div>
386
+ </div>
387
+ </ng-container>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ <div *ngIf="itemInfo?.footer?.elements && itemInfo?.data && itemInfo?.data.length"
393
+ [class]="getStyleWithoutClasses(itemInfo?.footer?.style).classes">
394
+ <span *ngFor="let element of itemInfo.footer?.elements; let c = index">
395
+ <ng-container
396
+ [ngSwitch]="element.scope?.reference && itemInfo.propertySchema[getScope(element.scope?.reference)] ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.type : 'default'">
397
+
398
+ <!-- Date control -->
399
+ <div *ngSwitchCase="'date'" class="form-group mb-3">
400
+ <span *ngIf="element.option.protected" [style]="getStyleWithoutClasses(element?.label?.style).style"
401
+ [class]="element?.label?.style?.classes[0]">
402
+ <h5>{{
403
+ itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption
404
+ }}
405
+ </h5>
406
+ </span>
407
+ <div *ngIf="!element.option.protected">
408
+ <div [class]="element?.layout == 'horizontal' ? 'horizontal-layout' : 'row'">
409
+ <label [style]="getStyleWithoutClasses(element?.label?.style).style"
410
+ [class]="element?.label?.style?.classes[0]">{{ element.label?.value
411
+ ?
412
+ element.label?.value : element.label?.caption ?
413
+ element.label?.caption :
414
+ itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption
415
+ }}</label>
416
+
417
+ <nz-date-picker [required]="element.option.required" [name]="element.scope?.reference"
418
+ [nzDisabled]="element?.option?.disabled"
419
+ (ngModelChange)="dateChangeEvent(element, $event)"
420
+ [nzFormat]="itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format : 'yyyy-MM-dd'"
421
+ [(ngModel)]="itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].value"
422
+ [style]="getStyleWithoutClasses(element?.style).style"></nz-date-picker>
423
+ </div>
424
+
425
+ </div>
426
+ </div>
427
+
428
+ <!-- Button Control -->
429
+ <div *ngSwitchCase="'default'" [class]="element.option?.visible ? 'row' : 'hidden'"
430
+ (click)="invokeOnCardFooter(element)">
431
+ <button nz-button [style]="getStyleWithoutClasses(element.style).style"
432
+ [class]="element.option.protected ? 'disabled-button' : getStyleWithoutClasses(element.style).classes">
433
+ <ng-container *ngIf="!element.caption; else textContent">
434
+ <i nz-icon [nzType]="element.icon" nzTheme="outline"></i>
435
+ </ng-container>
436
+ <ng-template #textContent>
437
+ {{ element.caption }}
438
+ </ng-template>
439
+ </button>
440
+ </div>
441
+ </ng-container>
442
+ </span>
443
+ </div>
444
+ <!-- bottom pagination on card -->
445
+ <div *ngIf="itemInfo?.layoutSchema?.pagination && itemInfo?.layoutSchema?.pagination?.bottom">
446
+ <vl-pagination [itemInfo]="itemInfo" [pageSize]="pageSize" [currentPage]="currentPage" [pages]="pages"
447
+ (pageSizeChange)="invokeOnPageSizeChange($event)" (onGoToPage)="invokeGoToPage($event)">
448
+ </vl-pagination>
449
+ </div>
450
+ </span>