@mediusinc/mng-commons 0.6.0 → 0.7.1

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 (51) hide show
  1. package/assets/i18n/en.json +3 -3
  2. package/assets/i18n/sl.json +3 -3
  3. package/esm2020/lib/api/models/builders/query-param.builder.mjs +7 -1
  4. package/esm2020/lib/api/services/crud-api.abstract.service.mjs +2 -2
  5. package/esm2020/lib/api/utils/medius-rest.util.mjs +52 -26
  6. package/esm2020/lib/components/action/editor/action-editor.component.mjs +2 -2
  7. package/esm2020/lib/components/action/models/action-execution.model.mjs +3 -2
  8. package/esm2020/lib/components/form/formly/fields/formly-field-input/formly-field-input.component.mjs +3 -3
  9. package/esm2020/lib/components/form/formly/fields/formly-field-lookup-dialog/formly-field-lookup-dialog.component.mjs +1 -1
  10. package/esm2020/lib/components/form/formly/fields/formly-field-table-dialog-form/formly-field-table-dialog-form.component.mjs +25 -34
  11. package/esm2020/lib/components/form/formly/fields/formly-field-table-dialog-multiselect/formly-field-table-dialog-multiselect.component.mjs +1 -1
  12. package/esm2020/lib/components/tableview/table/column-filter/column-filter.component.mjs +26 -9
  13. package/esm2020/lib/components/tableview/table/table.component.mjs +115 -29
  14. package/esm2020/lib/components/tableview/tableview.component.mjs +3 -11
  15. package/esm2020/lib/config/formly.config.mjs +3 -3
  16. package/esm2020/lib/data-providers/editor.data-provider.mjs +1 -1
  17. package/esm2020/lib/descriptors/action.descriptor.mjs +8 -15
  18. package/esm2020/lib/descriptors/column.descriptor.mjs +32 -1
  19. package/esm2020/lib/descriptors/field.descriptor.mjs +2 -2
  20. package/esm2020/lib/descriptors/filter.descriptor.mjs +61 -3
  21. package/esm2020/lib/descriptors/table.descriptor.mjs +52 -9
  22. package/esm2020/lib/services/action-executor.service.mjs +3 -3
  23. package/esm2020/lib/services/commons.service.mjs +3 -3
  24. package/esm2020/lib/utils/action-data-provider.util.mjs +116 -0
  25. package/esm2020/lib/utils/editor-formly.util.mjs +2 -42
  26. package/esm2020/lib/utils/enum.util.mjs +3 -3
  27. package/esm2020/lib/utils/index.mjs +2 -1
  28. package/esm2020/lib/utils/styles.util.mjs +41 -0
  29. package/fesm2015/mediusinc-mng-commons.mjs +541 -184
  30. package/fesm2015/mediusinc-mng-commons.mjs.map +1 -1
  31. package/fesm2020/mediusinc-mng-commons.mjs +527 -174
  32. package/fesm2020/mediusinc-mng-commons.mjs.map +1 -1
  33. package/lib/api/models/builders/query-param.builder.d.ts +1 -0
  34. package/lib/api/services/crud-api.abstract.service.d.ts +8 -2
  35. package/lib/api/utils/medius-rest.util.d.ts +4 -2
  36. package/lib/components/action/models/action-execution.model.d.ts +5 -3
  37. package/lib/components/form/formly/fields/formly-field-table-dialog-form/formly-field-table-dialog-form.component.d.ts +1 -4
  38. package/lib/components/tableview/table/column-filter/column-filter.component.d.ts +2 -0
  39. package/lib/components/tableview/table/table.component.d.ts +21 -12
  40. package/lib/components/tableview/tableview.component.d.ts +1 -3
  41. package/lib/data-providers/editor.data-provider.d.ts +4 -4
  42. package/lib/descriptors/action.descriptor.d.ts +5 -5
  43. package/lib/descriptors/column.descriptor.d.ts +10 -0
  44. package/lib/descriptors/filter.descriptor.d.ts +21 -2
  45. package/lib/descriptors/table.descriptor.d.ts +22 -5
  46. package/lib/utils/action-data-provider.util.d.ts +17 -0
  47. package/lib/utils/index.d.ts +1 -0
  48. package/lib/utils/styles.util.d.ts +14 -0
  49. package/package.json +1 -1
  50. package/scss/mng-overrides/_theme_datatable.scss +57 -0
  51. package/scss/mng-overrides/_theme_tableview.scss +0 -43
@@ -12,7 +12,7 @@ import { FieldType, FieldWrapper, FORMLY_CONFIG, FormlyModule } from '@ngx-forml
12
12
  import * as i1$1 from '@ngx-translate/core';
13
13
  import { TranslateService, TranslateModule } from '@ngx-translate/core';
14
14
  import * as i2 from 'primeng/api';
15
- import { ConfirmationService, MessageService, FilterMatchMode } from 'primeng/api';
15
+ import { FilterMatchMode, ConfirmationService, MessageService } from 'primeng/api';
16
16
  import * as i2$1 from 'primeng/autocomplete';
17
17
  import { AutoComplete, AutoCompleteModule } from 'primeng/autocomplete';
18
18
  import * as i2$4 from 'primeng/breadcrumb';
@@ -58,7 +58,7 @@ import { RadioButtonModule } from 'primeng/radiobutton';
58
58
  import * as i8 from 'primeng/ripple';
59
59
  import { RippleModule } from 'primeng/ripple';
60
60
  import { SelectButtonModule } from 'primeng/selectbutton';
61
- import * as i7$1 from 'primeng/skeleton';
61
+ import * as i8$1 from 'primeng/skeleton';
62
62
  import { SkeletonModule } from 'primeng/skeleton';
63
63
  import * as i4$5 from 'primeng/table';
64
64
  import { Table, TableModule } from 'primeng/table';
@@ -72,12 +72,127 @@ import * as i4$3 from 'primeng/toolbar';
72
72
  import { ToolbarModule } from 'primeng/toolbar';
73
73
  import * as i9 from 'primeng/tooltip';
74
74
  import { TooltipModule } from 'primeng/tooltip';
75
- import { throwError, of, Subject, Observable, from, combineLatest, tap, BehaviorSubject, ReplaySubject, distinctUntilChanged, switchMap, mergeMap as mergeMap$1 } from 'rxjs';
75
+ import { isObservable, throwError, of, Subject, Observable, from, combineLatest, tap, BehaviorSubject, ReplaySubject, distinctUntilChanged, switchMap, mergeMap as mergeMap$1 } from 'rxjs';
76
76
  import 'reflect-metadata';
77
77
  import { map, mergeMap, first, catchError, filter, finalize, startWith } from 'rxjs/operators';
78
78
  import * as i4$1 from '@angular/platform-browser';
79
79
  import { trigger, state, style, transition, animate } from '@angular/animations';
80
80
 
81
+ class ActionDataProviderUtil {
82
+ static runFetchOrFail(ctx) {
83
+ const dataProviderExec = ActionDataProviderUtil.runFetchDataProvider(ctx);
84
+ if (isObservable(dataProviderExec)) {
85
+ return dataProviderExec;
86
+ }
87
+ const serviceExec = ActionDataProviderUtil.runGetByIdService(ctx);
88
+ return isObservable(serviceExec)
89
+ ? serviceExec
90
+ : throwError(() => new Error(`Data provider and service instance could not extract fetch function to execute in action ${ctx.action.actionName} (${ctx.action.model?.typeName}) for item id ${ctx.data?.itemId}.`));
91
+ }
92
+ static runCreateOrFail(ctx) {
93
+ const dataProviderExec = ActionDataProviderUtil.runCreateDataProvider(ctx);
94
+ if (isObservable(dataProviderExec)) {
95
+ return dataProviderExec;
96
+ }
97
+ const serviceExec = ActionDataProviderUtil.runCreateService(ctx);
98
+ return isObservable(serviceExec)
99
+ ? serviceExec
100
+ : throwError(() => new Error(`Data provider and service instance could not extract create function to execute in action ${ctx.action.actionName} (${ctx.action.model?.typeName}) for item ${ctx.data?.item}.`));
101
+ }
102
+ static runUpdateOrFail(ctx) {
103
+ const dataProviderExec = ActionDataProviderUtil.runUpdateDataProvider(ctx);
104
+ if (isObservable(dataProviderExec)) {
105
+ return dataProviderExec;
106
+ }
107
+ const serviceExec = ActionDataProviderUtil.runUpdateService(ctx);
108
+ return isObservable(serviceExec)
109
+ ? serviceExec
110
+ : throwError(() => new Error(`Data provider and service instance could not extract update function to execute in action ${ctx.action.actionName} (${ctx.action.model?.typeName}) for item id ${ctx.data?.itemId}.`));
111
+ }
112
+ static runDeleteOrFail(ctx) {
113
+ const dataProviderExec = ActionDataProviderUtil.runDeleteDataProvider(ctx);
114
+ if (isObservable(dataProviderExec)) {
115
+ return dataProviderExec;
116
+ }
117
+ const serviceExec = ActionDataProviderUtil.runDeleteService(ctx);
118
+ return isObservable(serviceExec)
119
+ ? serviceExec
120
+ : throwError(() => new Error(`Data provider and service instance could not extract delete function to execute in action ${ctx.action.actionName} (${ctx.action.model?.typeName}) for item id ${ctx.data?.itemId}.`));
121
+ }
122
+ static runGetByIdService(ctx) {
123
+ if (typeof ctx.serviceInstance !== 'undefined') {
124
+ const crudServiceInstance = ctx.serviceInstance;
125
+ if (typeof crudServiceInstance.getByIdGet === 'function') {
126
+ return ctx.data?.itemId ? crudServiceInstance.getByIdGet(ctx.data.itemId) : null;
127
+ }
128
+ }
129
+ return null;
130
+ }
131
+ static runCreateService(ctx) {
132
+ if (typeof ctx.serviceInstance !== 'undefined') {
133
+ const crudServiceInstance = ctx.serviceInstance;
134
+ if (typeof crudServiceInstance.createPost === 'function') {
135
+ return ctx.data?.item ? crudServiceInstance.createPost(ctx.data.item) : null;
136
+ }
137
+ }
138
+ return null;
139
+ }
140
+ static runUpdateService(ctx) {
141
+ if (typeof ctx.serviceInstance !== 'undefined') {
142
+ const crudServiceInstance = ctx.serviceInstance;
143
+ if (typeof crudServiceInstance.updatePut === 'function') {
144
+ return ctx.data?.itemId && ctx.data.item ? crudServiceInstance.updatePut(ctx.data.itemId, ctx.data.item) : null;
145
+ }
146
+ }
147
+ return null;
148
+ }
149
+ static runDeleteService(ctx) {
150
+ if (typeof ctx.serviceInstance !== 'undefined') {
151
+ const crudServiceInstance = ctx.serviceInstance;
152
+ if (typeof crudServiceInstance.removeDelete === 'function') {
153
+ return ctx.data?.itemId ? crudServiceInstance.removeDelete(ctx.data.itemId, ctx.data.item) : null;
154
+ }
155
+ }
156
+ return null;
157
+ }
158
+ static runFetchDataProvider(ctx) {
159
+ if (typeof ctx.dataProvider !== 'undefined') {
160
+ const editorDataProvider = ctx.dataProvider;
161
+ if (typeof editorDataProvider.fetch === 'function') {
162
+ return ctx.data?.itemId ? editorDataProvider.fetch(ctx.data.itemId, ctx.serviceInstance) : null;
163
+ }
164
+ }
165
+ return null;
166
+ }
167
+ static runCreateDataProvider(ctx) {
168
+ if (typeof ctx.dataProvider !== 'undefined') {
169
+ const editorDataProvider = ctx.dataProvider;
170
+ if (typeof editorDataProvider.create === 'function') {
171
+ return ctx.data?.item ? editorDataProvider.create(ctx.data.item, ctx.serviceInstance) : null;
172
+ }
173
+ }
174
+ return null;
175
+ }
176
+ static runUpdateDataProvider(ctx) {
177
+ if (typeof ctx.dataProvider !== 'undefined') {
178
+ const editorDataProvider = ctx.dataProvider;
179
+ if (typeof editorDataProvider.update === 'function') {
180
+ return ctx.data?.itemId ? editorDataProvider.update(ctx.data.itemId, ctx.data.item, ctx.serviceInstance) : null;
181
+ }
182
+ }
183
+ return null;
184
+ }
185
+ static runDeleteDataProvider(ctx) {
186
+ if (typeof ctx.dataProvider !== 'undefined') {
187
+ const editorDataProvider = ctx.dataProvider;
188
+ if (typeof editorDataProvider.delete === 'function') {
189
+ return ctx.data?.itemId ? editorDataProvider.delete(ctx.data.itemId, ctx.data.item, ctx.serviceInstance) : null;
190
+ }
191
+ }
192
+ return null;
193
+ }
194
+ }
195
+
81
196
  class DataProvider {
82
197
  constructor(modelType, serviceType) {
83
198
  this._modelType = modelType;
@@ -317,6 +432,12 @@ class MediusQueryParamBuilder {
317
432
  queryParam.queryMode = MediusQueryMode.All;
318
433
  return new MediusQueryParamBuilder(queryParam);
319
434
  }
435
+ static createFromExisting(queryParam, itemsPerPage, itemsOffset) {
436
+ queryParam.itemsPerPage = itemsPerPage ?? queryParam.itemsPerPage ?? 50;
437
+ queryParam.itemsOffset = itemsOffset ?? queryParam.itemsOffset ?? 0;
438
+ queryParam.queryMode = queryParam.queryMode ?? MediusQueryMode.All;
439
+ return new MediusQueryParamBuilder(queryParam);
440
+ }
320
441
  withItemsPerPage(itemsPerPage) {
321
442
  this.queryParam.itemsPerPage = itemsPerPage;
322
443
  return this;
@@ -644,11 +765,13 @@ class ActionDescriptor {
644
765
  this._hasRunNotificationSuccess = hasNotification;
645
766
  this._runNotificationSuccessTitle = title;
646
767
  this._runNotificationSuccessMessage = message;
768
+ return this;
647
769
  }
648
770
  withRunNotificationError(title, message, hasNotification = true) {
649
771
  this._hasRunNotificationError = hasNotification;
650
772
  this._runNotificationErrorTitle = title;
651
773
  this._runNotificationErrorMessage = message;
774
+ return this;
652
775
  }
653
776
  }
654
777
  (function (ActionDescriptor) {
@@ -833,7 +956,7 @@ class ActionEditorAddDescriptor extends ActionEditorDescriptor {
833
956
  super(editorDescriptor, ActionEditorAddDescriptor.ACTION_NAME);
834
957
  this.withPosition(ActionPositionEnum.ToolbarLeft);
835
958
  this.withRouteTrigger('add');
836
- this.withSubmitFunction(ctx => ctx.dataProvider?.create ? ctx.dataProvider.create(ctx.data?.item, ctx.serviceInstance) : throwError(new Error(`Data provider create function is missing.`)));
959
+ this.withSubmitFunction(ActionDataProviderUtil.runCreateOrFail);
837
960
  this.withLevel(ActionLevelEnum.Success);
838
961
  this.withIcon('pi pi-plus');
839
962
  }
@@ -859,12 +982,8 @@ class ActionEditorEditDescriptor extends ActionEditorDescriptor {
859
982
  this.withPosition(ActionPositionEnum.RowInline);
860
983
  this.withTitle(null);
861
984
  this.withRouteTrigger(':itemId/edit');
862
- this.withFetchFunction(ctx => ctx.dataProvider?.fetch && ctx.data?.itemId
863
- ? ctx.dataProvider.fetch(ctx.data.itemId, ctx.serviceInstance)
864
- : throwError(new Error(`Data provider fetch function or item id ${ctx.data?.itemId} is missing.`)));
865
- this.withSubmitFunction(ctx => ctx.dataProvider?.update && ctx.data?.itemId
866
- ? ctx.dataProvider.update(ctx.data.itemId, ctx.data?.item, ctx.serviceInstance)
867
- : throwError(new Error(`Data provider update function or item id ${ctx.data?.itemId} is missing.`)));
985
+ this.withFetchFunction(ActionDataProviderUtil.runFetchOrFail);
986
+ this.withSubmitFunction(ActionDataProviderUtil.runUpdateOrFail);
868
987
  this.withIcon('pi pi-pencil');
869
988
  }
870
989
  withServiceType(serviceType) {
@@ -888,12 +1007,7 @@ class ActionDeleteDescriptor extends ActionDescriptor {
888
1007
  super(model, ActionDeleteDescriptor.ACTION_NAME);
889
1008
  this.withPosition(ActionPositionEnum.RowInline);
890
1009
  this.withTitle(null);
891
- this.withRunFunction(ctx => {
892
- const editorDataProvider = ctx.dataProvider;
893
- return editorDataProvider?.delete && ctx.data?.itemId
894
- ? editorDataProvider.delete(ctx.data.itemId, ctx.data.item, ctx.serviceInstance)
895
- : throwError(new Error(`Data provider delete function or item id ${ctx.data?.itemId} is missing.`));
896
- });
1010
+ this.withRunFunction(ActionDataProviderUtil.runDeleteOrFail);
897
1011
  this.withLevel(ActionLevelEnum.Danger);
898
1012
  this.withIcon('pi pi-trash');
899
1013
  this.withRunConfirmation(undefined);
@@ -1004,7 +1118,12 @@ class FilterDescriptor {
1004
1118
  constructor(property) {
1005
1119
  this._filterType = FilterDescriptor.TypeEnum.String;
1006
1120
  this._matchModes = null;
1121
+ this._numberUseGrouping = true;
1122
+ this._datePickerShowTime = false;
1007
1123
  this._className = '';
1124
+ this._columnClassName = '';
1125
+ this._columnWidth = null;
1126
+ this._columnMinWidth = null;
1008
1127
  this._property = property;
1009
1128
  }
1010
1129
  get filterType() {
@@ -1016,12 +1135,36 @@ class FilterDescriptor {
1016
1135
  get matchModes() {
1017
1136
  return this._matchModes;
1018
1137
  }
1138
+ get numberMinFractionDigits() {
1139
+ return this._numberMinFractionDigits;
1140
+ }
1141
+ get numberMaxFractionDigits() {
1142
+ return this._numberMaxFractionDigits;
1143
+ }
1144
+ get numberUseGrouping() {
1145
+ return this._numberUseGrouping;
1146
+ }
1147
+ get datePickerFormat() {
1148
+ return this._datePickerFormat;
1149
+ }
1150
+ get datePickerShowTime() {
1151
+ return this._datePickerShowTime;
1152
+ }
1019
1153
  get placeholder() {
1020
1154
  return this._placeholder;
1021
1155
  }
1022
1156
  get className() {
1023
1157
  return this._className;
1024
1158
  }
1159
+ get columnClassName() {
1160
+ return this._columnClassName;
1161
+ }
1162
+ get columnWidth() {
1163
+ return this._columnWidth;
1164
+ }
1165
+ get columnMinWidth() {
1166
+ return this._columnMinWidth;
1167
+ }
1025
1168
  get property() {
1026
1169
  return this._property;
1027
1170
  }
@@ -1037,6 +1180,20 @@ class FilterDescriptor {
1037
1180
  this._filterProperty = filterProperty;
1038
1181
  return this;
1039
1182
  }
1183
+ withNumberFractions(min, max) {
1184
+ this._numberMinFractionDigits = min;
1185
+ this._numberMaxFractionDigits = max;
1186
+ return this;
1187
+ }
1188
+ withNumberGrouping(useGrouping = true) {
1189
+ this._numberUseGrouping = useGrouping;
1190
+ return this;
1191
+ }
1192
+ withDateFormat(format, showTime = false) {
1193
+ this._datePickerFormat = format;
1194
+ this._datePickerShowTime = showTime;
1195
+ return this;
1196
+ }
1040
1197
  withPlaceholder(placeholder) {
1041
1198
  this._placeholder = placeholder;
1042
1199
  return this;
@@ -1045,6 +1202,15 @@ class FilterDescriptor {
1045
1202
  this._className = className;
1046
1203
  return this;
1047
1204
  }
1205
+ withColumnClassName(className) {
1206
+ this._columnClassName = className;
1207
+ return this;
1208
+ }
1209
+ withColumnWidth(width, minWidth) {
1210
+ this._columnWidth = width ?? null;
1211
+ this._columnMinWidth = minWidth ?? null;
1212
+ return this;
1213
+ }
1048
1214
  withMatchModes(matchModes) {
1049
1215
  this._matchModes = matchModes;
1050
1216
  return this;
@@ -1057,8 +1223,16 @@ class FilterDescriptor {
1057
1223
  copyFieldsTo(descriptor) {
1058
1224
  descriptor._filterType = this._filterType;
1059
1225
  descriptor._filterProperty = this._filterProperty;
1226
+ descriptor._numberMinFractionDigits = this._numberMinFractionDigits;
1227
+ descriptor._numberMaxFractionDigits = this._numberMaxFractionDigits;
1228
+ descriptor._numberUseGrouping = this._numberUseGrouping;
1229
+ descriptor._datePickerFormat = this._datePickerFormat;
1230
+ descriptor._datePickerShowTime = this._datePickerShowTime;
1060
1231
  descriptor._placeholder = this._placeholder;
1061
1232
  descriptor._className = this._className;
1233
+ descriptor._columnWidth = this._columnWidth;
1234
+ descriptor._columnMinWidth = this._columnMinWidth;
1235
+ descriptor._columnClassName = this._columnClassName;
1062
1236
  }
1063
1237
  }
1064
1238
  (function (FilterDescriptor) {
@@ -1080,9 +1254,7 @@ class FilterDescriptor {
1080
1254
  MatchModeEnum["NotEquals"] = "notEquals";
1081
1255
  MatchModeEnum["In"] = "in";
1082
1256
  MatchModeEnum["LessThan"] = "lt";
1083
- MatchModeEnum["LessThanOrEqualTo"] = "lte";
1084
1257
  MatchModeEnum["GreaterThan"] = "gt";
1085
- MatchModeEnum["GreaterThanOrEqualTo"] = "gte";
1086
1258
  MatchModeEnum["Between"] = "between";
1087
1259
  MatchModeEnum["DateIs"] = "dateIs";
1088
1260
  MatchModeEnum["DateIsNot"] = "dateIsNot";
@@ -1238,6 +1410,11 @@ class ColumnDescriptor {
1238
1410
  constructor(table, property) {
1239
1411
  this._columnType = ColumnDescriptor.TypeEnum.String;
1240
1412
  this._isSortEnabled = false;
1413
+ // styling
1414
+ this._headerClassName = '';
1415
+ this._className = '';
1416
+ this._width = null;
1417
+ this._minWidth = null;
1241
1418
  this._enumNameAsValue = false;
1242
1419
  // boolean specifics
1243
1420
  this._booleanAsIcon = false;
@@ -1268,6 +1445,18 @@ class ColumnDescriptor {
1268
1445
  get property() {
1269
1446
  return this._property;
1270
1447
  }
1448
+ get headerClassName() {
1449
+ return this._headerClassName;
1450
+ }
1451
+ get className() {
1452
+ return this._className;
1453
+ }
1454
+ get width() {
1455
+ return this._width;
1456
+ }
1457
+ get minWidth() {
1458
+ return this._minWidth;
1459
+ }
1271
1460
  get enumType() {
1272
1461
  return this._enumType;
1273
1462
  }
@@ -1331,6 +1520,16 @@ class ColumnDescriptor {
1331
1520
  this._customComponentType = customComponentType;
1332
1521
  return this;
1333
1522
  }
1523
+ withClassName(className, headerClassName) {
1524
+ this._className = className ?? '';
1525
+ this._headerClassName = headerClassName ?? '';
1526
+ return this;
1527
+ }
1528
+ withWidth(width, minWidth) {
1529
+ this._width = width ?? null;
1530
+ this._minWidth = minWidth ?? null;
1531
+ return this;
1532
+ }
1334
1533
  withObjectProperty(modelType, titleProperty) {
1335
1534
  this._objectModelType = modelType;
1336
1535
  if (!titleProperty) {
@@ -1414,6 +1613,10 @@ class ColumnDescriptor {
1414
1613
  descriptor._booleanNo = this._booleanNo;
1415
1614
  descriptor._objectModelType = this._objectModelType;
1416
1615
  descriptor._objectTitleProperty = this._objectTitleProperty;
1616
+ descriptor._headerClassName = this._headerClassName;
1617
+ descriptor._className = this._className;
1618
+ descriptor._width = this._width;
1619
+ descriptor._minWidth = this._minWidth;
1417
1620
  return descriptor;
1418
1621
  }
1419
1622
  }
@@ -1921,7 +2124,7 @@ class FieldInputDescriptor extends AFieldDescriptor {
1921
2124
  }
1922
2125
  asDatePicker(format, min, max, showTime) {
1923
2126
  this._fieldType = FieldInputDescriptor.TypeEnum.Datepicker;
1924
- this._datePickerFormat = format ? format : 'dd.mm.yy';
2127
+ this._datePickerFormat = format;
1925
2128
  this._datePickerMin = min;
1926
2129
  this._datePickerMax = max;
1927
2130
  this._datePickerShowTime = showTime ?? false;
@@ -2468,8 +2671,11 @@ class TableDescriptor {
2468
2671
  this._hasDefaultSort = false;
2469
2672
  this._defaultSortProperty = [];
2470
2673
  this._defaultSortAsc = [];
2471
- this._rowHeight = 45;
2472
- this._tableFullHeightOffset = 315;
2674
+ // visual
2675
+ this._className = '';
2676
+ this._size = TableDescriptor.SizeEnum.Large;
2677
+ this._hasHover = true;
2678
+ this._hasGridlines = false;
2473
2679
  this._model = new ModelDescriptor(modelType, idProperty, titleProperty);
2474
2680
  this._dataKeyProperty = idProperty ?? ModelUtil.findIdAttribute(modelType) ?? undefined;
2475
2681
  }
@@ -2506,14 +2712,26 @@ class TableDescriptor {
2506
2712
  get defaultSortAsc() {
2507
2713
  return this._defaultSortAsc;
2508
2714
  }
2509
- get rowHeight() {
2510
- return this._rowHeight;
2715
+ get model() {
2716
+ return this._model;
2717
+ }
2718
+ get className() {
2719
+ return this._className;
2720
+ }
2721
+ get size() {
2722
+ return this._size;
2511
2723
  }
2512
2724
  get tableFullHeightOffset() {
2513
2725
  return this._tableFullHeightOffset;
2514
2726
  }
2515
- get model() {
2516
- return this._model;
2727
+ get rowHeight() {
2728
+ return this._rowHeight;
2729
+ }
2730
+ get hasHover() {
2731
+ return this._hasHover;
2732
+ }
2733
+ get hasGridlines() {
2734
+ return this._hasGridlines;
2517
2735
  }
2518
2736
  addColumnDescriptor(column) {
2519
2737
  this._columns.push(column);
@@ -2592,14 +2810,30 @@ class TableDescriptor {
2592
2810
  this._defaultSortAsc.push(asc);
2593
2811
  return this;
2594
2812
  }
2595
- withRowHeight(rowHeight) {
2596
- this._rowHeight = rowHeight;
2813
+ withClassName(className) {
2814
+ this._className = className;
2815
+ return this;
2816
+ }
2817
+ withSize(size = TableDescriptor.SizeEnum.Normal) {
2818
+ this._size = size;
2597
2819
  return this;
2598
2820
  }
2599
2821
  withTableFullHeightOffset(tableFullHeightOffset) {
2600
2822
  this._tableFullHeightOffset = tableFullHeightOffset;
2601
2823
  return this;
2602
2824
  }
2825
+ withRowHeight(rowHeight) {
2826
+ this._rowHeight = rowHeight;
2827
+ return this;
2828
+ }
2829
+ withHover(hover) {
2830
+ this._hasHover = hover;
2831
+ return this;
2832
+ }
2833
+ withGridlines(gridlines) {
2834
+ this._hasGridlines = gridlines;
2835
+ return this;
2836
+ }
2603
2837
  copy() {
2604
2838
  const descriptor = new TableDescriptor(this.model.type, this.model.idPropertyName, this.model.titlePropertyName);
2605
2839
  descriptor._columns = this.columns.map(c => c.copy());
@@ -2609,6 +2843,12 @@ class TableDescriptor {
2609
2843
  descriptor._defaultSortProperty = this._defaultSortProperty.map(p => p);
2610
2844
  descriptor._defaultSortAsc = this._defaultSortAsc.map(p => p);
2611
2845
  descriptor._filterDisplay = this._filterDisplay;
2846
+ descriptor._className = this._className;
2847
+ descriptor._size = this._size;
2848
+ descriptor._tableFullHeightOffset = this._tableFullHeightOffset;
2849
+ descriptor._rowHeight = this._rowHeight;
2850
+ descriptor._hasHover = this._hasHover;
2851
+ descriptor._hasGridlines = this._hasGridlines;
2612
2852
  return descriptor;
2613
2853
  }
2614
2854
  }
@@ -2623,6 +2863,12 @@ class TableDescriptor {
2623
2863
  FilterDisplayEnum[FilterDisplayEnum["Row"] = 0] = "Row";
2624
2864
  FilterDisplayEnum[FilterDisplayEnum["Menu"] = 1] = "Menu";
2625
2865
  })(FilterDisplayEnum = TableDescriptor.FilterDisplayEnum || (TableDescriptor.FilterDisplayEnum = {}));
2866
+ let SizeEnum;
2867
+ (function (SizeEnum) {
2868
+ SizeEnum[SizeEnum["Small"] = 0] = "Small";
2869
+ SizeEnum[SizeEnum["Normal"] = 1] = "Normal";
2870
+ SizeEnum[SizeEnum["Large"] = 2] = "Large";
2871
+ })(SizeEnum = TableDescriptor.SizeEnum || (TableDescriptor.SizeEnum = {}));
2626
2872
  })(TableDescriptor || (TableDescriptor = {}));
2627
2873
 
2628
2874
  var TableviewEditorTypeEnum = EditorDescriptor.TableviewEditorTypeEnum;
@@ -2943,49 +3189,12 @@ class EditorFormlyUtil {
2943
3189
  const validatorRes = validation.validator(control, field, options);
2944
3190
  // formly validator only excepts true/false for validation
2945
3191
  // map possible angular validator result to true/false
2946
- const res = typeof validatorRes === 'boolean' ? validatorRes : validatorRes === null;
2947
- console.log('mapper', config.key, validatorRes, res);
2948
- return res;
3192
+ return typeof validatorRes === 'boolean' ? validatorRes : validatorRes === null;
2949
3193
  }
2950
3194
  };
2951
3195
  if (typeof validation.message === 'function') {
2952
3196
  config.validators[validation.name].message = validation.message;
2953
3197
  }
2954
- // if (typeof validation.validator === 'function' && typeof validation.message === 'function') {
2955
- // config.validators[validation.name] = {
2956
- // expression: (
2957
- // control: AbstractControl,
2958
- // field: FormlyFieldConfig,
2959
- // options?: {
2960
- // [id: string]: any;
2961
- // }
2962
- // ) => {
2963
- // const validatorRes = validation.validator!(control, field, options);
2964
- // // formly validator only excepts true/false for validation
2965
- // // map possible angular validator result to true/false
2966
- // const res = typeof validatorRes === 'boolean' ? validatorRes : validatorRes === null;
2967
- // console.log('mapper', config.key, validatorRes, res);
2968
- // return res;
2969
- // },
2970
- // message: validation.message
2971
- // };
2972
- // } else if (typeof validation.validator === 'function') {
2973
- // config.validators[validation.name] = {
2974
- // expression: (
2975
- // control: AbstractControl,
2976
- // field: FormlyFieldConfig,
2977
- // options?: {
2978
- // [id: string]: any;
2979
- // }
2980
- // ) => {
2981
- // const validatorRes = validation.validator!(control, field, options);
2982
- // // formly validator only excepts true/false for validation
2983
- // // map possible angular validator result to true/false
2984
- // const res = typeof validatorRes === 'boolean' ? (validatorRes === false ? {[validation.name]: true} : null) : validatorRes;
2985
- // console.log('mapper', config.key, validatorRes, res);
2986
- // return res;
2987
- // }
2988
- // };
2989
3198
  }
2990
3199
  else {
2991
3200
  if (!Array.isArray(config.validators.validation)) {
@@ -2994,9 +3203,6 @@ class EditorFormlyUtil {
2994
3203
  config.validators.validation.push(validation.name);
2995
3204
  }
2996
3205
  }
2997
- if (validations.length > 0) {
2998
- console.log(config.validators);
2999
- }
3000
3206
  }
3001
3207
  }
3002
3208
 
@@ -3060,7 +3266,7 @@ class EnumUtil {
3060
3266
  */
3061
3267
  static getConstantName(enumType, value) {
3062
3268
  if (typeof value === 'string') {
3063
- return this.getConstantNames(enumType).find(c => enumType[c] === value) ?? null;
3269
+ return EnumUtil.getConstantNames(enumType).find(c => enumType[c] === value) ?? null;
3064
3270
  }
3065
3271
  else {
3066
3272
  return typeof enumType[value] !== 'undefined' ? enumType[value] : null;
@@ -3074,7 +3280,7 @@ class EnumUtil {
3074
3280
  static getConstantNameFromEnumObject(enumObj, value) {
3075
3281
  const enumObjAny = enumObj;
3076
3282
  if (typeof value === 'string') {
3077
- return this.getConstantNamesFromEnumObject(enumObj).find(c => enumObjAny[c] === value) ?? null;
3283
+ return EnumUtil.getConstantNamesFromEnumObject(enumObj).find(c => enumObjAny[c] === value) ?? null;
3078
3284
  }
3079
3285
  else {
3080
3286
  return typeof enumObjAny[value] !== 'undefined' ? enumObjAny[value] : null;
@@ -3766,7 +3972,7 @@ class MediusRestUtil {
3766
3972
  const field = filterFieldSplit[0];
3767
3973
  const operator = filterFieldSplit.length > 1 ? filterFieldSplit[1] : 'eq';
3768
3974
  // prepare value
3769
- let value = filterFieldSplit.length > 2 ? filterFieldSplit[2] : '';
3975
+ let value = filterFieldSplit.length > 2 ? filterFieldSplit.slice(2).join(':') : '';
3770
3976
  const valueTo = undefined;
3771
3977
  if (value.startsWith("'")) {
3772
3978
  value = value.substring(1, value.length - 1);
@@ -3777,11 +3983,11 @@ class MediusRestUtil {
3777
3983
  .split(',')
3778
3984
  .map((v) => (v.startsWith("'") ? v.substring(1, v.length - 1) : v));
3779
3985
  }
3780
- const operatorMapping = MediusRestUtil.matchModeMapping.find(mapping => mapping[1] === operator);
3781
3986
  const filterDescriptor = filterDescriptors.find(f => f.property === field);
3782
- if (operatorMapping && filterDescriptor) {
3987
+ const matchMode = MediusRestUtil.getMapping(operator, filterDescriptor?.filterType, 1);
3988
+ if (matchMode && filterDescriptor) {
3783
3989
  const fieldFilterProperty = filterDescriptor.filterProperty ?? filterDescriptor.property;
3784
- mediusParamsBuilder.withFilter(fieldFilterProperty, value, valueTo, MediusRestUtil.getMediusFilterMatchTypeFromPrimeMatchMode(operatorMapping[0]));
3990
+ mediusParamsBuilder.withFilter(fieldFilterProperty, value, valueTo, MediusRestUtil.getMediusFilterMatchTypeFromPrimeMatchMode(matchMode[0]));
3785
3991
  }
3786
3992
  }
3787
3993
  }
@@ -3808,18 +4014,27 @@ class MediusRestUtil {
3808
4014
  for (const field in event.filters) {
3809
4015
  const primeOperator = event.filters[field].matchMode;
3810
4016
  let value = event.filters[field].value;
3811
- const operatorMapping = MediusRestUtil.matchModeMapping.find(mapping => mapping[0] === primeOperator);
3812
- if (operatorMapping &&
3813
- typeof value !== 'undefined' &&
3814
- value !== null &&
3815
- ((typeof value === 'string' && value.length > 0) || (Array.isArray(value) && value.length > 0))) {
3816
- if (Array.isArray(value)) {
4017
+ const operatorMapping = primeOperator ? MediusRestUtil.getMapping(primeOperator, undefined, 0) : undefined;
4018
+ if (operatorMapping && typeof value !== 'undefined' && value !== null) {
4019
+ let doAddFilter = false;
4020
+ if (typeof value === 'string' && value.length > 0) {
4021
+ value = `'${value}'`;
4022
+ doAddFilter = true;
4023
+ }
4024
+ else if (typeof value === 'number') {
4025
+ doAddFilter = true;
4026
+ }
4027
+ else if (Array.isArray(value)) {
3817
4028
  value = `[${value.map(v => `'${v}'`).join(',')}]`;
4029
+ doAddFilter = true;
3818
4030
  }
3819
- else {
3820
- value = `'${value}'`;
4031
+ else if (value instanceof Date) {
4032
+ value = `${value.toISOString()}`;
4033
+ doAddFilter = true;
4034
+ }
4035
+ if (doAddFilter) {
4036
+ filters.push(`${field}:${operatorMapping[1]}:${value}`);
3821
4037
  }
3822
- filters.push(`${field}:${operatorMapping[1]}:${value}`);
3823
4038
  }
3824
4039
  }
3825
4040
  if (filters.length > 0) {
@@ -3851,28 +4066,44 @@ class MediusRestUtil {
3851
4066
  return queryParamBuilder.build();
3852
4067
  }
3853
4068
  static addMediusFilterFromPrimeFilterMetadata(queryParamBuilder, property, filterMetadata) {
3854
- const matchType = MediusRestUtil.getMediusFilterMatchTypeFromPrimeMatchMode(filterMetadata.matchMode ?? 'contains');
4069
+ const matchType = MediusRestUtil.getMediusFilterMatchTypeFromPrimeMatchMode(filterMetadata.matchMode ?? 'equals');
3855
4070
  queryParamBuilder.withFilter(property, filterMetadata.value, undefined, matchType);
3856
4071
  }
3857
- static getMediusFilterMatchTypeFromPrimeMatchMode(matchMode) {
3858
- const mapping = MediusRestUtil.matchModeMapping.find(m => m[0] === matchMode);
3859
- return mapping?.[2] ?? MediusFilterMatchType.Contains;
4072
+ static getMediusFilterMatchTypeFromPrimeMatchMode(matchMode, dataType) {
4073
+ return MediusRestUtil.getMapping(matchMode, dataType)?.[2] ?? MediusFilterMatchType.Equals;
4074
+ }
4075
+ static getMapping(matchMode, dataType, idx = 0) {
4076
+ const mappings = MediusRestUtil.matchModeMapping.filter(m => m[idx] === matchMode && (!dataType || !m[3] || dataType === m[3]));
4077
+ if (mappings.length === 0) {
4078
+ return null;
4079
+ }
4080
+ else if (mappings.length === 1) {
4081
+ return mappings[0];
4082
+ }
4083
+ else {
4084
+ return mappings.sort((m1, m2) => (m2[3] ?? -1) - (m1[3] ?? -1))[0];
4085
+ }
3860
4086
  }
3861
4087
  }
3862
4088
  // first value is from primeNG, second is for use in query params
3863
4089
  MediusRestUtil.matchModeMapping = [
3864
- ['contains', 'c', MediusFilterMatchType.Contains],
3865
- ['endsWith', 'ew', MediusFilterMatchType.EndsWith],
3866
- ['equals', 'eq', MediusFilterMatchType.Equals],
3867
- ['gte', 'gte', MediusFilterMatchType.GreaterThan],
3868
- ['leq', 'leq', MediusFilterMatchType.SmallerThan],
3869
- ['startsWith', 'sw', MediusFilterMatchType.StartsWith],
3870
- ['in', 'in', MediusFilterMatchType.In],
3871
- ['notEquals', 'neq', MediusFilterMatchType.NotEquals]
4090
+ [FilterMatchMode.CONTAINS, 'c', MediusFilterMatchType.Contains, null],
4091
+ [FilterMatchMode.ENDS_WITH, 'ew', MediusFilterMatchType.EndsWith, null],
4092
+ [FilterMatchMode.EQUALS, 'eq', MediusFilterMatchType.Equals, null],
4093
+ [FilterMatchMode.GREATER_THAN, 'gt', MediusFilterMatchType.GreaterThan, null],
4094
+ [FilterMatchMode.LESS_THAN, 'lt', MediusFilterMatchType.SmallerThan, null],
4095
+ [FilterMatchMode.STARTS_WITH, 'sw', MediusFilterMatchType.StartsWith, null],
4096
+ [FilterMatchMode.IN, 'in', MediusFilterMatchType.In, null],
4097
+ [FilterMatchMode.NOT_EQUALS, 'neq', MediusFilterMatchType.NotEquals, null],
4098
+ [FilterMatchMode.DATE_IS, 'eq', MediusFilterMatchType.Equals, FilterDescriptor.TypeEnum.Date],
4099
+ [FilterMatchMode.DATE_BEFORE, 'lt', MediusFilterMatchType.SmallerThan, FilterDescriptor.TypeEnum.Date],
4100
+ [FilterMatchMode.DATE_AFTER, 'gt', MediusFilterMatchType.GreaterThan, FilterDescriptor.TypeEnum.Date],
4101
+ [FilterMatchMode.DATE_IS_NOT, 'neq', MediusFilterMatchType.NotEquals, FilterDescriptor.TypeEnum.Date]
3872
4102
  ];
3873
4103
 
3874
4104
  class ActionExecContext {
3875
- constructor(dataProvider, serviceInstance, data, sourceComponent = null, viewContainer = null) {
4105
+ constructor(action, dataProvider, serviceInstance, data, sourceComponent = null, viewContainer = null) {
4106
+ this.action = action;
3876
4107
  this.dataProvider = dataProvider;
3877
4108
  this.serviceInstance = serviceInstance;
3878
4109
  this.data = data;
@@ -4188,7 +4419,7 @@ class MngActionExecutorService {
4188
4419
  }
4189
4420
  prepareActionExecContext(action, itemId, item, dataProvider, viewContainer, sourceComponent, actionData) {
4190
4421
  const ctxDataProvider = dataProvider ?? action.dataProvider ?? viewContainer?.getDataProvider();
4191
- return new ActionExecContext(ctxDataProvider, this.getDataProviderService(ctxDataProvider) ?? undefined, {
4422
+ return new ActionExecContext(action, ctxDataProvider, this.getDataProviderService(ctxDataProvider) ?? undefined, {
4192
4423
  item,
4193
4424
  itemId,
4194
4425
  actionData
@@ -4335,7 +4566,7 @@ class MngActionExecutorService {
4335
4566
  ctxDataProvider = viewContainerDataProvider;
4336
4567
  }
4337
4568
  }
4338
- const context = new ActionExecContext(ctxDataProvider, this.getDataProviderService(ctxDataProvider) ?? undefined, {
4569
+ const context = new ActionExecContext(action, ctxDataProvider, this.getDataProviderService(ctxDataProvider) ?? undefined, {
4339
4570
  item,
4340
4571
  itemId,
4341
4572
  actionData
@@ -4782,8 +5013,8 @@ class MngCommonsService {
4782
5013
  numeric: [
4783
5014
  FilterDescriptor.MatchModeEnum.Equals,
4784
5015
  FilterDescriptor.MatchModeEnum.NotEquals,
4785
- FilterDescriptor.MatchModeEnum.LessThanOrEqualTo,
4786
- FilterDescriptor.MatchModeEnum.GreaterThanOrEqualTo
5016
+ FilterDescriptor.MatchModeEnum.LessThan,
5017
+ FilterDescriptor.MatchModeEnum.GreaterThan
4787
5018
  ],
4788
5019
  date: [
4789
5020
  FilterDescriptor.MatchModeEnum.DateIs,
@@ -6057,7 +6288,7 @@ class MngActionEditorComponent {
6057
6288
  return throwError(() => actionError);
6058
6289
  }), finalize(() => this.loadingSubject.next(false)))
6059
6290
  .subscribe(res => {
6060
- this.item = res.result;
6291
+ this.item = res?.result ?? undefined;
6061
6292
  if (this.action.hasFetchNotificationSuccess) {
6062
6293
  NotificationUtil.actionNotificationSuccess(this.translate, this.action, 'fetch', this.action.fetchNotificationSuccessTitle, this.action.fetchNotificationSuccessMessage, this.viewContainer, this.item);
6063
6294
  }
@@ -6170,10 +6401,10 @@ class MngFormlyFieldInputComponent extends FieldType {
6170
6401
  }
6171
6402
  }
6172
6403
  MngFormlyFieldInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngFormlyFieldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
6173
- MngFormlyFieldInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: MngFormlyFieldInputComponent, selector: "mng-formly-field-input", usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"to.type\">\n <p-inputNumber\n *ngSwitchCase=\"'number'\"\n [id]=\"$any(key)\"\n [formControl]=\"iFormControl\"\n [formlyAttributes]=\"field\"\n [min]=\"$any(descriptor.numberMin)\"\n [max]=\"$any(descriptor.numberMax)\"\n [step]=\"$any(descriptor.numberStep)\"\n [useGrouping]=\"$any(descriptor.numberUseGrouping)\"\n [minFractionDigits]=\"descriptor.numberMinFractionDigits || 0\"\n [maxFractionDigits]=\"descriptor.numberMaxFractionDigits || 0\"\n [inputStyleClass]=\"descriptor.inputClassName\">\n </p-inputNumber>\n\n <div *ngSwitchCase=\"'switch'\" class=\"flex flex-column\">\n <label [for]=\"key\" [class]=\"descriptor.labelClassName\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [styleClass]=\"descriptor.inputClassName\"></p-inputSwitch>\n <small *ngIf=\"showError\" class=\"p-error\">\n <formly-validation-message [field]=\"field\"></formly-validation-message>\n </small>\n </div>\n\n <ng-container *ngSwitchCase=\"'radio'\">\n <div *ngFor=\"let option of descriptor.radioOptions\" [id]=\"$any(key)\" class=\"field-radiobutton\">\n <p-radioButton\n [name]=\"$any(key)\"\n [value]=\"option.value\"\n [formControl]=\"iFormControl\"\n [formlyAttributes]=\"field\"\n [styleClass]=\"descriptor.inputClassName\"></p-radioButton>\n <label [for]=\"option.value\" [class]=\"'mng-radio-button-label ' + descriptor.labelClassName\">{{ option.title | translate }}</label>\n </div>\n </ng-container>\n\n <textarea\n *ngSwitchCase=\"'textarea'\"\n [id]=\"$any(key)\"\n [formControl]=\"iFormControl\"\n [formlyAttributes]=\"field\"\n [rows]=\"descriptor.rows ?? 3\"\n pInputTextarea\n [class]=\"descriptor.inputClassName\">\n </textarea>\n\n <p-calendar\n *ngSwitchCase=\"'datepicker'\"\n appendTo=\"body\"\n [formControl]=\"iFormControl\"\n [formlyAttributes]=\"field\"\n [dateFormat]=\"$any(descriptor.datePickerFormat)\"\n [minDate]=\"$any(descriptor.datePickerMin)\"\n [maxDate]=\"$any(descriptor.datePickerMax)\"\n [showTime]=\"descriptor.datePickerShowTime\"\n [showIcon]=\"true\"\n [inputStyleClass]=\"descriptor.inputClassName\">\n </p-calendar>\n\n <p-inputMask\n *ngSwitchCase=\"'mask'\"\n [formControl]=\"iFormControl\"\n [formlyAttributes]=\"field\"\n [mask]=\"$any(descriptor.mask)\"\n [placeholder]=\"$any(descriptor.placeholder)\"\n [slotChar]=\"$any(descriptor.slotChar)\"\n [styleClass]=\"descriptor.inputClassName\">\n </p-inputMask>\n\n <input *ngSwitchDefault pInputText [id]=\"$any(key)\" [type]=\"to.type || 'text'\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" />\n</ng-container>\n", components: [{ type: i1$2.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }, { type: i2$3.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabelledBy"], outputs: ["onChange"] }, { type: i3$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i4$4.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i5$1.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { type: i6$1.InputMask, selector: "p-inputMask", inputs: ["type", "slotChar", "autoClear", "style", "inputId", "styleClass", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "disabled", "readonly", "unmask", "name", "required", "characterPattern", "autoFocus", "autocomplete", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9$1.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i10.InputText, selector: "[pInputText]" }], pipes: { "translate": i1$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
6404
+ MngFormlyFieldInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: MngFormlyFieldInputComponent, selector: "mng-formly-field-input", usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"to.type\">\n <p-inputNumber\n *ngSwitchCase=\"'number'\"\n [id]=\"$any(key)\"\n [formControl]=\"iFormControl\"\n [formlyAttributes]=\"field\"\n [min]=\"$any(descriptor.numberMin)\"\n [max]=\"$any(descriptor.numberMax)\"\n [step]=\"$any(descriptor.numberStep)\"\n [useGrouping]=\"$any(descriptor.numberUseGrouping)\"\n [minFractionDigits]=\"descriptor.numberMinFractionDigits || 0\"\n [maxFractionDigits]=\"descriptor.numberMaxFractionDigits || 0\"\n [inputStyleClass]=\"descriptor.inputClassName\">\n </p-inputNumber>\n\n <div *ngSwitchCase=\"'switch'\" class=\"flex flex-column\">\n <label [for]=\"key\" [class]=\"descriptor.labelClassName\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [styleClass]=\"descriptor.inputClassName\"></p-inputSwitch>\n <small *ngIf=\"showError\" class=\"p-error\">\n <formly-validation-message [field]=\"field\"></formly-validation-message>\n </small>\n </div>\n\n <ng-container *ngSwitchCase=\"'radio'\">\n <div *ngFor=\"let option of descriptor.radioOptions\" [id]=\"$any(key)\" class=\"field-radiobutton\">\n <p-radioButton\n [name]=\"$any(key)\"\n [value]=\"option.value\"\n [formControl]=\"iFormControl\"\n [formlyAttributes]=\"field\"\n [styleClass]=\"descriptor.inputClassName\"></p-radioButton>\n <label [for]=\"option.value\" [class]=\"'mng-radio-button-label ' + descriptor.labelClassName\">{{ option.title | translate }}</label>\n </div>\n </ng-container>\n\n <textarea\n *ngSwitchCase=\"'textarea'\"\n [id]=\"$any(key)\"\n [formControl]=\"iFormControl\"\n [formlyAttributes]=\"field\"\n [rows]=\"descriptor.rows ?? 3\"\n pInputTextarea\n [class]=\"descriptor.inputClassName\">\n </textarea>\n\n <p-calendar\n *ngSwitchCase=\"'datepicker'\"\n appendTo=\"body\"\n [formControl]=\"iFormControl\"\n [formlyAttributes]=\"field\"\n [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n [minDate]=\"$any(descriptor.datePickerMin)\"\n [maxDate]=\"$any(descriptor.datePickerMax)\"\n [showTime]=\"descriptor.datePickerShowTime\"\n [showIcon]=\"true\"\n [inputStyleClass]=\"descriptor.inputClassName\">\n </p-calendar>\n\n <p-inputMask\n *ngSwitchCase=\"'mask'\"\n [formControl]=\"iFormControl\"\n [formlyAttributes]=\"field\"\n [mask]=\"$any(descriptor.mask)\"\n [placeholder]=\"$any(descriptor.placeholder)\"\n [slotChar]=\"$any(descriptor.slotChar)\"\n [styleClass]=\"descriptor.inputClassName\">\n </p-inputMask>\n\n <input *ngSwitchDefault pInputText [id]=\"$any(key)\" [type]=\"to.type || 'text'\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" />\n</ng-container>\n", components: [{ type: i1$2.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }, { type: i2$3.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabelledBy"], outputs: ["onChange"] }, { type: i3$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i4$4.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i5$1.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { type: i6$1.InputMask, selector: "p-inputMask", inputs: ["type", "slotChar", "autoClear", "style", "inputId", "styleClass", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "disabled", "readonly", "unmask", "name", "required", "characterPattern", "autoFocus", "autocomplete", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9$1.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i10.InputText, selector: "[pInputText]" }], pipes: { "translate": i1$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
6174
6405
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngFormlyFieldInputComponent, decorators: [{
6175
6406
  type: Component,
6176
- args: [{ selector: 'mng-formly-field-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"to.type\">\n <p-inputNumber\n *ngSwitchCase=\"'number'\"\n [id]=\"$any(key)\"\n [formControl]=\"iFormControl\"\n [formlyAttributes]=\"field\"\n [min]=\"$any(descriptor.numberMin)\"\n [max]=\"$any(descriptor.numberMax)\"\n [step]=\"$any(descriptor.numberStep)\"\n [useGrouping]=\"$any(descriptor.numberUseGrouping)\"\n [minFractionDigits]=\"descriptor.numberMinFractionDigits || 0\"\n [maxFractionDigits]=\"descriptor.numberMaxFractionDigits || 0\"\n [inputStyleClass]=\"descriptor.inputClassName\">\n </p-inputNumber>\n\n <div *ngSwitchCase=\"'switch'\" class=\"flex flex-column\">\n <label [for]=\"key\" [class]=\"descriptor.labelClassName\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [styleClass]=\"descriptor.inputClassName\"></p-inputSwitch>\n <small *ngIf=\"showError\" class=\"p-error\">\n <formly-validation-message [field]=\"field\"></formly-validation-message>\n </small>\n </div>\n\n <ng-container *ngSwitchCase=\"'radio'\">\n <div *ngFor=\"let option of descriptor.radioOptions\" [id]=\"$any(key)\" class=\"field-radiobutton\">\n <p-radioButton\n [name]=\"$any(key)\"\n [value]=\"option.value\"\n [formControl]=\"iFormControl\"\n [formlyAttributes]=\"field\"\n [styleClass]=\"descriptor.inputClassName\"></p-radioButton>\n <label [for]=\"option.value\" [class]=\"'mng-radio-button-label ' + descriptor.labelClassName\">{{ option.title | translate }}</label>\n </div>\n </ng-container>\n\n <textarea\n *ngSwitchCase=\"'textarea'\"\n [id]=\"$any(key)\"\n [formControl]=\"iFormControl\"\n [formlyAttributes]=\"field\"\n [rows]=\"descriptor.rows ?? 3\"\n pInputTextarea\n [class]=\"descriptor.inputClassName\">\n </textarea>\n\n <p-calendar\n *ngSwitchCase=\"'datepicker'\"\n appendTo=\"body\"\n [formControl]=\"iFormControl\"\n [formlyAttributes]=\"field\"\n [dateFormat]=\"$any(descriptor.datePickerFormat)\"\n [minDate]=\"$any(descriptor.datePickerMin)\"\n [maxDate]=\"$any(descriptor.datePickerMax)\"\n [showTime]=\"descriptor.datePickerShowTime\"\n [showIcon]=\"true\"\n [inputStyleClass]=\"descriptor.inputClassName\">\n </p-calendar>\n\n <p-inputMask\n *ngSwitchCase=\"'mask'\"\n [formControl]=\"iFormControl\"\n [formlyAttributes]=\"field\"\n [mask]=\"$any(descriptor.mask)\"\n [placeholder]=\"$any(descriptor.placeholder)\"\n [slotChar]=\"$any(descriptor.slotChar)\"\n [styleClass]=\"descriptor.inputClassName\">\n </p-inputMask>\n\n <input *ngSwitchDefault pInputText [id]=\"$any(key)\" [type]=\"to.type || 'text'\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" />\n</ng-container>\n" }]
6407
+ args: [{ selector: 'mng-formly-field-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"to.type\">\n <p-inputNumber\n *ngSwitchCase=\"'number'\"\n [id]=\"$any(key)\"\n [formControl]=\"iFormControl\"\n [formlyAttributes]=\"field\"\n [min]=\"$any(descriptor.numberMin)\"\n [max]=\"$any(descriptor.numberMax)\"\n [step]=\"$any(descriptor.numberStep)\"\n [useGrouping]=\"$any(descriptor.numberUseGrouping)\"\n [minFractionDigits]=\"descriptor.numberMinFractionDigits || 0\"\n [maxFractionDigits]=\"descriptor.numberMaxFractionDigits || 0\"\n [inputStyleClass]=\"descriptor.inputClassName\">\n </p-inputNumber>\n\n <div *ngSwitchCase=\"'switch'\" class=\"flex flex-column\">\n <label [for]=\"key\" [class]=\"descriptor.labelClassName\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [styleClass]=\"descriptor.inputClassName\"></p-inputSwitch>\n <small *ngIf=\"showError\" class=\"p-error\">\n <formly-validation-message [field]=\"field\"></formly-validation-message>\n </small>\n </div>\n\n <ng-container *ngSwitchCase=\"'radio'\">\n <div *ngFor=\"let option of descriptor.radioOptions\" [id]=\"$any(key)\" class=\"field-radiobutton\">\n <p-radioButton\n [name]=\"$any(key)\"\n [value]=\"option.value\"\n [formControl]=\"iFormControl\"\n [formlyAttributes]=\"field\"\n [styleClass]=\"descriptor.inputClassName\"></p-radioButton>\n <label [for]=\"option.value\" [class]=\"'mng-radio-button-label ' + descriptor.labelClassName\">{{ option.title | translate }}</label>\n </div>\n </ng-container>\n\n <textarea\n *ngSwitchCase=\"'textarea'\"\n [id]=\"$any(key)\"\n [formControl]=\"iFormControl\"\n [formlyAttributes]=\"field\"\n [rows]=\"descriptor.rows ?? 3\"\n pInputTextarea\n [class]=\"descriptor.inputClassName\">\n </textarea>\n\n <p-calendar\n *ngSwitchCase=\"'datepicker'\"\n appendTo=\"body\"\n [formControl]=\"iFormControl\"\n [formlyAttributes]=\"field\"\n [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n [minDate]=\"$any(descriptor.datePickerMin)\"\n [maxDate]=\"$any(descriptor.datePickerMax)\"\n [showTime]=\"descriptor.datePickerShowTime\"\n [showIcon]=\"true\"\n [inputStyleClass]=\"descriptor.inputClassName\">\n </p-calendar>\n\n <p-inputMask\n *ngSwitchCase=\"'mask'\"\n [formControl]=\"iFormControl\"\n [formlyAttributes]=\"field\"\n [mask]=\"$any(descriptor.mask)\"\n [placeholder]=\"$any(descriptor.placeholder)\"\n [slotChar]=\"$any(descriptor.slotChar)\"\n [styleClass]=\"descriptor.inputClassName\">\n </p-inputMask>\n\n <input *ngSwitchDefault pInputText [id]=\"$any(key)\" [type]=\"to.type || 'text'\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" />\n</ng-container>\n" }]
6177
6408
  }] });
6178
6409
 
6179
6410
  class MngFormlyFieldLabelComponent {
@@ -6225,6 +6456,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
6225
6456
  args: [{ selector: 'mng-formly-field-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-dropdown\n [id]=\"$any(key)\"\n [formControl]=\"dFormControl\"\n [formlyAttributes]=\"field\"\n [placeholder]=\"descriptor.placeholder\"\n [dataProvider]=\"descriptor.dataProvider\"\n [itemsLabelProperty]=\"descriptor.itemsLabelProperty\"\n [itemsLabelTranslate]=\"descriptor.itemsLabelTranslate\"\n [itemsValueProperty]=\"descriptor.itemsValueProperty\"\n [itemsDisabledProperty]=\"descriptor.itemsDisabledProperty\"\n [dataKeyProperty]=\"descriptor.dataKeyProperty\"\n [showClear]=\"!to.required\"\n [className]=\"descriptor.inputClassName\">\n</mng-dropdown>\n" }]
6226
6457
  }] });
6227
6458
 
6459
+ class StylesUtil {
6460
+ static calculateTableColumnActionWidth(table, actions) {
6461
+ const buttonsWidth = actions.reduce((acc, action) => acc + StylesUtil.getActionButtonRoundedWidth(action) + 2 * StylesUtil.ACTION_BUTTON_MARGIN_X, 0);
6462
+ const tablePadding = StylesUtil.getTableCellPaddingX(table);
6463
+ return buttonsWidth + 2 * tablePadding;
6464
+ }
6465
+ static getTableCellPaddingX(table) {
6466
+ switch (table.size) {
6467
+ case TableDescriptor.SizeEnum.Small:
6468
+ return StylesUtil.TABLE_CELL_PADDING_X_SM;
6469
+ case TableDescriptor.SizeEnum.Large:
6470
+ return StylesUtil.TABLE_CELL_PADDING_X_LG;
6471
+ default:
6472
+ return StylesUtil.TABLE_CELL_PADDING_X;
6473
+ }
6474
+ }
6475
+ static getActionButtonRoundedWidth(action) {
6476
+ switch (action.size) {
6477
+ case ActionDescriptor.SizeEnum.ExtraSmall:
6478
+ return StylesUtil.BUTTON_ROUNDED_WIDTH_XS;
6479
+ case ActionDescriptor.SizeEnum.Small:
6480
+ return StylesUtil.BUTTON_ROUNDED_WIDTH_SM;
6481
+ case ActionDescriptor.SizeEnum.Large:
6482
+ case ActionDescriptor.SizeEnum.ExtraLarge:
6483
+ return StylesUtil.BUTTON_ROUNDED_WIDTH_LG;
6484
+ case ActionDescriptor.SizeEnum.Normal:
6485
+ default:
6486
+ return StylesUtil.BUTTON_ROUNDED_WIDTH;
6487
+ }
6488
+ }
6489
+ }
6490
+ StylesUtil.BUTTON_ROUNDED_WIDTH_XS = 26;
6491
+ StylesUtil.BUTTON_ROUNDED_WIDTH_SM = 28;
6492
+ StylesUtil.BUTTON_ROUNDED_WIDTH = 32;
6493
+ StylesUtil.BUTTON_ROUNDED_WIDTH_LG = 45;
6494
+ StylesUtil.ACTION_BUTTON_MARGIN_X = 2;
6495
+ StylesUtil.TABLE_CELL_PADDING_X = 8; // left and right paddings are same
6496
+ StylesUtil.TABLE_CELL_PADDING_X_SM = 4;
6497
+ StylesUtil.TABLE_CELL_PADDING_X_LG = 12;
6498
+
6228
6499
  class MngTableLoadEvent {
6229
6500
  }
6230
6501
  class MngTableCellClickEvent {
@@ -6267,6 +6538,7 @@ class MngTableColumnFilterComponent {
6267
6538
  break;
6268
6539
  case FilterDescriptor.TypeEnum.Date:
6269
6540
  this.primeType = 'date';
6541
+ this.primeDefaultMatchMode = FilterMatchMode.DATE_AFTER;
6270
6542
  break;
6271
6543
  case FilterDescriptor.TypeEnum.Lookup:
6272
6544
  this.primeType = 'lookup';
@@ -6291,6 +6563,22 @@ class MngTableColumnFilterComponent {
6291
6563
  break;
6292
6564
  }
6293
6565
  }
6566
+ valueToDate(value) {
6567
+ console.log('call', this.descriptor.property);
6568
+ if (typeof value === 'string' || typeof value === 'number') {
6569
+ return new Date(value);
6570
+ }
6571
+ else if (value instanceof Date) {
6572
+ return value;
6573
+ }
6574
+ else {
6575
+ return null;
6576
+ }
6577
+ }
6578
+ // eslint-disable-next-line @typescript-eslint/ban-types
6579
+ dateFilter(value, filterCallback) {
6580
+ filterCallback(value);
6581
+ }
6294
6582
  // eslint-disable-next-line @typescript-eslint/ban-types
6295
6583
  autocompleteFilter(value, filterCallback) {
6296
6584
  filterCallback(value);
@@ -6300,15 +6588,14 @@ class MngTableColumnFilterComponent {
6300
6588
  filterCallback(value);
6301
6589
  }
6302
6590
  toLookupFilterValue(value) {
6303
- console.log(this.descriptor.property, value);
6304
6591
  return this.lookupDescriptor.dataKeyProperty && value ? { [this.lookupDescriptor.dataKeyProperty]: value } : value;
6305
6592
  }
6306
6593
  }
6307
6594
  MngTableColumnFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngTableColumnFilterComponent, deps: [{ token: i2.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
6308
- MngTableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: { descriptor: "descriptor", display: "display" }, ngImport: i0, template: "<p-columnFilter\n class=\"ml-auto\"\n [type]=\"primeType\"\n matchMode=\"equals\"\n [field]=\"descriptor.property\"\n [display]=\"primeDisplay\"\n [matchMode]=\"primeDefaultMatchMode\"\n [matchModeOptions]=\"$any(primeMatchModes)\"\n [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n [showMatchModes]=\"true\"\n [showOperator]=\"false\"\n [showAddButton]=\"false\"\n [hideOnClear]=\"true\">\n <ng-template *ngIf=\"lookupDescriptor\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n <ng-container [ngSwitch]=\"lookupDescriptor.lookupType\">\n <mng-autocomplete\n *ngSwitchCase=\"lookupTypeAutocomplete\"\n [ngModel]=\"value\"\n [dataProvider]=\"lookupDescriptor.dataProvider\"\n [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n [multiselect]=\"lookupDescriptor.multiselect\"\n [openOnFocus]=\"lookupDescriptor.autocompleteOpenOnFocus\"\n [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch\"\n [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n [className]=\"lookupDescriptor.className\"\n [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n (valueChange)=\"autocompleteFilter($event, filterCallback)\">\n </mng-autocomplete>\n <mng-dropdown\n *ngSwitchCase=\"lookupTypeDropdown\"\n [ngModel]=\"value\"\n [dataProvider]=\"lookupDescriptor.dataProvider\"\n [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n [multiselect]=\"lookupDescriptor.multiselect\"\n [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n [className]=\"lookupDescriptor.className\"\n [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n [showClear]=\"true\"\n (valueChange)=\"dropdownFilter($event, filterCallback)\">\n </mng-dropdown>\n </ng-container>\n </ng-template>\n</p-columnFilter>\n", components: [{ type: i4$5.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping"] }, { type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "dataKeyProperty", "itemsValueProperty", "itemsLabelProperty", "itemsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName"], outputs: ["valueChange"] }, { type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsLabelTranslate", "itemsValueProperty", "itemsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName"], outputs: ["valueChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i1$1.TranslatePipe } });
6595
+ MngTableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: { descriptor: "descriptor", display: "display" }, ngImport: i0, template: "<p-columnFilter\n class=\"ml-auto\"\n [type]=\"primeType\"\n matchMode=\"equals\"\n [field]=\"descriptor.property\"\n [display]=\"primeDisplay\"\n [matchMode]=\"primeDefaultMatchMode\"\n [matchModeOptions]=\"$any(primeMatchModes)\"\n [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n [showMatchModes]=\"true\"\n [showOperator]=\"false\"\n [showAddButton]=\"false\"\n [hideOnClear]=\"true\"\n [minFractionDigits]=\"$any(descriptor.numberMinFractionDigits)\"\n [maxFractionDigits]=\"$any(descriptor.numberMaxFractionDigits)\"\n [useGrouping]=\"descriptor.numberUseGrouping\">\n <ng-template *ngIf=\"primeType === 'date'\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n <p-calendar\n appendTo=\"body\"\n [ngModel]=\"value\"\n (ngModelChange)=\"dateFilter($event, filterCallback)\"\n [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n [showIcon]=\"true\"\n [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n [showTime]=\"descriptor.datePickerShowTime\">\n </p-calendar>\n </ng-template>\n <ng-template *ngIf=\"lookupDescriptor\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n <ng-container [ngSwitch]=\"lookupDescriptor.lookupType\">\n <mng-autocomplete\n *ngSwitchCase=\"lookupTypeAutocomplete\"\n [ngModel]=\"value\"\n [dataProvider]=\"lookupDescriptor.dataProvider\"\n [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n [multiselect]=\"lookupDescriptor.multiselect\"\n [openOnFocus]=\"lookupDescriptor.autocompleteOpenOnFocus\"\n [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch\"\n [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n [className]=\"lookupDescriptor.className\"\n [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n (valueChange)=\"autocompleteFilter($event, filterCallback)\">\n </mng-autocomplete>\n <mng-dropdown\n *ngSwitchCase=\"lookupTypeDropdown\"\n [ngModel]=\"value\"\n [dataProvider]=\"lookupDescriptor.dataProvider\"\n [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n [multiselect]=\"lookupDescriptor.multiselect\"\n [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n [className]=\"lookupDescriptor.className\"\n [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n [showClear]=\"false\"\n (valueChange)=\"dropdownFilter($event, filterCallback)\">\n </mng-dropdown>\n </ng-container>\n </ng-template>\n</p-columnFilter>\n", components: [{ type: i4$5.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping"] }, { type: i5$1.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "dataKeyProperty", "itemsValueProperty", "itemsLabelProperty", "itemsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName"], outputs: ["valueChange"] }, { type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsLabelTranslate", "itemsValueProperty", "itemsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName"], outputs: ["valueChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "translate": i1$1.TranslatePipe } });
6309
6596
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngTableColumnFilterComponent, decorators: [{
6310
6597
  type: Component,
6311
- args: [{ selector: 'mng-table-column-filter', template: "<p-columnFilter\n class=\"ml-auto\"\n [type]=\"primeType\"\n matchMode=\"equals\"\n [field]=\"descriptor.property\"\n [display]=\"primeDisplay\"\n [matchMode]=\"primeDefaultMatchMode\"\n [matchModeOptions]=\"$any(primeMatchModes)\"\n [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n [showMatchModes]=\"true\"\n [showOperator]=\"false\"\n [showAddButton]=\"false\"\n [hideOnClear]=\"true\">\n <ng-template *ngIf=\"lookupDescriptor\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n <ng-container [ngSwitch]=\"lookupDescriptor.lookupType\">\n <mng-autocomplete\n *ngSwitchCase=\"lookupTypeAutocomplete\"\n [ngModel]=\"value\"\n [dataProvider]=\"lookupDescriptor.dataProvider\"\n [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n [multiselect]=\"lookupDescriptor.multiselect\"\n [openOnFocus]=\"lookupDescriptor.autocompleteOpenOnFocus\"\n [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch\"\n [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n [className]=\"lookupDescriptor.className\"\n [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n (valueChange)=\"autocompleteFilter($event, filterCallback)\">\n </mng-autocomplete>\n <mng-dropdown\n *ngSwitchCase=\"lookupTypeDropdown\"\n [ngModel]=\"value\"\n [dataProvider]=\"lookupDescriptor.dataProvider\"\n [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n [multiselect]=\"lookupDescriptor.multiselect\"\n [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n [className]=\"lookupDescriptor.className\"\n [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n [showClear]=\"true\"\n (valueChange)=\"dropdownFilter($event, filterCallback)\">\n </mng-dropdown>\n </ng-container>\n </ng-template>\n</p-columnFilter>\n" }]
6598
+ args: [{ selector: 'mng-table-column-filter', template: "<p-columnFilter\n class=\"ml-auto\"\n [type]=\"primeType\"\n matchMode=\"equals\"\n [field]=\"descriptor.property\"\n [display]=\"primeDisplay\"\n [matchMode]=\"primeDefaultMatchMode\"\n [matchModeOptions]=\"$any(primeMatchModes)\"\n [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n [showMatchModes]=\"true\"\n [showOperator]=\"false\"\n [showAddButton]=\"false\"\n [hideOnClear]=\"true\"\n [minFractionDigits]=\"$any(descriptor.numberMinFractionDigits)\"\n [maxFractionDigits]=\"$any(descriptor.numberMaxFractionDigits)\"\n [useGrouping]=\"descriptor.numberUseGrouping\">\n <ng-template *ngIf=\"primeType === 'date'\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n <p-calendar\n appendTo=\"body\"\n [ngModel]=\"value\"\n (ngModelChange)=\"dateFilter($event, filterCallback)\"\n [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n [showIcon]=\"true\"\n [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n [showTime]=\"descriptor.datePickerShowTime\">\n </p-calendar>\n </ng-template>\n <ng-template *ngIf=\"lookupDescriptor\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n <ng-container [ngSwitch]=\"lookupDescriptor.lookupType\">\n <mng-autocomplete\n *ngSwitchCase=\"lookupTypeAutocomplete\"\n [ngModel]=\"value\"\n [dataProvider]=\"lookupDescriptor.dataProvider\"\n [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n [multiselect]=\"lookupDescriptor.multiselect\"\n [openOnFocus]=\"lookupDescriptor.autocompleteOpenOnFocus\"\n [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch\"\n [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n [className]=\"lookupDescriptor.className\"\n [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n (valueChange)=\"autocompleteFilter($event, filterCallback)\">\n </mng-autocomplete>\n <mng-dropdown\n *ngSwitchCase=\"lookupTypeDropdown\"\n [ngModel]=\"value\"\n [dataProvider]=\"lookupDescriptor.dataProvider\"\n [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n [multiselect]=\"lookupDescriptor.multiselect\"\n [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n [className]=\"lookupDescriptor.className\"\n [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n [showClear]=\"false\"\n (valueChange)=\"dropdownFilter($event, filterCallback)\">\n </mng-dropdown>\n </ng-container>\n </ng-template>\n</p-columnFilter>\n" }]
6312
6599
  }], ctorParameters: function () { return [{ type: i2.PrimeNGConfig }]; }, propDecorators: { descriptor: [{
6313
6600
  type: Input
6314
6601
  }], display: [{
@@ -6348,14 +6635,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
6348
6635
  type: Input
6349
6636
  }] } });
6350
6637
 
6351
- var TypeEnum = FilterDescriptor.TypeEnum;
6352
6638
  var PaginationModeEnum = TableDescriptor.PaginationModeEnum;
6639
+ var TypeEnum = FilterDescriptor.TypeEnum;
6353
6640
  class MngTableComponent {
6354
- constructor(injector, router, activatedRoute, translate, viewContainerService) {
6641
+ constructor(injector, router, route, translate, actionExecutor, viewContainerService) {
6355
6642
  this.injector = injector;
6356
6643
  this.router = router;
6357
- this.activatedRoute = activatedRoute;
6644
+ this.route = route;
6358
6645
  this.translate = translate;
6646
+ this.actionExecutor = actionExecutor;
6359
6647
  this.viewContainerService = viewContainerService;
6360
6648
  this.filterDisplayRow = TableDescriptor.FilterDisplayEnum.Row;
6361
6649
  this.filterDisplayMenu = TableDescriptor.FilterDisplayEnum.Menu;
@@ -6363,8 +6651,9 @@ class MngTableComponent {
6363
6651
  // extra features input
6364
6652
  this.selectionMode = 'multiple';
6365
6653
  this.selectionEnabled = false;
6366
- // visual
6367
- this.isColumnClickable = true;
6654
+ // actions
6655
+ this.actions = [];
6656
+ this.columnActionMinWidth = null;
6368
6657
  // event outputs
6369
6658
  this.loadEventEmitter = new EventEmitter();
6370
6659
  this.cellClickEventEmitter = new EventEmitter();
@@ -6375,12 +6664,14 @@ class MngTableComponent {
6375
6664
  this.useDataProvider = false;
6376
6665
  this.useQueryParamsInitialized = false;
6377
6666
  this.dataProviderInfiniteScrollItems = [];
6667
+ this.itemsSubject = new ReplaySubject(1);
6378
6668
  this.offset = 0;
6379
6669
  this.multiSortMeta = null;
6380
6670
  this.filterMetadata = {};
6381
6671
  // infinite scroll
6382
6672
  this.infiniteScroll = false;
6383
6673
  this.scrollHeight = null;
6674
+ this.tableFullHeightOffset = null;
6384
6675
  this.rowHeight = null;
6385
6676
  // selection
6386
6677
  this.selection = [];
@@ -6394,17 +6685,58 @@ class MngTableComponent {
6394
6685
  this.isFilterChanged = false;
6395
6686
  this.isSortChanged = false;
6396
6687
  this.filterDescriptors = [];
6688
+ // actions
6689
+ this.showInlineActionsColumn = false;
6690
+ this.rowClickActions = [];
6691
+ this.rowInlineActions = [];
6397
6692
  this.subscriptions = [];
6398
6693
  }
6399
6694
  ngOnInit() {
6400
6695
  this.viewContainer = this.viewContainerInit ?? this.viewContainerService ?? undefined;
6401
6696
  this.filterDescriptors = this.descriptor.columns.filter(c => typeof c.filterDescriptor !== 'undefined').map(c => c.filterDescriptor);
6697
+ // map row settings
6402
6698
  this.rows = this.descriptor.defaultNumRows;
6403
6699
  this.rowsPerPageOptions = this.descriptor.rowsPerPageOptions;
6700
+ // process actions
6701
+ for (const action of this.actions) {
6702
+ switch (action.position) {
6703
+ case ActionPositionEnum.RowClick:
6704
+ this.rowClickActions.push(action);
6705
+ break;
6706
+ case ActionPositionEnum.RowInline:
6707
+ this.rowInlineActions.push(action);
6708
+ break;
6709
+ }
6710
+ }
6711
+ this.showInlineActionsColumn = typeof this.columnActionComponent !== 'undefined' || this.rowInlineActions.length > 0;
6712
+ // define all styles
6713
+ this.className = this.descriptor.className;
6714
+ this.tableFullHeightOffset = this.descriptor.tableFullHeightOffset ?? null;
6715
+ this.rowHeight = this.descriptor.rowHeight ?? null;
6716
+ if (typeof this.isColumnClickable === 'undefined') {
6717
+ // define if cell click is being observed via output
6718
+ this.isColumnClickable = this.rowClickActions.length > 0 || this.cellClickEventEmitter.observed;
6719
+ }
6720
+ switch (this.descriptor.size) {
6721
+ case TableDescriptor.SizeEnum.Small:
6722
+ this.className += ' p-datatable-sm';
6723
+ break;
6724
+ case TableDescriptor.SizeEnum.Large:
6725
+ this.className += ' p-datatable-lg';
6726
+ break;
6727
+ }
6728
+ if (this.descriptor.hasGridlines) {
6729
+ this.className += ' p-datatable-gridlines';
6730
+ }
6731
+ if (!this.columnActionMinWidth) {
6732
+ this.columnActionMinWidth = StylesUtil.calculateTableColumnActionWidth(this.descriptor, this.rowInlineActions);
6733
+ }
6734
+ // check if infinite scroll
6404
6735
  if (this.descriptor.paginationMode === PaginationModeEnum.InfiniteScroll) {
6405
6736
  this.infiniteScroll = true;
6406
6737
  this.scrollHeight = 'flex';
6407
- this.rowHeight = this.descriptor.rowHeight;
6738
+ this.tableFullHeightOffset = this.descriptor.tableFullHeightOffset ?? 315;
6739
+ this.rowHeight = this.descriptor.rowHeight ?? 45;
6408
6740
  this.useQueryParams = false;
6409
6741
  }
6410
6742
  // check if data provider is supplied, if is, use it primarily
@@ -6428,8 +6760,8 @@ class MngTableComponent {
6428
6760
  if (this.queryResult) {
6429
6761
  this.queryResult$ = this.queryResult instanceof Observable ? this.queryResult : of(this.queryResult);
6430
6762
  }
6431
- else if (!this.queryResult && this.items) {
6432
- this.queryResult$ = (this.items instanceof Observable ? this.items : of(this.items)).pipe(
6763
+ else {
6764
+ this.queryResult$ = (isObservable(this.items) ? this.items : this.itemsSubject.asObservable()).pipe(
6433
6765
  // distinctUntilChanged((v1, v2) => v1.length === v2.length &&
6434
6766
  // v1.every((v1i, idx) => v1i[this.descriptor.dataKeyProperty] === v2[idx][this.descriptor.dataKeyProperty])),
6435
6767
  map(items => {
@@ -6438,13 +6770,16 @@ class MngTableComponent {
6438
6770
  queryResult.allDataCount = items.length;
6439
6771
  return queryResult;
6440
6772
  }));
6773
+ if (!isObservable(this.items)) {
6774
+ this.itemsSubject.next(this.items ?? []);
6775
+ }
6441
6776
  }
6442
6777
  if (typeof this.loading !== 'undefined') {
6443
6778
  this.loading$ = this.loading instanceof Observable ? this.loading : of(this.loading);
6444
6779
  }
6445
6780
  }
6446
6781
  if (this.useQueryParams) {
6447
- const subscription = this.activatedRoute.queryParams.subscribe(qp => {
6782
+ const subscription = this.route.queryParams.subscribe(qp => {
6448
6783
  this.loadTableFromRouteUpdate(qp);
6449
6784
  });
6450
6785
  this.subscriptions.push(subscription);
@@ -6465,10 +6800,18 @@ class MngTableComponent {
6465
6800
  break;
6466
6801
  case 'columnAction':
6467
6802
  this.columnActionTemplate = template.template;
6803
+ if (!this.showInlineActionsColumn) {
6804
+ this.showInlineActionsColumn = true;
6805
+ }
6468
6806
  break;
6469
6807
  }
6470
6808
  });
6471
6809
  }
6810
+ ngOnChanges(changes) {
6811
+ if (changes['items'] && !changes['items'].firstChange && Array.isArray(changes['items'].currentValue)) {
6812
+ this.itemsSubject.next(changes['items'].currentValue);
6813
+ }
6814
+ }
6472
6815
  ngOnDestroy() {
6473
6816
  this.dataProviderSubscription?.unsubscribe();
6474
6817
  this.subscriptions.forEach(s => s.unsubscribe());
@@ -6485,7 +6828,7 @@ class MngTableComponent {
6485
6828
  event.multiSortMeta = this.getDefaultSortMeta();
6486
6829
  }
6487
6830
  this.router.navigate([], {
6488
- relativeTo: this.activatedRoute,
6831
+ relativeTo: this.route,
6489
6832
  replaceUrl: true,
6490
6833
  queryParams: MediusRestUtil.fromPrimeLazyLoadEventToAngularQueryParams(event, this.rowsPerPageOptions[0])
6491
6834
  });
@@ -6503,9 +6846,14 @@ class MngTableComponent {
6503
6846
  onTableFilter(event) {
6504
6847
  this.isFilterChanged = true;
6505
6848
  }
6506
- onCellClick(col, item, idx) {
6849
+ onCellClick(event, col, item, idx) {
6507
6850
  const mngEvent = new MngTableCellClickEvent(col, item, idx);
6508
6851
  this.cellClickEventEmitter.next(mngEvent);
6852
+ if (this.rowClickActions.length) {
6853
+ for (const action of this.rowClickActions) {
6854
+ this.actionExecutor.triggerRowClickAction(action, mngEvent, this.route, this.descriptor);
6855
+ }
6856
+ }
6509
6857
  }
6510
6858
  onSelectionChange(event) {
6511
6859
  this.selectionChangeEventEmitter.emit(event);
@@ -6569,9 +6917,21 @@ class MngTableComponent {
6569
6917
  const primeSortMeta = [];
6570
6918
  const primeFilterMeta = {};
6571
6919
  this.filterDescriptors.forEach(f => {
6920
+ let matchMode;
6921
+ switch (f.filterType) {
6922
+ case TypeEnum.String:
6923
+ matchMode = FilterMatchMode.CONTAINS;
6924
+ break;
6925
+ case TypeEnum.Date:
6926
+ matchMode = FilterMatchMode.DATE_AFTER;
6927
+ break;
6928
+ default:
6929
+ matchMode = FilterMatchMode.EQUALS;
6930
+ break;
6931
+ }
6572
6932
  primeFilterMeta[f.property] = {
6573
6933
  value: null,
6574
- matchMode: f.filterType === TypeEnum.String ? 'contains' : 'equals'
6934
+ matchMode: matchMode
6575
6935
  };
6576
6936
  });
6577
6937
  mediusQueryParam?.sortProperty?.forEach((s, idx) => {
@@ -6582,11 +6942,17 @@ class MngTableComponent {
6582
6942
  });
6583
6943
  mediusQueryParam?.filterParams?.forEach(f => {
6584
6944
  const descriptor = this.filterDescriptors.find(fd => fd.filterProperty === f.property || fd.property === f.property);
6585
- const operator = MediusRestUtil.matchModeMapping.find(mapping => mapping[2] === f.filterMatchType);
6586
- if (descriptor && operator) {
6945
+ const matchMode = f.filterMatchType && descriptor ? MediusRestUtil.getMapping(f.filterMatchType, descriptor.filterType, 2)?.[0] : MediusFilterMatchType.Equals;
6946
+ if (descriptor && matchMode) {
6947
+ let filterValue = f.filterValue;
6948
+ if (descriptor.filterType === TypeEnum.Date && typeof filterValue !== 'undefined') {
6949
+ if (typeof filterValue === 'string' || typeof filterValue === 'number') {
6950
+ filterValue = new Date(filterValue);
6951
+ }
6952
+ }
6587
6953
  primeFilterMeta[descriptor.property] = {
6588
- value: f.filterValue,
6589
- matchMode: operator[0]
6954
+ value: filterValue,
6955
+ matchMode: matchMode
6590
6956
  };
6591
6957
  }
6592
6958
  });
@@ -6607,12 +6973,12 @@ class MngTableComponent {
6607
6973
  }
6608
6974
  }
6609
6975
  }
6610
- MngTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngTableComponent, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: i1$1.TranslateService }, { token: MngViewContainerComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
6611
- MngTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: MngTableComponent, selector: "mng-table", inputs: { descriptor: "descriptor", items: "items", queryResult: "queryResult", loading: "loading", dataProvider: "dataProvider", useQueryParams: "useQueryParams", selectionMode: "selectionMode", selectionEnabled: "selectionEnabled", isColumnClickable: "isColumnClickable", viewContainerInit: ["viewContainer", "viewContainerInit"], captionComponent: "captionComponent", columnActionComponent: "columnActionComponent" }, outputs: { loadEventEmitter: "tableLoad", cellClickEventEmitter: "cellClick", selectionChangeEventEmitter: "selectionChange", captionCmpInstEventEmitter: "captionComponentInstance", columnActionCmpInstEventEmitter: "columnActionComponentInstance" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "primeTable", first: true, predicate: Table, descendants: true }, { propertyName: "components", predicate: MngComponentDirective, descendants: true }], ngImport: i0, template: "<div [style.height]=\"scrollHeight === 'flex' ? 'calc(100vh - ' + descriptor.tableFullHeightOffset + 'px)' : null\">\n <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n <p-table\n *ngIf=\"!useQueryParams || useQueryParamsInitialized\"\n [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n [dataKey]=\"$any(descriptor.dataKeyProperty)\"\n [lazy]=\"useDataProvider\"\n [loading]=\"(loading$ | async) ?? false\"\n [paginator]=\"useDataProvider && !infiniteScroll\"\n [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n [first]=\"$any(infiniteScroll ? 0 : offset)\"\n [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n [showCurrentPageReport]=\"!infiniteScroll\"\n [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n [multiSortMeta]=\"$any(multiSortMeta)\"\n [filters]=\"filterMetadata\"\n [(selection)]=\"selection\"\n (selectionChange)=\"onSelectionChange($event)\"\n [scrollable]=\"infiniteScroll\"\n [virtualScroll]=\"infiniteScroll\"\n [virtualRowHeight]=\"$any(rowHeight)\"\n [scrollHeight]=\"$any(scrollHeight)\"\n [rowHover]=\"true\"\n (onLazyLoad)=\"onTableLazyLoad($event)\"\n (onSort)=\"onTableSort($event)\"\n (onFilter)=\"onTableFilter($event)\"\n [selectionMode]=\"selectionMode\"\n sortMode=\"multiple\"\n responsiveLayout=\"scroll\">\n <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor.title\" pTemplate=\"caption\">\n <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n </ng-container>\n <ng-template #componentOrDefaultCaption>\n <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n <ng-template #defaultCaption>\n <h5 class=\"p-0 m-0\">{{ descriptor.title }}</h5>\n </ng-template>\n </ng-template>\n </ng-template>\n\n <ng-template pTemplate=\"header\">\n <tr *ngIf=\"!descriptor.hideHeader\">\n <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 2.25em\"></th>\n <ng-container *ngFor=\"let col of descriptor.columns\">\n <th *ngIf=\"col.isSortEnabled\" [pSortableColumn]=\"col.property\">\n <div class=\"flex justify-content-between align-items-center\">\n {{ col.title ?? (col.property | i18nProperty: descriptor.model) | translate }}\n <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n <mng-table-column-filter\n *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n class=\"ml-auto\"\n [display]=\"descriptor.filterDisplay\"\n [descriptor]=\"col.filterDescriptor\">\n </mng-table-column-filter>\n </div>\n </th>\n <th *ngIf=\"!col.isSortEnabled\">\n {{ col.title ?? (col.property | i18nProperty: descriptor.model) | translate }}\n <ng-container>\n <mng-table-column-filter\n *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n class=\"ml-auto\"\n [display]=\"descriptor.filterDisplay\"\n [descriptor]=\"col.filterDescriptor\">\n </mng-table-column-filter>\n </ng-container>\n </th>\n </ng-container>\n <th *ngIf=\"columnActionTemplate || columnActionComponent\"></th>\n </tr>\n <tr *ngIf=\"descriptor.filterDisplay === filterDisplayRow\">\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 2.25em\"></th>\n <th *ngFor=\"let col of descriptor.columns\">\n <div class=\"flex\" *ngIf=\"col.filterDescriptor\">\n <mng-table-column-filter [display]=\"descriptor.filterDisplay\" [descriptor]=\"col.filterDescriptor\"></mng-table-column-filter>\n </div>\n </th>\n <th *ngIf=\"columnActionTemplate || columnActionComponent\"></th>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n <tr [style.height.px]=\"descriptor.rowHeight\">\n <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <td *ngIf=\"selectionEnabled && selectionMode === 'single'\">\n <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n </td>\n <td *ngFor=\"let col of descriptor.columns\" (click)=\"onCellClick(col, item, idx)\" [class.clickable]=\"isColumnClickable\">\n <mng-table-column-value [descriptor]=\"col\" [item]=\"item\"></mng-table-column-value>\n </td>\n <td *ngIf=\"columnActionTemplate || columnActionComponent\" class=\"text-right\">\n <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponent\">\n <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n </ng-container>\n <ng-template #showColumnActionComponent>\n <span [mngComponent]=\"columnActionComponent!\" (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n </ng-template>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"loadingbody\">\n <tr [style.height.px]=\"descriptor.rowHeight\">\n <td [attr.colspan]=\"descriptor.columns.length + (columnActionTemplate || columnActionComponent ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n <div class=\"loading-text\"></div>\n <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"emptymessage\">\n <tr [style.height.px]=\"rowHeight\">\n <td [attr.colspan]=\"descriptor.columns.length + (columnActionTemplate || columnActionComponent ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n {{ 'mngTable.noItems' | translate }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n</div>\n", components: [{ type: i4$5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollDelay", "virtualRowHeight", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "minBufferPx", "maxBufferPx", "responsiveLayout", "breakpoint", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { type: i4$5.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { type: i4$5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: ["descriptor", "display"] }, { type: i4$5.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { type: i4$5.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { type: i7$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs"], outputs: ["instanceCreated"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i4.AsyncPipe, "translate": i1$1.TranslatePipe, "i18nProperty": MngI18nPropertyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
6976
+ MngTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngTableComponent, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: i1$1.TranslateService }, { token: MngActionExecutorService }, { token: MngViewContainerComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
6977
+ MngTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: MngTableComponent, selector: "mng-table", inputs: { descriptor: "descriptor", items: "items", queryResult: "queryResult", loading: "loading", dataProvider: "dataProvider", useQueryParams: "useQueryParams", selectionMode: "selectionMode", selectionEnabled: "selectionEnabled", actions: "actions", isColumnClickable: "isColumnClickable", viewContainerInit: ["viewContainer", "viewContainerInit"], captionComponent: "captionComponent", columnActionComponent: "columnActionComponent", columnActionMinWidth: "columnActionMinWidth" }, outputs: { loadEventEmitter: "tableLoad", cellClickEventEmitter: "cellClick", selectionChangeEventEmitter: "selectionChange", captionCmpInstEventEmitter: "captionComponentInstance", columnActionCmpInstEventEmitter: "columnActionComponentInstance" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "primeTable", first: true, predicate: Table, descendants: true }, { propertyName: "components", predicate: MngComponentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [style.height]=\"scrollHeight === 'flex' ? 'calc(100vh - ' + tableFullHeightOffset + 'px)' : null\">\n <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n <p-table\n *ngIf=\"!useQueryParams || useQueryParamsInitialized\"\n [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n [dataKey]=\"$any(descriptor.dataKeyProperty)\"\n [lazy]=\"useDataProvider\"\n [loading]=\"(loading$ | async) ?? false\"\n [paginator]=\"useDataProvider && !infiniteScroll\"\n [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n [first]=\"$any(infiniteScroll ? 0 : offset)\"\n [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n [showCurrentPageReport]=\"!infiniteScroll\"\n [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n [multiSortMeta]=\"$any(multiSortMeta)\"\n [filters]=\"filterMetadata\"\n [(selection)]=\"selection\"\n (selectionChange)=\"onSelectionChange($event)\"\n [scrollable]=\"infiniteScroll\"\n [virtualScroll]=\"infiniteScroll\"\n [virtualRowHeight]=\"$any(rowHeight)\"\n [scrollHeight]=\"$any(scrollHeight)\"\n [selectionMode]=\"$any(selectionEnabled ? selectionMode : null)\"\n [rowHover]=\"descriptor.hasHover\"\n [styleClass]=\"className\"\n (onLazyLoad)=\"onTableLazyLoad($event)\"\n (onSort)=\"onTableSort($event)\"\n (onFilter)=\"onTableFilter($event)\"\n sortMode=\"multiple\"\n responsiveLayout=\"scroll\">\n <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor.title\" pTemplate=\"caption\">\n <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n </ng-container>\n <ng-template #componentOrDefaultCaption>\n <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n <ng-template #defaultCaption>\n <h5 class=\"p-0 m-0\">{{ descriptor.title }}</h5>\n </ng-template>\n </ng-template>\n </ng-template>\n\n <ng-template pTemplate=\"header\">\n <tr *ngIf=\"!descriptor.hideHeader\">\n <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\"></th>\n <ng-container *ngFor=\"let col of descriptor.columns\">\n <th *ngIf=\"col.isSortEnabled\" [pSortableColumn]=\"col.property\" [class]=\"col.headerClassName\" [style.width.%]=\"col.width\" [style.min-width.px]=\"col.minWidth\">\n <div class=\"flex justify-content-between align-items-center\">\n {{ col.title ?? (col.property | i18nProperty: descriptor.model) | translate }}\n <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n <mng-table-column-filter\n *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n class=\"ml-auto\"\n [display]=\"descriptor.filterDisplay\"\n [descriptor]=\"col.filterDescriptor\">\n </mng-table-column-filter>\n </div>\n </th>\n <th *ngIf=\"!col.isSortEnabled\">\n {{ col.title ?? (col.property | i18nProperty: descriptor.model) | translate }}\n <ng-container>\n <mng-table-column-filter\n *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n class=\"ml-auto\"\n [display]=\"descriptor.filterDisplay\"\n [descriptor]=\"col.filterDescriptor\">\n </mng-table-column-filter>\n </ng-container>\n </th>\n </ng-container>\n <th *ngIf=\"showInlineActionsColumn\"></th>\n </tr>\n <tr *ngIf=\"descriptor.filterDisplay === filterDisplayRow\" class=\"mng-column-filter-row\">\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\"></th>\n <th\n *ngFor=\"let col of descriptor.columns\"\n [class]=\"(col.filterDescriptor ? 'mng-column-filter-' + col.filterDescriptor.filterType + ' ' : ' ') + col.filterDescriptor?.columnClassName\"\n [style.width.%]=\"col.filterDescriptor?.columnWidth ?? col.width\"\n [style.min-width.px]=\"col.filterDescriptor?.columnMinWidth ?? col.minWidth\">\n <div class=\"flex\" *ngIf=\"col.filterDescriptor\">\n <mng-table-column-filter [display]=\"descriptor.filterDisplay\" [descriptor]=\"col.filterDescriptor\"></mng-table-column-filter>\n </div>\n </th>\n <th *ngIf=\"showInlineActionsColumn\"></th>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n <tr [style.height.px]=\"rowHeight\">\n <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <td *ngIf=\"selectionEnabled && selectionMode === 'single'\">\n <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n </td>\n <td\n *ngFor=\"let col of descriptor.columns\"\n (click)=\"onCellClick($event, col, item, idx)\"\n [class]=\"col.className\"\n [class.clickable]=\"isColumnClickable\"\n [style.width.%]=\"col.width\"\n [style.min-width.px]=\"col.minWidth\">\n <mng-table-column-value [descriptor]=\"col\" [item]=\"item\"></mng-table-column-value>\n </td>\n <td *ngIf=\"showInlineActionsColumn\" class=\"column-action text-right\" [style.min-width.px]=\"columnActionMinWidth\">\n <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponentOrDefault\">\n <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n </ng-container>\n <ng-template #showColumnActionComponentOrDefault>\n <span\n *ngIf=\"columnActionComponent; else defaultColumnActions\"\n [mngComponent]=\"columnActionComponent!\"\n (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n </ng-template>\n <ng-template #defaultColumnActions>\n <mng-action\n *ngFor=\"let action of rowInlineActions\"\n [action]=\"action\"\n [item]=\"item\"\n [itemId]=\"descriptor.model.idPropertyName ? item[descriptor.model.idPropertyName] : null\"\n [actionData]=\"{itemIndex: idx}\">\n </mng-action>\n </ng-template>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"loadingbody\">\n <tr [style.height.px]=\"rowHeight\">\n <td [attr.colspan]=\"descriptor.columns.length + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n <div class=\"loading-text\"></div>\n <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"emptymessage\">\n <tr [style.height.px]=\"rowHeight\">\n <td [attr.colspan]=\"descriptor.columns.length + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n {{ 'mngTable.noItems' | translate }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n</div>\n", components: [{ type: i4$5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollDelay", "virtualRowHeight", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "minBufferPx", "maxBufferPx", "responsiveLayout", "breakpoint", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { type: i4$5.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { type: i4$5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: ["descriptor", "display"] }, { type: i4$5.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { type: i4$5.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "dataProvider", "disabled", "loading", "viewContainer"], outputs: ["trigger"] }, { type: i8$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs"], outputs: ["instanceCreated"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i4.AsyncPipe, "translate": i1$1.TranslatePipe, "i18nProperty": MngI18nPropertyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
6612
6978
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngTableComponent, decorators: [{
6613
6979
  type: Component,
6614
- args: [{ selector: 'mng-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.height]=\"scrollHeight === 'flex' ? 'calc(100vh - ' + descriptor.tableFullHeightOffset + 'px)' : null\">\n <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n <p-table\n *ngIf=\"!useQueryParams || useQueryParamsInitialized\"\n [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n [dataKey]=\"$any(descriptor.dataKeyProperty)\"\n [lazy]=\"useDataProvider\"\n [loading]=\"(loading$ | async) ?? false\"\n [paginator]=\"useDataProvider && !infiniteScroll\"\n [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n [first]=\"$any(infiniteScroll ? 0 : offset)\"\n [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n [showCurrentPageReport]=\"!infiniteScroll\"\n [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n [multiSortMeta]=\"$any(multiSortMeta)\"\n [filters]=\"filterMetadata\"\n [(selection)]=\"selection\"\n (selectionChange)=\"onSelectionChange($event)\"\n [scrollable]=\"infiniteScroll\"\n [virtualScroll]=\"infiniteScroll\"\n [virtualRowHeight]=\"$any(rowHeight)\"\n [scrollHeight]=\"$any(scrollHeight)\"\n [rowHover]=\"true\"\n (onLazyLoad)=\"onTableLazyLoad($event)\"\n (onSort)=\"onTableSort($event)\"\n (onFilter)=\"onTableFilter($event)\"\n [selectionMode]=\"selectionMode\"\n sortMode=\"multiple\"\n responsiveLayout=\"scroll\">\n <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor.title\" pTemplate=\"caption\">\n <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n </ng-container>\n <ng-template #componentOrDefaultCaption>\n <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n <ng-template #defaultCaption>\n <h5 class=\"p-0 m-0\">{{ descriptor.title }}</h5>\n </ng-template>\n </ng-template>\n </ng-template>\n\n <ng-template pTemplate=\"header\">\n <tr *ngIf=\"!descriptor.hideHeader\">\n <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 2.25em\"></th>\n <ng-container *ngFor=\"let col of descriptor.columns\">\n <th *ngIf=\"col.isSortEnabled\" [pSortableColumn]=\"col.property\">\n <div class=\"flex justify-content-between align-items-center\">\n {{ col.title ?? (col.property | i18nProperty: descriptor.model) | translate }}\n <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n <mng-table-column-filter\n *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n class=\"ml-auto\"\n [display]=\"descriptor.filterDisplay\"\n [descriptor]=\"col.filterDescriptor\">\n </mng-table-column-filter>\n </div>\n </th>\n <th *ngIf=\"!col.isSortEnabled\">\n {{ col.title ?? (col.property | i18nProperty: descriptor.model) | translate }}\n <ng-container>\n <mng-table-column-filter\n *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n class=\"ml-auto\"\n [display]=\"descriptor.filterDisplay\"\n [descriptor]=\"col.filterDescriptor\">\n </mng-table-column-filter>\n </ng-container>\n </th>\n </ng-container>\n <th *ngIf=\"columnActionTemplate || columnActionComponent\"></th>\n </tr>\n <tr *ngIf=\"descriptor.filterDisplay === filterDisplayRow\">\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 2.25em\"></th>\n <th *ngFor=\"let col of descriptor.columns\">\n <div class=\"flex\" *ngIf=\"col.filterDescriptor\">\n <mng-table-column-filter [display]=\"descriptor.filterDisplay\" [descriptor]=\"col.filterDescriptor\"></mng-table-column-filter>\n </div>\n </th>\n <th *ngIf=\"columnActionTemplate || columnActionComponent\"></th>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n <tr [style.height.px]=\"descriptor.rowHeight\">\n <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <td *ngIf=\"selectionEnabled && selectionMode === 'single'\">\n <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n </td>\n <td *ngFor=\"let col of descriptor.columns\" (click)=\"onCellClick(col, item, idx)\" [class.clickable]=\"isColumnClickable\">\n <mng-table-column-value [descriptor]=\"col\" [item]=\"item\"></mng-table-column-value>\n </td>\n <td *ngIf=\"columnActionTemplate || columnActionComponent\" class=\"text-right\">\n <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponent\">\n <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n </ng-container>\n <ng-template #showColumnActionComponent>\n <span [mngComponent]=\"columnActionComponent!\" (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n </ng-template>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"loadingbody\">\n <tr [style.height.px]=\"descriptor.rowHeight\">\n <td [attr.colspan]=\"descriptor.columns.length + (columnActionTemplate || columnActionComponent ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n <div class=\"loading-text\"></div>\n <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"emptymessage\">\n <tr [style.height.px]=\"rowHeight\">\n <td [attr.colspan]=\"descriptor.columns.length + (columnActionTemplate || columnActionComponent ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n {{ 'mngTable.noItems' | translate }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n</div>\n" }]
6615
- }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i1$1.TranslateService }, { type: MngViewContainerComponentService, decorators: [{
6980
+ args: [{ selector: 'mng-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.height]=\"scrollHeight === 'flex' ? 'calc(100vh - ' + tableFullHeightOffset + 'px)' : null\">\n <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n <p-table\n *ngIf=\"!useQueryParams || useQueryParamsInitialized\"\n [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n [dataKey]=\"$any(descriptor.dataKeyProperty)\"\n [lazy]=\"useDataProvider\"\n [loading]=\"(loading$ | async) ?? false\"\n [paginator]=\"useDataProvider && !infiniteScroll\"\n [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n [first]=\"$any(infiniteScroll ? 0 : offset)\"\n [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n [showCurrentPageReport]=\"!infiniteScroll\"\n [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n [multiSortMeta]=\"$any(multiSortMeta)\"\n [filters]=\"filterMetadata\"\n [(selection)]=\"selection\"\n (selectionChange)=\"onSelectionChange($event)\"\n [scrollable]=\"infiniteScroll\"\n [virtualScroll]=\"infiniteScroll\"\n [virtualRowHeight]=\"$any(rowHeight)\"\n [scrollHeight]=\"$any(scrollHeight)\"\n [selectionMode]=\"$any(selectionEnabled ? selectionMode : null)\"\n [rowHover]=\"descriptor.hasHover\"\n [styleClass]=\"className\"\n (onLazyLoad)=\"onTableLazyLoad($event)\"\n (onSort)=\"onTableSort($event)\"\n (onFilter)=\"onTableFilter($event)\"\n sortMode=\"multiple\"\n responsiveLayout=\"scroll\">\n <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor.title\" pTemplate=\"caption\">\n <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n </ng-container>\n <ng-template #componentOrDefaultCaption>\n <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n <ng-template #defaultCaption>\n <h5 class=\"p-0 m-0\">{{ descriptor.title }}</h5>\n </ng-template>\n </ng-template>\n </ng-template>\n\n <ng-template pTemplate=\"header\">\n <tr *ngIf=\"!descriptor.hideHeader\">\n <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\"></th>\n <ng-container *ngFor=\"let col of descriptor.columns\">\n <th *ngIf=\"col.isSortEnabled\" [pSortableColumn]=\"col.property\" [class]=\"col.headerClassName\" [style.width.%]=\"col.width\" [style.min-width.px]=\"col.minWidth\">\n <div class=\"flex justify-content-between align-items-center\">\n {{ col.title ?? (col.property | i18nProperty: descriptor.model) | translate }}\n <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n <mng-table-column-filter\n *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n class=\"ml-auto\"\n [display]=\"descriptor.filterDisplay\"\n [descriptor]=\"col.filterDescriptor\">\n </mng-table-column-filter>\n </div>\n </th>\n <th *ngIf=\"!col.isSortEnabled\">\n {{ col.title ?? (col.property | i18nProperty: descriptor.model) | translate }}\n <ng-container>\n <mng-table-column-filter\n *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n class=\"ml-auto\"\n [display]=\"descriptor.filterDisplay\"\n [descriptor]=\"col.filterDescriptor\">\n </mng-table-column-filter>\n </ng-container>\n </th>\n </ng-container>\n <th *ngIf=\"showInlineActionsColumn\"></th>\n </tr>\n <tr *ngIf=\"descriptor.filterDisplay === filterDisplayRow\" class=\"mng-column-filter-row\">\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\"></th>\n <th\n *ngFor=\"let col of descriptor.columns\"\n [class]=\"(col.filterDescriptor ? 'mng-column-filter-' + col.filterDescriptor.filterType + ' ' : ' ') + col.filterDescriptor?.columnClassName\"\n [style.width.%]=\"col.filterDescriptor?.columnWidth ?? col.width\"\n [style.min-width.px]=\"col.filterDescriptor?.columnMinWidth ?? col.minWidth\">\n <div class=\"flex\" *ngIf=\"col.filterDescriptor\">\n <mng-table-column-filter [display]=\"descriptor.filterDisplay\" [descriptor]=\"col.filterDescriptor\"></mng-table-column-filter>\n </div>\n </th>\n <th *ngIf=\"showInlineActionsColumn\"></th>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n <tr [style.height.px]=\"rowHeight\">\n <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <td *ngIf=\"selectionEnabled && selectionMode === 'single'\">\n <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n </td>\n <td\n *ngFor=\"let col of descriptor.columns\"\n (click)=\"onCellClick($event, col, item, idx)\"\n [class]=\"col.className\"\n [class.clickable]=\"isColumnClickable\"\n [style.width.%]=\"col.width\"\n [style.min-width.px]=\"col.minWidth\">\n <mng-table-column-value [descriptor]=\"col\" [item]=\"item\"></mng-table-column-value>\n </td>\n <td *ngIf=\"showInlineActionsColumn\" class=\"column-action text-right\" [style.min-width.px]=\"columnActionMinWidth\">\n <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponentOrDefault\">\n <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n </ng-container>\n <ng-template #showColumnActionComponentOrDefault>\n <span\n *ngIf=\"columnActionComponent; else defaultColumnActions\"\n [mngComponent]=\"columnActionComponent!\"\n (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n </ng-template>\n <ng-template #defaultColumnActions>\n <mng-action\n *ngFor=\"let action of rowInlineActions\"\n [action]=\"action\"\n [item]=\"item\"\n [itemId]=\"descriptor.model.idPropertyName ? item[descriptor.model.idPropertyName] : null\"\n [actionData]=\"{itemIndex: idx}\">\n </mng-action>\n </ng-template>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"loadingbody\">\n <tr [style.height.px]=\"rowHeight\">\n <td [attr.colspan]=\"descriptor.columns.length + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n <div class=\"loading-text\"></div>\n <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"emptymessage\">\n <tr [style.height.px]=\"rowHeight\">\n <td [attr.colspan]=\"descriptor.columns.length + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n {{ 'mngTable.noItems' | translate }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n</div>\n" }]
6981
+ }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i1$1.TranslateService }, { type: MngActionExecutorService }, { type: MngViewContainerComponentService, decorators: [{
6616
6982
  type: Optional
6617
6983
  }] }]; }, propDecorators: { descriptor: [{
6618
6984
  type: Input
@@ -6630,6 +6996,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
6630
6996
  type: Input
6631
6997
  }], selectionEnabled: [{
6632
6998
  type: Input
6999
+ }], actions: [{
7000
+ type: Input
6633
7001
  }], isColumnClickable: [{
6634
7002
  type: Input
6635
7003
  }], viewContainerInit: [{
@@ -6639,6 +7007,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
6639
7007
  type: Input
6640
7008
  }], columnActionComponent: [{
6641
7009
  type: Input
7010
+ }], columnActionMinWidth: [{
7011
+ type: Input
6642
7012
  }], loadEventEmitter: [{
6643
7013
  type: Output,
6644
7014
  args: ['tableLoad']
@@ -6675,7 +7045,6 @@ class MngTableviewComponent {
6675
7045
  this.actionExecutor = actionExecutor;
6676
7046
  this.viewContainerService = viewContainerService;
6677
7047
  this.actions = [];
6678
- this.tableComponent = null;
6679
7048
  this.rowClickActions = [];
6680
7049
  this.rowInlineActions = [];
6681
7050
  this.toolbarLeftActions = [];
@@ -6721,19 +7090,12 @@ class MngTableviewComponent {
6721
7090
  reloadTable() {
6722
7091
  this.tableComponent?.reload();
6723
7092
  }
6724
- onTableCellClick(event) {
6725
- if (this.rowClickActions.length) {
6726
- for (const action of this.rowClickActions) {
6727
- this.actionExecutor.triggerRowClickAction(action, event, this.route, this.descriptor.table);
6728
- }
6729
- }
6730
- }
6731
7093
  }
6732
7094
  MngTableviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngTableviewComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.MessageService }, { token: i1$1.TranslateService }, { token: i3.DialogService }, { token: i2.ConfirmationService }, { token: MngActionExecutorService }, { token: MngViewContainerComponentService }], target: i0.ɵɵFactoryTarget.Component });
6733
- MngTableviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: MngTableviewComponent, selector: "mng-tableview", inputs: { descriptor: "descriptor", dataProvider: "dataProvider", actions: "actions" }, providers: [MessageService, ConfirmationService, MngViewContainerComponentService], viewQueries: [{ propertyName: "tableComponent", first: true, predicate: MngTableComponent, descendants: true }], ngImport: i0, template: "<div class=\"mng-tableview\">\n <p-toast></p-toast>\n\n <div class=\"card\">\n <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n <ng-template pTemplate=\"left\">\n <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\"> </mng-action>\n </ng-template>\n\n <ng-template pTemplate=\"right\">\n <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\"> </mng-action>\n </ng-template>\n </p-toolbar>\n\n <mng-table\n [descriptor]=\"descriptor.table\"\n [dataProvider]=\"dataProvider\"\n [useQueryParams]=\"true\"\n (cellClick)=\"onTableCellClick($event)\"\n [isColumnClickable]=\"rowClickActions.length > 0\">\n <ng-template mngTemplate=\"caption\">\n <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n <h5 class=\"p-0 m-0\">{{ descriptor.tableTitle | translate }}</h5>\n </div>\n </ng-template>\n <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n <mng-action\n *ngFor=\"let action of rowInlineActions\"\n [action]=\"action\"\n [item]=\"item\"\n [itemId]=\"descriptor.model.idPropertyName ? item[descriptor.model.idPropertyName] : null\">\n </mng-action>\n </ng-template>\n </mng-table>\n </div>\n\n <router-outlet></router-outlet>\n</div>\n", components: [{ type: i6$2.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { type: i4$3.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass"] }, { type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "dataProvider", "disabled", "loading", "viewContainer"], outputs: ["trigger"] }, { type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "isColumnClickable", "viewContainer", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "translate": i1$1.TranslatePipe } });
7095
+ MngTableviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: MngTableviewComponent, selector: "mng-tableview", inputs: { descriptor: "descriptor", dataProvider: "dataProvider", actions: "actions" }, providers: [MessageService, ConfirmationService, MngViewContainerComponentService], viewQueries: [{ propertyName: "tableComponent", first: true, predicate: MngTableComponent, descendants: true }], ngImport: i0, template: "<div class=\"mng-tableview\">\n <p-toast></p-toast>\n\n <div class=\"card\">\n <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n <ng-template pTemplate=\"left\">\n <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\"> </mng-action>\n </ng-template>\n\n <ng-template pTemplate=\"right\">\n <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\"> </mng-action>\n </ng-template>\n </p-toolbar>\n\n <mng-table [descriptor]=\"descriptor.table\" [dataProvider]=\"dataProvider\" [useQueryParams]=\"true\" [actions]=\"actions\">\n <ng-template mngTemplate=\"caption\">\n <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n <h5 class=\"p-0 m-0\">{{ descriptor.tableTitle | translate }}</h5>\n </div>\n </ng-template>\n </mng-table>\n </div>\n\n <router-outlet></router-outlet>\n</div>\n", components: [{ type: i6$2.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { type: i4$3.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass"] }, { type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "dataProvider", "disabled", "loading", "viewContainer"], outputs: ["trigger"] }, { type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "actions", "isColumnClickable", "viewContainer", "captionComponent", "columnActionComponent", "columnActionMinWidth"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "translate": i1$1.TranslatePipe } });
6734
7096
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngTableviewComponent, decorators: [{
6735
7097
  type: Component,
6736
- args: [{ selector: 'mng-tableview', providers: [MessageService, ConfirmationService, MngViewContainerComponentService], template: "<div class=\"mng-tableview\">\n <p-toast></p-toast>\n\n <div class=\"card\">\n <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n <ng-template pTemplate=\"left\">\n <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\"> </mng-action>\n </ng-template>\n\n <ng-template pTemplate=\"right\">\n <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\"> </mng-action>\n </ng-template>\n </p-toolbar>\n\n <mng-table\n [descriptor]=\"descriptor.table\"\n [dataProvider]=\"dataProvider\"\n [useQueryParams]=\"true\"\n (cellClick)=\"onTableCellClick($event)\"\n [isColumnClickable]=\"rowClickActions.length > 0\">\n <ng-template mngTemplate=\"caption\">\n <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n <h5 class=\"p-0 m-0\">{{ descriptor.tableTitle | translate }}</h5>\n </div>\n </ng-template>\n <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n <mng-action\n *ngFor=\"let action of rowInlineActions\"\n [action]=\"action\"\n [item]=\"item\"\n [itemId]=\"descriptor.model.idPropertyName ? item[descriptor.model.idPropertyName] : null\">\n </mng-action>\n </ng-template>\n </mng-table>\n </div>\n\n <router-outlet></router-outlet>\n</div>\n" }]
7098
+ args: [{ selector: 'mng-tableview', providers: [MessageService, ConfirmationService, MngViewContainerComponentService], template: "<div class=\"mng-tableview\">\n <p-toast></p-toast>\n\n <div class=\"card\">\n <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n <ng-template pTemplate=\"left\">\n <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\"> </mng-action>\n </ng-template>\n\n <ng-template pTemplate=\"right\">\n <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\"> </mng-action>\n </ng-template>\n </p-toolbar>\n\n <mng-table [descriptor]=\"descriptor.table\" [dataProvider]=\"dataProvider\" [useQueryParams]=\"true\" [actions]=\"actions\">\n <ng-template mngTemplate=\"caption\">\n <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n <h5 class=\"p-0 m-0\">{{ descriptor.tableTitle | translate }}</h5>\n </div>\n </ng-template>\n </mng-table>\n </div>\n\n <router-outlet></router-outlet>\n</div>\n" }]
6737
7099
  }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.MessageService }, { type: i1$1.TranslateService }, { type: i3.DialogService }, { type: i2.ConfirmationService }, { type: MngActionExecutorService }, { type: MngViewContainerComponentService }]; }, propDecorators: { descriptor: [{
6738
7100
  type: Input
6739
7101
  }], dataProvider: [{
@@ -6977,7 +7339,7 @@ class MngFormlyFieldLookupDialogComponent extends FieldType {
6977
7339
  }
6978
7340
  }
6979
7341
  MngFormlyFieldLookupDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngFormlyFieldLookupDialogComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
6980
- MngFormlyFieldLookupDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: MngFormlyFieldLookupDialogComponent, selector: "mng-formly-field-lookup-dialog", viewQueries: [{ propertyName: "mngTable", first: true, predicate: MngTableComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"'p-inputgroup mng-dropdown-dialog' + descriptor.inputClassName\" [class.p-inputtext-sm]=\"descriptor.isSizeSmall\" [class.p-inputtext-lg]=\"descriptor.isSizeLarge\">\n <input pInputText type=\"text\" [id]=\"$any(key)\" [readonly]=\"true\" [formlyAttributes]=\"field\" [formControl]=\"fieldLabelFormControl\" />\n <i class=\"mng-dropdown-clear-icon pi pi-times\" (click)=\"clear()\" *ngIf=\"!to.required && formControl?.value && !formControl?.disabled\"></i>\n <button\n pButton\n pRipple\n class=\"mng-dropdown-dialog-search-button\"\n type=\"button\"\n [label]=\"'general.search' | translate: {item: ''}\"\n [disabled]=\"formControl?.disabled\"\n (click)=\"openSelectDialog()\"></button>\n</div>\n\n<p-dialog\n [(visible)]=\"isDialogVisible\"\n [draggable]=\"false\"\n [header]=\"'general.search' | translate: {item: to?.label!}\"\n [modal]=\"true\"\n appendTo=\"body\"\n styleClass=\"p-fluid mng-formly-field-lookup-dialog\">\n <ng-template pTemplate=\"content\">\n <mng-table\n [descriptor]=\"descriptor.dialogTableDescriptor!\"\n [dataProvider]=\"descriptor.dialogTableDataProvider\"\n [queryResult]=\"addItemsAsync\"\n [selectionEnabled]=\"true\"\n [selectionMode]=\"'single'\"\n [loading]=\"dialogIsLoading$\"\n [captionComponent]=\"config?.table?.captionComponent\"\n [columnActionComponent]=\"config?.table?.columnActionComponent\"\n (selectionChange)=\"onSelectionChange($event)\"\n (captionComponentInstance)=\"onCaptionCmpInst($event)\"\n (columnActionComponentInstance)=\"onColumnActionCmpInst($event)\">\n </mng-table>\n <p-messages [value]=\"dialogMessages\"></p-messages>\n </ng-template>\n\n <ng-template pTemplate=\"footer\">\n <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n <button\n pButton\n pRipple\n type=\"button\"\n [label]=\"'general.select' | translate\"\n icon=\"pi pi-check\"\n class=\"p-button-text\"\n (click)=\"addItem()\"\n [loading]=\"(dialogIsLoading$ | async) ?? false\"\n [disabled]=\"form.disabled\"></button>\n </ng-template>\n</p-dialog>\n", components: [{ type: i1$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "isColumnClickable", "viewContainer", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { type: i3$2.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }], directives: [{ type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i10.InputText, selector: "[pInputText]" }, { type: i3$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i8.Ripple, selector: "[pRipple]" }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i1$1.TranslatePipe, "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
7342
+ MngFormlyFieldLookupDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: MngFormlyFieldLookupDialogComponent, selector: "mng-formly-field-lookup-dialog", viewQueries: [{ propertyName: "mngTable", first: true, predicate: MngTableComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"'p-inputgroup mng-dropdown-dialog' + descriptor.inputClassName\" [class.p-inputtext-sm]=\"descriptor.isSizeSmall\" [class.p-inputtext-lg]=\"descriptor.isSizeLarge\">\n <input pInputText type=\"text\" [id]=\"$any(key)\" [readonly]=\"true\" [formlyAttributes]=\"field\" [formControl]=\"fieldLabelFormControl\" />\n <i class=\"mng-dropdown-clear-icon pi pi-times\" (click)=\"clear()\" *ngIf=\"!to.required && formControl?.value && !formControl?.disabled\"></i>\n <button\n pButton\n pRipple\n class=\"mng-dropdown-dialog-search-button\"\n type=\"button\"\n [label]=\"'general.search' | translate: {item: ''}\"\n [disabled]=\"formControl?.disabled\"\n (click)=\"openSelectDialog()\"></button>\n</div>\n\n<p-dialog\n [(visible)]=\"isDialogVisible\"\n [draggable]=\"false\"\n [header]=\"'general.search' | translate: {item: to?.label!}\"\n [modal]=\"true\"\n appendTo=\"body\"\n styleClass=\"p-fluid mng-formly-field-lookup-dialog\">\n <ng-template pTemplate=\"content\">\n <mng-table\n [descriptor]=\"descriptor.dialogTableDescriptor!\"\n [dataProvider]=\"descriptor.dialogTableDataProvider\"\n [queryResult]=\"addItemsAsync\"\n [selectionEnabled]=\"true\"\n [selectionMode]=\"'single'\"\n [loading]=\"dialogIsLoading$\"\n [captionComponent]=\"config?.table?.captionComponent\"\n [columnActionComponent]=\"config?.table?.columnActionComponent\"\n (selectionChange)=\"onSelectionChange($event)\"\n (captionComponentInstance)=\"onCaptionCmpInst($event)\"\n (columnActionComponentInstance)=\"onColumnActionCmpInst($event)\">\n </mng-table>\n <p-messages [value]=\"dialogMessages\"></p-messages>\n </ng-template>\n\n <ng-template pTemplate=\"footer\">\n <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n <button\n pButton\n pRipple\n type=\"button\"\n [label]=\"'general.select' | translate\"\n icon=\"pi pi-check\"\n class=\"p-button-text\"\n (click)=\"addItem()\"\n [loading]=\"(dialogIsLoading$ | async) ?? false\"\n [disabled]=\"form.disabled\"></button>\n </ng-template>\n</p-dialog>\n", components: [{ type: i1$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "actions", "isColumnClickable", "viewContainer", "captionComponent", "columnActionComponent", "columnActionMinWidth"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { type: i3$2.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }], directives: [{ type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i10.InputText, selector: "[pInputText]" }, { type: i3$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i8.Ripple, selector: "[pRipple]" }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i1$1.TranslatePipe, "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
6981
7343
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngFormlyFieldLookupDialogComponent, decorators: [{
6982
7344
  type: Component,
6983
7345
  args: [{ selector: 'mng-formly-field-lookup-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'p-inputgroup mng-dropdown-dialog' + descriptor.inputClassName\" [class.p-inputtext-sm]=\"descriptor.isSizeSmall\" [class.p-inputtext-lg]=\"descriptor.isSizeLarge\">\n <input pInputText type=\"text\" [id]=\"$any(key)\" [readonly]=\"true\" [formlyAttributes]=\"field\" [formControl]=\"fieldLabelFormControl\" />\n <i class=\"mng-dropdown-clear-icon pi pi-times\" (click)=\"clear()\" *ngIf=\"!to.required && formControl?.value && !formControl?.disabled\"></i>\n <button\n pButton\n pRipple\n class=\"mng-dropdown-dialog-search-button\"\n type=\"button\"\n [label]=\"'general.search' | translate: {item: ''}\"\n [disabled]=\"formControl?.disabled\"\n (click)=\"openSelectDialog()\"></button>\n</div>\n\n<p-dialog\n [(visible)]=\"isDialogVisible\"\n [draggable]=\"false\"\n [header]=\"'general.search' | translate: {item: to?.label!}\"\n [modal]=\"true\"\n appendTo=\"body\"\n styleClass=\"p-fluid mng-formly-field-lookup-dialog\">\n <ng-template pTemplate=\"content\">\n <mng-table\n [descriptor]=\"descriptor.dialogTableDescriptor!\"\n [dataProvider]=\"descriptor.dialogTableDataProvider\"\n [queryResult]=\"addItemsAsync\"\n [selectionEnabled]=\"true\"\n [selectionMode]=\"'single'\"\n [loading]=\"dialogIsLoading$\"\n [captionComponent]=\"config?.table?.captionComponent\"\n [columnActionComponent]=\"config?.table?.columnActionComponent\"\n (selectionChange)=\"onSelectionChange($event)\"\n (captionComponentInstance)=\"onCaptionCmpInst($event)\"\n (columnActionComponentInstance)=\"onColumnActionCmpInst($event)\">\n </mng-table>\n <p-messages [value]=\"dialogMessages\"></p-messages>\n </ng-template>\n\n <ng-template pTemplate=\"footer\">\n <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n <button\n pButton\n pRipple\n type=\"button\"\n [label]=\"'general.select' | translate\"\n icon=\"pi pi-check\"\n class=\"p-button-text\"\n (click)=\"addItem()\"\n [loading]=\"(dialogIsLoading$ | async) ?? false\"\n [disabled]=\"form.disabled\"></button>\n </ng-template>\n</p-dialog>\n" }]
@@ -6994,9 +7356,8 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
6994
7356
  this.actionExecutor = actionExecutor;
6995
7357
  this.itemsSubject = new ReplaySubject(1);
6996
7358
  this.items$ = this.itemsSubject.asObservable();
7359
+ this.actions = [];
6997
7360
  this.toolbarRightActions = [];
6998
- this.rowClickActions = [];
6999
- this.rowInlineActions = [];
7000
7361
  this.subscriptions = [];
7001
7362
  this.isDisabledSubject = new BehaviorSubject(false);
7002
7363
  this.isEnabled$ = this.isDisabledSubject.asObservable().pipe(distinctUntilChanged(), map(e => !e));
@@ -7014,7 +7375,7 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
7014
7375
  .withDialogClassName('mng-field-dialog mng-action-editor-dialog')
7015
7376
  .withDialogSize(DialogSizeEnum.Small);
7016
7377
  viewAction.withEditorActions([new ActionEditorSubmitDescriptor(viewAction, ActionEditorSubmitDescriptor.TypeEnum.Cancel)]);
7017
- this.rowClickActions.push(viewAction);
7378
+ this.actions.push(viewAction);
7018
7379
  }
7019
7380
  if (hasAddAction) {
7020
7381
  const addAction = new ActionEditorDescriptor(this.descriptor.tableviewDescriptor.addEditor, 'add', this.descriptor.editor.model.type, this.descriptor.property)
@@ -7036,10 +7397,11 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
7036
7397
  })
7037
7398
  .withIsVisibleFunction(() => of(!this.options?.formState.disabled))
7038
7399
  .withIsEnabledFunction(() => this.isEnabled$);
7039
- this.toolbarRightActions.push(addAction);
7400
+ this.actions.push(addAction);
7040
7401
  }
7041
7402
  if (hasEditAction) {
7042
7403
  const editAction = new ActionEditorDescriptor(this.descriptor.tableviewDescriptor.editEditor, 'edit', this.descriptor.editor.model.type, this.descriptor.property)
7404
+ .withPosition(ActionPositionEnum.RowInline)
7043
7405
  .withTitle(null)
7044
7406
  .withIcon('pi pi-pencil')
7045
7407
  .withDialogClassName('mng-field-dialog mng-action-editor-dialog')
@@ -7057,48 +7419,47 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
7057
7419
  })
7058
7420
  .withIsVisibleFunction(() => of(!this.formControl?.disabled))
7059
7421
  .withIsEnabledFunction(() => this.isEnabled$);
7060
- this.rowInlineActions.push(editAction);
7422
+ this.actions.push(editAction);
7061
7423
  }
7062
7424
  if (hasDeleteAction) {
7063
7425
  const deleteAction = new ActionDescriptor(this.descriptor.tableviewDescriptor.model, 'delete', this.descriptor.editor.model.type, this.descriptor.property)
7426
+ .withPosition(ActionPositionEnum.RowInline)
7064
7427
  .withLevel(ActionLevelEnum.Danger)
7065
7428
  .withTitle(null)
7066
7429
  .withIcon('pi pi-trash')
7067
7430
  .withSize(SizeEnum.ExtraSmall)
7068
7431
  .withRunFunction(ctx => {
7069
7432
  if (!ctx.data?.item) {
7070
- throw new Error(`No item was provided in context, delete cannot be done.`);
7433
+ return throwError(() => new Error(`No item was provided in context, delete cannot be done.`));
7071
7434
  }
7072
7435
  let formControlValue = this.formControl.value;
7073
7436
  const compareProperty = this.descriptor.tableDescriptor.dataKeyProperty
7074
7437
  ? this.descriptor.tableDescriptor.dataKeyProperty
7075
7438
  : this.descriptor.tableDescriptor.model.idPropertyName;
7076
- if (!compareProperty) {
7077
- throw new Error('Cannot compare items, please provide main table data key property or model id property.');
7078
- }
7079
7439
  const ctxItem = ctx.data.item;
7080
- if (!ctxItem?.[compareProperty]) {
7081
- return formControlValue;
7440
+ if (compareProperty && ctxItem?.[compareProperty]) {
7441
+ formControlValue = formControlValue.filter((i) => i[compareProperty] !== ctxItem[compareProperty]);
7442
+ this.formControl.patchValue(formControlValue);
7082
7443
  }
7083
- formControlValue = formControlValue.filter((i) => i[compareProperty] !== ctxItem[compareProperty]);
7084
- this.formControl.patchValue(formControlValue);
7085
- return of(ctx.data.item);
7444
+ else if (typeof ctx.data.actionData?.['itemIndex'] === 'number') {
7445
+ formControlValue.splice(ctx.data.actionData['itemIndex'], 1);
7446
+ this.formControl.patchValue([...formControlValue]);
7447
+ }
7448
+ else {
7449
+ return throwError(() => new Error('Cannot compare items, please provide main table data key property or model id property.'));
7450
+ }
7451
+ return of(ctxItem);
7086
7452
  })
7087
7453
  .withIsVisibleFunction(() => of(!this.options?.formState.disabled))
7088
7454
  .withIsEnabledFunction(() => this.isEnabled$);
7089
- this.rowInlineActions.push(deleteAction);
7455
+ this.actions.push(deleteAction);
7090
7456
  }
7091
- for (const action of this.descriptor.actions) {
7457
+ this.actions.push(...this.descriptor.actions);
7458
+ for (const action of this.actions) {
7092
7459
  switch (action.position) {
7093
7460
  case ActionPositionEnum.ToolbarRight:
7094
7461
  this.toolbarRightActions.push(action);
7095
7462
  break;
7096
- case ActionPositionEnum.RowInline:
7097
- this.rowInlineActions.push(action);
7098
- break;
7099
- case ActionPositionEnum.RowClick:
7100
- // this.footerRightActions.push(action);
7101
- break;
7102
7463
  }
7103
7464
  }
7104
7465
  // init values
@@ -7123,20 +7484,12 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
7123
7484
  ngOnDestroy() {
7124
7485
  this.subscriptions.forEach(s => s.unsubscribe());
7125
7486
  }
7126
- onTableCellClick(event) {
7127
- console.log(event);
7128
- if (this.rowClickActions.length) {
7129
- for (const action of this.rowClickActions) {
7130
- this.actionExecutor.triggerRowClickAction(action, event);
7131
- }
7132
- }
7133
- }
7134
7487
  }
7135
7488
  MngFormlyFieldTableDialogFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngFormlyFieldTableDialogFormComponent, deps: [{ token: MngActionExecutorService }], target: i0.ɵɵFactoryTarget.Component });
7136
- MngFormlyFieldTableDialogFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: MngFormlyFieldTableDialogFormComponent, selector: "mng-formly-table-dialog-form-field", usesInheritance: true, ngImport: i0, template: "<mng-table [descriptor]=\"descriptor.tableDescriptor\" [items]=\"items$\" (cellClick)=\"onTableCellClick($event)\" [isColumnClickable]=\"rowInlineActions.length > 0\">\n <ng-template mngTemplate=\"caption\">\n <div class=\"flex flex-column md:flex-row md:justify-content-end align-items-center table-header\">\n <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\"></mng-action>\n </div>\n </ng-template>\n <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\" let-idx=\"rowIndex\">\n <mng-action\n *ngFor=\"let action of rowInlineActions\"\n [action]=\"action\"\n [item]=\"item\"\n [itemId]=\"descriptor.tableviewDescriptor.model.idPropertyName ? item[descriptor.tableviewDescriptor.model.idPropertyName] : undefined\"\n [actionData]=\"{itemIndex: idx}\">\n </mng-action>\n </ng-template>\n</mng-table>\n", styles: [".submit-button{display:none!important;visibility:hidden}\n"], components: [{ type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "isColumnClickable", "viewContainer", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "dataProvider", "disabled", "loading", "viewContainer"], outputs: ["trigger"] }], directives: [{ type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
7489
+ MngFormlyFieldTableDialogFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: MngFormlyFieldTableDialogFormComponent, selector: "mng-formly-table-dialog-form-field", usesInheritance: true, ngImport: i0, template: "<mng-table [descriptor]=\"descriptor.tableDescriptor\" [items]=\"items$\" [actions]=\"actions\">\n <ng-template mngTemplate=\"caption\">\n <div class=\"flex flex-column md:flex-row md:justify-content-end align-items-center table-header\">\n <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\"></mng-action>\n </div>\n </ng-template>\n</mng-table>\n", styles: [".submit-button{display:none!important;visibility:hidden}\n"], components: [{ type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "actions", "isColumnClickable", "viewContainer", "captionComponent", "columnActionComponent", "columnActionMinWidth"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "dataProvider", "disabled", "loading", "viewContainer"], outputs: ["trigger"] }], directives: [{ type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
7137
7490
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngFormlyFieldTableDialogFormComponent, decorators: [{
7138
7491
  type: Component,
7139
- args: [{ selector: 'mng-formly-table-dialog-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-table [descriptor]=\"descriptor.tableDescriptor\" [items]=\"items$\" (cellClick)=\"onTableCellClick($event)\" [isColumnClickable]=\"rowInlineActions.length > 0\">\n <ng-template mngTemplate=\"caption\">\n <div class=\"flex flex-column md:flex-row md:justify-content-end align-items-center table-header\">\n <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\"></mng-action>\n </div>\n </ng-template>\n <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\" let-idx=\"rowIndex\">\n <mng-action\n *ngFor=\"let action of rowInlineActions\"\n [action]=\"action\"\n [item]=\"item\"\n [itemId]=\"descriptor.tableviewDescriptor.model.idPropertyName ? item[descriptor.tableviewDescriptor.model.idPropertyName] : undefined\"\n [actionData]=\"{itemIndex: idx}\">\n </mng-action>\n </ng-template>\n</mng-table>\n", styles: [".submit-button{display:none!important;visibility:hidden}\n"] }]
7492
+ args: [{ selector: 'mng-formly-table-dialog-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-table [descriptor]=\"descriptor.tableDescriptor\" [items]=\"items$\" [actions]=\"actions\">\n <ng-template mngTemplate=\"caption\">\n <div class=\"flex flex-column md:flex-row md:justify-content-end align-items-center table-header\">\n <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\"></mng-action>\n </div>\n </ng-template>\n</mng-table>\n", styles: [".submit-button{display:none!important;visibility:hidden}\n"] }]
7140
7493
  }], ctorParameters: function () { return [{ type: MngActionExecutorService }]; } });
7141
7494
 
7142
7495
  class MngFormlyFieldTableDialogMultiselectComponent extends FieldType {
@@ -7244,7 +7597,7 @@ class MngFormlyFieldTableDialogMultiselectComponent extends FieldType {
7244
7597
  }
7245
7598
  }
7246
7599
  MngFormlyFieldTableDialogMultiselectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngFormlyFieldTableDialogMultiselectComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
7247
- MngFormlyFieldTableDialogMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: MngFormlyFieldTableDialogMultiselectComponent, selector: "mng-formly-table-multiselect-add-field", usesInheritance: true, ngImport: i0, template: "<mng-table [descriptor]=\"descriptor.mainTableDescriptor\" [items]=\"itemsAsync\">\n <ng-template mngTemplate=\"caption\">\n <div class=\"flex flex-column md:flex-row md:justify-content-end align-items-center table-header pt-0\">\n <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n <button\n *ngIf=\"hasAddAction && !options?.formState?.disabled\"\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-plus\"\n class=\"p-button-rounded p-button-success mng-button-xs\"\n (click)=\"openAddDialog()\"\n [disabled]=\"formControl!.disabled\"></button>\n </div>\n </ng-template>\n <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n <button\n *ngIf=\"hasDeleteAction && !options?.formState?.disabled\"\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-trash\"\n class=\"p-button-rounded p-button-danger mng-button-xs\"\n (click)=\"removeItem(item)\"\n [disabled]=\"formControl!.disabled\"></button>\n </ng-template>\n</mng-table>\n\n<p-dialog\n *ngIf=\"hasAddAction\"\n [(visible)]=\"isDialogVisible\"\n [draggable]=\"false\"\n [header]=\"'general.addItem' | translate: {item: to?.label!}\"\n [modal]=\"true\"\n appendTo=\"body\"\n styleClass=\"p-fluid mng-field-dialog mng-action-editor-dialog mng-action-editor-dialog-sm\">\n <ng-template pTemplate=\"content\">\n <mng-table\n [descriptor]=\"descriptor.mainTableDescriptor\"\n [queryResult]=\"addItemsAsync\"\n [selectionEnabled]=\"true\"\n [loading]=\"dialogIsLoading$\"\n (selectionChange)=\"onSelectionChange($event)\">\n </mng-table>\n <p-messages [value]=\"dialogMessages\"></p-messages>\n </ng-template>\n\n <ng-template pTemplate=\"footer\">\n <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n <button\n pButton\n pRipple\n type=\"button\"\n [label]=\"'general.add' | translate\"\n icon=\"pi pi-check\"\n class=\"p-button-text\"\n (click)=\"addItems()\"\n [loading]=\"(dialogIsLoading$ | async) ?? false\"\n [disabled]=\"form.disabled\"></button>\n </ng-template>\n</p-dialog>\n", components: [{ type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "isColumnClickable", "viewContainer", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { type: i1$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { type: i3$2.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }], directives: [{ type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i8.Ripple, selector: "[pRipple]" }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i1$1.TranslatePipe, "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
7600
+ MngFormlyFieldTableDialogMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: MngFormlyFieldTableDialogMultiselectComponent, selector: "mng-formly-table-multiselect-add-field", usesInheritance: true, ngImport: i0, template: "<mng-table [descriptor]=\"descriptor.mainTableDescriptor\" [items]=\"itemsAsync\">\n <ng-template mngTemplate=\"caption\">\n <div class=\"flex flex-column md:flex-row md:justify-content-end align-items-center table-header pt-0\">\n <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n <button\n *ngIf=\"hasAddAction && !options?.formState?.disabled\"\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-plus\"\n class=\"p-button-rounded p-button-success mng-button-xs\"\n (click)=\"openAddDialog()\"\n [disabled]=\"formControl!.disabled\"></button>\n </div>\n </ng-template>\n <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n <button\n *ngIf=\"hasDeleteAction && !options?.formState?.disabled\"\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-trash\"\n class=\"p-button-rounded p-button-danger mng-button-xs\"\n (click)=\"removeItem(item)\"\n [disabled]=\"formControl!.disabled\"></button>\n </ng-template>\n</mng-table>\n\n<p-dialog\n *ngIf=\"hasAddAction\"\n [(visible)]=\"isDialogVisible\"\n [draggable]=\"false\"\n [header]=\"'general.addItem' | translate: {item: to?.label!}\"\n [modal]=\"true\"\n appendTo=\"body\"\n styleClass=\"p-fluid mng-field-dialog mng-action-editor-dialog mng-action-editor-dialog-sm\">\n <ng-template pTemplate=\"content\">\n <mng-table\n [descriptor]=\"descriptor.mainTableDescriptor\"\n [queryResult]=\"addItemsAsync\"\n [selectionEnabled]=\"true\"\n [loading]=\"dialogIsLoading$\"\n (selectionChange)=\"onSelectionChange($event)\">\n </mng-table>\n <p-messages [value]=\"dialogMessages\"></p-messages>\n </ng-template>\n\n <ng-template pTemplate=\"footer\">\n <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n <button\n pButton\n pRipple\n type=\"button\"\n [label]=\"'general.add' | translate\"\n icon=\"pi pi-check\"\n class=\"p-button-text\"\n (click)=\"addItems()\"\n [loading]=\"(dialogIsLoading$ | async) ?? false\"\n [disabled]=\"form.disabled\"></button>\n </ng-template>\n</p-dialog>\n", components: [{ type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "actions", "isColumnClickable", "viewContainer", "captionComponent", "columnActionComponent", "columnActionMinWidth"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { type: i1$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { type: i3$2.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }], directives: [{ type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i8.Ripple, selector: "[pRipple]" }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i1$1.TranslatePipe, "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
7248
7601
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngFormlyFieldTableDialogMultiselectComponent, decorators: [{
7249
7602
  type: Component,
7250
7603
  args: [{ selector: 'mng-formly-table-multiselect-add-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-table [descriptor]=\"descriptor.mainTableDescriptor\" [items]=\"itemsAsync\">\n <ng-template mngTemplate=\"caption\">\n <div class=\"flex flex-column md:flex-row md:justify-content-end align-items-center table-header pt-0\">\n <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n <button\n *ngIf=\"hasAddAction && !options?.formState?.disabled\"\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-plus\"\n class=\"p-button-rounded p-button-success mng-button-xs\"\n (click)=\"openAddDialog()\"\n [disabled]=\"formControl!.disabled\"></button>\n </div>\n </ng-template>\n <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n <button\n *ngIf=\"hasDeleteAction && !options?.formState?.disabled\"\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-trash\"\n class=\"p-button-rounded p-button-danger mng-button-xs\"\n (click)=\"removeItem(item)\"\n [disabled]=\"formControl!.disabled\"></button>\n </ng-template>\n</mng-table>\n\n<p-dialog\n *ngIf=\"hasAddAction\"\n [(visible)]=\"isDialogVisible\"\n [draggable]=\"false\"\n [header]=\"'general.addItem' | translate: {item: to?.label!}\"\n [modal]=\"true\"\n appendTo=\"body\"\n styleClass=\"p-fluid mng-field-dialog mng-action-editor-dialog mng-action-editor-dialog-sm\">\n <ng-template pTemplate=\"content\">\n <mng-table\n [descriptor]=\"descriptor.mainTableDescriptor\"\n [queryResult]=\"addItemsAsync\"\n [selectionEnabled]=\"true\"\n [loading]=\"dialogIsLoading$\"\n (selectionChange)=\"onSelectionChange($event)\">\n </mng-table>\n <p-messages [value]=\"dialogMessages\"></p-messages>\n </ng-template>\n\n <ng-template pTemplate=\"footer\">\n <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n <button\n pButton\n pRipple\n type=\"button\"\n [label]=\"'general.add' | translate\"\n icon=\"pi pi-check\"\n class=\"p-button-text\"\n (click)=\"addItems()\"\n [loading]=\"(dialogIsLoading$ | async) ?? false\"\n [disabled]=\"form.disabled\"></button>\n </ng-template>\n</p-dialog>\n" }]
@@ -8031,8 +8384,8 @@ function getEmailValidationMessage(translate) {
8031
8384
  const getFormlyValidationMessages = (translate) => {
8032
8385
  return [
8033
8386
  { name: 'required', message: getRequiredValidationMessage(translate) },
8034
- { name: 'minlength', message: getMinLengthValidationMessage(translate) },
8035
- { name: 'maxlength', message: getMaxLengthValidationMessage(translate) },
8387
+ { name: 'minLength', message: getMinLengthValidationMessage(translate) },
8388
+ { name: 'maxLength', message: getMaxLengthValidationMessage(translate) },
8036
8389
  { name: 'pattern', message: getTextPatternValidationMessage(translate) },
8037
8390
  { name: 'email', message: getEmailValidationMessage(translate) }
8038
8391
  ];
@@ -8559,7 +8912,7 @@ class AMngCrudApiService extends AMngGetAllApiService {
8559
8912
  body: item ? this.serialize(item) : undefined,
8560
8913
  params: params
8561
8914
  })
8562
- .pipe(map(res => this.deserialize(res)));
8915
+ .pipe(map(res => (res ? this.deserialize(res) : null)));
8563
8916
  }
8564
8917
  getCreatePostPath(item) {
8565
8918
  return '';
@@ -9037,5 +9390,5 @@ class RouteDataBuilder {
9037
9390
  * Generated bundle index. Do not edit.
9038
9391
  */
9039
9392
 
9040
- export { ACTION_EDITOR_DIALOG_COMPONENT_SETTING, AFieldDescriptor, AFieldGroupDescriptor, AGenericFieldDescriptor, AMngApiService, AMngBaseApiService, AMngCrudApiService, AMngGetAllApiService, AMngTableviewRouteComponent, ActionActivationResult, ActionActivationTriggerEnum, ActionDeleteDescriptor, ActionDescriptor, ActionEditorAddDescriptor, ActionEditorDescriptor, ActionEditorDetailsDescriptor, ActionEditorEditDescriptor, ActionEditorSubmitDescriptor, ActionError, ActionExecContext, ActionLevelEnum, ActionLinkDescriptor, ActionPositionEnum, ActionRunResult, ActionSimpleDescriptor, ActionTriggerResult, ActionTypeEnum, ColumnDescriptor, DataProvider, DefaultMngErrorMapperService, EditorDataProvider, EditorDescriptor, EditorFormlyUtil, EnumName, EnumUtil, FieldDescriptor, FieldGroupDescriptor, FieldInputDescriptor, FieldLookupDescriptor, FieldLookupEnumDescriptor, FieldManyEditorDescriptor, FieldManyToManyEditorDescriptor, FieldTabGroupDescriptor, FieldValidationDescriptor, FilterDescriptor, FilterLookupDescriptor, FilterLookupEnumDescriptor, I18nUtils, JsonPathPipe, LookupDataProvider, MNG_AUTOCOMPLETE_VALUE_ACCESSOR, MNG_BROWSER_STORAGE_IT, MNG_COMMONS_INITIALIZER_IT, MNG_DROPDOWN_VALUE_ACCESSOR, MNG_MODULE_CONFIG_IT, MediusFilterMatchType, MediusFilterParam, MediusQueryMode, MediusQueryParam, MediusQueryParamBuilder, MediusQueryResult, MediusRestUtil, MngActionComponent, MngActionEditorComponent, MngActionExecutorService, MngActionRouteComponent, MngAutocompleteComponent, MngBooleanPipe, MngBreadcrumbComponent, MngCommonsModule, MngCommonsService, MngComponentDirective, MngConfigurationService, MngDropdownComponent, MngEnumPipe, MngErrorMapperService, MngFooterComponent, MngFormEditorComponent, MngFormEditorSubmitEvent, MngFormFieldEvent, MngFormFieldEventComponentSubtype, MngFormFieldEventDialogSubtype, MngFormFieldEventTypeEnum, MngFormlyFieldAutocompleteComponent, MngFormlyFieldDropdownComponent, MngFormlyFieldFieldsetComponent, MngFormlyFieldInputComponent, MngFormlyFieldLabelComponent, MngFormlyFieldLookupDialogComponent, MngFormlyFieldTableDialogFormComponent, MngFormlyFieldTableDialogMultiselectComponent, MngFormlyFieldTabsComponent, MngFormlyFieldWrapperComponent, MngFormlyTableWrapperComponent, MngI18nPropertyPipe, MngLinkFormatterPipe, MngMainLayoutComponent, MngMainLayoutComponentService, MngMenuComponent, MngMenuItemComponent, MngNavigationService, MngTableCellClickEvent, MngTableColumnFilterComponent, MngTableColumnValueComponent, MngTableComponent, MngTableLoadEvent, MngTableReloadEvent, MngTableviewComponent, MngTableviewRouteComponent, MngTemplateDirective, MngTopbarComponent, MngViewContainerComponentService, ModelDescriptor, ModelUtil, NotificationUtil, ObjectSerializer, RouteBuilder, RouteDataBuilder, RoutesBuilder, TableDataProvider, TableDescriptor, TableviewDataProvider, TableviewDescriptor, TypeName, TypeUtil, enumNameDecoratorPropertyName, enumsMapBase, formlyTypesConfig, formlyWrappersConfig, getEmailValidationMessage, getFormlyValidationMessages, getMaxLengthValidationMessage, getMinLengthValidationMessage, getRequiredValidationMessage, getTextPatternValidationMessage, mngConfigJsonAppInitializerProvider, mngConfigurationServiceProvider, mngFormlyConfigProvider, primeNgModules, typeMapBase, typeNameDecoratorPropertyName };
9393
+ export { ACTION_EDITOR_DIALOG_COMPONENT_SETTING, AFieldDescriptor, AFieldGroupDescriptor, AGenericFieldDescriptor, AMngApiService, AMngBaseApiService, AMngCrudApiService, AMngGetAllApiService, AMngTableviewRouteComponent, ActionActivationResult, ActionActivationTriggerEnum, ActionDataProviderUtil, ActionDeleteDescriptor, ActionDescriptor, ActionEditorAddDescriptor, ActionEditorDescriptor, ActionEditorDetailsDescriptor, ActionEditorEditDescriptor, ActionEditorSubmitDescriptor, ActionError, ActionExecContext, ActionLevelEnum, ActionLinkDescriptor, ActionPositionEnum, ActionRunResult, ActionSimpleDescriptor, ActionTriggerResult, ActionTypeEnum, ColumnDescriptor, DataProvider, DefaultMngErrorMapperService, EditorDataProvider, EditorDescriptor, EditorFormlyUtil, EnumName, EnumUtil, FieldDescriptor, FieldGroupDescriptor, FieldInputDescriptor, FieldLookupDescriptor, FieldLookupEnumDescriptor, FieldManyEditorDescriptor, FieldManyToManyEditorDescriptor, FieldTabGroupDescriptor, FieldValidationDescriptor, FilterDescriptor, FilterLookupDescriptor, FilterLookupEnumDescriptor, I18nUtils, JsonPathPipe, LookupDataProvider, MNG_AUTOCOMPLETE_VALUE_ACCESSOR, MNG_BROWSER_STORAGE_IT, MNG_COMMONS_INITIALIZER_IT, MNG_DROPDOWN_VALUE_ACCESSOR, MNG_MODULE_CONFIG_IT, MediusFilterMatchType, MediusFilterParam, MediusQueryMode, MediusQueryParam, MediusQueryParamBuilder, MediusQueryResult, MediusRestUtil, MngActionComponent, MngActionEditorComponent, MngActionExecutorService, MngActionRouteComponent, MngAutocompleteComponent, MngBooleanPipe, MngBreadcrumbComponent, MngCommonsModule, MngCommonsService, MngComponentDirective, MngConfigurationService, MngDropdownComponent, MngEnumPipe, MngErrorMapperService, MngFooterComponent, MngFormEditorComponent, MngFormEditorSubmitEvent, MngFormFieldEvent, MngFormFieldEventComponentSubtype, MngFormFieldEventDialogSubtype, MngFormFieldEventTypeEnum, MngFormlyFieldAutocompleteComponent, MngFormlyFieldDropdownComponent, MngFormlyFieldFieldsetComponent, MngFormlyFieldInputComponent, MngFormlyFieldLabelComponent, MngFormlyFieldLookupDialogComponent, MngFormlyFieldTableDialogFormComponent, MngFormlyFieldTableDialogMultiselectComponent, MngFormlyFieldTabsComponent, MngFormlyFieldWrapperComponent, MngFormlyTableWrapperComponent, MngI18nPropertyPipe, MngLinkFormatterPipe, MngMainLayoutComponent, MngMainLayoutComponentService, MngMenuComponent, MngMenuItemComponent, MngNavigationService, MngTableCellClickEvent, MngTableColumnFilterComponent, MngTableColumnValueComponent, MngTableComponent, MngTableLoadEvent, MngTableReloadEvent, MngTableviewComponent, MngTableviewRouteComponent, MngTemplateDirective, MngTopbarComponent, MngViewContainerComponentService, ModelDescriptor, ModelUtil, NotificationUtil, ObjectSerializer, RouteBuilder, RouteDataBuilder, RoutesBuilder, TableDataProvider, TableDescriptor, TableviewDataProvider, TableviewDescriptor, TypeName, TypeUtil, enumNameDecoratorPropertyName, enumsMapBase, formlyTypesConfig, formlyWrappersConfig, getEmailValidationMessage, getFormlyValidationMessages, getMaxLengthValidationMessage, getMinLengthValidationMessage, getRequiredValidationMessage, getTextPatternValidationMessage, mngConfigJsonAppInitializerProvider, mngConfigurationServiceProvider, mngFormlyConfigProvider, primeNgModules, typeMapBase, typeNameDecoratorPropertyName };
9041
9394
  //# sourceMappingURL=mediusinc-mng-commons.mjs.map