@mediusinc/mng-commons 0.6.0 → 0.7.1

package/fesm2015/mediusinc-mng-commons.mjs

@@ -12,7 +12,7 @@ import { FieldType, FieldWrapper, FORMLY_CONFIG, FormlyModule } from '@ngx-forml
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import * as i2 from 'primeng/api';
-import { ConfirmationService, MessageService, FilterMatchMode } from 'primeng/api';
+import { FilterMatchMode, ConfirmationService, MessageService } from 'primeng/api';
 import * as i2$1 from 'primeng/autocomplete';
 import { AutoComplete, AutoCompleteModule } from 'primeng/autocomplete';
 import * as i2$4 from 'primeng/breadcrumb';
@@ -58,7 +58,7 @@ import { RadioButtonModule } from 'primeng/radiobutton';
 import * as i8 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
 import { SelectButtonModule } from 'primeng/selectbutton';
-import * as i7$1 from 'primeng/skeleton';
+import * as i8$1 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import * as i4$5 from 'primeng/table';
 import { Table, TableModule } from 'primeng/table';
@@ -72,12 +72,135 @@ import * as i4$3 from 'primeng/toolbar';
 import { ToolbarModule } from 'primeng/toolbar';
 import * as i9 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import { throwError, of, Subject, Observable, from, combineLatest, tap, BehaviorSubject, ReplaySubject, distinctUntilChanged, switchMap, mergeMap as mergeMap$1 } from 'rxjs';
+import { isObservable, throwError, of, Subject, Observable, from, combineLatest, tap, BehaviorSubject, ReplaySubject, distinctUntilChanged, switchMap, mergeMap as mergeMap$1 } from 'rxjs';
 import 'reflect-metadata';
 import { map, mergeMap, first, catchError, filter, finalize, startWith } from 'rxjs/operators';
 import * as i4$1 from '@angular/platform-browser';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 
+class ActionDataProviderUtil {
+    static runFetchOrFail(ctx) {
+        const dataProviderExec = ActionDataProviderUtil.runFetchDataProvider(ctx);
+        if (isObservable(dataProviderExec)) {
+            return dataProviderExec;
+        }
+        const serviceExec = ActionDataProviderUtil.runGetByIdService(ctx);
+        return isObservable(serviceExec)
+            ? serviceExec
+            : throwError(() => { var _a, _b; return new Error(`Data provider and service instance could not extract fetch function to execute in action ${ctx.action.actionName} (${(_a = ctx.action.model) === null || _a === void 0 ? void 0 : _a.typeName}) for item id ${(_b = ctx.data) === null || _b === void 0 ? void 0 : _b.itemId}.`); });
+    }
+    static runCreateOrFail(ctx) {
+        const dataProviderExec = ActionDataProviderUtil.runCreateDataProvider(ctx);
+        if (isObservable(dataProviderExec)) {
+            return dataProviderExec;
+        }
+        const serviceExec = ActionDataProviderUtil.runCreateService(ctx);
+        return isObservable(serviceExec)
+            ? serviceExec
+            : throwError(() => { var _a, _b; return new Error(`Data provider and service instance could not extract create function to execute in action ${ctx.action.actionName} (${(_a = ctx.action.model) === null || _a === void 0 ? void 0 : _a.typeName}) for item ${(_b = ctx.data) === null || _b === void 0 ? void 0 : _b.item}.`); });
+    }
+    static runUpdateOrFail(ctx) {
+        const dataProviderExec = ActionDataProviderUtil.runUpdateDataProvider(ctx);
+        if (isObservable(dataProviderExec)) {
+            return dataProviderExec;
+        }
+        const serviceExec = ActionDataProviderUtil.runUpdateService(ctx);
+        return isObservable(serviceExec)
+            ? serviceExec
+            : throwError(() => { var _a, _b; return new Error(`Data provider and service instance could not extract update function to execute in action ${ctx.action.actionName} (${(_a = ctx.action.model) === null || _a === void 0 ? void 0 : _a.typeName}) for item id ${(_b = ctx.data) === null || _b === void 0 ? void 0 : _b.itemId}.`); });
+    }
+    static runDeleteOrFail(ctx) {
+        const dataProviderExec = ActionDataProviderUtil.runDeleteDataProvider(ctx);
+        if (isObservable(dataProviderExec)) {
+            return dataProviderExec;
+        }
+        const serviceExec = ActionDataProviderUtil.runDeleteService(ctx);
+        return isObservable(serviceExec)
+            ? serviceExec
+            : throwError(() => { var _a, _b; return new Error(`Data provider and service instance could not extract delete function to execute in action ${ctx.action.actionName} (${(_a = ctx.action.model) === null || _a === void 0 ? void 0 : _a.typeName}) for item id ${(_b = ctx.data) === null || _b === void 0 ? void 0 : _b.itemId}.`); });
+    }
+    static runGetByIdService(ctx) {
+        var _a;
+        if (typeof ctx.serviceInstance !== 'undefined') {
+            const crudServiceInstance = ctx.serviceInstance;
+            if (typeof crudServiceInstance.getByIdGet === 'function') {
+                return ((_a = ctx.data) === null || _a === void 0 ? void 0 : _a.itemId) ? crudServiceInstance.getByIdGet(ctx.data.itemId) : null;
+            }
+        }
+        return null;
+    }
+    static runCreateService(ctx) {
+        var _a;
+        if (typeof ctx.serviceInstance !== 'undefined') {
+            const crudServiceInstance = ctx.serviceInstance;
+            if (typeof crudServiceInstance.createPost === 'function') {
+                return ((_a = ctx.data) === null || _a === void 0 ? void 0 : _a.item) ? crudServiceInstance.createPost(ctx.data.item) : null;
+            }
+        }
+        return null;
+    }
+    static runUpdateService(ctx) {
+        var _a;
+        if (typeof ctx.serviceInstance !== 'undefined') {
+            const crudServiceInstance = ctx.serviceInstance;
+            if (typeof crudServiceInstance.updatePut === 'function') {
+                return ((_a = ctx.data) === null || _a === void 0 ? void 0 : _a.itemId) && ctx.data.item ? crudServiceInstance.updatePut(ctx.data.itemId, ctx.data.item) : null;
+            }
+        }
+        return null;
+    }
+    static runDeleteService(ctx) {
+        var _a;
+        if (typeof ctx.serviceInstance !== 'undefined') {
+            const crudServiceInstance = ctx.serviceInstance;
+            if (typeof crudServiceInstance.removeDelete === 'function') {
+                return ((_a = ctx.data) === null || _a === void 0 ? void 0 : _a.itemId) ? crudServiceInstance.removeDelete(ctx.data.itemId, ctx.data.item) : null;
+            }
+        }
+        return null;
+    }
+    static runFetchDataProvider(ctx) {
+        var _a;
+        if (typeof ctx.dataProvider !== 'undefined') {
+            const editorDataProvider = ctx.dataProvider;
+            if (typeof editorDataProvider.fetch === 'function') {
+                return ((_a = ctx.data) === null || _a === void 0 ? void 0 : _a.itemId) ? editorDataProvider.fetch(ctx.data.itemId, ctx.serviceInstance) : null;
+            }
+        }
+        return null;
+    }
+    static runCreateDataProvider(ctx) {
+        var _a;
+        if (typeof ctx.dataProvider !== 'undefined') {
+            const editorDataProvider = ctx.dataProvider;
+            if (typeof editorDataProvider.create === 'function') {
+                return ((_a = ctx.data) === null || _a === void 0 ? void 0 : _a.item) ? editorDataProvider.create(ctx.data.item, ctx.serviceInstance) : null;
+            }
+        }
+        return null;
+    }
+    static runUpdateDataProvider(ctx) {
+        var _a;
+        if (typeof ctx.dataProvider !== 'undefined') {
+            const editorDataProvider = ctx.dataProvider;
+            if (typeof editorDataProvider.update === 'function') {
+                return ((_a = ctx.data) === null || _a === void 0 ? void 0 : _a.itemId) ? editorDataProvider.update(ctx.data.itemId, ctx.data.item, ctx.serviceInstance) : null;
+            }
+        }
+        return null;
+    }
+    static runDeleteDataProvider(ctx) {
+        var _a;
+        if (typeof ctx.dataProvider !== 'undefined') {
+            const editorDataProvider = ctx.dataProvider;
+            if (typeof editorDataProvider.delete === 'function') {
+                return ((_a = ctx.data) === null || _a === void 0 ? void 0 : _a.itemId) ? editorDataProvider.delete(ctx.data.itemId, ctx.data.item, ctx.serviceInstance) : null;
+            }
+        }
+        return null;
+    }
+}
+
 class DataProvider {
     constructor(modelType, serviceType) {
         this._modelType = modelType;
@@ -317,6 +440,13 @@ class MediusQueryParamBuilder {
         queryParam.queryMode = MediusQueryMode.All;
         return new MediusQueryParamBuilder(queryParam);
     }
+    static createFromExisting(queryParam, itemsPerPage, itemsOffset) {
+        var _a, _b, _c;
+        queryParam.itemsPerPage = (_a = itemsPerPage !== null && itemsPerPage !== void 0 ? itemsPerPage : queryParam.itemsPerPage) !== null && _a !== void 0 ? _a : 50;
+        queryParam.itemsOffset = (_b = itemsOffset !== null && itemsOffset !== void 0 ? itemsOffset : queryParam.itemsOffset) !== null && _b !== void 0 ? _b : 0;
+        queryParam.queryMode = (_c = queryParam.queryMode) !== null && _c !== void 0 ? _c : MediusQueryMode.All;
+        return new MediusQueryParamBuilder(queryParam);
+    }
     withItemsPerPage(itemsPerPage) {
         this.queryParam.itemsPerPage = itemsPerPage;
         return this;
@@ -644,11 +774,13 @@ class ActionDescriptor {
         this._hasRunNotificationSuccess = hasNotification;
         this._runNotificationSuccessTitle = title;
         this._runNotificationSuccessMessage = message;
+        return this;
     }
     withRunNotificationError(title, message, hasNotification = true) {
         this._hasRunNotificationError = hasNotification;
         this._runNotificationErrorTitle = title;
         this._runNotificationErrorMessage = message;
+        return this;
     }
 }
 (function (ActionDescriptor) {
@@ -837,7 +969,7 @@ class ActionEditorAddDescriptor extends ActionEditorDescriptor {
         super(editorDescriptor, ActionEditorAddDescriptor.ACTION_NAME);
         this.withPosition(ActionPositionEnum.ToolbarLeft);
         this.withRouteTrigger('add');
-        this.withSubmitFunction(ctx => { var _a, _b; return ((_a = ctx.dataProvider) === null || _a === void 0 ? void 0 : _a.create) ? ctx.dataProvider.create((_b = ctx.data) === null || _b === void 0 ? void 0 : _b.item, ctx.serviceInstance) : throwError(new Error(`Data provider create function is missing.`)); });
+        this.withSubmitFunction(ActionDataProviderUtil.runCreateOrFail);
         this.withLevel(ActionLevelEnum.Success);
         this.withIcon('pi pi-plus');
     }
@@ -863,18 +995,8 @@ class ActionEditorEditDescriptor extends ActionEditorDescriptor {
         this.withPosition(ActionPositionEnum.RowInline);
         this.withTitle(null);
         this.withRouteTrigger(':itemId/edit');
-        this.withFetchFunction(ctx => {
-            var _a, _b, _c;
-            return ((_a = ctx.dataProvider) === null || _a === void 0 ? void 0 : _a.fetch) && ((_b = ctx.data) === null || _b === void 0 ? void 0 : _b.itemId)
-                ? ctx.dataProvider.fetch(ctx.data.itemId, ctx.serviceInstance)
-                : throwError(new Error(`Data provider fetch function or item id ${(_c = ctx.data) === null || _c === void 0 ? void 0 : _c.itemId} is missing.`));
-        });
-        this.withSubmitFunction(ctx => {
-            var _a, _b, _c, _d;
-            return ((_a = ctx.dataProvider) === null || _a === void 0 ? void 0 : _a.update) && ((_b = ctx.data) === null || _b === void 0 ? void 0 : _b.itemId)
-                ? ctx.dataProvider.update(ctx.data.itemId, (_c = ctx.data) === null || _c === void 0 ? void 0 : _c.item, ctx.serviceInstance)
-                : throwError(new Error(`Data provider update function or item id ${(_d = ctx.data) === null || _d === void 0 ? void 0 : _d.itemId} is missing.`));
-        });
+        this.withFetchFunction(ActionDataProviderUtil.runFetchOrFail);
+        this.withSubmitFunction(ActionDataProviderUtil.runUpdateOrFail);
         this.withIcon('pi pi-pencil');
     }
     withServiceType(serviceType) {
@@ -898,13 +1020,7 @@ class ActionDeleteDescriptor extends ActionDescriptor {
         super(model, ActionDeleteDescriptor.ACTION_NAME);
         this.withPosition(ActionPositionEnum.RowInline);
         this.withTitle(null);
-        this.withRunFunction(ctx => {
-            var _a, _b;
-            const editorDataProvider = ctx.dataProvider;
-            return (editorDataProvider === null || editorDataProvider === void 0 ? void 0 : editorDataProvider.delete) && ((_a = ctx.data) === null || _a === void 0 ? void 0 : _a.itemId)
-                ? editorDataProvider.delete(ctx.data.itemId, ctx.data.item, ctx.serviceInstance)
-                : throwError(new Error(`Data provider delete function or item id ${(_b = ctx.data) === null || _b === void 0 ? void 0 : _b.itemId} is missing.`));
-        });
+        this.withRunFunction(ActionDataProviderUtil.runDeleteOrFail);
         this.withLevel(ActionLevelEnum.Danger);
         this.withIcon('pi pi-trash');
         this.withRunConfirmation(undefined);
@@ -1015,7 +1131,12 @@ class FilterDescriptor {
     constructor(property) {
         this._filterType = FilterDescriptor.TypeEnum.String;
         this._matchModes = null;
+        this._numberUseGrouping = true;
+        this._datePickerShowTime = false;
         this._className = '';
+        this._columnClassName = '';
+        this._columnWidth = null;
+        this._columnMinWidth = null;
         this._property = property;
     }
     get filterType() {
@@ -1027,12 +1148,36 @@ class FilterDescriptor {
     get matchModes() {
         return this._matchModes;
     }
+    get numberMinFractionDigits() {
+        return this._numberMinFractionDigits;
+    }
+    get numberMaxFractionDigits() {
+        return this._numberMaxFractionDigits;
+    }
+    get numberUseGrouping() {
+        return this._numberUseGrouping;
+    }
+    get datePickerFormat() {
+        return this._datePickerFormat;
+    }
+    get datePickerShowTime() {
+        return this._datePickerShowTime;
+    }
     get placeholder() {
         return this._placeholder;
     }
     get className() {
         return this._className;
     }
+    get columnClassName() {
+        return this._columnClassName;
+    }
+    get columnWidth() {
+        return this._columnWidth;
+    }
+    get columnMinWidth() {
+        return this._columnMinWidth;
+    }
     get property() {
         return this._property;
     }
@@ -1048,6 +1193,20 @@ class FilterDescriptor {
         this._filterProperty = filterProperty;
         return this;
     }
+    withNumberFractions(min, max) {
+        this._numberMinFractionDigits = min;
+        this._numberMaxFractionDigits = max;
+        return this;
+    }
+    withNumberGrouping(useGrouping = true) {
+        this._numberUseGrouping = useGrouping;
+        return this;
+    }
+    withDateFormat(format, showTime = false) {
+        this._datePickerFormat = format;
+        this._datePickerShowTime = showTime;
+        return this;
+    }
     withPlaceholder(placeholder) {
         this._placeholder = placeholder;
         return this;
@@ -1056,6 +1215,15 @@ class FilterDescriptor {
         this._className = className;
         return this;
     }
+    withColumnClassName(className) {
+        this._columnClassName = className;
+        return this;
+    }
+    withColumnWidth(width, minWidth) {
+        this._columnWidth = width !== null && width !== void 0 ? width : null;
+        this._columnMinWidth = minWidth !== null && minWidth !== void 0 ? minWidth : null;
+        return this;
+    }
     withMatchModes(matchModes) {
         this._matchModes = matchModes;
         return this;
@@ -1068,8 +1236,16 @@ class FilterDescriptor {
     copyFieldsTo(descriptor) {
         descriptor._filterType = this._filterType;
         descriptor._filterProperty = this._filterProperty;
+        descriptor._numberMinFractionDigits = this._numberMinFractionDigits;
+        descriptor._numberMaxFractionDigits = this._numberMaxFractionDigits;
+        descriptor._numberUseGrouping = this._numberUseGrouping;
+        descriptor._datePickerFormat = this._datePickerFormat;
+        descriptor._datePickerShowTime = this._datePickerShowTime;
         descriptor._placeholder = this._placeholder;
         descriptor._className = this._className;
+        descriptor._columnWidth = this._columnWidth;
+        descriptor._columnMinWidth = this._columnMinWidth;
+        descriptor._columnClassName = this._columnClassName;
     }
 }
 (function (FilterDescriptor) {
@@ -1091,9 +1267,7 @@ class FilterDescriptor {
         MatchModeEnum["NotEquals"] = "notEquals";
         MatchModeEnum["In"] = "in";
         MatchModeEnum["LessThan"] = "lt";
-        MatchModeEnum["LessThanOrEqualTo"] = "lte";
         MatchModeEnum["GreaterThan"] = "gt";
-        MatchModeEnum["GreaterThanOrEqualTo"] = "gte";
         MatchModeEnum["Between"] = "between";
         MatchModeEnum["DateIs"] = "dateIs";
         MatchModeEnum["DateIsNot"] = "dateIsNot";
@@ -1249,6 +1423,11 @@ class ColumnDescriptor {
     constructor(table, property) {
         this._columnType = ColumnDescriptor.TypeEnum.String;
         this._isSortEnabled = false;
+        // styling
+        this._headerClassName = '';
+        this._className = '';
+        this._width = null;
+        this._minWidth = null;
         this._enumNameAsValue = false;
         // boolean specifics
         this._booleanAsIcon = false;
@@ -1279,6 +1458,18 @@ class ColumnDescriptor {
     get property() {
         return this._property;
     }
+    get headerClassName() {
+        return this._headerClassName;
+    }
+    get className() {
+        return this._className;
+    }
+    get width() {
+        return this._width;
+    }
+    get minWidth() {
+        return this._minWidth;
+    }
     get enumType() {
         return this._enumType;
     }
@@ -1342,6 +1533,16 @@ class ColumnDescriptor {
         this._customComponentType = customComponentType;
         return this;
     }
+    withClassName(className, headerClassName) {
+        this._className = className !== null && className !== void 0 ? className : '';
+        this._headerClassName = headerClassName !== null && headerClassName !== void 0 ? headerClassName : '';
+        return this;
+    }
+    withWidth(width, minWidth) {
+        this._width = width !== null && width !== void 0 ? width : null;
+        this._minWidth = minWidth !== null && minWidth !== void 0 ? minWidth : null;
+        return this;
+    }
     withObjectProperty(modelType, titleProperty) {
         var _a;
         this._objectModelType = modelType;
@@ -1428,6 +1629,10 @@ class ColumnDescriptor {
         descriptor._booleanNo = this._booleanNo;
         descriptor._objectModelType = this._objectModelType;
         descriptor._objectTitleProperty = this._objectTitleProperty;
+        descriptor._headerClassName = this._headerClassName;
+        descriptor._className = this._className;
+        descriptor._width = this._width;
+        descriptor._minWidth = this._minWidth;
         return descriptor;
     }
 }
@@ -1939,7 +2144,7 @@ class FieldInputDescriptor extends AFieldDescriptor {
     }
     asDatePicker(format, min, max, showTime) {
         this._fieldType = FieldInputDescriptor.TypeEnum.Datepicker;
-        this._datePickerFormat = format ? format : 'dd.mm.yy';
+        this._datePickerFormat = format;
         this._datePickerMin = min;
         this._datePickerMax = max;
         this._datePickerShowTime = showTime !== null && showTime !== void 0 ? showTime : false;
@@ -2488,8 +2693,11 @@ class TableDescriptor {
         this._hasDefaultSort = false;
         this._defaultSortProperty = [];
         this._defaultSortAsc = [];
-        this._rowHeight = 45;
-        this._tableFullHeightOffset = 315;
+        // visual
+        this._className = '';
+        this._size = TableDescriptor.SizeEnum.Large;
+        this._hasHover = true;
+        this._hasGridlines = false;
         this._model = new ModelDescriptor(modelType, idProperty, titleProperty);
         this._dataKeyProperty = (_a = idProperty !== null && idProperty !== void 0 ? idProperty : ModelUtil.findIdAttribute(modelType)) !== null && _a !== void 0 ? _a : undefined;
     }
@@ -2526,14 +2734,26 @@ class TableDescriptor {
     get defaultSortAsc() {
         return this._defaultSortAsc;
     }
-    get rowHeight() {
-        return this._rowHeight;
+    get model() {
+        return this._model;
+    }
+    get className() {
+        return this._className;
+    }
+    get size() {
+        return this._size;
     }
     get tableFullHeightOffset() {
         return this._tableFullHeightOffset;
     }
-    get model() {
-        return this._model;
+    get rowHeight() {
+        return this._rowHeight;
+    }
+    get hasHover() {
+        return this._hasHover;
+    }
+    get hasGridlines() {
+        return this._hasGridlines;
     }
     addColumnDescriptor(column) {
         this._columns.push(column);
@@ -2612,14 +2832,30 @@ class TableDescriptor {
         this._defaultSortAsc.push(asc);
         return this;
     }
-    withRowHeight(rowHeight) {
-        this._rowHeight = rowHeight;
+    withClassName(className) {
+        this._className = className;
+        return this;
+    }
+    withSize(size = TableDescriptor.SizeEnum.Normal) {
+        this._size = size;
         return this;
     }
     withTableFullHeightOffset(tableFullHeightOffset) {
         this._tableFullHeightOffset = tableFullHeightOffset;
         return this;
     }
+    withRowHeight(rowHeight) {
+        this._rowHeight = rowHeight;
+        return this;
+    }
+    withHover(hover) {
+        this._hasHover = hover;
+        return this;
+    }
+    withGridlines(gridlines) {
+        this._hasGridlines = gridlines;
+        return this;
+    }
     copy() {
         const descriptor = new TableDescriptor(this.model.type, this.model.idPropertyName, this.model.titlePropertyName);
         descriptor._columns = this.columns.map(c => c.copy());
@@ -2629,6 +2865,12 @@ class TableDescriptor {
         descriptor._defaultSortProperty = this._defaultSortProperty.map(p => p);
         descriptor._defaultSortAsc = this._defaultSortAsc.map(p => p);
         descriptor._filterDisplay = this._filterDisplay;
+        descriptor._className = this._className;
+        descriptor._size = this._size;
+        descriptor._tableFullHeightOffset = this._tableFullHeightOffset;
+        descriptor._rowHeight = this._rowHeight;
+        descriptor._hasHover = this._hasHover;
+        descriptor._hasGridlines = this._hasGridlines;
         return descriptor;
     }
 }
@@ -2643,6 +2885,12 @@ class TableDescriptor {
         FilterDisplayEnum[FilterDisplayEnum["Row"] = 0] = "Row";
         FilterDisplayEnum[FilterDisplayEnum["Menu"] = 1] = "Menu";
     })(FilterDisplayEnum = TableDescriptor.FilterDisplayEnum || (TableDescriptor.FilterDisplayEnum = {}));
+    let SizeEnum;
+    (function (SizeEnum) {
+        SizeEnum[SizeEnum["Small"] = 0] = "Small";
+        SizeEnum[SizeEnum["Normal"] = 1] = "Normal";
+        SizeEnum[SizeEnum["Large"] = 2] = "Large";
+    })(SizeEnum = TableDescriptor.SizeEnum || (TableDescriptor.SizeEnum = {}));
 })(TableDescriptor || (TableDescriptor = {}));
 
 var TableviewEditorTypeEnum = EditorDescriptor.TableviewEditorTypeEnum;
@@ -2963,49 +3211,12 @@ class EditorFormlyUtil {
                         const validatorRes = validation.validator(control, field, options);
                         // formly validator only excepts true/false for validation
                         // map possible angular validator result to true/false
-                        const res = typeof validatorRes === 'boolean' ? validatorRes : validatorRes === null;
-                        console.log('mapper', config.key, validatorRes, res);
-                        return res;
+                        return typeof validatorRes === 'boolean' ? validatorRes : validatorRes === null;
                     }
                 };
                 if (typeof validation.message === 'function') {
                     config.validators[validation.name].message = validation.message;
                 }
-                // if (typeof validation.validator === 'function' && typeof validation.message === 'function') {
-                //     config.validators[validation.name] = {
-                //         expression: (
-                //             control: AbstractControl,
-                //             field: FormlyFieldConfig,
-                //             options?: {
-                //                 [id: string]: any;
-                //             }
-                //         ) => {
-                //             const validatorRes = validation.validator!(control, field, options);
-                //             // formly validator only excepts true/false for validation
-                //             // map possible angular validator result to true/false
-                //             const res = typeof validatorRes === 'boolean' ? validatorRes : validatorRes === null;
-                //             console.log('mapper', config.key, validatorRes, res);
-                //             return res;
-                //         },
-                //         message: validation.message
-                //     };
-                // } else if (typeof validation.validator === 'function') {
-                //     config.validators[validation.name] = {
-                //         expression: (
-                //             control: AbstractControl,
-                //             field: FormlyFieldConfig,
-                //             options?: {
-                //                 [id: string]: any;
-                //             }
-                //         ) => {
-                //             const validatorRes = validation.validator!(control, field, options);
-                //             // formly validator only excepts true/false for validation
-                //             // map possible angular validator result to true/false
-                //             const res = typeof validatorRes === 'boolean' ? (validatorRes === false ? {[validation.name]: true} : null) : validatorRes;
-                //             console.log('mapper', config.key, validatorRes, res);
-                //             return res;
-                //         }
-                //     };
             }
             else {
                 if (!Array.isArray(config.validators.validation)) {
@@ -3014,9 +3225,6 @@ class EditorFormlyUtil {
                 config.validators.validation.push(validation.name);
             }
         }
-        if (validations.length > 0) {
-            console.log(config.validators);
-        }
     }
 }
 
@@ -3081,7 +3289,7 @@ class EnumUtil {
     static getConstantName(enumType, value) {
         var _a;
         if (typeof value === 'string') {
-            return (_a = this.getConstantNames(enumType).find(c => enumType[c] === value)) !== null && _a !== void 0 ? _a : null;
+            return (_a = EnumUtil.getConstantNames(enumType).find(c => enumType[c] === value)) !== null && _a !== void 0 ? _a : null;
         }
         else {
             return typeof enumType[value] !== 'undefined' ? enumType[value] : null;
@@ -3096,7 +3304,7 @@ class EnumUtil {
         var _a;
         const enumObjAny = enumObj;
         if (typeof value === 'string') {
-            return (_a = this.getConstantNamesFromEnumObject(enumObj).find(c => enumObjAny[c] === value)) !== null && _a !== void 0 ? _a : null;
+            return (_a = EnumUtil.getConstantNamesFromEnumObject(enumObj).find(c => enumObjAny[c] === value)) !== null && _a !== void 0 ? _a : null;
         }
         else {
             return typeof enumObjAny[value] !== 'undefined' ? enumObjAny[value] : null;
@@ -3794,7 +4002,7 @@ class MediusRestUtil {
                 const field = filterFieldSplit[0];
                 const operator = filterFieldSplit.length > 1 ? filterFieldSplit[1] : 'eq';
                 // prepare value
-                let value = filterFieldSplit.length > 2 ? filterFieldSplit[2] : '';
+                let value = filterFieldSplit.length > 2 ? filterFieldSplit.slice(2).join(':') : '';
                 const valueTo = undefined;
                 if (value.startsWith("'")) {
                     value = value.substring(1, value.length - 1);
@@ -3805,11 +4013,11 @@ class MediusRestUtil {
                         .split(',')
                         .map((v) => (v.startsWith("'") ? v.substring(1, v.length - 1) : v));
                 }
-                const operatorMapping = MediusRestUtil.matchModeMapping.find(mapping => mapping[1] === operator);
                 const filterDescriptor = filterDescriptors.find(f => f.property === field);
-                if (operatorMapping && filterDescriptor) {
+                const matchMode = MediusRestUtil.getMapping(operator, filterDescriptor === null || filterDescriptor === void 0 ? void 0 : filterDescriptor.filterType, 1);
+                if (matchMode && filterDescriptor) {
                     const fieldFilterProperty = (_a = filterDescriptor.filterProperty) !== null && _a !== void 0 ? _a : filterDescriptor.property;
-                    mediusParamsBuilder.withFilter(fieldFilterProperty, value, valueTo, MediusRestUtil.getMediusFilterMatchTypeFromPrimeMatchMode(operatorMapping[0]));
+                    mediusParamsBuilder.withFilter(fieldFilterProperty, value, valueTo, MediusRestUtil.getMediusFilterMatchTypeFromPrimeMatchMode(matchMode[0]));
                 }
             }
         }
@@ -3837,18 +4045,27 @@ class MediusRestUtil {
             for (const field in event.filters) {
                 const primeOperator = event.filters[field].matchMode;
                 let value = event.filters[field].value;
-                const operatorMapping = MediusRestUtil.matchModeMapping.find(mapping => mapping[0] === primeOperator);
-                if (operatorMapping &&
-                    typeof value !== 'undefined' &&
-                    value !== null &&
-                    ((typeof value === 'string' && value.length > 0) || (Array.isArray(value) && value.length > 0))) {
-                    if (Array.isArray(value)) {
+                const operatorMapping = primeOperator ? MediusRestUtil.getMapping(primeOperator, undefined, 0) : undefined;
+                if (operatorMapping && typeof value !== 'undefined' && value !== null) {
+                    let doAddFilter = false;
+                    if (typeof value === 'string' && value.length > 0) {
+                        value = `'${value}'`;
+                        doAddFilter = true;
+                    }
+                    else if (typeof value === 'number') {
+                        doAddFilter = true;
+                    }
+                    else if (Array.isArray(value)) {
                         value = `[${value.map(v => `'${v}'`).join(',')}]`;
+                        doAddFilter = true;
                     }
-                    else {
-                        value = `'${value}'`;
+                    else if (value instanceof Date) {
+                        value = `${value.toISOString()}`;
+                        doAddFilter = true;
+                    }
+                    if (doAddFilter) {
+                        filters.push(`${field}:${operatorMapping[1]}:${value}`);
                     }
-                    filters.push(`${field}:${operatorMapping[1]}:${value}`);
                 }
             }
             if (filters.length > 0) {
@@ -3881,29 +4098,45 @@ class MediusRestUtil {
     }
     static addMediusFilterFromPrimeFilterMetadata(queryParamBuilder, property, filterMetadata) {
         var _a;
-        const matchType = MediusRestUtil.getMediusFilterMatchTypeFromPrimeMatchMode((_a = filterMetadata.matchMode) !== null && _a !== void 0 ? _a : 'contains');
+        const matchType = MediusRestUtil.getMediusFilterMatchTypeFromPrimeMatchMode((_a = filterMetadata.matchMode) !== null && _a !== void 0 ? _a : 'equals');
         queryParamBuilder.withFilter(property, filterMetadata.value, undefined, matchType);
     }
-    static getMediusFilterMatchTypeFromPrimeMatchMode(matchMode) {
-        var _a;
-        const mapping = MediusRestUtil.matchModeMapping.find(m => m[0] === matchMode);
-        return (_a = mapping === null || mapping === void 0 ? void 0 : mapping[2]) !== null && _a !== void 0 ? _a : MediusFilterMatchType.Contains;
+    static getMediusFilterMatchTypeFromPrimeMatchMode(matchMode, dataType) {
+        var _a, _b;
+        return (_b = (_a = MediusRestUtil.getMapping(matchMode, dataType)) === null || _a === void 0 ? void 0 : _a[2]) !== null && _b !== void 0 ? _b : MediusFilterMatchType.Equals;
+    }
+    static getMapping(matchMode, dataType, idx = 0) {
+        const mappings = MediusRestUtil.matchModeMapping.filter(m => m[idx] === matchMode && (!dataType || !m[3] || dataType === m[3]));
+        if (mappings.length === 0) {
+            return null;
+        }
+        else if (mappings.length === 1) {
+            return mappings[0];
+        }
+        else {
+            return mappings.sort((m1, m2) => { var _a, _b; return ((_a = m2[3]) !== null && _a !== void 0 ? _a : -1) - ((_b = m1[3]) !== null && _b !== void 0 ? _b : -1); })[0];
+        }
     }
 }
 // first value is from primeNG, second is for use in query params
 MediusRestUtil.matchModeMapping = [
-    ['contains', 'c', MediusFilterMatchType.Contains],
-    ['endsWith', 'ew', MediusFilterMatchType.EndsWith],
-    ['equals', 'eq', MediusFilterMatchType.Equals],
-    ['gte', 'gte', MediusFilterMatchType.GreaterThan],
-    ['leq', 'leq', MediusFilterMatchType.SmallerThan],
-    ['startsWith', 'sw', MediusFilterMatchType.StartsWith],
-    ['in', 'in', MediusFilterMatchType.In],
-    ['notEquals', 'neq', MediusFilterMatchType.NotEquals]
+    [FilterMatchMode.CONTAINS, 'c', MediusFilterMatchType.Contains, null],
+    [FilterMatchMode.ENDS_WITH, 'ew', MediusFilterMatchType.EndsWith, null],
+    [FilterMatchMode.EQUALS, 'eq', MediusFilterMatchType.Equals, null],
+    [FilterMatchMode.GREATER_THAN, 'gt', MediusFilterMatchType.GreaterThan, null],
+    [FilterMatchMode.LESS_THAN, 'lt', MediusFilterMatchType.SmallerThan, null],
+    [FilterMatchMode.STARTS_WITH, 'sw', MediusFilterMatchType.StartsWith, null],
+    [FilterMatchMode.IN, 'in', MediusFilterMatchType.In, null],
+    [FilterMatchMode.NOT_EQUALS, 'neq', MediusFilterMatchType.NotEquals, null],
+    [FilterMatchMode.DATE_IS, 'eq', MediusFilterMatchType.Equals, FilterDescriptor.TypeEnum.Date],
+    [FilterMatchMode.DATE_BEFORE, 'lt', MediusFilterMatchType.SmallerThan, FilterDescriptor.TypeEnum.Date],
+    [FilterMatchMode.DATE_AFTER, 'gt', MediusFilterMatchType.GreaterThan, FilterDescriptor.TypeEnum.Date],
+    [FilterMatchMode.DATE_IS_NOT, 'neq', MediusFilterMatchType.NotEquals, FilterDescriptor.TypeEnum.Date]
 ];
 
 class ActionExecContext {
-    constructor(dataProvider, serviceInstance, data, sourceComponent = null, viewContainer = null) {
+    constructor(action, dataProvider, serviceInstance, data, sourceComponent = null, viewContainer = null) {
+        this.action = action;
         this.dataProvider = dataProvider;
         this.serviceInstance = serviceInstance;
         this.data = data;
@@ -4222,7 +4455,7 @@ class MngActionExecutorService {
     prepareActionExecContext(action, itemId, item, dataProvider, viewContainer, sourceComponent, actionData) {
         var _a, _b;
         const ctxDataProvider = (_a = dataProvider !== null && dataProvider !== void 0 ? dataProvider : action.dataProvider) !== null && _a !== void 0 ? _a : viewContainer === null || viewContainer === void 0 ? void 0 : viewContainer.getDataProvider();
-        return new ActionExecContext(ctxDataProvider, (_b = this.getDataProviderService(ctxDataProvider)) !== null && _b !== void 0 ? _b : undefined, {
+        return new ActionExecContext(action, ctxDataProvider, (_b = this.getDataProviderService(ctxDataProvider)) !== null && _b !== void 0 ? _b : undefined, {
             item,
             itemId,
             actionData
@@ -4371,7 +4604,7 @@ class MngActionExecutorService {
                 ctxDataProvider = viewContainerDataProvider;
             }
         }
-        const context = new ActionExecContext(ctxDataProvider, (_a = this.getDataProviderService(ctxDataProvider)) !== null && _a !== void 0 ? _a : undefined, {
+        const context = new ActionExecContext(action, ctxDataProvider, (_a = this.getDataProviderService(ctxDataProvider)) !== null && _a !== void 0 ? _a : undefined, {
             item,
             itemId,
             actionData
@@ -4836,8 +5069,8 @@ class MngCommonsService {
             numeric: [
                 FilterDescriptor.MatchModeEnum.Equals,
                 FilterDescriptor.MatchModeEnum.NotEquals,
-                FilterDescriptor.MatchModeEnum.LessThanOrEqualTo,
-                FilterDescriptor.MatchModeEnum.GreaterThanOrEqualTo
+                FilterDescriptor.MatchModeEnum.LessThan,
+                FilterDescriptor.MatchModeEnum.GreaterThan
             ],
             date: [
                 FilterDescriptor.MatchModeEnum.DateIs,
@@ -6138,7 +6371,8 @@ class MngActionEditorComponent {
             return throwError(() => actionError);
         }), finalize(() => this.loadingSubject.next(false)))
             .subscribe(res => {
-            this.item = res.result;
+            var _a;
+            this.item = (_a = res === null || res === void 0 ? void 0 : res.result) !== null && _a !== void 0 ? _a : undefined;
             if (this.action.hasFetchNotificationSuccess) {
                 NotificationUtil.actionNotificationSuccess(this.translate, this.action, 'fetch', this.action.fetchNotificationSuccessTitle, this.action.fetchNotificationSuccessMessage, this.viewContainer, this.item);
             }
@@ -6254,10 +6488,10 @@ class MngFormlyFieldInputComponent extends FieldType {
     }
 }
 MngFormlyFieldInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngFormlyFieldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-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 });
+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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngFormlyFieldInputComponent, decorators: [{
             type: Component,
-            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" }]
+            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" }]
         }] });
 
 class MngFormlyFieldLabelComponent {
@@ -6310,6 +6544,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
             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" }]
         }] });
 
+class StylesUtil {
+    static calculateTableColumnActionWidth(table, actions) {
+        const buttonsWidth = actions.reduce((acc, action) => acc + StylesUtil.getActionButtonRoundedWidth(action) + 2 * StylesUtil.ACTION_BUTTON_MARGIN_X, 0);
+        const tablePadding = StylesUtil.getTableCellPaddingX(table);
+        return buttonsWidth + 2 * tablePadding;
+    }
+    static getTableCellPaddingX(table) {
+        switch (table.size) {
+            case TableDescriptor.SizeEnum.Small:
+                return StylesUtil.TABLE_CELL_PADDING_X_SM;
+            case TableDescriptor.SizeEnum.Large:
+                return StylesUtil.TABLE_CELL_PADDING_X_LG;
+            default:
+                return StylesUtil.TABLE_CELL_PADDING_X;
+        }
+    }
+    static getActionButtonRoundedWidth(action) {
+        switch (action.size) {
+            case ActionDescriptor.SizeEnum.ExtraSmall:
+                return StylesUtil.BUTTON_ROUNDED_WIDTH_XS;
+            case ActionDescriptor.SizeEnum.Small:
+                return StylesUtil.BUTTON_ROUNDED_WIDTH_SM;
+            case ActionDescriptor.SizeEnum.Large:
+            case ActionDescriptor.SizeEnum.ExtraLarge:
+                return StylesUtil.BUTTON_ROUNDED_WIDTH_LG;
+            case ActionDescriptor.SizeEnum.Normal:
+            default:
+                return StylesUtil.BUTTON_ROUNDED_WIDTH;
+        }
+    }
+}
+StylesUtil.BUTTON_ROUNDED_WIDTH_XS = 26;
+StylesUtil.BUTTON_ROUNDED_WIDTH_SM = 28;
+StylesUtil.BUTTON_ROUNDED_WIDTH = 32;
+StylesUtil.BUTTON_ROUNDED_WIDTH_LG = 45;
+StylesUtil.ACTION_BUTTON_MARGIN_X = 2;
+StylesUtil.TABLE_CELL_PADDING_X = 8; // left and right paddings are same
+StylesUtil.TABLE_CELL_PADDING_X_SM = 4;
+StylesUtil.TABLE_CELL_PADDING_X_LG = 12;
+
 class MngTableLoadEvent {
 }
 class MngTableCellClickEvent {
@@ -6353,6 +6627,7 @@ class MngTableColumnFilterComponent {
                 break;
             case FilterDescriptor.TypeEnum.Date:
                 this.primeType = 'date';
+                this.primeDefaultMatchMode = FilterMatchMode.DATE_AFTER;
                 break;
             case FilterDescriptor.TypeEnum.Lookup:
                 this.primeType = 'lookup';
@@ -6377,6 +6652,22 @@ class MngTableColumnFilterComponent {
                 break;
         }
     }
+    valueToDate(value) {
+        console.log('call', this.descriptor.property);
+        if (typeof value === 'string' || typeof value === 'number') {
+            return new Date(value);
+        }
+        else if (value instanceof Date) {
+            return value;
+        }
+        else {
+            return null;
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    dateFilter(value, filterCallback) {
+        filterCallback(value);
+    }
     // eslint-disable-next-line @typescript-eslint/ban-types
     autocompleteFilter(value, filterCallback) {
         filterCallback(value);
@@ -6386,15 +6677,14 @@ class MngTableColumnFilterComponent {
         filterCallback(value);
     }
     toLookupFilterValue(value) {
-        console.log(this.descriptor.property, value);
         return this.lookupDescriptor.dataKeyProperty && value ? { [this.lookupDescriptor.dataKeyProperty]: value } : value;
     }
 }
 MngTableColumnFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngTableColumnFilterComponent, deps: [{ token: i2.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
-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 } });
+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 } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngTableColumnFilterComponent, decorators: [{
             type: Component,
-            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" }]
+            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" }]
         }], ctorParameters: function () { return [{ type: i2.PrimeNGConfig }]; }, propDecorators: { descriptor: [{
                 type: Input
             }], display: [{
@@ -6434,14 +6724,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 type: Input
             }] } });
 
-var TypeEnum = FilterDescriptor.TypeEnum;
 var PaginationModeEnum = TableDescriptor.PaginationModeEnum;
+var TypeEnum = FilterDescriptor.TypeEnum;
 class MngTableComponent {
-    constructor(injector, router, activatedRoute, translate, viewContainerService) {
+    constructor(injector, router, route, translate, actionExecutor, viewContainerService) {
         this.injector = injector;
         this.router = router;
-        this.activatedRoute = activatedRoute;
+        this.route = route;
         this.translate = translate;
+        this.actionExecutor = actionExecutor;
         this.viewContainerService = viewContainerService;
         this.filterDisplayRow = TableDescriptor.FilterDisplayEnum.Row;
         this.filterDisplayMenu = TableDescriptor.FilterDisplayEnum.Menu;
@@ -6449,8 +6740,9 @@ class MngTableComponent {
         // extra features input
         this.selectionMode = 'multiple';
         this.selectionEnabled = false;
-        // visual
-        this.isColumnClickable = true;
+        // actions
+        this.actions = [];
+        this.columnActionMinWidth = null;
         // event outputs
         this.loadEventEmitter = new EventEmitter();
         this.cellClickEventEmitter = new EventEmitter();
@@ -6461,12 +6753,14 @@ class MngTableComponent {
         this.useDataProvider = false;
         this.useQueryParamsInitialized = false;
         this.dataProviderInfiniteScrollItems = [];
+        this.itemsSubject = new ReplaySubject(1);
         this.offset = 0;
         this.multiSortMeta = null;
         this.filterMetadata = {};
         // infinite scroll
         this.infiniteScroll = false;
         this.scrollHeight = null;
+        this.tableFullHeightOffset = null;
         this.rowHeight = null;
         // selection
         this.selection = [];
@@ -6480,18 +6774,59 @@ class MngTableComponent {
         this.isFilterChanged = false;
         this.isSortChanged = false;
         this.filterDescriptors = [];
+        // actions
+        this.showInlineActionsColumn = false;
+        this.rowClickActions = [];
+        this.rowInlineActions = [];
         this.subscriptions = [];
     }
     ngOnInit() {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f, _g;
         this.viewContainer = (_b = (_a = this.viewContainerInit) !== null && _a !== void 0 ? _a : this.viewContainerService) !== null && _b !== void 0 ? _b : undefined;
         this.filterDescriptors = this.descriptor.columns.filter(c => typeof c.filterDescriptor !== 'undefined').map(c => c.filterDescriptor);
+        // map row settings
         this.rows = this.descriptor.defaultNumRows;
         this.rowsPerPageOptions = this.descriptor.rowsPerPageOptions;
+        // process actions
+        for (const action of this.actions) {
+            switch (action.position) {
+                case ActionPositionEnum.RowClick:
+                    this.rowClickActions.push(action);
+                    break;
+                case ActionPositionEnum.RowInline:
+                    this.rowInlineActions.push(action);
+                    break;
+            }
+        }
+        this.showInlineActionsColumn = typeof this.columnActionComponent !== 'undefined' || this.rowInlineActions.length > 0;
+        // define all styles
+        this.className = this.descriptor.className;
+        this.tableFullHeightOffset = (_c = this.descriptor.tableFullHeightOffset) !== null && _c !== void 0 ? _c : null;
+        this.rowHeight = (_d = this.descriptor.rowHeight) !== null && _d !== void 0 ? _d : null;
+        if (typeof this.isColumnClickable === 'undefined') {
+            // define if cell click is being observed via output
+            this.isColumnClickable = this.rowClickActions.length > 0 || this.cellClickEventEmitter.observed;
+        }
+        switch (this.descriptor.size) {
+            case TableDescriptor.SizeEnum.Small:
+                this.className += ' p-datatable-sm';
+                break;
+            case TableDescriptor.SizeEnum.Large:
+                this.className += ' p-datatable-lg';
+                break;
+        }
+        if (this.descriptor.hasGridlines) {
+            this.className += ' p-datatable-gridlines';
+        }
+        if (!this.columnActionMinWidth) {
+            this.columnActionMinWidth = StylesUtil.calculateTableColumnActionWidth(this.descriptor, this.rowInlineActions);
+        }
+        // check if infinite scroll
         if (this.descriptor.paginationMode === PaginationModeEnum.InfiniteScroll) {
             this.infiniteScroll = true;
             this.scrollHeight = 'flex';
-            this.rowHeight = this.descriptor.rowHeight;
+            this.tableFullHeightOffset = (_e = this.descriptor.tableFullHeightOffset) !== null && _e !== void 0 ? _e : 315;
+            this.rowHeight = (_f = this.descriptor.rowHeight) !== null && _f !== void 0 ? _f : 45;
             this.useQueryParams = false;
         }
         // check if data provider is supplied, if is, use it primarily
@@ -6515,8 +6850,8 @@ class MngTableComponent {
             if (this.queryResult) {
                 this.queryResult$ = this.queryResult instanceof Observable ? this.queryResult : of(this.queryResult);
             }
-            else if (!this.queryResult && this.items) {
-                this.queryResult$ = (this.items instanceof Observable ? this.items : of(this.items)).pipe(
+            else {
+                this.queryResult$ = (isObservable(this.items) ? this.items : this.itemsSubject.asObservable()).pipe(
                 // distinctUntilChanged((v1, v2) => v1.length === v2.length &&
                 //     v1.every((v1i, idx) => v1i[this.descriptor.dataKeyProperty] === v2[idx][this.descriptor.dataKeyProperty])),
                 map(items => {
@@ -6525,13 +6860,16 @@ class MngTableComponent {
                     queryResult.allDataCount = items.length;
                     return queryResult;
                 }));
+                if (!isObservable(this.items)) {
+                    this.itemsSubject.next((_g = this.items) !== null && _g !== void 0 ? _g : []);
+                }
             }
             if (typeof this.loading !== 'undefined') {
                 this.loading$ = this.loading instanceof Observable ? this.loading : of(this.loading);
             }
         }
         if (this.useQueryParams) {
-            const subscription = this.activatedRoute.queryParams.subscribe(qp => {
+            const subscription = this.route.queryParams.subscribe(qp => {
                 this.loadTableFromRouteUpdate(qp);
             });
             this.subscriptions.push(subscription);
@@ -6552,10 +6890,18 @@ class MngTableComponent {
                     break;
                 case 'columnAction':
                     this.columnActionTemplate = template.template;
+                    if (!this.showInlineActionsColumn) {
+                        this.showInlineActionsColumn = true;
+                    }
                     break;
             }
         });
     }
+    ngOnChanges(changes) {
+        if (changes['items'] && !changes['items'].firstChange && Array.isArray(changes['items'].currentValue)) {
+            this.itemsSubject.next(changes['items'].currentValue);
+        }
+    }
     ngOnDestroy() {
         var _a;
         (_a = this.dataProviderSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
@@ -6574,7 +6920,7 @@ class MngTableComponent {
                 event.multiSortMeta = this.getDefaultSortMeta();
             }
             this.router.navigate([], {
-                relativeTo: this.activatedRoute,
+                relativeTo: this.route,
                 replaceUrl: true,
                 queryParams: MediusRestUtil.fromPrimeLazyLoadEventToAngularQueryParams(event, this.rowsPerPageOptions[0])
             });
@@ -6592,9 +6938,14 @@ class MngTableComponent {
     onTableFilter(event) {
         this.isFilterChanged = true;
     }
-    onCellClick(col, item, idx) {
+    onCellClick(event, col, item, idx) {
         const mngEvent = new MngTableCellClickEvent(col, item, idx);
         this.cellClickEventEmitter.next(mngEvent);
+        if (this.rowClickActions.length) {
+            for (const action of this.rowClickActions) {
+                this.actionExecutor.triggerRowClickAction(action, mngEvent, this.route, this.descriptor);
+            }
+        }
     }
     onSelectionChange(event) {
         this.selectionChangeEventEmitter.emit(event);
@@ -6661,9 +7012,21 @@ class MngTableComponent {
         const primeSortMeta = [];
         const primeFilterMeta = {};
         this.filterDescriptors.forEach(f => {
+            let matchMode;
+            switch (f.filterType) {
+                case TypeEnum.String:
+                    matchMode = FilterMatchMode.CONTAINS;
+                    break;
+                case TypeEnum.Date:
+                    matchMode = FilterMatchMode.DATE_AFTER;
+                    break;
+                default:
+                    matchMode = FilterMatchMode.EQUALS;
+                    break;
+            }
             primeFilterMeta[f.property] = {
                 value: null,
-                matchMode: f.filterType === TypeEnum.String ? 'contains' : 'equals'
+                matchMode: matchMode
             };
         });
         (_a = mediusQueryParam === null || mediusQueryParam === void 0 ? void 0 : mediusQueryParam.sortProperty) === null || _a === void 0 ? void 0 : _a.forEach((s, idx) => {
@@ -6674,12 +7037,19 @@ class MngTableComponent {
             });
         });
         (_b = mediusQueryParam === null || mediusQueryParam === void 0 ? void 0 : mediusQueryParam.filterParams) === null || _b === void 0 ? void 0 : _b.forEach(f => {
+            var _a;
             const descriptor = this.filterDescriptors.find(fd => fd.filterProperty === f.property || fd.property === f.property);
-            const operator = MediusRestUtil.matchModeMapping.find(mapping => mapping[2] === f.filterMatchType);
-            if (descriptor && operator) {
+            const matchMode = f.filterMatchType && descriptor ? (_a = MediusRestUtil.getMapping(f.filterMatchType, descriptor.filterType, 2)) === null || _a === void 0 ? void 0 : _a[0] : MediusFilterMatchType.Equals;
+            if (descriptor && matchMode) {
+                let filterValue = f.filterValue;
+                if (descriptor.filterType === TypeEnum.Date && typeof filterValue !== 'undefined') {
+                    if (typeof filterValue === 'string' || typeof filterValue === 'number') {
+                        filterValue = new Date(filterValue);
+                    }
+                }
                 primeFilterMeta[descriptor.property] = {
-                    value: f.filterValue,
-                    matchMode: operator[0]
+                    value: filterValue,
+                    matchMode: matchMode
                 };
             }
         });
@@ -6700,13 +7070,13 @@ class MngTableComponent {
         }
     }
 }
-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 });
-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 });
+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 });
+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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngTableComponent, decorators: [{
             type: Component,
-            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" }]
+            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" }]
         }], ctorParameters: function () {
-        return [{ type: i0.Injector }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i1$1.TranslateService }, { type: MngViewContainerComponentService, decorators: [{
+        return [{ type: i0.Injector }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i1$1.TranslateService }, { type: MngActionExecutorService }, { type: MngViewContainerComponentService, decorators: [{
                         type: Optional
                     }] }];
     }, propDecorators: { descriptor: [{
@@ -6725,6 +7095,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 type: Input
             }], selectionEnabled: [{
                 type: Input
+            }], actions: [{
+                type: Input
             }], isColumnClickable: [{
                 type: Input
             }], viewContainerInit: [{
@@ -6734,6 +7106,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 type: Input
             }], columnActionComponent: [{
                 type: Input
+            }], columnActionMinWidth: [{
+                type: Input
             }], loadEventEmitter: [{
                 type: Output,
                 args: ['tableLoad']
@@ -6770,7 +7144,6 @@ class MngTableviewComponent {
         this.actionExecutor = actionExecutor;
         this.viewContainerService = viewContainerService;
         this.actions = [];
-        this.tableComponent = null;
         this.rowClickActions = [];
         this.rowInlineActions = [];
         this.toolbarLeftActions = [];
@@ -6817,19 +7190,12 @@ class MngTableviewComponent {
         var _a;
         (_a = this.tableComponent) === null || _a === void 0 ? void 0 : _a.reload();
     }
-    onTableCellClick(event) {
-        if (this.rowClickActions.length) {
-            for (const action of this.rowClickActions) {
-                this.actionExecutor.triggerRowClickAction(action, event, this.route, this.descriptor.table);
-            }
-        }
-    }
 }
 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 });
-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 } });
+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 } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngTableviewComponent, decorators: [{
             type: Component,
-            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" }]
+            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" }]
         }], 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: [{
                 type: Input
             }], dataProvider: [{
@@ -7081,7 +7447,7 @@ class MngFormlyFieldLookupDialogComponent extends FieldType {
     }
 }
 MngFormlyFieldLookupDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngFormlyFieldLookupDialogComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-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 });
+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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngFormlyFieldLookupDialogComponent, decorators: [{
             type: Component,
             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" }]
@@ -7098,9 +7464,8 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
         this.actionExecutor = actionExecutor;
         this.itemsSubject = new ReplaySubject(1);
         this.items$ = this.itemsSubject.asObservable();
+        this.actions = [];
         this.toolbarRightActions = [];
-        this.rowClickActions = [];
-        this.rowInlineActions = [];
         this.subscriptions = [];
         this.isDisabledSubject = new BehaviorSubject(false);
         this.isEnabled$ = this.isDisabledSubject.asObservable().pipe(distinctUntilChanged(), map(e => !e));
@@ -7118,7 +7483,7 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
                 .withDialogClassName('mng-field-dialog mng-action-editor-dialog')
                 .withDialogSize(DialogSizeEnum.Small);
             viewAction.withEditorActions([new ActionEditorSubmitDescriptor(viewAction, ActionEditorSubmitDescriptor.TypeEnum.Cancel)]);
-            this.rowClickActions.push(viewAction);
+            this.actions.push(viewAction);
         }
         if (hasAddAction) {
             const addAction = new ActionEditorDescriptor(this.descriptor.tableviewDescriptor.addEditor, 'add', this.descriptor.editor.model.type, this.descriptor.property)
@@ -7141,10 +7506,11 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
             })
                 .withIsVisibleFunction(() => { var _a; return of(!((_a = this.options) === null || _a === void 0 ? void 0 : _a.formState.disabled)); })
                 .withIsEnabledFunction(() => this.isEnabled$);
-            this.toolbarRightActions.push(addAction);
+            this.actions.push(addAction);
         }
         if (hasEditAction) {
             const editAction = new ActionEditorDescriptor(this.descriptor.tableviewDescriptor.editEditor, 'edit', this.descriptor.editor.model.type, this.descriptor.property)
+                .withPosition(ActionPositionEnum.RowInline)
                 .withTitle(null)
                 .withIcon('pi pi-pencil')
                 .withDialogClassName('mng-field-dialog mng-action-editor-dialog')
@@ -7163,49 +7529,48 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
             })
                 .withIsVisibleFunction(() => { var _a; return of(!((_a = this.formControl) === null || _a === void 0 ? void 0 : _a.disabled)); })
                 .withIsEnabledFunction(() => this.isEnabled$);
-            this.rowInlineActions.push(editAction);
+            this.actions.push(editAction);
         }
         if (hasDeleteAction) {
             const deleteAction = new ActionDescriptor(this.descriptor.tableviewDescriptor.model, 'delete', this.descriptor.editor.model.type, this.descriptor.property)
+                .withPosition(ActionPositionEnum.RowInline)
                 .withLevel(ActionLevelEnum.Danger)
                 .withTitle(null)
                 .withIcon('pi pi-trash')
                 .withSize(SizeEnum.ExtraSmall)
                 .withRunFunction(ctx => {
-                var _a;
+                var _a, _b;
                 if (!((_a = ctx.data) === null || _a === void 0 ? void 0 : _a.item)) {
-                    throw new Error(`No item was provided in context, delete cannot be done.`);
+                    return throwError(() => new Error(`No item was provided in context, delete cannot be done.`));
                 }
                 let formControlValue = this.formControl.value;
                 const compareProperty = this.descriptor.tableDescriptor.dataKeyProperty
                     ? this.descriptor.tableDescriptor.dataKeyProperty
                     : this.descriptor.tableDescriptor.model.idPropertyName;
-                if (!compareProperty) {
-                    throw new Error('Cannot compare items, please provide main table data key property or model id property.');
-                }
                 const ctxItem = ctx.data.item;
-                if (!(ctxItem === null || ctxItem === void 0 ? void 0 : ctxItem[compareProperty])) {
-                    return formControlValue;
+                if (compareProperty && (ctxItem === null || ctxItem === void 0 ? void 0 : ctxItem[compareProperty])) {
+                    formControlValue = formControlValue.filter((i) => i[compareProperty] !== ctxItem[compareProperty]);
+                    this.formControl.patchValue(formControlValue);
                 }
-                formControlValue = formControlValue.filter((i) => i[compareProperty] !== ctxItem[compareProperty]);
-                this.formControl.patchValue(formControlValue);
-                return of(ctx.data.item);
+                else if (typeof ((_b = ctx.data.actionData) === null || _b === void 0 ? void 0 : _b['itemIndex']) === 'number') {
+                    formControlValue.splice(ctx.data.actionData['itemIndex'], 1);
+                    this.formControl.patchValue([...formControlValue]);
+                }
+                else {
+                    return throwError(() => new Error('Cannot compare items, please provide main table data key property or model id property.'));
+                }
+                return of(ctxItem);
             })
                 .withIsVisibleFunction(() => { var _a; return of(!((_a = this.options) === null || _a === void 0 ? void 0 : _a.formState.disabled)); })
                 .withIsEnabledFunction(() => this.isEnabled$);
-            this.rowInlineActions.push(deleteAction);
+            this.actions.push(deleteAction);
         }
-        for (const action of this.descriptor.actions) {
+        this.actions.push(...this.descriptor.actions);
+        for (const action of this.actions) {
             switch (action.position) {
                 case ActionPositionEnum.ToolbarRight:
                     this.toolbarRightActions.push(action);
                     break;
-                case ActionPositionEnum.RowInline:
-                    this.rowInlineActions.push(action);
-                    break;
-                case ActionPositionEnum.RowClick:
-                    // this.footerRightActions.push(action);
-                    break;
             }
         }
         // init values
@@ -7230,20 +7595,12 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
     ngOnDestroy() {
         this.subscriptions.forEach(s => s.unsubscribe());
     }
-    onTableCellClick(event) {
-        console.log(event);
-        if (this.rowClickActions.length) {
-            for (const action of this.rowClickActions) {
-                this.actionExecutor.triggerRowClickAction(action, event);
-            }
-        }
-    }
 }
 MngFormlyFieldTableDialogFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngFormlyFieldTableDialogFormComponent, deps: [{ token: MngActionExecutorService }], target: i0.ɵɵFactoryTarget.Component });
-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 });
+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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngFormlyFieldTableDialogFormComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], ctorParameters: function () { return [{ type: MngActionExecutorService }]; } });
 
 class MngFormlyFieldTableDialogMultiselectComponent extends FieldType {
@@ -7354,7 +7711,7 @@ class MngFormlyFieldTableDialogMultiselectComponent extends FieldType {
     }
 }
 MngFormlyFieldTableDialogMultiselectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngFormlyFieldTableDialogMultiselectComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-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 });
+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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MngFormlyFieldTableDialogMultiselectComponent, decorators: [{
             type: Component,
             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" }]
@@ -8153,8 +8510,8 @@ function getEmailValidationMessage(translate) {
 const getFormlyValidationMessages = (translate) => {
     return [
         { name: 'required', message: getRequiredValidationMessage(translate) },
-        { name: 'minlength', message: getMinLengthValidationMessage(translate) },
-        { name: 'maxlength', message: getMaxLengthValidationMessage(translate) },
+        { name: 'minLength', message: getMinLengthValidationMessage(translate) },
+        { name: 'maxLength', message: getMaxLengthValidationMessage(translate) },
         { name: 'pattern', message: getTextPatternValidationMessage(translate) },
         { name: 'email', message: getEmailValidationMessage(translate) }
     ];
@@ -8684,7 +9041,7 @@ class AMngCrudApiService extends AMngGetAllApiService {
             body: item ? this.serialize(item) : undefined,
             params: params
         })
-            .pipe(map(res => this.deserialize(res)));
+            .pipe(map(res => (res ? this.deserialize(res) : null)));
     }
     getCreatePostPath(item) {
         return '';
@@ -9164,5 +9521,5 @@ class RouteDataBuilder {
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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 };
 //# sourceMappingURL=mediusinc-mng-commons.mjs.map