@mediusinc/mng-commons 0.2.18 → 0.2.21

package/fesm2020/mediusinc-mng-commons.mjs

@@ -1,37 +1,37 @@
-import * as i4$1 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { HttpErrorResponse, HttpClient, HttpClientModule } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, Inject, Component, ChangeDetectionStrategy, Input, EventEmitter, Directive, Output, ContentChildren, ViewChild, forwardRef, Pipe, Optional, ViewChildren, HostListener, APP_INITIALIZER, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, Inject, EventEmitter, Component, ChangeDetectionStrategy, Optional, Input, Output, Directive, ContentChildren, ViewChild, forwardRef, Pipe, ViewChildren, HostListener, APP_INITIALIZER, NgModule } from '@angular/core';
 import * as i4$2 from '@angular/forms';
 import { Validators, FormGroup, FormArray, NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/router';
 import { NavigationEnd, GuardsCheckEnd, RouterModule } from '@angular/router';
-import * as i3$1 from '@ngx-formly/core';
+import * as i3$2 from '@ngx-formly/core';
 import { FieldType, FieldWrapper, FORMLY_CONFIG, FormlyModule } from '@ngx-formly/core';
-import * as i3 from '@ngx-translate/core';
+import * as i3$1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
-import * as i2$1 from 'primeng/api';
-import { MessageService, ConfirmationService, FilterMatchMode } from 'primeng/api';
+import * as i2 from 'primeng/api';
+import { ConfirmationService, MessageService, FilterMatchMode } from 'primeng/api';
 import * as i1$1 from 'primeng/autocomplete';
 import { AutoComplete, AutoCompleteModule } from 'primeng/autocomplete';
-import * as i2$4 from 'primeng/breadcrumb';
+import * as i2$3 from 'primeng/breadcrumb';
 import { BreadcrumbModule } from 'primeng/breadcrumb';
-import * as i8 from 'primeng/button';
+import * as i7 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import * as i5 from 'primeng/calendar';
+import * as i5$1 from 'primeng/calendar';
 import { CalendarModule } from 'primeng/calendar';
 import { CardModule } from 'primeng/card';
 import { CheckboxModule } from 'primeng/checkbox';
 import { ChipModule } from 'primeng/chip';
-import * as i6 from 'primeng/confirmdialog';
+import * as i5 from 'primeng/confirmdialog';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { ConfirmPopupModule } from 'primeng/confirmpopup';
 import * as i1$4 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i1$2 from 'primeng/dropdown';
 import { Dropdown, DropdownModule } from 'primeng/dropdown';
-import * as i2 from 'primeng/dynamicdialog';
+import * as i3 from 'primeng/dynamicdialog';
 import { DynamicDialogModule, DialogService } from 'primeng/dynamicdialog';
 import * as i1$6 from 'primeng/fieldset';
 import { FieldsetModule } from 'primeng/fieldset';
@@ -40,468 +40,106 @@ import * as i6$1 from 'primeng/inputmask';
 import { InputMaskModule } from 'primeng/inputmask';
 import * as i1$3 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
-import * as i2$3 from 'primeng/inputswitch';
+import * as i2$2 from 'primeng/inputswitch';
 import { InputSwitchModule } from 'primeng/inputswitch';
-import * as i10$1 from 'primeng/inputtext';
+import * as i10 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i9$1 from 'primeng/inputtextarea';
 import { InputTextareaModule } from 'primeng/inputtextarea';
-import * as i3$2 from 'primeng/messages';
+import * as i3$3 from 'primeng/messages';
 import { MessagesModule } from 'primeng/messages';
-import * as i2$2 from 'primeng/multiselect';
+import * as i2$1 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
 import { PaginatorModule } from 'primeng/paginator';
-import * as i4$3 from 'primeng/progressspinner';
+import * as i6 from 'primeng/progressspinner';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import * as i4$4 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
-import * as i9 from 'primeng/ripple';
+import * as i8 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
 import { SelectButtonModule } from 'primeng/selectbutton';
-import * as i7 from 'primeng/skeleton';
+import * as i7$1 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import * as i4$5 from 'primeng/table';
 import { Table, TableModule } from 'primeng/table';
 import * as i1$5 from 'primeng/tabview';
 import { TabViewModule } from 'primeng/tabview';
 import { TagModule } from 'primeng/tag';
-import * as i7$1 from 'primeng/toast';
+import * as i6$2 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
 import { ToggleButtonModule } from 'primeng/togglebutton';
-import * as i8$1 from 'primeng/toolbar';
+import * as i4$3 from 'primeng/toolbar';
 import { ToolbarModule } from 'primeng/toolbar';
-import * as i10 from 'primeng/tooltip';
+import * as i9 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import { of, throwError, Subject, Observable, from, BehaviorSubject, ReplaySubject, distinctUntilChanged, combineLatest } from 'rxjs';
+import { throwError, of, Subject, Observable, from, BehaviorSubject, ReplaySubject, distinctUntilChanged, combineLatest } from 'rxjs';
 import 'reflect-metadata';
 import { mergeMap, map, first, catchError, filter, finalize, startWith } from 'rxjs/operators';
-import * as i4 from '@angular/platform-browser';
+import * as i4$1 from '@angular/platform-browser';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 
-class ActionDescriptor {
-    constructor(model, actionName, parentType, parentProperty) {
-        this._type = ActionTypeEnum.Direct;
-        this._activationTrigger = ActionActivationTriggerEnum.OnClick;
-        this._position = ActionPositionEnum.ToolbarRight;
-        this._level = ActionLevelEnum.Default;
-        this._routeUrl = null;
-        this._className = '';
-        this._hasRunConfirmation = false;
-        this._hasRunNotificationSuccess = true;
-        this._hasRunNotificationError = true;
-        this._model = model;
-        this._actionName = actionName;
-        if ((parentType && !parentProperty) || (!parentProperty && parentProperty)) {
-            throw new Error(`Provide both the parent type and parent property or none: ${parentType}, ${parentProperty}.`);
-        }
-        this._parentType = parentType;
-        this._parentTypeName = parentType ? TypeUtil.findTypeName(parentType) : undefined;
-        this._parentProperty = parentProperty;
-        this._i18nModelActionBaseKey = this._parentTypeName
-            ? `${this._parentTypeName}.actions.${this._parentProperty}_${actionName}`
-            : `${this._model.typeName}.actions.${actionName}`;
-    }
-    get model() {
-        return this._model;
-    }
-    get parentTypeName() {
-        return this._parentTypeName;
-    }
-    get parentProperty() {
-        return this._parentProperty;
-    }
-    get i18nModelActionBaseKey() {
-        return this._i18nModelActionBaseKey;
-    }
-    get type() {
-        return this._type;
-    }
-    get activationTrigger() {
-        return this._activationTrigger;
-    }
-    get position() {
-        return this._position;
-    }
-    get level() {
-        return this._level;
-    }
-    get routeUrl() {
-        return this._routeUrl;
-    }
-    get title() {
-        return this._title;
-    }
-    get icon() {
-        return this._icon;
-    }
-    get tooltip() {
-        return this._tooltip;
-    }
-    get runFunction() {
-        if (!this._runFunction) {
-            throw new Error('Run function is not defined and cannot be invoked');
-        }
-        return this._runFunction;
-    }
-    get isVisibleFunction() {
-        return this._isVisibleFunction;
-    }
-    get isEnabledFunction() {
-        return this._isEnabledFunction;
-    }
-    get actionName() {
-        return this._actionName;
-    }
-    get className() {
-        return this._className;
-    }
-    get hasRunConfirmation() {
-        return this._hasRunConfirmation;
-    }
-    get runConfirmationIcon() {
-        return this._runConfirmationIcon;
-    }
-    get runConfirmationTitle() {
-        return this._runConfirmationTitle;
-    }
-    get runConfirmationMessage() {
-        return this._runConfirmationMessage;
-    }
-    get runConfirmationAcceptTitle() {
-        return this._runConfirmationAcceptTitle;
-    }
-    get runConfirmationRejectTitle() {
-        return this._runConfirmationRejectTitle;
-    }
-    get hasRunNotificationSuccess() {
-        return this._hasRunNotificationSuccess;
-    }
-    get runNotificationSuccessTitle() {
-        return this._runNotificationSuccessTitle;
-    }
-    get runNotificationSuccessMessage() {
-        return this._runNotificationSuccessMessage;
-    }
-    get hasRunNotificationError() {
-        return this._hasRunNotificationError;
-    }
-    get runNotificationErrorTitle() {
-        return this._runNotificationErrorTitle;
-    }
-    get runNotificationErrorMessage() {
-        return this._runNotificationErrorMessage;
+class DataProvider {
+    constructor(modelType, serviceType) {
+        this._modelType = modelType;
+        this._serviceType = serviceType;
     }
-    withRunFunction(fn) {
-        this._runFunction = fn;
-        return this;
+    get serviceType() {
+        return this._serviceType;
     }
-    withIsVisibleFunction(fn) {
-        this._isVisibleFunction = fn;
-        return this;
+    get modelType() {
+        return this._modelType;
     }
-    withIsEnabledFunction(fn) {
-        this._isEnabledFunction = fn;
+    withServiceType(type) {
+        this._serviceType = type;
         return this;
     }
-    withRouteTrigger(routeUrl) {
-        this._activationTrigger = ActionActivationTriggerEnum.OnRoute;
-        this._routeUrl = routeUrl;
-        return this;
+}
+
+class EditorDataProvider extends DataProvider {
+    constructor(modelType, serviceType) {
+        super(modelType, serviceType);
+        this._fetch = id => throwError(`No fetch function provided for id ${id}.`);
     }
-    withLevel(level) {
-        this._level = level;
-        return this;
+    get fetch() {
+        return this._fetch;
     }
-    /**
-     * Overrides default title key with model action key (${model.typeName}.actions.${actionName}). Not relevant if parentType name is provided.
-     */
-    withModelTitle() {
-        this._title = `${this._i18nModelActionBaseKey}.title`;
-        return this;
+    get create() {
+        return this._create;
     }
-    /**
-     * Overrides default title key (${actionName}.title). If null, no title will be shown.
-     * @param title Title i18n key or title.
-     */
-    withTitle(title) {
-        this._title = title;
-        return this;
+    get update() {
+        return this._update;
     }
-    withIcon(icon) {
-        this._icon = icon;
-        return this;
+    get delete() {
+        return this._delete;
     }
-    withTooltip(tooltip) {
-        this._title = tooltip;
+    withFetch(fetch) {
+        this._fetch = fetch;
         return this;
     }
-    withClassName(className) {
-        this._className = className;
+    withCreate(create) {
+        this._create = create;
         return this;
     }
-    withPosition(position) {
-        this._position = position;
+    withUpdate(update) {
+        this._update = update;
         return this;
     }
-    withRunConfirmation(icon = 'pi pi-exclamation-triangle', title, message, acceptTitle, rejectTitle) {
-        this._hasRunConfirmation = true;
-        this._runConfirmationIcon = icon;
-        this._runConfirmationTitle = title;
-        this._runConfirmationMessage = message;
-        this._runConfirmationAcceptTitle = acceptTitle;
-        this._runConfirmationRejectTitle = rejectTitle;
+    withDelete(deleteFn) {
+        this._delete = deleteFn;
         return this;
     }
-    withRunNotificationSuccess(title, message, hasNotification = true) {
-        this._hasRunNotificationSuccess = hasNotification;
-        this._runNotificationSuccessTitle = title;
-        this._runNotificationSuccessMessage = message;
-    }
-    withRunNotificationError(title, message, hasNotification = true) {
-        this._hasRunNotificationError = hasNotification;
-        this._runNotificationErrorTitle = title;
-        this._runNotificationErrorMessage = message;
-    }
 }
-class ActionEditorDescriptor extends ActionDescriptor {
-    constructor(editorDescriptor, actionName, parentType, parentProperty) {
-        super(editorDescriptor.model, actionName, parentType, parentProperty);
-        this._editorTitle = undefined;
-        this._hasFetchNotificationSuccess = false;
-        this._type = ActionTypeEnum.Editor;
-        this._editorDescriptor = editorDescriptor;
-    }
-    get editorTitle() {
-        return this._editorTitle;
-    }
-    get editorDescriptor() {
-        return this._editorDescriptor;
-    }
-    get hasFetchNotificationSuccess() {
-        return this._hasFetchNotificationSuccess;
-    }
-    get fetchNotificationSuccessTitle() {
-        return this._fetchNotificationSuccessTitle;
-    }
-    get fetchNotificationSuccessMessage() {
-        return this._fetchNotificationSuccessMessage;
-    }
-    get runFunction() {
-        throw new Error('Run function cannot be used in editor action. Use submit function instead!');
-    }
-    get fetchFunction() {
-        if (!this._fetchFunction) {
-            return ctx => {
-                console.warn(`Fetch function is not provided for function ${this._actionName}, using default and returning context item`, ctx.data?.item);
-                return of(ctx.data?.item ? ctx.data.item : {});
-            };
-        }
-        return this._fetchFunction;
-    }
-    get submitFunction() {
-        return this._submitFunction;
-    }
-    withEditorTitle(title) {
-        this._editorTitle = title;
-        return this;
-    }
-    withRunFunction(fn) {
-        return this.withSubmitFunction(fn);
+
+class LookupDataProvider extends DataProvider {
+    constructor(modelType, serviceType) {
+        super(modelType, serviceType);
+        this._lookup = () => of([]);
     }
-    withFetchFunction(fn) {
-        this._fetchFunction = fn;
-        return this;
+    get lookup() {
+        return this._lookup;
     }
-    withSubmitFunction(fn) {
-        this._submitFunction = fn;
-        return this;
-    }
-    withFetchNotificationError(title, message, hasNotification = true) {
-        this._hasFetchNotificationSuccess = hasNotification;
-        this._fetchNotificationSuccessTitle = title;
-        this._fetchNotificationSuccessMessage = message;
-    }
-}
-class ActionEditorDetailsDescriptor extends ActionEditorDescriptor {
-    constructor(editorDescriptor) {
-        super(editorDescriptor, 'details');
-        this.withPosition(ActionPositionEnum.RowClick);
-        this.withRouteTrigger(':itemId');
-        this.withFetchFunction(ctx => ctx.dataProvider?.fetch && ctx.data?.itemId
-            ? ctx.dataProvider.fetch(ctx.data?.itemId, ctx.serviceInstance)
-            : throwError(new Error(`Data provider fetch function or item id ${ctx.data?.itemId} is missing.`)));
-        this.withClassName('mng-details-dynamic-dialog');
-    }
-}
-class ActionEditorAddDescriptor extends ActionEditorDescriptor {
-    constructor(editorDescriptor) {
-        super(editorDescriptor, 'add');
-        this.withPosition(ActionPositionEnum.ToolbarLeft);
-        this.withRouteTrigger('add');
-        this.withSubmitFunction(ctx => ctx.dataProvider?.create ? ctx.dataProvider.create(ctx.data?.item, ctx.serviceInstance) : throwError(new Error(`Data provider create function is missing.`)));
-        this.withLevel(ActionLevelEnum.Success);
-        this.withIcon('pi pi-plus');
-        this.withClassName('mng-details-dynamic-dialog');
-    }
-}
-class ActionEditorEditDescriptor extends ActionEditorDescriptor {
-    constructor(editorDescriptor) {
-        super(editorDescriptor, 'edit');
-        this.withPosition(ActionPositionEnum.RowInline);
-        this.withTitle(null);
-        this.withRouteTrigger(':itemId/edit');
-        this.withFetchFunction(ctx => ctx.dataProvider?.fetch && ctx.data?.itemId
-            ? ctx.dataProvider.fetch(ctx.data.itemId, ctx.serviceInstance)
-            : throwError(new Error(`Data provider fetch function or item id ${ctx.data?.itemId} is missing.`)));
-        this.withSubmitFunction(ctx => ctx.dataProvider?.update && ctx.data?.itemId
-            ? ctx.dataProvider.update(ctx.data.itemId, ctx.data?.item, ctx.serviceInstance)
-            : throwError(new Error(`Data provider update function or item id ${ctx.data?.itemId} is missing.`)));
-        this.withIcon('pi pi-pencil');
-        this.withClassName('mng-details-dynamic-dialog');
-    }
-}
-class ActionDeleteDescriptor extends ActionDescriptor {
-    constructor(model) {
-        super(model, 'delete');
-        this.withPosition(ActionPositionEnum.RowInline);
-        this.withTitle(null);
-        this.withRunFunction(ctx => {
-            const editorDataProvider = ctx.dataProvider;
-            return editorDataProvider?.delete && ctx.data?.itemId
-                ? editorDataProvider.delete(ctx.data.itemId, ctx.data.item, ctx.serviceInstance)
-                : throwError(new Error(`Data provider delete function or item id ${ctx.data?.itemId} is missing.`));
-        });
-        this.withLevel(ActionLevelEnum.Danger);
-        this.withIcon('pi pi-trash');
-        this.withRunConfirmation(undefined);
-    }
-}
-var ActionPositionEnum;
-(function (ActionPositionEnum) {
-    ActionPositionEnum[ActionPositionEnum["ToolbarLeft"] = 0] = "ToolbarLeft";
-    ActionPositionEnum[ActionPositionEnum["ToolbarRight"] = 1] = "ToolbarRight";
-    ActionPositionEnum[ActionPositionEnum["TableHeader"] = 2] = "TableHeader";
-    ActionPositionEnum[ActionPositionEnum["RowInline"] = 3] = "RowInline";
-    ActionPositionEnum[ActionPositionEnum["RowClick"] = 4] = "RowClick";
-})(ActionPositionEnum || (ActionPositionEnum = {}));
-var ActionActivationTriggerEnum;
-(function (ActionActivationTriggerEnum) {
-    ActionActivationTriggerEnum[ActionActivationTriggerEnum["OnClick"] = 0] = "OnClick";
-    ActionActivationTriggerEnum[ActionActivationTriggerEnum["OnRoute"] = 1] = "OnRoute"; // action is triggered for activation by route url
-})(ActionActivationTriggerEnum || (ActionActivationTriggerEnum = {}));
-var ActionTypeEnum;
-(function (ActionTypeEnum) {
-    ActionTypeEnum[ActionTypeEnum["Direct"] = 0] = "Direct";
-    ActionTypeEnum[ActionTypeEnum["Editor"] = 1] = "Editor"; // editor providing middle step for activation
-})(ActionTypeEnum || (ActionTypeEnum = {}));
-var ActionLevelEnum;
-(function (ActionLevelEnum) {
-    ActionLevelEnum[ActionLevelEnum["Default"] = 0] = "Default";
-    ActionLevelEnum[ActionLevelEnum["Primary"] = 1] = "Primary";
-    ActionLevelEnum[ActionLevelEnum["Secondary"] = 2] = "Secondary";
-    ActionLevelEnum[ActionLevelEnum["Info"] = 3] = "Info";
-    ActionLevelEnum[ActionLevelEnum["Help"] = 4] = "Help";
-    ActionLevelEnum[ActionLevelEnum["Success"] = 5] = "Success";
-    ActionLevelEnum[ActionLevelEnum["Warning"] = 6] = "Warning";
-    ActionLevelEnum[ActionLevelEnum["Danger"] = 7] = "Danger";
-})(ActionLevelEnum || (ActionLevelEnum = {}));
-
-class MngFormEditorSubmitEvent {
-    constructor(formItem) {
-        this.formItem = formItem;
-        this.success = true;
-    }
-}
-var MngFormFieldEventTypeEnum;
-(function (MngFormFieldEventTypeEnum) {
-    MngFormFieldEventTypeEnum[MngFormFieldEventTypeEnum["Component"] = 0] = "Component";
-    MngFormFieldEventTypeEnum[MngFormFieldEventTypeEnum["ValueChange"] = 1] = "ValueChange";
-    MngFormFieldEventTypeEnum[MngFormFieldEventTypeEnum["DataProvider"] = 2] = "DataProvider";
-    MngFormFieldEventTypeEnum[MngFormFieldEventTypeEnum["Dialog"] = 3] = "Dialog";
-    MngFormFieldEventTypeEnum[MngFormFieldEventTypeEnum["Other"] = 4] = "Other";
-})(MngFormFieldEventTypeEnum || (MngFormFieldEventTypeEnum = {}));
-class MngFormFieldEventComponentSubtype {
-}
-MngFormFieldEventComponentSubtype.ON_INIT = 'Component.OnInit';
-MngFormFieldEventComponentSubtype.ON_VIEW_INIT = 'Component.OnViewInit';
-MngFormFieldEventComponentSubtype.ON_CONTENT_INIT = 'Component.OnContentInit';
-MngFormFieldEventComponentSubtype.ON_DESTROY = 'Component.OnDestroy';
-class MngFormFieldEventDialogSubtype {
-}
-MngFormFieldEventDialogSubtype.VISIBILITY = 'Dialog.Visibility';
-MngFormFieldEventDialogSubtype.TABLE_CAPTION_COMPONENT_INSTANCE = 'Dialog.MngTable.CaptionComponentInstance';
-MngFormFieldEventDialogSubtype.TABLE_COLUMN_ACTIONS_COMPONENT_INSTANCE = 'Dialog.MngTable.ColumnActionsComponentInstance';
-class MngFormFieldEvent {
-    constructor(type, componentType, componentInstance, data = {}) {
-        this.type = type;
-        this.componentType = componentType;
-        this.componentInstance = componentInstance;
-        this.data = data;
-    }
-}
-
-class DataProvider {
-    constructor(modelType, serviceType) {
-        this._modelType = modelType;
-        this._serviceType = serviceType;
-    }
-    get serviceType() {
-        return this._serviceType;
-    }
-    get modelType() {
-        return this._modelType;
-    }
-    withServiceType(type) {
-        this._serviceType = type;
-        return this;
-    }
-}
-
-class EditorDataProvider extends DataProvider {
-    constructor(modelType, serviceType) {
-        super(modelType, serviceType);
-        this._fetch = id => throwError(`No fetch function provided for id ${id}.`);
-    }
-    get fetch() {
-        return this._fetch;
-    }
-    get create() {
-        return this._create;
-    }
-    get update() {
-        return this._update;
-    }
-    get delete() {
-        return this._delete;
-    }
-    withFetch(fetch) {
-        this._fetch = fetch;
-        return this;
-    }
-    withCreate(create) {
-        this._create = create;
-        return this;
-    }
-    withUpdate(update) {
-        this._update = update;
-        return this;
-    }
-    withDelete(deleteFn) {
-        this._delete = deleteFn;
-        return this;
-    }
-}
-
-class LookupDataProvider extends DataProvider {
-    constructor(modelType, serviceType) {
-        super(modelType, serviceType);
-        this._lookup = () => of([]);
-    }
-    get lookup() {
-        return this._lookup;
-    }
-    withLookup(lookup) {
-        this._lookup = lookup;
+    withLookup(lookup) {
+        this._lookup = lookup;
         return this;
     }
 }
@@ -713,89 +351,597 @@ class MediusQueryParamBuilder {
         this.queryParam.itemsPerPage = itemsPerPage;
         return this;
     }
-    withItemsOffset(itemsOffset) {
-        this.queryParam.itemsOffset = itemsOffset;
-        return this;
+    withItemsOffset(itemsOffset) {
+        this.queryParam.itemsOffset = itemsOffset;
+        return this;
+    }
+    withSort(property, asc = true) {
+        if (!this.queryParam.sortProperty || !this.queryParam.sortAsc) {
+            this.queryParam.sortProperty = [];
+            this.queryParam.sortAsc = [];
+        }
+        this.queryParam.sortProperty.push(property);
+        this.queryParam.sortAsc.push(asc);
+        return this;
+    }
+    withFilter(property, value, valueTo = undefined, matchType = MediusFilterMatchType.Contains, matchCaseSensitive = false) {
+        if (!this.queryParam.filterParams) {
+            this.queryParam.filterParams = [];
+        }
+        const filterParam = new MediusFilterParam();
+        filterParam.property = property;
+        filterParam.filterValue = value;
+        filterParam.filterValueTo = valueTo;
+        filterParam.filterMatchType = matchType;
+        filterParam.filterMatchCaseSensitive = matchCaseSensitive;
+        this.queryParam.filterParams.push(filterParam);
+        return this;
+    }
+    build() {
+        const queryParam = this.queryParam;
+        this.queryParam = new MediusQueryParam();
+        return queryParam;
+    }
+}
+
+/* tslint:disable:no-angle-bracket-type-assertion no-trailing-whitespace member-ordering object-literal-key-quotes */
+const enumsMapBase = {
+    FilterMatchType: MediusFilterMatchType,
+    QueryMode: MediusQueryMode
+};
+const typeMapBase = {
+    FilterParam: MediusFilterParam,
+    QueryParam: MediusQueryParam,
+    QueryResult: MediusQueryResult,
+    QueryResultWithObject: MediusQueryResultWithObject
+};
+
+class TableDataProvider extends DataProvider {
+    constructor(modelType, serviceType) {
+        super(modelType, serviceType);
+        this._getAll = () => of(new MediusQueryResult());
+    }
+    get getAll() {
+        return this._getAll;
+    }
+    withGetAll(getAll) {
+        this._getAll = getAll;
+        return this;
+    }
+}
+
+class TableviewDataProvider extends EditorDataProvider {
+    constructor(modelType, serviceType) {
+        super(modelType, serviceType);
+        this._getAll = () => of(new MediusQueryResult());
+    }
+    get getAll() {
+        return this._getAll;
+    }
+    withGetAll(getAll) {
+        this._getAll = getAll;
+        return this;
+    }
+}
+
+class ActionDescriptor {
+    constructor(model, actionName, parentType, parentProperty) {
+        this._type = ActionTypeEnum.Direct;
+        this._activationTrigger = ActionActivationTriggerEnum.OnClick;
+        this._position = ActionPositionEnum.ToolbarRight;
+        this._level = ActionLevelEnum.Default;
+        this._routeUrl = null;
+        this._className = '';
+        this._size = ActionDescriptor.SizeEnum.Normal;
+        this._hasRunConfirmation = false;
+        this._hasRunNotificationSuccess = true;
+        this._hasRunNotificationError = true;
+        this._model = model;
+        this._actionName = actionName;
+        if ((parentType && !parentProperty) || (!parentProperty && parentProperty)) {
+            throw new Error(`Provide both the parent type and parent property or none: ${parentType}, ${parentProperty}.`);
+        }
+        this._parentType = parentType;
+        this._parentTypeName = parentType ? TypeUtil.findTypeName(parentType) : undefined;
+        this._parentProperty = parentProperty;
+        this._i18nModelActionBaseKey = this._parentTypeName
+            ? `${this._parentTypeName}.actions.${this._parentProperty}_${actionName}`
+            : `${this._model.typeName}.actions.${actionName}`;
+    }
+    get model() {
+        return this._model;
+    }
+    get parentTypeName() {
+        return this._parentTypeName;
+    }
+    get parentProperty() {
+        return this._parentProperty;
+    }
+    get i18nModelActionBaseKey() {
+        return this._i18nModelActionBaseKey;
+    }
+    get type() {
+        return this._type;
+    }
+    get activationTrigger() {
+        return this._activationTrigger;
+    }
+    get position() {
+        return this._position;
+    }
+    get level() {
+        return this._level;
+    }
+    get routeUrl() {
+        return this._routeUrl;
+    }
+    get title() {
+        return this._title;
+    }
+    get icon() {
+        return this._icon;
+    }
+    get tooltip() {
+        return this._tooltip;
+    }
+    get dataProvider() {
+        return this._dataProvider;
+    }
+    get hasRunFunction() {
+        return typeof this._runFunction === 'function';
+    }
+    get runFunction() {
+        if (!this._runFunction) {
+            throw new Error('Run function is not defined and cannot be invoked');
+        }
+        return this._runFunction;
+    }
+    get isVisibleFunction() {
+        return this._isVisibleFunction;
+    }
+    get isEnabledFunction() {
+        return this._isEnabledFunction;
+    }
+    get actionName() {
+        return this._actionName;
+    }
+    get className() {
+        return this._className;
+    }
+    get size() {
+        return this._size;
+    }
+    get isSizeExtraSmall() {
+        return this._size === ActionDescriptor.SizeEnum.ExtraSmall;
+    }
+    get isSizeSmall() {
+        return this._size === ActionDescriptor.SizeEnum.Small;
+    }
+    get isSizeLarge() {
+        return this._size === ActionDescriptor.SizeEnum.Large;
+    }
+    get isSizeExtraLarge() {
+        return this._size === ActionDescriptor.SizeEnum.ExtraLarge;
+    }
+    get hasRunConfirmation() {
+        return this._hasRunConfirmation;
+    }
+    get runConfirmationIcon() {
+        return this._runConfirmationIcon;
+    }
+    get runConfirmationTitle() {
+        return this._runConfirmationTitle;
+    }
+    get runConfirmationMessage() {
+        return this._runConfirmationMessage;
+    }
+    get runConfirmationAcceptTitle() {
+        return this._runConfirmationAcceptTitle;
+    }
+    get runConfirmationRejectTitle() {
+        return this._runConfirmationRejectTitle;
+    }
+    get hasRunNotificationSuccess() {
+        return this._hasRunNotificationSuccess;
+    }
+    get runNotificationSuccessTitle() {
+        return this._runNotificationSuccessTitle;
+    }
+    get runNotificationSuccessMessage() {
+        return this._runNotificationSuccessMessage;
+    }
+    get hasRunNotificationError() {
+        return this._hasRunNotificationError;
+    }
+    get runNotificationErrorTitle() {
+        return this._runNotificationErrorTitle;
+    }
+    get runNotificationErrorMessage() {
+        return this._runNotificationErrorMessage;
+    }
+    withDataProvider(dataProvider) {
+        this._dataProvider = dataProvider;
+        return this;
+    }
+    withServiceType(serviceType) {
+        this._dataProvider = new DataProvider(this._model.type, serviceType);
+        return this;
+    }
+    withRunFunction(fn) {
+        this._runFunction = fn;
+        return this;
+    }
+    withIsVisibleFunction(fn) {
+        this._isVisibleFunction = fn;
+        return this;
+    }
+    withIsEnabledFunction(fn) {
+        this._isEnabledFunction = fn;
+        return this;
+    }
+    withRouteTrigger(routeUrl) {
+        this._activationTrigger = ActionActivationTriggerEnum.OnRoute;
+        this._routeUrl = routeUrl;
+        return this;
+    }
+    withLevel(level) {
+        this._level = level;
+        return this;
+    }
+    /**
+     * Overrides default title key with model action key (${model.typeName}.actions.${actionName}). Not relevant if parentType name is provided.
+     */
+    withModelTitle() {
+        this._title = `${this._i18nModelActionBaseKey}.title`;
+        return this;
+    }
+    /**
+     * Overrides default title key (${actionName}.title). If null, no title will be shown.
+     * @param title Title i18n key or title.
+     */
+    withTitle(title) {
+        this._title = title;
+        return this;
+    }
+    withIcon(icon) {
+        this._icon = icon;
+        return this;
+    }
+    withTooltip(tooltip) {
+        this._title = tooltip;
+        return this;
+    }
+    withClassName(className) {
+        this._className = className;
+        return this;
+    }
+    withSize(size = ActionDescriptor.SizeEnum.Normal) {
+        this._size = size;
+        return this;
+    }
+    withPosition(position) {
+        this._position = position;
+        return this;
+    }
+    withRunConfirmation(icon = 'pi pi-exclamation-triangle', title, message, acceptTitle, rejectTitle) {
+        this._hasRunConfirmation = true;
+        this._runConfirmationIcon = icon;
+        this._runConfirmationTitle = title;
+        this._runConfirmationMessage = message;
+        this._runConfirmationAcceptTitle = acceptTitle;
+        this._runConfirmationRejectTitle = rejectTitle;
+        return this;
+    }
+    withRunNotificationSuccess(title, message, hasNotification = true) {
+        this._hasRunNotificationSuccess = hasNotification;
+        this._runNotificationSuccessTitle = title;
+        this._runNotificationSuccessMessage = message;
+    }
+    withRunNotificationError(title, message, hasNotification = true) {
+        this._hasRunNotificationError = hasNotification;
+        this._runNotificationErrorTitle = title;
+        this._runNotificationErrorMessage = message;
+    }
+}
+(function (ActionDescriptor) {
+    let SizeEnum;
+    (function (SizeEnum) {
+        SizeEnum[SizeEnum["ExtraSmall"] = 0] = "ExtraSmall";
+        SizeEnum[SizeEnum["Small"] = 1] = "Small";
+        SizeEnum[SizeEnum["Normal"] = 2] = "Normal";
+        SizeEnum[SizeEnum["Large"] = 3] = "Large";
+        SizeEnum[SizeEnum["ExtraLarge"] = 4] = "ExtraLarge";
+    })(SizeEnum = ActionDescriptor.SizeEnum || (ActionDescriptor.SizeEnum = {}));
+})(ActionDescriptor || (ActionDescriptor = {}));
+class ActionEditorDescriptor extends ActionDescriptor {
+    constructor(editorDescriptor, actionName, parentType, parentProperty) {
+        super(editorDescriptor.model, actionName, parentType, parentProperty);
+        this._editorActions = [];
+        this._editorTitle = undefined;
+        this._hasFetchNotificationSuccess = false;
+        this._type = ActionTypeEnum.Editor;
+        this._editorDescriptor = editorDescriptor;
+        this._editorActions.push(new ActionEditorSubmitDescriptor(this), new ActionEditorSubmitDescriptor(this, ActionEditorSubmitDescriptor.TypeEnum.Cancel));
+    }
+    get editorTitle() {
+        return this._editorTitle;
+    }
+    get editorDescriptor() {
+        return this._editorDescriptor;
+    }
+    get hasFetchNotificationSuccess() {
+        return this._hasFetchNotificationSuccess;
+    }
+    get fetchNotificationSuccessTitle() {
+        return this._fetchNotificationSuccessTitle;
+    }
+    get fetchNotificationSuccessMessage() {
+        return this._fetchNotificationSuccessMessage;
+    }
+    get dataProvider() {
+        return this._dataProvider;
+    }
+    get runFunction() {
+        throw new Error('Run function cannot be used in editor action. Use submit function instead!');
+    }
+    get fetchFunction() {
+        if (!this._fetchFunction) {
+            return ctx => {
+                console.warn(`Fetch function is not provided for function ${this._actionName}, using default and returning context item`, ctx.data?.item);
+                return of(ctx.data?.item ? ctx.data.item : {});
+            };
+        }
+        return this._fetchFunction;
+    }
+    get submitFunction() {
+        return this._submitFunction;
+    }
+    get editorActions() {
+        return this._editorActions;
+    }
+    get editorComponent() {
+        return this._editorComponent;
+    }
+    withEditorTitle(title) {
+        this._editorTitle = title;
+        return this;
+    }
+    withDataProvider(dataProvider) {
+        this._dataProvider = dataProvider;
+        return this;
+    }
+    withServiceType(serviceType) {
+        this._dataProvider = new EditorDataProvider(this._model.type, serviceType);
+        return this;
+    }
+    withRunFunction(fn) {
+        return this.withSubmitFunction(fn);
+    }
+    withFetchFunction(fn) {
+        this._fetchFunction = fn;
+        return this;
+    }
+    withSubmitFunction(fn) {
+        this._submitFunction = fn;
+        return this;
+    }
+    withFetchNotificationError(title, message, hasNotification = true) {
+        this._hasFetchNotificationSuccess = hasNotification;
+        this._fetchNotificationSuccessTitle = title;
+        this._fetchNotificationSuccessMessage = message;
+        return this;
+    }
+    withEditorAction(action) {
+        this._editorActions.push(action);
+        return this;
+    }
+    withEditorActions(actions) {
+        this._editorActions = actions;
+        return this;
+    }
+    withEditorComponent(editorComponent) {
+        this._editorComponent = editorComponent;
+        return this;
+    }
+}
+class ActionEditorSubmitDescriptor extends ActionDescriptor {
+    constructor(editorAction, submitType = ActionEditorSubmitDescriptor.TypeEnum.Submit) {
+        super(editorAction.model, submitType === ActionEditorSubmitDescriptor.TypeEnum.Submit ? 'submit' : 'cancel');
+        this._editorAction = editorAction;
+        this._submitType = submitType;
+        this._position = ActionPositionEnum.FooterRight;
+    }
+    get submitType() {
+        return this._submitType;
+    }
+}
+(function (ActionEditorSubmitDescriptor) {
+    let TypeEnum;
+    (function (TypeEnum) {
+        TypeEnum[TypeEnum["Submit"] = 0] = "Submit";
+        TypeEnum[TypeEnum["Cancel"] = 1] = "Cancel";
+    })(TypeEnum = ActionEditorSubmitDescriptor.TypeEnum || (ActionEditorSubmitDescriptor.TypeEnum = {}));
+})(ActionEditorSubmitDescriptor || (ActionEditorSubmitDescriptor = {}));
+class ActionEditorDetailsDescriptor extends ActionEditorDescriptor {
+    constructor(editorDescriptor) {
+        super(editorDescriptor, 'details');
+        this.withPosition(ActionPositionEnum.RowClick);
+        this.withRouteTrigger(':itemId');
+        this.withFetchFunction(ctx => ctx.dataProvider?.fetch && ctx.data?.itemId
+            ? ctx.dataProvider.fetch(ctx.data?.itemId, ctx.serviceInstance)
+            : throwError(new Error(`Data provider fetch function or item id ${ctx.data?.itemId} is missing.`)));
+        this.withEditorActions([new ActionEditorSubmitDescriptor(this, ActionEditorSubmitDescriptor.TypeEnum.Cancel)]);
+        this.withClassName('mng-details-dynamic-dialog');
+    }
+    withServiceType(serviceType) {
+        return this.withServiceFetchFunction(serviceType);
+    }
+    withServiceFetchFunction(serviceType, fetchFn) {
+        const dataProvider = new EditorDataProvider(this._model.type, serviceType);
+        if (fetchFn) {
+            dataProvider.withFetch(fetchFn);
+        }
+        this._dataProvider = dataProvider;
+        return this;
+    }
+}
+class ActionEditorAddDescriptor extends ActionEditorDescriptor {
+    constructor(editorDescriptor) {
+        super(editorDescriptor, 'add');
+        this.withPosition(ActionPositionEnum.ToolbarLeft);
+        this.withRouteTrigger('add');
+        this.withSubmitFunction(ctx => ctx.dataProvider?.create ? ctx.dataProvider.create(ctx.data?.item, ctx.serviceInstance) : throwError(new Error(`Data provider create function is missing.`)));
+        this.withLevel(ActionLevelEnum.Success);
+        this.withIcon('pi pi-plus');
+        this.withClassName('mng-details-dynamic-dialog');
+    }
+    withServiceType(serviceType) {
+        return this.withServiceSubmitFunction(serviceType);
+    }
+    withServiceSubmitFunction(serviceType, createFn, fetchFn) {
+        const dataProvider = new EditorDataProvider(this._model.type, serviceType);
+        if (createFn) {
+            dataProvider.withCreate(createFn);
+        }
+        if (fetchFn) {
+            dataProvider.withFetch(fetchFn);
+        }
+        this._dataProvider = dataProvider;
+        return this;
+    }
+}
+class ActionEditorEditDescriptor extends ActionEditorDescriptor {
+    constructor(editorDescriptor) {
+        super(editorDescriptor, 'edit');
+        this.withPosition(ActionPositionEnum.RowInline);
+        this.withTitle(null);
+        this.withRouteTrigger(':itemId/edit');
+        this.withFetchFunction(ctx => ctx.dataProvider?.fetch && ctx.data?.itemId
+            ? ctx.dataProvider.fetch(ctx.data.itemId, ctx.serviceInstance)
+            : throwError(new Error(`Data provider fetch function or item id ${ctx.data?.itemId} is missing.`)));
+        this.withSubmitFunction(ctx => ctx.dataProvider?.update && ctx.data?.itemId
+            ? ctx.dataProvider.update(ctx.data.itemId, ctx.data?.item, ctx.serviceInstance)
+            : throwError(new Error(`Data provider update function or item id ${ctx.data?.itemId} is missing.`)));
+        this.withIcon('pi pi-pencil');
+        this.withClassName('mng-details-dynamic-dialog');
+    }
+    withServiceType(serviceType) {
+        return this.withServiceSubmitFunction(serviceType);
     }
-    withSort(property, asc = true) {
-        if (!this.queryParam.sortProperty || !this.queryParam.sortAsc) {
-            this.queryParam.sortProperty = [];
-            this.queryParam.sortAsc = [];
+    withServiceSubmitFunction(serviceType, updateFn, fetchFn) {
+        const dataProvider = new EditorDataProvider(this._model.type, serviceType);
+        if (updateFn) {
+            dataProvider.withUpdate(updateFn);
         }
-        this.queryParam.sortProperty.push(property);
-        this.queryParam.sortAsc.push(asc);
-        return this;
-    }
-    withFilter(property, value, valueTo = undefined, matchType = MediusFilterMatchType.Contains, matchCaseSensitive = false) {
-        if (!this.queryParam.filterParams) {
-            this.queryParam.filterParams = [];
+        if (fetchFn) {
+            dataProvider.withFetch(fetchFn);
         }
-        const filterParam = new MediusFilterParam();
-        filterParam.property = property;
-        filterParam.filterValue = value;
-        filterParam.filterValueTo = valueTo;
-        filterParam.filterMatchType = matchType;
-        filterParam.filterMatchCaseSensitive = matchCaseSensitive;
-        this.queryParam.filterParams.push(filterParam);
+        this._dataProvider = dataProvider;
         return this;
     }
-    build() {
-        const queryParam = this.queryParam;
-        this.queryParam = new MediusQueryParam();
-        return queryParam;
-    }
 }
-
-/* tslint:disable:no-angle-bracket-type-assertion no-trailing-whitespace member-ordering object-literal-key-quotes */
-const enumsMapBase = {
-    FilterMatchType: MediusFilterMatchType,
-    QueryMode: MediusQueryMode
-};
-const typeMapBase = {
-    FilterParam: MediusFilterParam,
-    QueryParam: MediusQueryParam,
-    QueryResult: MediusQueryResult,
-    QueryResultWithObject: MediusQueryResultWithObject
-};
-
-class TableDataProvider extends DataProvider {
-    constructor(modelType, serviceType) {
-        super(modelType, serviceType);
-        this._getAll = () => of(new MediusQueryResult());
+class ActionDeleteDescriptor extends ActionDescriptor {
+    constructor(model) {
+        super(model, 'delete');
+        this.withPosition(ActionPositionEnum.RowInline);
+        this.withTitle(null);
+        this.withRunFunction(ctx => {
+            const editorDataProvider = ctx.dataProvider;
+            return editorDataProvider?.delete && ctx.data?.itemId
+                ? editorDataProvider.delete(ctx.data.itemId, ctx.data.item, ctx.serviceInstance)
+                : throwError(new Error(`Data provider delete function or item id ${ctx.data?.itemId} is missing.`));
+        });
+        this.withLevel(ActionLevelEnum.Danger);
+        this.withIcon('pi pi-trash');
+        this.withRunConfirmation(undefined);
     }
-    get getAll() {
-        return this._getAll;
+    withServiceType(serviceType) {
+        return this.withServiceDeleteFunction(serviceType);
     }
-    withGetAll(getAll) {
-        this._getAll = getAll;
+    withServiceDeleteFunction(serviceType, deleteFn) {
+        const dataProvider = new EditorDataProvider(this._model.type, serviceType);
+        if (deleteFn) {
+            dataProvider.withDelete(deleteFn);
+        }
+        this._dataProvider = dataProvider;
         return this;
     }
 }
+var ActionPositionEnum;
+(function (ActionPositionEnum) {
+    ActionPositionEnum[ActionPositionEnum["ToolbarLeft"] = 0] = "ToolbarLeft";
+    ActionPositionEnum[ActionPositionEnum["ToolbarRight"] = 1] = "ToolbarRight";
+    ActionPositionEnum[ActionPositionEnum["TableHeader"] = 2] = "TableHeader";
+    ActionPositionEnum[ActionPositionEnum["RowInline"] = 3] = "RowInline";
+    ActionPositionEnum[ActionPositionEnum["RowClick"] = 4] = "RowClick";
+    ActionPositionEnum[ActionPositionEnum["FooterLeft"] = 5] = "FooterLeft";
+    ActionPositionEnum[ActionPositionEnum["FooterRight"] = 6] = "FooterRight";
+})(ActionPositionEnum || (ActionPositionEnum = {}));
+var ActionActivationTriggerEnum;
+(function (ActionActivationTriggerEnum) {
+    ActionActivationTriggerEnum[ActionActivationTriggerEnum["OnClick"] = 0] = "OnClick";
+    ActionActivationTriggerEnum[ActionActivationTriggerEnum["OnRoute"] = 1] = "OnRoute"; // action is triggered for activation by route url
+})(ActionActivationTriggerEnum || (ActionActivationTriggerEnum = {}));
+var ActionTypeEnum;
+(function (ActionTypeEnum) {
+    ActionTypeEnum[ActionTypeEnum["Direct"] = 0] = "Direct";
+    ActionTypeEnum[ActionTypeEnum["Event"] = 1] = "Event";
+    ActionTypeEnum[ActionTypeEnum["Editor"] = 2] = "Editor"; // editor providing middle step for activation
+})(ActionTypeEnum || (ActionTypeEnum = {}));
+var ActionLevelEnum;
+(function (ActionLevelEnum) {
+    ActionLevelEnum[ActionLevelEnum["Default"] = 0] = "Default";
+    ActionLevelEnum[ActionLevelEnum["Primary"] = 1] = "Primary";
+    ActionLevelEnum[ActionLevelEnum["Secondary"] = 2] = "Secondary";
+    ActionLevelEnum[ActionLevelEnum["Info"] = 3] = "Info";
+    ActionLevelEnum[ActionLevelEnum["Help"] = 4] = "Help";
+    ActionLevelEnum[ActionLevelEnum["Success"] = 5] = "Success";
+    ActionLevelEnum[ActionLevelEnum["Warning"] = 6] = "Warning";
+    ActionLevelEnum[ActionLevelEnum["Danger"] = 7] = "Danger";
+})(ActionLevelEnum || (ActionLevelEnum = {}));
 
-class TableviewDataProvider extends EditorDataProvider {
-    constructor(modelType, serviceType) {
-        super(modelType, serviceType);
-        this._getAll = () => of(new MediusQueryResult());
-    }
-    get getAll() {
-        return this._getAll;
+class MngFormEditorSubmitEvent {
+    constructor(formItem) {
+        this.formItem = formItem;
+        this.success = true;
     }
-    withGetAll(getAll) {
-        this._getAll = getAll;
-        return this;
+}
+var MngFormFieldEventTypeEnum;
+(function (MngFormFieldEventTypeEnum) {
+    MngFormFieldEventTypeEnum[MngFormFieldEventTypeEnum["Component"] = 0] = "Component";
+    MngFormFieldEventTypeEnum[MngFormFieldEventTypeEnum["ValueChange"] = 1] = "ValueChange";
+    MngFormFieldEventTypeEnum[MngFormFieldEventTypeEnum["DataProvider"] = 2] = "DataProvider";
+    MngFormFieldEventTypeEnum[MngFormFieldEventTypeEnum["Dialog"] = 3] = "Dialog";
+    MngFormFieldEventTypeEnum[MngFormFieldEventTypeEnum["Other"] = 4] = "Other";
+})(MngFormFieldEventTypeEnum || (MngFormFieldEventTypeEnum = {}));
+class MngFormFieldEventComponentSubtype {
+}
+MngFormFieldEventComponentSubtype.ON_INIT = 'Component.OnInit';
+MngFormFieldEventComponentSubtype.ON_VIEW_INIT = 'Component.OnViewInit';
+MngFormFieldEventComponentSubtype.ON_CONTENT_INIT = 'Component.OnContentInit';
+MngFormFieldEventComponentSubtype.ON_DESTROY = 'Component.OnDestroy';
+class MngFormFieldEventDialogSubtype {
+}
+MngFormFieldEventDialogSubtype.VISIBILITY = 'Dialog.Visibility';
+MngFormFieldEventDialogSubtype.TABLE_CAPTION_COMPONENT_INSTANCE = 'Dialog.MngTable.CaptionComponentInstance';
+MngFormFieldEventDialogSubtype.TABLE_COLUMN_ACTIONS_COMPONENT_INSTANCE = 'Dialog.MngTable.ColumnActionsComponentInstance';
+class MngFormFieldEvent {
+    constructor(type, componentType, componentInstance, data = {}) {
+        this.type = type;
+        this.componentType = componentType;
+        this.componentInstance = componentInstance;
+        this.data = data;
     }
 }
 
 class EditorDescriptor {
-    constructor(modelType, idProperty, titleProperty) {
+    constructor(modelType, idProperty, titleProperty, tableviewEditorType = EditorDescriptor.TableviewEditorTypeEnum.None) {
         this._tabs = [];
         this._groups = [];
         this._fields = [];
         this._disabled = false;
         this._model = new ModelDescriptor(modelType, idProperty, titleProperty);
-    }
-    get disabled() {
-        return this._disabled;
+        this._tableviewEditorType = tableviewEditorType;
     }
     get model() {
         return this._model;
@@ -806,6 +952,12 @@ class EditorDescriptor {
     get fields() {
         return this._fields;
     }
+    get tableviewEditorType() {
+        return this._disabled;
+    }
+    get disabled() {
+        return this._disabled;
+    }
     createTabGroup(name, title) {
         const tabGroup = new FieldTabGroupDescriptor(this, name);
         if (!title) {
@@ -925,6 +1077,15 @@ class EditorDescriptor {
     }
 }
 EditorDescriptor.defaultGroupName = '_default';
+(function (EditorDescriptor) {
+    let TableviewEditorTypeEnum;
+    (function (TableviewEditorTypeEnum) {
+        TableviewEditorTypeEnum[TableviewEditorTypeEnum["None"] = 0] = "None";
+        TableviewEditorTypeEnum[TableviewEditorTypeEnum["View"] = 1] = "View";
+        TableviewEditorTypeEnum[TableviewEditorTypeEnum["Edit"] = 2] = "Edit";
+        TableviewEditorTypeEnum[TableviewEditorTypeEnum["Add"] = 3] = "Add";
+    })(TableviewEditorTypeEnum = EditorDescriptor.TableviewEditorTypeEnum || (EditorDescriptor.TableviewEditorTypeEnum = {}));
+})(EditorDescriptor || (EditorDescriptor = {}));
 class AGenericFieldDescriptor {
     constructor(editor) {
         this._config = {};
@@ -946,12 +1107,18 @@ class AFieldDescriptor extends AGenericFieldDescriptor {
         super(editor);
         this._required = false;
         this._disabled = false;
-        this._className = '';
         this._validators = [];
+        this._className = '';
+        this._labelClassName = '';
+        this._inputClassName = '';
+        this._size = FieldDescriptor.SizeEnum.Normal;
         this._eventsSubject = new Subject();
         this._property = property;
         this._label = I18nUtil.getModelPropertyKey(this._editor.model, property);
     }
+    get property() {
+        return this._property;
+    }
     get group() {
         return this._group;
     }
@@ -961,6 +1128,9 @@ class AFieldDescriptor extends AGenericFieldDescriptor {
     get placeholder() {
         return this._placeholder;
     }
+    get helpText() {
+        return this._helpText;
+    }
     get required() {
         return this._required;
     }
@@ -970,9 +1140,6 @@ class AFieldDescriptor extends AGenericFieldDescriptor {
     get defaultValue() {
         return this._defaultValue;
     }
-    get className() {
-        return this._className;
-    }
     get getter() {
         return this._getter;
     }
@@ -991,8 +1158,23 @@ class AFieldDescriptor extends AGenericFieldDescriptor {
     get hiddenExpression() {
         return this._hiddenExpression;
     }
-    get property() {
-        return this._property;
+    get className() {
+        return this._className;
+    }
+    get labelClassName() {
+        return this._labelClassName;
+    }
+    get inputClassName() {
+        return this._inputClassName;
+    }
+    get size() {
+        return this._size;
+    }
+    get isSizeSmall() {
+        return this._size === FieldDescriptor.SizeEnum.Small;
+    }
+    get isSizeLarge() {
+        return this._size === FieldDescriptor.SizeEnum.Large;
     }
     withLabel(label) {
         this._label = label;
@@ -1002,6 +1184,10 @@ class AFieldDescriptor extends AGenericFieldDescriptor {
         this._placeholder = placeholder;
         return this;
     }
+    withHelpText(helpText) {
+        this._helpText = helpText;
+        return this;
+    }
     withRequired(required = true, requiredExpression) {
         this._required = required;
         if (requiredExpression) {
@@ -1024,10 +1210,6 @@ class AFieldDescriptor extends AGenericFieldDescriptor {
         this._defaultValue = defaultValue;
         return this;
     }
-    withClassName(className) {
-        this._className = className;
-        return this;
-    }
     withGetter(getter) {
         this._getter = getter;
         return this;
@@ -1040,6 +1222,16 @@ class AFieldDescriptor extends AGenericFieldDescriptor {
         this._validators.push(new FieldValidator(name, expression, message));
         return this;
     }
+    withClassName(className, labelClassName = '', inputClassName = '') {
+        this._className = className;
+        this._labelClassName = labelClassName;
+        this._inputClassName = inputClassName;
+        return this;
+    }
+    withSize(size = FieldDescriptor.SizeEnum.Normal) {
+        this._size = size;
+        return this;
+    }
     nextEvent(type, cmpType, cmpInstance, data) {
         this._eventsSubject.next(new MngFormFieldEvent(type, cmpType, cmpInstance, data));
     }
@@ -1049,6 +1241,7 @@ class AFieldDescriptor extends AGenericFieldDescriptor {
     copyFieldsTo(obj) {
         obj._label = this._label;
         obj._placeholder = this._placeholder;
+        obj._helpText = this._helpText;
         obj._required = this._required;
         obj._disabled = this._disabled;
         obj._defaultValue = this._defaultValue;
@@ -1056,11 +1249,21 @@ class AFieldDescriptor extends AGenericFieldDescriptor {
         obj._hiddenExpression = this._hiddenExpression;
         obj._disabledExpression = this._disabledExpression;
         obj._className = this._className;
+        obj._size = this.size;
         obj._getter = this._getter;
         obj._setter = this._setter;
         obj._validators = this._validators;
     }
 }
+var FieldDescriptor;
+(function (FieldDescriptor) {
+    let SizeEnum;
+    (function (SizeEnum) {
+        SizeEnum[SizeEnum["Small"] = 0] = "Small";
+        SizeEnum[SizeEnum["Normal"] = 1] = "Normal";
+        SizeEnum[SizeEnum["Large"] = 2] = "Large";
+    })(SizeEnum = FieldDescriptor.SizeEnum || (FieldDescriptor.SizeEnum = {}));
+})(FieldDescriptor || (FieldDescriptor = {}));
 class FieldInputDescriptor extends AFieldDescriptor {
     constructor(editor, property) {
         super(editor, property);
@@ -1252,6 +1455,9 @@ class FieldLookupDescriptor extends AFieldDescriptor {
     get itemsValueProperty() {
         return this._itemsValueProperty;
     }
+    get itemsDisabledProperty() {
+        return this._itemsDisabledProperty;
+    }
     get dataKeyProperty() {
         return this._dataKeyProperty;
     }
@@ -1273,10 +1479,16 @@ class FieldLookupDescriptor extends AFieldDescriptor {
     }
     withItemsValueProperty(itemsValueProperty) {
         this._itemsValueProperty = itemsValueProperty;
+        this._dataKeyProperty = undefined;
+        return this;
+    }
+    withItemsDisabledProperty(itemsDisabledProperty) {
+        this._itemsDisabledProperty = itemsDisabledProperty;
         return this;
     }
     withDataKeyProperty(property) {
         this._dataKeyProperty = property;
+        this._itemsValueProperty = undefined;
         return this;
     }
     withLookup(lookup, serviceType) {
@@ -1311,6 +1523,7 @@ class FieldLookupDescriptor extends AFieldDescriptor {
         field._lookupType = this._lookupType;
         field._itemsLabelProperty = this._itemsLabelProperty;
         field._itemsValueProperty = this._itemsValueProperty;
+        field._itemsDisabledProperty = this._itemsDisabledProperty;
         field._dataKeyProperty = this._dataKeyProperty;
         field._dataProvider = this._dataProvider;
         field._lookupTableDescriptor = this._lookupTableDescriptor;
@@ -1328,27 +1541,43 @@ class FieldLookupDescriptor extends AFieldDescriptor {
 class FieldLookupEnumDescriptor extends FieldLookupDescriptor {
     constructor(editor, property, enumType, options, nameAsValue = false, optionsTitlePath) {
         super(editor, property, null);
+        this._nameAsValue = false;
         this._enumType = enumType;
+        this._nameAsValue = nameAsValue;
         if (typeof optionsTitlePath === 'undefined') {
             optionsTitlePath = TypeUtil.findEnumName(enumType);
         }
-        const optionEnumValues = Array.isArray(options)
+        this._optionEnumValues = Array.isArray(options)
             ? EnumUtil.fromValuesAsEnumValueArray(enumType, options, nameAsValue, optionsTitlePath ?? undefined)
             : EnumUtil.fromConstantsAsEnumValueArray(enumType, nameAsValue, optionsTitlePath ?? undefined);
-        const dataProvider = new LookupDataProvider(null).withLookup(() => of(optionEnumValues));
+        const dataProvider = new LookupDataProvider(null).withLookup(() => of(this._optionEnumValues));
         this.withLookupDataProvider(dataProvider);
         this.withItemsLabelProperty('title');
         this.withItemsValueProperty('value');
+        this.withItemsDisabledProperty('disabled');
     }
     get enumType() {
         return this._enumType;
     }
+    withDisabledOptions(...disabledOptions) {
+        for (const disabledOption of disabledOptions) {
+            const disabledOptionValue = this._nameAsValue ? EnumUtil.getConstantName(this._enumType, disabledOption) : disabledOption;
+            if (disabledOptionValue) {
+                const option = this._optionEnumValues.find(o => o.value === disabledOptionValue);
+                if (option) {
+                    option.disabled = true;
+                }
+            }
+        }
+        return this;
+    }
     copy() {
         const field = new FieldLookupEnumDescriptor(this._editor, this._property, this._enumType, []);
         this.copyFieldsTo(field);
         field._lookupType = this._lookupType;
         field._itemsLabelProperty = this._itemsLabelProperty;
         field._itemsValueProperty = this._itemsValueProperty;
+        field._itemsDisabledProperty = this._itemsDisabledProperty;
         field._dataKeyProperty = this._dataKeyProperty;
         field._dataProvider = this._dataProvider;
         return field;
@@ -1442,14 +1671,18 @@ class FieldManyEditorDescriptor extends AFieldDescriptor {
     constructor(editor, property, modelType, tableviewDescriptor) {
         super(editor, property);
         this._fieldType = FieldManyEditorDescriptor.TypeEnum.DialogEditor;
+        this._fieldActions = [];
         this._actions = [];
         this._modelType = modelType;
         this._tableviewDescriptor = tableviewDescriptor;
-        this._actions.push(FieldManyEditorDescriptor.ActionEnum.Add, FieldManyEditorDescriptor.ActionEnum.Edit, FieldManyEditorDescriptor.ActionEnum.Delete);
+        this._fieldActions.push(FieldManyEditorDescriptor.ActionEnum.View, FieldManyEditorDescriptor.ActionEnum.Add, FieldManyEditorDescriptor.ActionEnum.Edit, FieldManyEditorDescriptor.ActionEnum.Delete);
     }
     get fieldType() {
         return this._fieldType;
     }
+    get fieldActions() {
+        return this._fieldActions;
+    }
     get actions() {
         return this._actions;
     }
@@ -1468,15 +1701,23 @@ class FieldManyEditorDescriptor extends AFieldDescriptor {
     get editorForUpdate() {
         return this._tableviewDescriptor.editEditor;
     }
-    withActions(actions = []) {
-        this.actions.push(...actions);
+    withFieldAction(action) {
+        this._fieldActions.push(action);
+        return this;
+    }
+    withFieldActions(actions) {
+        this._fieldActions = actions;
+        return this;
+    }
+    withAction(action) {
+        this._actions.push(action);
         return this;
     }
     copy() {
         const field = new FieldManyEditorDescriptor(this._editor, this._property, this._modelType, this._tableviewDescriptor.copy());
         this.copyFieldsTo(field);
         field._fieldType = this._fieldType;
-        field._actions = this._actions.map(a => a);
+        field._fieldActions = this._fieldActions.map(a => a);
         return field;
     }
 }
@@ -1487,9 +1728,10 @@ class FieldManyEditorDescriptor extends AFieldDescriptor {
     })(TypeEnum = FieldManyEditorDescriptor.TypeEnum || (FieldManyEditorDescriptor.TypeEnum = {}));
     let ActionEnum;
     (function (ActionEnum) {
-        ActionEnum[ActionEnum["Add"] = 0] = "Add";
-        ActionEnum[ActionEnum["Edit"] = 1] = "Edit";
-        ActionEnum[ActionEnum["Delete"] = 2] = "Delete";
+        ActionEnum[ActionEnum["View"] = 0] = "View";
+        ActionEnum[ActionEnum["Add"] = 1] = "Add";
+        ActionEnum[ActionEnum["Edit"] = 2] = "Edit";
+        ActionEnum[ActionEnum["Delete"] = 3] = "Delete";
     })(ActionEnum = FieldManyEditorDescriptor.ActionEnum || (FieldManyEditorDescriptor.ActionEnum = {}));
 })(FieldManyEditorDescriptor || (FieldManyEditorDescriptor = {}));
 class AFieldGroupDescriptor extends AGenericFieldDescriptor {
@@ -1695,9 +1937,9 @@ class TableDescriptor {
         this.setDataKeyFromColumn();
         return column;
     }
-    addColumnBoolean(property) {
+    addColumnBoolean(property, yes, no, asIcon = false) {
         const column = new ColumnDescriptor(this, property);
-        column.asBoolean();
+        column.asBoolean(yes, no, asIcon);
         this._columns.push(column);
         this.setDataKeyFromColumn();
         return column;
@@ -1786,6 +2028,8 @@ class ColumnDescriptor {
         this._columnType = ColumnDescriptor.TypeEnum.String;
         this._isSortEnabled = false;
         this._enumNameAsValue = false;
+        // boolean specifics
+        this._booleanAsIcon = false;
         this._table = table;
         this._property = property;
     }
@@ -1825,6 +2069,15 @@ class ColumnDescriptor {
     get enumNameAsValue() {
         return this._enumNameAsValue;
     }
+    get booleanAsIcon() {
+        return this._booleanAsIcon;
+    }
+    get booleanYes() {
+        return this._booleanYes;
+    }
+    get booleanNo() {
+        return this._booleanNo;
+    }
     asType(type = ColumnDescriptor.TypeEnum.String) {
         this._columnType = type;
         return this;
@@ -1839,8 +2092,11 @@ class ColumnDescriptor {
         this._displayFormat = displayFormat;
         return this;
     }
-    asBoolean() {
+    asBoolean(yes, no, asIcon = false) {
         this._columnType = ColumnDescriptor.TypeEnum.Boolean;
+        this._booleanAsIcon = asIcon;
+        this._booleanYes = yes;
+        this._booleanNo = no;
         return this;
     }
     asEnum(enumType, nameAsValue = false, titlePath) {
@@ -1910,6 +2166,9 @@ class ColumnDescriptor {
         descriptor._isSortEnabled = this._isSortEnabled;
         descriptor._columnType = this._columnType;
         descriptor._filterDescriptor = this._filterDescriptor?.copy();
+        descriptor._booleanAsIcon = this._booleanAsIcon;
+        descriptor._booleanYes = this._booleanYes;
+        descriptor._booleanNo = this._booleanNo;
         return descriptor;
     }
 }
@@ -2131,14 +2390,15 @@ class FilterLookupEnumDescriptor extends FilterLookupDescriptor {
     })(LookupTypeEnum = FilterLookupDescriptor.LookupTypeEnum || (FilterLookupDescriptor.LookupTypeEnum = {}));
 })(FilterLookupDescriptor || (FilterLookupDescriptor = {}));
 
+var TableviewEditorTypeEnum = EditorDescriptor.TableviewEditorTypeEnum;
 class TableviewDescriptor {
     constructor(modelType, idProperty, titleProperty) {
         this._model = new ModelDescriptor(modelType, idProperty, titleProperty);
         this._table = new TableDescriptor(modelType, idProperty, titleProperty);
-        this._viewEditor = new EditorDescriptor(modelType, idProperty, titleProperty);
+        this._viewEditor = new EditorDescriptor(modelType, idProperty, titleProperty, TableviewEditorTypeEnum.View);
         this._viewEditor.withDisabled();
-        this._addEditor = new EditorDescriptor(modelType, idProperty, titleProperty);
-        this._editEditor = new EditorDescriptor(modelType, idProperty, titleProperty);
+        this._addEditor = new EditorDescriptor(modelType, idProperty, titleProperty, TableviewEditorTypeEnum.Add);
+        this._editEditor = new EditorDescriptor(modelType, idProperty, titleProperty, TableviewEditorTypeEnum.Edit);
         this._tableTitle = `${this._model.typeName}.name`;
     }
     get table() {
@@ -2197,8 +2457,8 @@ class TableviewDescriptor {
     addColumnDate(property, displayFormat) {
         return this._table.addColumnDate(property, displayFormat);
     }
-    addColumnBoolean(property) {
-        return this._table.addColumnBoolean(property);
+    addColumnBoolean(property, yes, no, asIcon = false) {
+        return this._table.addColumnBoolean(property, yes, no, asIcon);
     }
     addColumnEnum(property, enumType, nameAsValue = false, titlePath) {
         return this._table.addColumnEnum(property, enumType, nameAsValue, titlePath);
@@ -2592,6 +2852,34 @@ class I18nUtil {
         }
         return i18nParameters;
     }
+    static instantErrorI18nTranslation(translate, error, i18nParameters = {}) {
+        i18nParameters.errorStatus = '';
+        i18nParameters.errorMessage = '';
+        if (error.messageCode) {
+            const params = I18nUtil.getErrorI18nParams(error);
+            const keys = [`errors.${error.messageCode}`, `messages.${error.messageCode}`];
+            const i18ns = translate.instant(keys, params);
+            const i18n = I18nUtil.selectKeyByPriority(keys, i18ns);
+            if (i18n) {
+                return i18n;
+            }
+        }
+        return translate.instant(error.message);
+    }
+    static getErrorI18nParams(error, i18nParameters = {}) {
+        i18nParameters.errorStatus = '';
+        i18nParameters.errorMessage = '';
+        if (error.status) {
+            i18nParameters.errorStatus = error.status;
+        }
+        if (error.message) {
+            i18nParameters.errorMessage = error.message;
+        }
+        if (error.statusDescription) {
+            i18nParameters.errorStatusDescription = error.statusDescription;
+        }
+        return i18nParameters;
+    }
     static instantModelName(translate, model, singular) {
         const keys = I18nUtil.getModelNameKeys(model, singular);
         const i18n = translate.instant(keys);
@@ -2698,15 +2986,17 @@ class ModelUtil {
         }
         return titleAttribute?.name ?? null;
     }
-    static trySetLookupItemsProperties(lookup) {
+    static trySetLookupItemsProperties(lookup, idAsDataKey = true) {
         if (lookup.modelType) {
             if (!lookup.itemsValueProperty || !lookup.dataKeyProperty) {
                 const idProperty = ModelUtil.findIdAttribute(lookup.modelType) ?? undefined;
-                if (idProperty && !lookup.itemsValueProperty) {
-                    lookup.withItemsValueProperty(idProperty);
-                }
-                if (idProperty && !lookup.dataKeyProperty) {
-                    lookup.withDataKeyProperty(idProperty);
+                if (idProperty && !lookup.itemsValueProperty && !lookup.dataKeyProperty) {
+                    if (idAsDataKey) {
+                        lookup.withDataKeyProperty(idProperty);
+                    }
+                    else {
+                        lookup.withItemsValueProperty(idProperty);
+                    }
                 }
             }
             if (!lookup.itemsLabelProperty) {
@@ -2720,7 +3010,15 @@ class ModelUtil {
 }
 
 class ToastUtil {
-    static tableNotificationError(translationService, table, error, tableview) {
+    static notification(viewContainer, title, message, severity = 'success') {
+        const messageService = viewContainer?.getMessageService();
+        if (!messageService) {
+            console.warn(`No message service was provided through view container, message will not be displayed.`);
+            return;
+        }
+        messageService.add({ severity: severity, summary: title, detail: message, life: severity === 'error' ? 10000 : 5000 });
+    }
+    static tableNotificationError(translationService, table, error, viewContainer) {
         const params = {};
         if (error?.message) {
             params.errorMessage = `: ${error.message}`;
@@ -2731,25 +3029,21 @@ class ToastUtil {
         console.log(params);
         const tableErrorTitle = I18nUtil.instantModelTranslation(translationService, table.model, 'table.error.title', undefined, undefined, 'general.error', params) ?? undefined;
         const tableErrorMessage = I18nUtil.instantModelTranslation(translationService, table.model, 'table.error.message', undefined, undefined, 'general.errorMessage', params) ?? undefined;
-        tableview?.messageService?.add({ severity: 'error', summary: tableErrorTitle, detail: tableErrorMessage });
+        ToastUtil.notification(viewContainer, tableErrorTitle, tableErrorMessage, 'error');
     }
-    static actionNotificationSuccess(translationService, action, functionName, customTitleKey, customMessageKey, tableview, item) {
+    static actionNotificationSuccess(translationService, action, functionName, customTitleKey, customMessageKey, viewContainer, item) {
         const actionSuccessTitle = I18nUtil.instantActionTranslation(translationService, action, 'success.title', customTitleKey, item, 'general.success', functionName) ?? undefined;
         const actionSuccessMessage = I18nUtil.instantActionTranslation(translationService, action, 'success.message', customMessageKey, item, 'general.successMessage', functionName) ?? undefined;
-        tableview?.messageService?.add({ severity: 'success', summary: actionSuccessTitle, detail: actionSuccessMessage });
+        ToastUtil.notification(viewContainer, actionSuccessTitle, actionSuccessMessage);
     }
-    static actionNotificationError(translationService, action, error, functionName, tableview, item) {
-        const params = {};
-        if (error?.message) {
-            params.errorMessage = `: ${error.message}`;
-        }
-        else {
-            params.errorMessage = '.';
-        }
+    static actionNotificationError(translationService, action, error, functionName, viewContainer, item) {
+        const params = {
+            errorMessage: I18nUtil.instantErrorI18nTranslation(translationService, error)
+        };
         const actionErrorTitle = I18nUtil.instantActionTranslation(translationService, action, 'error.title', action.runNotificationErrorTitle, item, 'general.error', functionName, params) ??
             undefined;
         const actionErrorMessage = I18nUtil.instantActionTranslation(translationService, action, 'error.message', action.runNotificationErrorMessage, item, 'general.errorMessage', functionName, params) ?? undefined;
-        tableview?.messageService?.add({ severity: 'error', summary: actionErrorTitle, detail: actionErrorMessage });
+        ToastUtil.notification(viewContainer, actionErrorTitle, actionErrorMessage, 'error');
     }
     static getFormEditorWarningMessage(translationService, title, message) {
         const actionErrorTitle = translationService.instant(title) ?? undefined;
@@ -3005,7 +3299,12 @@ class ObjectSerializer {
             return transformedData;
         }
         else if (type === 'Date') {
-            return data.toISOString();
+            if (data instanceof Date) {
+                return data.toISOString();
+            }
+            else {
+                return new Date(data).toISOString();
+            }
         }
         else {
             if (this._enumMap[type]) {
@@ -3203,12 +3502,12 @@ MediusRestUtil.matchModeMapping = [
 ];
 
 class ActionExecContext {
-    constructor(dataProvider, serviceInstance, data, sourceComponent = null, tableview = null) {
+    constructor(dataProvider, serviceInstance, data, sourceComponent = null, viewContainer = null) {
         this.dataProvider = dataProvider;
         this.serviceInstance = serviceInstance;
         this.data = data;
         this.sourceComponent = sourceComponent;
-        this.tableview = tableview;
+        this.viewContainer = viewContainer;
     }
 }
 class ActionError {
@@ -3246,37 +3545,106 @@ class ActionTriggerResult {
         this.activationResult = activationResult;
         this.routerNavigation = routerNavigation;
     }
-    get runContext() {
-        return this.activationResult ? this.activationResult.runResult : null;
+    get runContext() {
+        return this.activationResult ? this.activationResult.runResult : null;
+    }
+    get result() {
+        return this.activationResult ? this.activationResult.result : null;
+    }
+    get error() {
+        return this.activationResult ? this.activationResult.error : null;
+    }
+    get dialogRef() {
+        return this.activationResult ? this.activationResult.dialogRef : null;
+    }
+}
+
+const MNG_BROWSER_STORAGE_IT = new InjectionToken('Browser storage', {
+    providedIn: 'root',
+    factory: () => localStorage
+});
+
+const ACTION_EDITOR_DIALOG_COMPONENT_SETTING = new InjectionToken('ACTION_EDITOR_DIALOG_COMPONENT_SETTING');
+
+const MNG_MODULE_CONFIG_IT = new InjectionToken('MngModuleConfig');
+
+class MngNavigationService {
+    constructor(router, location) {
+        this.router = router;
+        this.location = location;
+        this.history = [];
+        this.router.events.subscribe(event => {
+            if (event instanceof NavigationEnd) {
+                this.history.push(event.urlAfterRedirects);
+            }
+        });
+    }
+    getCurrentLocation() {
+        if (this.history.length > 0) {
+            return this.history[this.history.length - 1];
+        }
+        else {
+            return null;
+        }
     }
-    get result() {
-        return this.activationResult ? this.activationResult.result : null;
+    getPreviousLocation() {
+        if (this.history.length > 1) {
+            return this.history[this.history.length - 2];
+        }
+        else {
+            return null;
+        }
     }
-    get error() {
-        return this.activationResult ? this.activationResult.error : null;
+    back() {
+        this.history.pop();
+        if (this.history.length > 0) {
+            this.location.back();
+        }
+        else {
+            this.router.navigateByUrl('/');
+        }
     }
-    get dialogRef() {
-        return this.activationResult ? this.activationResult.dialogRef : null;
+}
+MngNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngNavigationService, deps: [{ token: i1.Router }, { token: i4.Location }], target: i0.ɵɵFactoryTarget.Injectable });
+MngNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngNavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngNavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i4.Location }]; } });
+
+class MngErrorMapperService {
+}
+class DefaultMngErrorMapperService extends MngErrorMapperService {
+    toMngError(error, mngError) {
+        if (!mngError) {
+            mngError = {
+                name: error?.name ?? 'UnknownError',
+                message: error.message ?? 'Unknown error'
+            };
+        }
+        return mngError;
     }
 }
 
-class MngActionService {
-    constructor(injector, router, dialogService, confirmationService, translate) {
+class MngActionExecutorService {
+    constructor(injector, router, dialogService, confirmationService, translate, navigationService, errorMapper, defaultEditorDialogComponent) {
         this.injector = injector;
         this.router = router;
         this.dialogService = dialogService;
         this.confirmationService = confirmationService;
         this.translate = translate;
+        this.navigationService = navigationService;
+        this.errorMapper = errorMapper;
+        this.defaultEditorDialogComponent = defaultEditorDialogComponent;
     }
-    getActionExecContext(action, itemId, item, dataProvider, tableview, sourceComponent, actionData) {
-        return new ActionExecContext(dataProvider, this.getDataProviderService(dataProvider) ?? undefined, {
+    prepareActionExecContext(action, itemId, item, dataProvider, viewContainer, sourceComponent, actionData) {
+        return new ActionExecContext(dataProvider ?? action.dataProvider ?? viewContainer?.getDataProvider(), this.getDataProviderService(dataProvider) ?? undefined, {
             item,
             itemId,
             actionData
-        }, sourceComponent, tableview);
+        }, sourceComponent, viewContainer);
     }
-    runAction(action, itemId, item, dataProvider, sourceComponent, tableview, actionData) {
-        const context = this.getActionExecContext(action, itemId, item, dataProvider, tableview, sourceComponent, actionData);
+    runAction(action, itemId, item, dataProvider, sourceComponent, viewContainer, actionData) {
+        const context = this.prepareActionExecContext(action, itemId, item, dataProvider, viewContainer, sourceComponent, actionData);
         if (action.hasRunConfirmation) {
             if (typeof sourceComponent?.getConfirmationService !== 'function' || typeof sourceComponent?.getConfirmationServiceInstanceKey !== 'function') {
                 throw Error(`Source component ${sourceComponent} should be implementing IConfirmationService interface to be able to provide confirmation functionality.`);
@@ -3314,17 +3682,19 @@ class MngActionService {
                         .runFunction(context)
                         .pipe(first(), map(res => new ActionRunResult(context, res)), map(value => {
                         if (action.hasRunNotificationSuccess) {
-                            ToastUtil.actionNotificationSuccess(this.translate, action, 'run', action.runNotificationSuccessTitle, action.runNotificationSuccessMessage, tableview, item);
+                            ToastUtil.actionNotificationSuccess(this.translate, action, 'run', action.runNotificationSuccessTitle, action.runNotificationSuccessMessage, viewContainer, item);
                         }
                         return value;
                     }), catchError(err => {
+                        const actionError = this.toMngActionError(err);
                         if (action.hasRunNotificationError) {
-                            ToastUtil.actionNotificationError(this.translate, action, err, 'run', tableview, item);
+                            ToastUtil.actionNotificationError(this.translate, action, actionError, 'run', viewContainer, item);
                         }
-                        throw err;
+                        throw actionError;
                     }))
                         .subscribe(res => {
                         observer.next(res);
+                        observer.complete();
                     });
                 };
                 confirmParams.reject = () => {
@@ -3337,14 +3707,15 @@ class MngActionService {
         else {
             return action.runFunction(context).pipe(map(res => new ActionRunResult(context, res)), map(value => {
                 if (action.hasRunNotificationSuccess) {
-                    ToastUtil.actionNotificationSuccess(this.translate, action, 'run', action.runNotificationSuccessTitle, action.runNotificationSuccessMessage, tableview, item);
+                    ToastUtil.actionNotificationSuccess(this.translate, action, 'run', action.runNotificationSuccessTitle, action.runNotificationSuccessMessage, viewContainer, item);
                 }
                 return value;
             }), catchError(err => {
+                const actionError = this.toMngActionError(err);
                 if (action.hasRunNotificationError) {
-                    ToastUtil.actionNotificationError(this.translate, action, err, 'run', tableview, item);
+                    ToastUtil.actionNotificationError(this.translate, action, actionError, 'run', viewContainer, item);
                 }
-                throw err;
+                throw actionError;
             }));
         }
     }
@@ -3356,57 +3727,69 @@ class MngActionService {
      * @param formItem Item instance (from form).
      * @param dataProvider Data provider
      * @param sourceComponent Source component from where the fetch function was called.
-     * @param tableview Tableview component.
+     * @param viewContainer View container/service.
      * @param actionData Additional action data.
      */
-    runEditorSave(action, itemId, formItem, dataProvider, sourceComponent, tableview, actionData) {
-        const context = this.prepareRunContextForEditor(formItem, itemId, dataProvider, sourceComponent, tableview, actionData);
+    runEditorSave(action, itemId, formItem, dataProvider, sourceComponent, viewContainer, actionData) {
+        const context = this.prepareExecContextForEditor(action, formItem, itemId, dataProvider, sourceComponent, viewContainer, actionData);
         if (typeof action.submitFunction !== 'function') {
             throw new Error(`Submit function for action ${action.actionName} cannot be invoked.`);
         }
         return action.submitFunction(context).pipe(map(res => new ActionRunResult(context, res)), map(value => {
             if (action.hasRunNotificationSuccess) {
-                ToastUtil.actionNotificationSuccess(this.translate, action, 'submit', action.runNotificationSuccessTitle, action.runNotificationSuccessMessage, tableview, formItem);
+                ToastUtil.actionNotificationSuccess(this.translate, action, 'submit', action.runNotificationSuccessTitle, action.runNotificationSuccessMessage, viewContainer, formItem);
             }
             return value;
         }), catchError(err => {
+            const actionError = this.toMngActionError(err);
             if (action.hasRunNotificationError) {
-                ToastUtil.actionNotificationError(this.translate, action, err, 'submit', tableview, formItem);
+                ToastUtil.actionNotificationError(this.translate, action, actionError, 'submit', viewContainer, formItem);
             }
-            throw err;
+            throw actionError;
         }));
     }
     /**
      * Runs editor action fetch function.
      *
      * @param action Action descriptor.
+     * @param item Item instance (if exists).
      * @param itemId Item id.
      * @param dataProvider Data provider
      * @param sourceComponent Source component from where the fetch function was called.
-     * @param tableview Tableview component.
+     * @param viewContainer View container/service. Tableview component.
      * @param actionData Additional action data.
      */
-    runEditorFetch(action, itemId, dataProvider, sourceComponent, tableview, actionData) {
-        const context = this.prepareRunContextForEditor(undefined, itemId, dataProvider, sourceComponent, tableview, actionData);
+    runEditorFetch(action, item, itemId, dataProvider, sourceComponent, viewContainer, actionData) {
+        const context = this.prepareExecContextForEditor(action, item, itemId, dataProvider, sourceComponent, viewContainer, actionData);
         return action.fetchFunction(context).pipe(map(res => new ActionRunResult(context, res)));
         // TODO: error handling
     }
     /**
-     * Prepares action run context for action of type editor.
+     * Prepares action exec context for action of type editor.
      *
      * @param item Item instance (if exists).
      * @param itemId Item id (if exists).
      * @param dataProvider Data provider.
      * @param sourceComponent Source component from where the context preparation was called.
-     * @param tableview Tableview component.
+     * @param viewContainer View container/service.
      * @param actionData Additional action data.
      */
-    prepareRunContextForEditor(item, itemId, dataProvider, sourceComponent, tableview, actionData) {
-        const context = new ActionExecContext(dataProvider, this.getDataProviderService(dataProvider) ?? undefined, {
+    prepareExecContextForEditor(action, item, itemId, dataProvider, sourceComponent, viewContainer, actionData) {
+        let ctxDataProvider = dataProvider;
+        if (!ctxDataProvider && action.dataProvider) {
+            ctxDataProvider = action.dataProvider;
+        }
+        if (!ctxDataProvider) {
+            const viewContainerDataProvider = viewContainer?.getDataProvider();
+            if (viewContainerDataProvider) {
+                ctxDataProvider = action.dataProvider;
+            }
+        }
+        const context = new ActionExecContext(ctxDataProvider, this.getDataProviderService(ctxDataProvider) ?? undefined, {
             item,
             itemId,
             actionData
-        }, sourceComponent, tableview);
+        }, sourceComponent, viewContainer);
         return context;
     }
     /**
@@ -3429,11 +3812,15 @@ class MngActionService {
      * @param item Item instance (if exists).
      * @param itemId Item id (if exists).
      * @param actionData Optional additional action data.
-     * @param tableview Tableview component.
+     * @param viewContainer View container component/service.
      * @param sourceComponent Source activation component.
      */
-    activateAction(action, itemId, item, actionData, tableview, sourceComponent) {
+    activateAction(action, itemId, item, actionData, viewContainer, sourceComponent) {
         if (action.type === ActionTypeEnum.Editor) {
+            let dialogComponent = this.defaultEditorDialogComponent;
+            if (action instanceof ActionEditorDescriptor && action.editorComponent) {
+                dialogComponent = action.editorComponent;
+            }
             const dialogConfig = {
                 data: {
                     action
@@ -3449,18 +3836,22 @@ class MngActionService {
             if (actionData) {
                 dialogConfig.data.actionData = actionData;
             }
-            if (tableview) {
-                dialogConfig.data.tableview = tableview;
+            if (viewContainer) {
+                dialogConfig.data.viewContainer = viewContainer;
             }
             if (sourceComponent) {
                 dialogConfig.data.sourceComponent = sourceComponent;
             }
-            const dialogRef = this.dialogService.open(MngActionDialogComponent, dialogConfig);
+            const dialogRef = this.dialogService.open(dialogComponent, dialogConfig);
             return of(new ActionActivationResult(undefined, dialogRef));
         }
+        else if (action.type === ActionTypeEnum.Event) {
+            // just emit event
+            return of(new ActionActivationResult(undefined));
+        }
         else {
             // directly execute action
-            return this.runAction(action, itemId, item, tableview?.dataProvider ?? undefined, sourceComponent, tableview, actionData).pipe(map(res => new ActionActivationResult(res)));
+            return this.runAction(action, itemId, item, undefined, sourceComponent, viewContainer, actionData).pipe(map(res => new ActionActivationResult(res)));
         }
     }
     /**
@@ -3484,7 +3875,7 @@ class MngActionService {
      * @param actionData Optional action data.
      * @param route Optional activated route.
      */
-    triggerAction(action, itemId, item, actionData, route, tableview, sourceComponent) {
+    triggerAction(action, itemId, item, actionData, route, viewContainer, sourceComponent) {
         if (action.activationTrigger === ActionActivationTriggerEnum.OnRoute) {
             const baseUrl = this.router.url.split('?')[0];
             const parsedUrl = this.router.parseUrl(this.router.url);
@@ -3511,15 +3902,57 @@ class MngActionService {
             return of(new ActionTriggerResult(undefined, from(this.router.navigate([baseUrl, ...actionUrlSegments], { relativeTo: route, queryParams: parsedUrl.queryParams }))));
         }
         else {
-            return this.activateAction(action, itemId, item, actionData, tableview, sourceComponent).pipe(map(res => new ActionTriggerResult(res)));
+            return this.activateAction(action, itemId, item, actionData, viewContainer, sourceComponent).pipe(map(res => new ActionTriggerResult(res)));
+        }
+    }
+    deactivateAction(action) {
+        if (this.navigationService.getPreviousLocation()) {
+            // there are internal history records, so back can be normally called
+            this.navigationService.back();
+        }
+        else {
+            // there is no internal history records, figure out the base url by eliminating action specific url
+            let url = this.navigationService.getCurrentLocation();
+            if (!url) {
+                this.navigationService.back();
+            }
+            else {
+                if (url.startsWith('/')) {
+                    url = url.substring(1);
+                }
+                const urlPathSegments = url.split('?')[0].split('#')[0].split('/');
+                let actionUrl = action?.routeUrl ?? '';
+                if (actionUrl.startsWith('/')) {
+                    actionUrl = actionUrl.substring(1);
+                }
+                const actionUrlSegments = actionUrl.split('/');
+                const redirectUrl = urlPathSegments.slice(0, urlPathSegments.length - actionUrlSegments.length).join('/');
+                this.router.navigateByUrl(`/${redirectUrl}`, { replaceUrl: true });
+            }
         }
     }
+    toMngActionError(error) {
+        const actionError = {
+            name: error?.name ?? 'UnknownError',
+            message: error?.message ?? 'Unknown error',
+            cause: error
+        };
+        if (error instanceof HttpErrorResponse) {
+            actionError.status = error.status;
+            actionError.statusDescription = error.statusText;
+            actionError.url = error.url ?? undefined;
+        }
+        return this.errorMapper.toMngError(error, actionError);
+    }
 }
-MngActionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionService, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i2.DialogService }, { token: i2$1.ConfirmationService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
-MngActionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionService, decorators: [{
+MngActionExecutorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionExecutorService, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i3.DialogService }, { token: i2.ConfirmationService }, { token: i3$1.TranslateService }, { token: MngNavigationService }, { token: MngErrorMapperService }, { token: ACTION_EDITOR_DIALOG_COMPONENT_SETTING }], target: i0.ɵɵFactoryTarget.Injectable });
+MngActionExecutorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionExecutorService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionExecutorService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Router }, { type: i2.DialogService }, { type: i2$1.ConfirmationService }, { type: i3.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Router }, { type: i3.DialogService }, { type: i2.ConfirmationService }, { type: i3$1.TranslateService }, { type: MngNavigationService }, { type: MngErrorMapperService }, { type: i0.Type, decorators: [{
+                    type: Inject,
+                    args: [ACTION_EDITOR_DIALOG_COMPONENT_SETTING]
+                }] }]; } });
 
 class MngConfigurationService {
     constructor(http) {
@@ -3597,13 +4030,6 @@ class MngConfigurationService {
 }
 MngConfigurationService._instance = null;
 
-const MNG_BROWSER_STORAGE_IT = new InjectionToken('Browser storage', {
-    providedIn: 'root',
-    factory: () => localStorage
-});
-
-const MNG_MODULE_CONFIG_IT = new InjectionToken('MngModuleConfig');
-
 class MngCommonsService {
     constructor(router, primengConfig, translate, titleService, configurationService, moduleConfig, localStorage) {
         this.router = router;
@@ -3926,11 +4352,11 @@ class MngCommonsService {
         return titlePieces.join(' - ');
     }
 }
-MngCommonsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngCommonsService, deps: [{ token: i1.Router }, { token: i2$1.PrimeNGConfig }, { token: i3.TranslateService }, { token: i4.Title }, { token: MngConfigurationService }, { token: MNG_MODULE_CONFIG_IT }, { token: MNG_BROWSER_STORAGE_IT }], target: i0.ɵɵFactoryTarget.Injectable });
+MngCommonsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngCommonsService, deps: [{ token: i1.Router }, { token: i2.PrimeNGConfig }, { token: i3$1.TranslateService }, { token: i4$1.Title }, { token: MngConfigurationService }, { token: MNG_MODULE_CONFIG_IT }, { token: MNG_BROWSER_STORAGE_IT }], target: i0.ɵɵFactoryTarget.Injectable });
 MngCommonsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngCommonsService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngCommonsService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i2$1.PrimeNGConfig }, { type: i3.TranslateService }, { type: i4.Title }, { type: MngConfigurationService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i2.PrimeNGConfig }, { type: i3$1.TranslateService }, { type: i4$1.Title }, { type: MngConfigurationService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MNG_MODULE_CONFIG_IT]
                 }] }, { type: Storage, decorators: [{
@@ -3938,81 +4364,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
                     args: [MNG_BROWSER_STORAGE_IT]
                 }] }]; } });
 
-class MngNavigationService {
-    constructor(router, location) {
-        this.router = router;
-        this.location = location;
-        this.history = [];
-        this.router.events.subscribe(event => {
-            if (event instanceof NavigationEnd) {
-                this.history.push(event.urlAfterRedirects);
-            }
-        });
-    }
-    getCurrentLocation() {
-        if (this.history.length > 0) {
-            return this.history[this.history.length - 1];
-        }
-        else {
-            return null;
-        }
-    }
-    getPreviousLocation() {
-        if (this.history.length > 1) {
-            return this.history[this.history.length - 2];
-        }
-        else {
-            return null;
-        }
-    }
-    back() {
-        this.history.pop();
-        if (this.history.length > 0) {
-            this.location.back();
-        }
-        else {
-            this.router.navigateByUrl('/');
-        }
-    }
-}
-MngNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngNavigationService, deps: [{ token: i1.Router }, { token: i4$1.Location }], target: i0.ɵɵFactoryTarget.Injectable });
-MngNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngNavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngNavigationService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i4$1.Location }]; } });
-
-class TableviewComponentService {
-    constructor() {
+/**
+ * Should be used with providers defined within component.
+ */
+class MngViewContainerComponentService {
+    constructor(messageService) {
+        this.messageService = messageService;
         this.actions = [];
         this._reloadTableSubject = new Subject();
     }
+    set dataProvider(dataProvider) {
+        this._dataProvider = dataProvider;
+    }
     get reloadTable$() {
         return this._reloadTableSubject.asObservable();
     }
     triggerTableReload(event) {
         this._reloadTableSubject.next(event);
     }
+    getMessageService() {
+        return this.messageService;
+    }
+    getDataProvider() {
+        return this._dataProvider;
+    }
 }
-TableviewComponentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: TableviewComponentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TableviewComponentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: TableviewComponentService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: TableviewComponentService, decorators: [{
+MngViewContainerComponentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngViewContainerComponentService, deps: [{ token: i2.MessageService }], target: i0.ɵɵFactoryTarget.Injectable });
+MngViewContainerComponentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngViewContainerComponentService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngViewContainerComponentService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: function () { return [{ type: i2.MessageService }]; } });
 
 class MngActionComponent {
-    constructor(route, translate, actionService, confirmationService, tableviewService) {
+    constructor(route, translate, actionExecutor, confirmationService, viewContainerService) {
         this.route = route;
         this.translate = translate;
-        this.actionService = actionService;
+        this.actionExecutor = actionExecutor;
         this.confirmationService = confirmationService;
-        this.tableviewService = tableviewService;
+        this.viewContainerService = viewContainerService;
+        this.inputDisabled = of(false);
+        this.inputLoading = of(false);
+        this.triggerEventEmitter = new EventEmitter();
         this.loadingSubject = new ReplaySubject(1);
         this.$loading = this.loadingSubject.asObservable();
         this.cmpId = Math.random().toString(36).substring(2);
         this.loadingSubject.next(false);
     }
     ngOnInit() {
-        const context = this.actionService.getActionExecContext(this.action, this.itemId, this.item, this.tableviewService?.dataProvider ?? undefined, this.tableviewService, this, this.actionData);
+        this.viewContainer = this.viewContainerInit ?? this.viewContainerService ?? undefined;
+        const context = this.actionExecutor.prepareActionExecContext(this.action, this.itemId, this.item, this.dataProvider, this.viewContainer ?? undefined, this, this.actionData);
         this.$isVisible = typeof this.action.isVisibleFunction === 'function' ? this.action.isVisibleFunction(context) : of(true);
         this.$isEnabled = typeof this.action.isEnabledFunction === 'function' ? this.action.isEnabledFunction(context) : of(true);
         this.$label = I18nUtil.streamActionTranslation(this.translate, this.action, 'title', this.action?.title ?? undefined, this.item);
@@ -4023,11 +4423,19 @@ class MngActionComponent {
         this.loadingSubject.next(true);
         const actionData = this.actionData ? this.actionData : {};
         actionData['cmpId'] = this.cmpId;
-        this.actionService
-            .triggerAction(this.action, this.itemId, this.item, actionData, this.route, this.tableviewService, this)
-            .pipe(first(), finalize(() => this.loadingSubject.next(false)))
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            .subscribe(() => { });
+        this.actionExecutor
+            .triggerAction(this.action, this.itemId, this.item, actionData, this.route, this.viewContainer, this)
+            .pipe(first())
+            .subscribe({
+            next: atr => {
+                this.triggerEventEmitter.next(atr);
+                this.loadingSubject.next(false);
+            },
+            error: err => {
+                console.error(`Error occurred while executing action ${this.action.actionName}.`, err);
+                this.loadingSubject.next(false);
+            }
+        });
     }
     getConfirmationService() {
         return this.confirmationService;
@@ -4036,12 +4444,14 @@ class MngActionComponent {
         return `${action.actionName}_${this.cmpId}`;
     }
 }
-MngActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionComponent, deps: [{ token: i1.ActivatedRoute }, { token: i3.TranslateService }, { token: MngActionService }, { token: i2$1.ConfirmationService }, { token: TableviewComponentService }], target: i0.ɵɵFactoryTarget.Component });
-MngActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngActionComponent, selector: "mng-action", inputs: { action: "action", item: "item", itemId: "itemId", actionData: "actionData" }, providers: [MessageService, ConfirmationService], ngImport: i0, template: "<ng-container *ngIf=\"$isVisible | async\">\n    <button\n        *ngIf=\"action.icon && action.title === null; else noIcon\"\n        type=\"button\"\n        pButton\n        pRipple\n        [icon]=\"action.icon\"\n        [loading]=\"($loading | async) ?? false\"\n        [disabled]=\"($isEnabled | async) === false\"\n        [pTooltip]=\"$any($tooltip | async)\"\n        (click)=\"triggerAction($event)\"\n        class=\"mng-action-button mng-action-button-icon p-button-rounded\"\n        [class.p-button-primary]=\"action.level === 1\"\n        [class.p-button-success]=\"action.level === 5\"\n        [class.p-button-danger]=\"action.level === 7\"></button>\n    <ng-template #noIcon>\n        <button\n            type=\"button\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.icon)\"\n            [label]=\"($label | async) ?? ''\"\n            [loading]=\"($loading | async) ?? false\"\n            [disabled]=\"($isEnabled | async) === false\"\n            [pTooltip]=\"$any($tooltip | async)\"\n            (click)=\"triggerAction($event)\"\n            class=\"mng-action-button p-button-text\"\n            [class.p-button-primary]=\"action.level === 1\"\n            [class.p-button-success]=\"action.level === 5\"\n            [class.p-button-danger]=\"action.level === 7\"></button>\n    </ng-template>\n    <p-confirmDialog *ngIf=\"action.hasRunConfirmation\" [key]=\"action.actionName + '_' + cmpId\" [baseZIndex]=\"50\" appendTo=\"body\"></p-confirmDialog>\n</ng-container>\n", components: [{ type: i6.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i9.Ripple, selector: "[pRipple]" }, { type: i10.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], pipes: { "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionComponent, deps: [{ token: i1.ActivatedRoute }, { token: i3$1.TranslateService }, { token: MngActionExecutorService }, { token: i2.ConfirmationService }, { token: MngViewContainerComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MngActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngActionComponent, selector: "mng-action", inputs: { action: "action", item: "item", itemId: "itemId", actionData: "actionData", dataProvider: "dataProvider", inputDisabled: ["disabled", "inputDisabled"], inputLoading: ["loading", "inputLoading"], viewContainerInit: ["viewContainer", "viewContainerInit"] }, outputs: { triggerEventEmitter: "trigger" }, providers: [ConfirmationService], ngImport: i0, template: "<ng-container *ngIf=\"$isVisible | async\">\n    <button\n        *ngIf=\"action.icon && action.title === null; else noIcon\"\n        type=\"button\"\n        pButton\n        pRipple\n        [icon]=\"action.icon\"\n        [loading]=\"(($loading | async) ?? false) || ((inputLoading | async) ?? false)\"\n        [disabled]=\"($isEnabled | async) === false && ((inputDisabled | async) ?? false)\"\n        [pTooltip]=\"$any($tooltip | async)\"\n        (click)=\"triggerAction($event)\"\n        class=\"mng-action-button mng-action-button-icon p-button-rounded\"\n        [class.mng-button-xs]=\"action.isSizeExtraSmall\"\n        [class.mng-button-sm]=\"action.isSizeSmall\"\n        [class.mng-button-lg]=\"action.isSizeLarge\"\n        [class.mng-button-xl]=\"action.isSizeExtraLarge\"\n        [class.p-button-primary]=\"action.level === 1\"\n        [class.p-button-success]=\"action.level === 5\"\n        [class.p-button-danger]=\"action.level === 7\"></button>\n    <ng-template #noIcon>\n        <button\n            type=\"button\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.icon)\"\n            [label]=\"($label | async) ?? ''\"\n            [loading]=\"(($loading | async) ?? false) || ((inputLoading | async) ?? false)\"\n            [disabled]=\"($isEnabled | async) === false && ((inputDisabled | async) ?? false)\"\n            [pTooltip]=\"$any($tooltip | async)\"\n            (click)=\"triggerAction($event)\"\n            class=\"mng-action-button p-button-text\"\n            [class.p-button-sm]=\"action.isSizeSmall\"\n            [class.p-button-lg]=\"action.isSizeLarge\"\n            [class.p-button-primary]=\"action.level === 1\"\n            [class.p-button-success]=\"action.level === 5\"\n            [class.p-button-danger]=\"action.level === 7\"></button>\n    </ng-template>\n    <p-confirmDialog *ngIf=\"action.hasRunConfirmation\" [key]=\"action.actionName + '_' + cmpId\" [baseZIndex]=\"50\" appendTo=\"body\"></p-confirmDialog>\n</ng-container>\n", components: [{ type: i5.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }], directives: [{ 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: i9.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-action', changeDetection: ChangeDetectionStrategy.OnPush, providers: [MessageService, ConfirmationService], template: "<ng-container *ngIf=\"$isVisible | async\">\n    <button\n        *ngIf=\"action.icon && action.title === null; else noIcon\"\n        type=\"button\"\n        pButton\n        pRipple\n        [icon]=\"action.icon\"\n        [loading]=\"($loading | async) ?? false\"\n        [disabled]=\"($isEnabled | async) === false\"\n        [pTooltip]=\"$any($tooltip | async)\"\n        (click)=\"triggerAction($event)\"\n        class=\"mng-action-button mng-action-button-icon p-button-rounded\"\n        [class.p-button-primary]=\"action.level === 1\"\n        [class.p-button-success]=\"action.level === 5\"\n        [class.p-button-danger]=\"action.level === 7\"></button>\n    <ng-template #noIcon>\n        <button\n            type=\"button\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.icon)\"\n            [label]=\"($label | async) ?? ''\"\n            [loading]=\"($loading | async) ?? false\"\n            [disabled]=\"($isEnabled | async) === false\"\n            [pTooltip]=\"$any($tooltip | async)\"\n            (click)=\"triggerAction($event)\"\n            class=\"mng-action-button p-button-text\"\n            [class.p-button-primary]=\"action.level === 1\"\n            [class.p-button-success]=\"action.level === 5\"\n            [class.p-button-danger]=\"action.level === 7\"></button>\n    </ng-template>\n    <p-confirmDialog *ngIf=\"action.hasRunConfirmation\" [key]=\"action.actionName + '_' + cmpId\" [baseZIndex]=\"50\" appendTo=\"body\"></p-confirmDialog>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i3.TranslateService }, { type: MngActionService }, { type: i2$1.ConfirmationService }, { type: TableviewComponentService }]; }, propDecorators: { action: [{
+            args: [{ selector: 'mng-action', changeDetection: ChangeDetectionStrategy.OnPush, providers: [ConfirmationService], template: "<ng-container *ngIf=\"$isVisible | async\">\n    <button\n        *ngIf=\"action.icon && action.title === null; else noIcon\"\n        type=\"button\"\n        pButton\n        pRipple\n        [icon]=\"action.icon\"\n        [loading]=\"(($loading | async) ?? false) || ((inputLoading | async) ?? false)\"\n        [disabled]=\"($isEnabled | async) === false && ((inputDisabled | async) ?? false)\"\n        [pTooltip]=\"$any($tooltip | async)\"\n        (click)=\"triggerAction($event)\"\n        class=\"mng-action-button mng-action-button-icon p-button-rounded\"\n        [class.mng-button-xs]=\"action.isSizeExtraSmall\"\n        [class.mng-button-sm]=\"action.isSizeSmall\"\n        [class.mng-button-lg]=\"action.isSizeLarge\"\n        [class.mng-button-xl]=\"action.isSizeExtraLarge\"\n        [class.p-button-primary]=\"action.level === 1\"\n        [class.p-button-success]=\"action.level === 5\"\n        [class.p-button-danger]=\"action.level === 7\"></button>\n    <ng-template #noIcon>\n        <button\n            type=\"button\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.icon)\"\n            [label]=\"($label | async) ?? ''\"\n            [loading]=\"(($loading | async) ?? false) || ((inputLoading | async) ?? false)\"\n            [disabled]=\"($isEnabled | async) === false && ((inputDisabled | async) ?? false)\"\n            [pTooltip]=\"$any($tooltip | async)\"\n            (click)=\"triggerAction($event)\"\n            class=\"mng-action-button p-button-text\"\n            [class.p-button-sm]=\"action.isSizeSmall\"\n            [class.p-button-lg]=\"action.isSizeLarge\"\n            [class.p-button-primary]=\"action.level === 1\"\n            [class.p-button-success]=\"action.level === 5\"\n            [class.p-button-danger]=\"action.level === 7\"></button>\n    </ng-template>\n    <p-confirmDialog *ngIf=\"action.hasRunConfirmation\" [key]=\"action.actionName + '_' + cmpId\" [baseZIndex]=\"50\" appendTo=\"body\"></p-confirmDialog>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i3$1.TranslateService }, { type: MngActionExecutorService }, { type: i2.ConfirmationService }, { type: MngViewContainerComponentService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { action: [{
                 type: Input
             }], item: [{
                 type: Input
@@ -4049,22 +4459,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
                 type: Input
             }], actionData: [{
                 type: Input
+            }], dataProvider: [{
+                type: Input
+            }], inputDisabled: [{
+                type: Input,
+                args: ['disabled']
+            }], inputLoading: [{
+                type: Input,
+                args: ['loading']
+            }], viewContainerInit: [{
+                type: Input,
+                args: ['viewContainer']
+            }], triggerEventEmitter: [{
+                type: Output,
+                args: ['trigger']
             }] } });
 
 class MngActionRouteComponent {
-    constructor(router, route, confirmationService, navigationService, actionService, tableviewService) {
+    constructor(router, route, confirmationService, navigationService, actionExecutor, viewContainerService) {
         this.router = router;
         this.route = route;
         this.confirmationService = confirmationService;
         this.navigationService = navigationService;
-        this.actionService = actionService;
-        this.tableviewService = tableviewService;
+        this.actionExecutor = actionExecutor;
+        this.viewContainerService = viewContainerService;
         this.cmpId = Math.random().toString(36).substring(2);
         this.actions = [];
         this.subscriptions = [];
     }
     ngOnInit() {
-        this.actions = this.tableviewService?.actions.filter(a => a.activationTrigger === ActionActivationTriggerEnum.OnRoute) ?? [];
+        this.actions = this.viewContainerService?.actions.filter(a => a.activationTrigger === ActionActivationTriggerEnum.OnRoute) ?? [];
         const subscription = this.route.params.subscribe(p => {
             const action = this.findActiveAction(p);
             if (action) {
@@ -4099,8 +4523,8 @@ class MngActionRouteComponent {
         for (const key in qp) {
             actionData[key] = p[key];
         }
-        this.actionService
-            .activateAction(action, itemId, undefined, actionData, this.tableviewService, this)
+        this.actionExecutor
+            .activateAction(action, itemId, undefined, actionData, this.viewContainerService ?? undefined, this)
             .pipe(first())
             .subscribe(res => {
             if (res.dialogRef) {
@@ -4108,7 +4532,10 @@ class MngActionRouteComponent {
                 this.dialogCloseSubscription = this.dialogRef?.onClose.subscribe(e => {
                     const actionEv = e;
                     if (!actionEv?.error || !actionEv?.error?.dismissed) {
-                        this.tableviewService.triggerTableReload(actionEv); // reload only if no error in action and
+                        if (!this.viewContainerService) {
+                            console.warn(`View container service could not be found, table reload will not be triggered.`);
+                        }
+                        this.viewContainerService?.triggerTableReload(actionEv); // reload only if no error in action and
                     }
                     this.deactivateAction();
                 });
@@ -4120,30 +4547,7 @@ class MngActionRouteComponent {
             this.dialogCloseSubscription.unsubscribe();
             this.dialogCloseSubscription = undefined;
         }
-        if (this.navigationService.getPreviousLocation()) {
-            // there are internal history records, so back can be normally called
-            this.navigationService.back();
-        }
-        else {
-            // there is no internal history records, figure out the base url by eliminating action specific url
-            let url = this.navigationService.getCurrentLocation();
-            if (!url) {
-                this.navigationService.back();
-            }
-            else {
-                if (url.startsWith('/')) {
-                    url = url.substring(1);
-                }
-                const urlPathSegments = url.split('?')[0].split('#')[0].split('/');
-                let actionUrl = this.activeAction?.routeUrl ?? '';
-                if (actionUrl.startsWith('/')) {
-                    actionUrl = actionUrl.substring(1);
-                }
-                const actionUrlSegments = actionUrl.split('/');
-                const redirectUrl = urlPathSegments.slice(0, urlPathSegments.length - actionUrlSegments.length).join('/');
-                this.router.navigateByUrl(`/${redirectUrl}`, { replaceUrl: true });
-            }
-        }
+        this.actionExecutor.deactivateAction(this.activeAction);
         this.activeAction = undefined;
         this.dialogRef = undefined;
     }
@@ -4180,12 +4584,14 @@ class MngActionRouteComponent {
         return null;
     }
 }
-MngActionRouteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionRouteComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2$1.ConfirmationService }, { token: MngNavigationService }, { token: MngActionService }, { token: TableviewComponentService }], target: i0.ɵɵFactoryTarget.Component });
-MngActionRouteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngActionRouteComponent, selector: "mng-action-route", providers: [MessageService, ConfirmationService], ngImport: i0, template: "<p-confirmDialog [key]=\"'actionRoute_' + cmpId\" [baseZIndex]=\"50\" appendTo=\"body\"></p-confirmDialog>\n", components: [{ type: i6.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngActionRouteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionRouteComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.ConfirmationService }, { token: MngNavigationService }, { token: MngActionExecutorService }, { token: MngViewContainerComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MngActionRouteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngActionRouteComponent, selector: "mng-action-route", providers: [MessageService, ConfirmationService], ngImport: i0, template: "<p-confirmDialog [key]=\"'actionRoute_' + cmpId\" [baseZIndex]=\"50\" appendTo=\"body\"></p-confirmDialog>\n", components: [{ type: i5.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionRouteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-action-route', changeDetection: ChangeDetectionStrategy.OnPush, providers: [MessageService, ConfirmationService], template: "<p-confirmDialog [key]=\"'actionRoute_' + cmpId\" [baseZIndex]=\"50\" appendTo=\"body\"></p-confirmDialog>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2$1.ConfirmationService }, { type: MngNavigationService }, { type: MngActionService }, { type: TableviewComponentService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.ConfirmationService }, { type: MngNavigationService }, { type: MngActionExecutorService }, { type: MngViewContainerComponentService, decorators: [{
+                    type: Optional
+                }] }]; } });
 
 class MngComponentDirective {
     constructor(viewContainerRef) {
@@ -4343,7 +4749,7 @@ class MngFormEditorComponent {
         }
         let nextControl = null;
         if (control instanceof FormGroup) {
-            const nextField = control.get(keyPath[0]);
+            nextControl = control.get(keyPath[0]);
         }
         else if (control instanceof FormArray) {
             const idx = +keyPath[0];
@@ -4390,12 +4796,12 @@ class MngFormEditorComponent {
         this.formOptions.formState.disabled = this.isFormDisabled !== null ? this.isFormDisabled === true : this.descriptor.disabled;
     }
 }
-MngFormEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormEditorComponent, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-MngFormEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormEditorComponent, selector: "mng-form-editor", inputs: { descriptor: "descriptor", submitLoading: "submitLoading", item: "item", isSubmitButtonVisible: "isSubmitButtonVisible", isFormDisabled: "isFormDisabled" }, outputs: { formSubmitEventEmitter: "formSubmit" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "submitButtonElementRef", first: true, predicate: ["submitButton"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit($event)\">\n    <formly-form [form]=\"form\" [fields]=\"formFields\" [options]=\"formOptions\" [model]=\"formModel\"></formly-form>\n    <button #submitButton pButton type=\"submit\" [class.hidden]=\"!isSubmitButtonVisible\" [disabled]=\"form.disabled\" [loading]=\"(submitLoading$ | async) ?? false\"></button>\n</form>\n<p-messages [value]=\"formMessages\" [enableService]=\"false\"></p-messages>\n", components: [{ type: i3$1.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { type: i3$2.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }], directives: [{ type: i4$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }], pipes: { "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormEditorComponent, deps: [{ token: i3$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+MngFormEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormEditorComponent, selector: "mng-form-editor", inputs: { descriptor: "descriptor", submitLoading: "submitLoading", item: "item", isSubmitButtonVisible: "isSubmitButtonVisible", isFormDisabled: "isFormDisabled" }, outputs: { formSubmitEventEmitter: "formSubmit" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "submitButtonElementRef", first: true, predicate: ["submitButton"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit($event)\">\n    <formly-form [form]=\"form\" [fields]=\"formFields\" [options]=\"formOptions\" [model]=\"formModel\"></formly-form>\n    <button #submitButton pButton type=\"submit\" [class.hidden]=\"!isSubmitButtonVisible\" [disabled]=\"form.disabled\" [loading]=\"(submitLoading$ | async) ?? false\"></button>\n</form>\n<p-messages [value]=\"formMessages\" [enableService]=\"false\"></p-messages>\n", components: [{ type: i3$2.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { type: i3$3.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }], directives: [{ type: i4$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-form-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit($event)\">\n    <formly-form [form]=\"form\" [fields]=\"formFields\" [options]=\"formOptions\" [model]=\"formModel\"></formly-form>\n    <button #submitButton pButton type=\"submit\" [class.hidden]=\"!isSubmitButtonVisible\" [disabled]=\"form.disabled\" [loading]=\"(submitLoading$ | async) ?? false\"></button>\n</form>\n<p-messages [value]=\"formMessages\" [enableService]=\"false\"></p-messages>\n" }]
-        }], ctorParameters: function () { return [{ type: i3.TranslateService }]; }, propDecorators: { descriptor: [{
+        }], ctorParameters: function () { return [{ type: i3$1.TranslateService }]; }, propDecorators: { descriptor: [{
                 type: Input
             }], submitLoading: [{
                 type: Input
@@ -4495,7 +4901,7 @@ class MngAutocompleteComponent {
     }
 }
 MngAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngAutocompleteComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-MngAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: { dataProvider: "dataProvider", dataKeyProperty: "dataKeyProperty", itemsLabelProperty: "itemsLabelProperty", multiselect: "multiselect", placeholder: "placeholder", className: "className", dropdownClassName: "dropdownClassName" }, outputs: { valueChangeEventEmitter: "valueChange" }, providers: [MNG_AUTOCOMPLETE_VALUE_ACCESSOR], viewQueries: [{ propertyName: "primeAutocomplete", first: true, predicate: AutoComplete, descendants: true }], ngImport: i0, template: "<p-autoComplete\n    [formControl]=\"autocompleteFormControl\"\n    [placeholder]=\"$any(placeholder)\"\n    [dropdown]=\"true\"\n    [dataKey]=\"$any(dataKeyProperty)\"\n    [field]=\"$any(itemsLabelProperty)\"\n    [suggestions]=\"(suggestions$ | async) ?? []\"\n    [multiple]=\"multiselect\"\n    [showEmptyMessage]=\"true\"\n    [emptyMessage]=\"'mngAutocomplete.noMatches' | translate\"\n    [styleClass]=\"$any(className)\"\n    [panelStyleClass]=\"$any(dropdownClassName)\"\n    (completeMethod)=\"onSearch($event)\"\n    (onSelect)=\"onSelect($event)\"\n    appendTo=\"body\"\n    dropdownMode=\"current\">\n</p-autoComplete>\n", components: [{ type: i1$1.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "virtualScroll", "itemSize", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "field", "scrollHeight", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "suggestions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide"] }], directives: [{ type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i3.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: { dataProvider: "dataProvider", dataKeyProperty: "dataKeyProperty", itemsLabelProperty: "itemsLabelProperty", multiselect: "multiselect", placeholder: "placeholder", className: "className", dropdownClassName: "dropdownClassName" }, outputs: { valueChangeEventEmitter: "valueChange" }, providers: [MNG_AUTOCOMPLETE_VALUE_ACCESSOR], viewQueries: [{ propertyName: "primeAutocomplete", first: true, predicate: AutoComplete, descendants: true }], ngImport: i0, template: "<p-autoComplete\n    [formControl]=\"autocompleteFormControl\"\n    [placeholder]=\"$any(placeholder)\"\n    [dropdown]=\"true\"\n    [dataKey]=\"$any(dataKeyProperty)\"\n    [field]=\"$any(itemsLabelProperty)\"\n    [suggestions]=\"(suggestions$ | async) ?? []\"\n    [multiple]=\"multiselect\"\n    [showEmptyMessage]=\"true\"\n    [emptyMessage]=\"'mngAutocomplete.noMatches' | translate\"\n    [styleClass]=\"$any(className)\"\n    [panelStyleClass]=\"$any(dropdownClassName)\"\n    (completeMethod)=\"onSearch($event)\"\n    (onSelect)=\"onSelect($event)\"\n    appendTo=\"body\"\n    dropdownMode=\"current\">\n</p-autoComplete>\n", components: [{ type: i1$1.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "virtualScroll", "itemSize", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "field", "scrollHeight", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "suggestions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide"] }], directives: [{ type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i4.AsyncPipe, "translate": i3$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-autocomplete', providers: [MNG_AUTOCOMPLETE_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-autoComplete\n    [formControl]=\"autocompleteFormControl\"\n    [placeholder]=\"$any(placeholder)\"\n    [dropdown]=\"true\"\n    [dataKey]=\"$any(dataKeyProperty)\"\n    [field]=\"$any(itemsLabelProperty)\"\n    [suggestions]=\"(suggestions$ | async) ?? []\"\n    [multiple]=\"multiselect\"\n    [showEmptyMessage]=\"true\"\n    [emptyMessage]=\"'mngAutocomplete.noMatches' | translate\"\n    [styleClass]=\"$any(className)\"\n    [panelStyleClass]=\"$any(dropdownClassName)\"\n    (completeMethod)=\"onSearch($event)\"\n    (onSelect)=\"onSelect($event)\"\n    appendTo=\"body\"\n    dropdownMode=\"current\">\n</p-autoComplete>\n" }]
@@ -4588,10 +4994,10 @@ class MngDropdownComponent {
     }
 }
 MngDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngDropdownComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-MngDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngDropdownComponent, selector: "mng-dropdown", inputs: { dataProvider: "dataProvider", dataKeyProperty: "dataKeyProperty", itemsLabelProperty: "itemsLabelProperty", itemsValueProperty: "itemsValueProperty", multiselect: "multiselect", placeholder: "placeholder", showClear: "showClear", selectFirstItem: "selectFirstItem", className: "className", dropdownClassName: "dropdownClassName" }, outputs: { valueChangeEventEmitter: "valueChange" }, providers: [MNG_DROPDOWN_VALUE_ACCESSOR], viewQueries: [{ propertyName: "primeDropdown", first: true, predicate: Dropdown, descendants: true }], ngImport: i0, template: "<p-dropdown\n    *ngIf=\"!multiselect; else pMultiselect\"\n    [formControl]=\"dropdownFormControl\"\n    [placeholder]=\"$any(placeholder)\"\n    [dataKey]=\"$any(dataKeyProperty)\"\n    [optionLabel]=\"$any(itemsLabelProperty)\"\n    [optionValue]=\"$any(itemsValueProperty)\"\n    [options]=\"$any(items$ | async)\"\n    [showClear]=\"showClear\"\n    [autoDisplayFirst]=\"false\"\n    [styleClass]=\"$any(className)\"\n    [panelStyleClass]=\"$any(dropdownClassName)\"\n    appendTo=\"body\">\n</p-dropdown>\n<ng-template #pMultiselect>\n    <p-multiSelect\n        display=\"chip\"\n        [formControl]=\"dropdownFormControl\"\n        [defaultLabel]=\"$any(placeholder)\"\n        [dataKey]=\"$any(dataKeyProperty)\"\n        [optionLabel]=\"$any(itemsLabelProperty)\"\n        [optionValue]=\"$any(itemsValueProperty)\"\n        [options]=\"(items$ | async) ?? []\"\n        [styleClass]=\"$any(className)\"\n        [panelStyleClass]=\"$any(dropdownClassName)\"\n        [filter]=\"false\"\n        appendTo=\"body\">\n    </p-multiSelect>\n</ng-template>\n", components: [{ type: i1$2.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "virtualScroll", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear"] }, { type: i2$2.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "autoZIndex", "baseZIndex", "filterBy", "virtualScroll", "itemSize", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "scrollHeight", "defaultLabel", "placeholder", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onPanelShow", "onPanelHide"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngDropdownComponent, selector: "mng-dropdown", inputs: { dataProvider: "dataProvider", dataKeyProperty: "dataKeyProperty", itemsLabelProperty: "itemsLabelProperty", itemsValueProperty: "itemsValueProperty", itemsDisabledProperty: "itemsDisabledProperty", multiselect: "multiselect", placeholder: "placeholder", showClear: "showClear", selectFirstItem: "selectFirstItem", className: "className", dropdownClassName: "dropdownClassName" }, outputs: { valueChangeEventEmitter: "valueChange" }, providers: [MNG_DROPDOWN_VALUE_ACCESSOR], viewQueries: [{ propertyName: "primeDropdown", first: true, predicate: Dropdown, descendants: true }], ngImport: i0, template: "<p-dropdown\n    *ngIf=\"!multiselect; else pMultiselect\"\n    [formControl]=\"dropdownFormControl\"\n    [placeholder]=\"$any(placeholder)\"\n    [dataKey]=\"$any(dataKeyProperty)\"\n    [optionLabel]=\"$any(itemsLabelProperty)\"\n    [optionValue]=\"$any(itemsValueProperty)\"\n    [optionDisabled]=\"$any(itemsDisabledProperty)\"\n    [options]=\"$any(items$ | async)\"\n    [showClear]=\"showClear\"\n    [autoDisplayFirst]=\"false\"\n    [styleClass]=\"$any(className)\"\n    [panelStyleClass]=\"$any(dropdownClassName)\"\n    appendTo=\"body\">\n</p-dropdown>\n<ng-template #pMultiselect>\n    <p-multiSelect\n        display=\"chip\"\n        [formControl]=\"dropdownFormControl\"\n        [defaultLabel]=\"$any(placeholder)\"\n        [dataKey]=\"$any(dataKeyProperty)\"\n        [optionLabel]=\"$any(itemsLabelProperty)\"\n        [optionValue]=\"$any(itemsValueProperty)\"\n        [optionDisabled]=\"$any(itemsDisabledProperty)\"\n        [options]=\"(items$ | async) ?? []\"\n        [styleClass]=\"$any(className)\"\n        [panelStyleClass]=\"$any(dropdownClassName)\"\n        [filter]=\"false\"\n        appendTo=\"body\">\n    </p-multiSelect>\n</ng-template>\n", components: [{ type: i1$2.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "virtualScroll", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear"] }, { type: i2$1.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "autoZIndex", "baseZIndex", "filterBy", "virtualScroll", "itemSize", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "scrollHeight", "defaultLabel", "placeholder", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onPanelShow", "onPanelHide"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-dropdown', providers: [MNG_DROPDOWN_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-dropdown\n    *ngIf=\"!multiselect; else pMultiselect\"\n    [formControl]=\"dropdownFormControl\"\n    [placeholder]=\"$any(placeholder)\"\n    [dataKey]=\"$any(dataKeyProperty)\"\n    [optionLabel]=\"$any(itemsLabelProperty)\"\n    [optionValue]=\"$any(itemsValueProperty)\"\n    [options]=\"$any(items$ | async)\"\n    [showClear]=\"showClear\"\n    [autoDisplayFirst]=\"false\"\n    [styleClass]=\"$any(className)\"\n    [panelStyleClass]=\"$any(dropdownClassName)\"\n    appendTo=\"body\">\n</p-dropdown>\n<ng-template #pMultiselect>\n    <p-multiSelect\n        display=\"chip\"\n        [formControl]=\"dropdownFormControl\"\n        [defaultLabel]=\"$any(placeholder)\"\n        [dataKey]=\"$any(dataKeyProperty)\"\n        [optionLabel]=\"$any(itemsLabelProperty)\"\n        [optionValue]=\"$any(itemsValueProperty)\"\n        [options]=\"(items$ | async) ?? []\"\n        [styleClass]=\"$any(className)\"\n        [panelStyleClass]=\"$any(dropdownClassName)\"\n        [filter]=\"false\"\n        appendTo=\"body\">\n    </p-multiSelect>\n</ng-template>\n" }]
+            args: [{ selector: 'mng-dropdown', providers: [MNG_DROPDOWN_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-dropdown\n    *ngIf=\"!multiselect; else pMultiselect\"\n    [formControl]=\"dropdownFormControl\"\n    [placeholder]=\"$any(placeholder)\"\n    [dataKey]=\"$any(dataKeyProperty)\"\n    [optionLabel]=\"$any(itemsLabelProperty)\"\n    [optionValue]=\"$any(itemsValueProperty)\"\n    [optionDisabled]=\"$any(itemsDisabledProperty)\"\n    [options]=\"$any(items$ | async)\"\n    [showClear]=\"showClear\"\n    [autoDisplayFirst]=\"false\"\n    [styleClass]=\"$any(className)\"\n    [panelStyleClass]=\"$any(dropdownClassName)\"\n    appendTo=\"body\">\n</p-dropdown>\n<ng-template #pMultiselect>\n    <p-multiSelect\n        display=\"chip\"\n        [formControl]=\"dropdownFormControl\"\n        [defaultLabel]=\"$any(placeholder)\"\n        [dataKey]=\"$any(dataKeyProperty)\"\n        [optionLabel]=\"$any(itemsLabelProperty)\"\n        [optionValue]=\"$any(itemsValueProperty)\"\n        [optionDisabled]=\"$any(itemsDisabledProperty)\"\n        [options]=\"(items$ | async) ?? []\"\n        [styleClass]=\"$any(className)\"\n        [panelStyleClass]=\"$any(dropdownClassName)\"\n        [filter]=\"false\"\n        appendTo=\"body\">\n    </p-multiSelect>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { dataProvider: [{
                 type: Input
             }], dataKeyProperty: [{
@@ -4600,6 +5006,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
                 type: Input
             }], itemsValueProperty: [{
                 type: Input
+            }], itemsDisabledProperty: [{
+                type: Input
             }], multiselect: [{
                 type: Input
             }], placeholder: [{
@@ -4620,16 +5028,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
                 args: [Dropdown]
             }] } });
 
-class MngActionDialogComponent {
-    constructor(injector, translate, dialogRef, dialogConfig, actionService, mngCommonsService) {
+class MngActionEditorComponent {
+    constructor(injector, translate, actionExecutor, mngCommonsService, navigationService, dialogRef, dialogConfig, viewContainerService) {
         this.injector = injector;
         this.translate = translate;
+        this.actionExecutor = actionExecutor;
+        this.mngCommonsService = mngCommonsService;
+        this.navigationService = navigationService;
         this.dialogRef = dialogRef;
         this.dialogConfig = dialogConfig;
-        this.actionService = actionService;
-        this.mngCommonsService = mngCommonsService;
+        this.viewContainerService = viewContainerService;
+        this.actionRunEventEmitter = new EventEmitter();
         this.cmpId = Math.random().toString(36).substring(2);
+        this.isDialog = true;
         this.isSaveButton = true;
+        // actions
+        this.toolbarLeftActions = [];
+        this.toolbarRightActions = [];
+        this.footerLeftActions = [];
+        this.footerRightActions = [];
         this.loadingSubject = new ReplaySubject(1);
         this.loading$ = this.loadingSubject.asObservable();
         this.submitLoadingSubject = new ReplaySubject(1);
@@ -4638,7 +5055,7 @@ class MngActionDialogComponent {
         this.subscriptions = [];
     }
     ngOnInit() {
-        if (this.dialogConfig.data) {
+        if (this.dialogConfig?.data) {
             if (this.dialogConfig.data.action) {
                 this.action = this.dialogConfig.data.action;
             }
@@ -4651,18 +5068,65 @@ class MngActionDialogComponent {
             if (this.dialogConfig.data.actionData) {
                 this.actionData = this.dialogConfig.data.actionData;
             }
-            if (this.dialogConfig.data.tableview) {
-                this.tableviewService = this.dialogConfig.data.tableview;
-                if (!this.dataProvider && this.tableviewService?.dataProvider) {
-                    this.dataProvider = this.tableviewService.dataProvider;
+            if (this.dialogConfig.data.viewContainer) {
+                this.viewContainer = this.dialogConfig.data.viewContainer;
+                if (!this.dataProvider && this.viewContainer) {
+                    const dataProvider = this.viewContainer.getDataProvider();
+                    if (dataProvider && typeof dataProvider['fetch'] === 'function') {
+                        this.dataProvider = dataProvider;
+                    }
                 }
             }
             if (this.dialogConfig.data.sourceComponent) {
                 this.sourceComponent = this.dialogConfig.data.sourceComponent;
             }
         }
+        else {
+            this.isDialog = false;
+            this.viewContainer = this.viewContainerInit ?? this.viewContainerService ?? undefined;
+        }
         this.isSaveButton = typeof this.action.submitFunction === 'function';
-        this.setDialogHeaderTitle();
+        this.setTitle();
+        for (const action of this.action.editorActions) {
+            if (action instanceof ActionEditorSubmitDescriptor) {
+                if (typeof action.icon === 'undefined') {
+                    action.withIcon(action.submitType === ActionEditorSubmitDescriptor.TypeEnum.Submit ? 'pi pi-check' : 'pi pi-times');
+                }
+                if (typeof action.title === 'undefined') {
+                    action.withTitle(action.submitType === ActionEditorSubmitDescriptor.TypeEnum.Submit ? 'general.save' : this.isDialog ? 'general.close' : 'general.cancel');
+                }
+                // assign run operations
+                action.withRunNotificationSuccess(undefined, undefined, false);
+                if (action.submitType === ActionEditorSubmitDescriptor.TypeEnum.Submit) {
+                    action.withRunFunction(ctx => {
+                        this.triggerSubmit();
+                        return of(undefined);
+                    });
+                }
+                else {
+                    action.withRunFunction(ctx => {
+                        this.cancel();
+                        return of(undefined);
+                    });
+                }
+            }
+            switch (action.position) {
+                case ActionPositionEnum.ToolbarLeft:
+                    this.toolbarLeftActions.push(action);
+                    break;
+                case ActionPositionEnum.ToolbarRight:
+                    this.toolbarRightActions.push(action);
+                    break;
+                case ActionPositionEnum.FooterLeft:
+                    this.footerLeftActions.push(action);
+                    break;
+                case ActionPositionEnum.FooterRight:
+                    this.footerRightActions.push(action);
+                    break;
+            }
+        }
+        this.toolbarRightActions = this.toolbarRightActions.reverse();
+        this.footerRightActions = this.footerRightActions.reverse();
         this.loadItemWithDataProvider();
     }
     ngOnDestroy() {
@@ -4674,18 +5138,30 @@ class MngActionDialogComponent {
                 return;
             }
             this.submitLoadingSubject.next(true);
-            this.actionService
-                .runEditorSave(this.action, this.itemId, event.formItem, this.dataProvider, this.sourceComponent, this.tableviewService, this.actionData)
-                .pipe(first(), finalize(() => this.submitLoadingSubject.next(false)))
-                .subscribe(res => {
-                this.closeDialog(res);
+            this.actionExecutor
+                .runEditorSave(this.action, this.itemId, event.formItem, this.dataProvider, this.sourceComponent, this.viewContainer, this.actionData)
+                .pipe(first())
+                .subscribe({
+                next: res => {
+                    this.submitLoadingSubject.next(false);
+                    this.cancel(res);
+                },
+                error: () => {
+                    this.submitLoadingSubject.next(false);
+                }
             });
         }
     }
-    closeDialog(result) {
-        this.dialogRef.close(result ? result : new ActionRunResult(undefined, undefined, new ActionError(null, true)));
+    cancel(result) {
+        if (!result) {
+            result = new ActionRunResult(undefined, undefined, new ActionError(null, true));
+        }
+        if (this.isDialog) {
+            this.dialogRef?.close(result);
+        }
+        this.actionRunEventEmitter.next(result);
     }
-    saveItem() {
+    triggerSubmit() {
         this.editorComponent.submit();
     }
     loadItemWithDataProvider() {
@@ -4693,48 +5169,60 @@ class MngActionDialogComponent {
             return;
         }
         this.loadingSubject.next(true);
-        this.actionService
-            .runEditorFetch(this.action, this.itemId, this.dataProvider, this.sourceComponent, this.tableviewService)
+        this.actionExecutor
+            .runEditorFetch(this.action, this.item, this.itemId, this.dataProvider, this.sourceComponent, this.viewContainer)
             .pipe(first(), catchError(err => {
             if (this.action.hasRunNotificationError) {
-                ToastUtil.actionNotificationError(this.translate, this.action, err, 'fetch', this.tableviewService, this.item);
+                ToastUtil.actionNotificationError(this.translate, this.action, err, 'fetch', this.viewContainer, this.item);
             }
             throw err;
         }), finalize(() => this.loadingSubject.next(false)))
             .subscribe(res => {
             this.item = res.result;
             if (this.action.hasFetchNotificationSuccess) {
-                ToastUtil.actionNotificationSuccess(this.translate, this.action, 'fetch', this.action.fetchNotificationSuccessTitle, this.action.fetchNotificationSuccessMessage, this.tableviewService, this.item);
+                ToastUtil.actionNotificationSuccess(this.translate, this.action, 'fetch', this.action.fetchNotificationSuccessTitle, this.action.fetchNotificationSuccessMessage, this.viewContainer, this.item);
             }
-            this.setDialogHeaderTitle();
+            this.setTitle();
         });
     }
-    setDialogHeaderTitle() {
+    setTitle() {
         if (this.action.editorTitle === null) {
-            requestAnimationFrame(() => {
-                this.dialogConfig.header = undefined;
-            });
+            this.title = undefined;
+            if (this.dialogConfig) {
+                requestAnimationFrame(() => {
+                    this.dialogConfig.header = undefined;
+                });
+            }
             return;
         }
-        const subscription = I18nUtil.streamActionTranslation(this.translate, this.action, 'dialog.title', undefined, this.item)
+        const subscription = I18nUtil.streamActionTranslation(this.translate, this.action, 'editor.title', this.action.editorTitle, this.item)
             .pipe(mergeMap(i18nDialogTitle => i18nDialogTitle === null
-            ? I18nUtil.getActionTranslation(this.translate, this.action, 'title', this.action.editorTitle, this.item)
+            ? I18nUtil.getActionTranslation(this.translate, this.action, 'title', undefined, this.item)
             : of(i18nDialogTitle)))
             .subscribe(t => {
-            requestAnimationFrame(() => {
-                this.dialogConfig.header = t ?? undefined;
-                this.mngCommonsService.setPageTitle(t ?? undefined);
-            });
+            this.title = t ?? undefined;
+            if (this.dialogConfig) {
+                requestAnimationFrame(() => {
+                    this.dialogConfig.header = t ?? undefined;
+                    this.mngCommonsService.setPageTitle(t ?? undefined);
+                });
+            }
         });
         this.subscriptions.push(subscription);
     }
 }
-MngActionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionDialogComponent, deps: [{ token: i0.Injector }, { token: i3.TranslateService }, { token: i2.DynamicDialogRef }, { token: i2.DynamicDialogConfig }, { token: MngActionService }, { token: MngCommonsService }], target: i0.ɵɵFactoryTarget.Component });
-MngActionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngActionDialogComponent, selector: "mng-action-dialog", inputs: { action: "action", itemId: "itemId", item: "item", actionData: "actionData", dataProvider: "dataProvider" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "submitButtonElementRef", first: true, predicate: ["submitButton"], descendants: true }, { propertyName: "editorComponent", first: true, predicate: MngFormEditorComponent, descendants: true }], ngImport: i0, template: "<div class=\"h-full flex flex-column\">\n    <div class=\"flex-grow-1\">\n        <div class=\"text-center\" *ngIf=\"loading$ | async\">\n            <p-progressSpinner [style]=\"{width: '3rem', height: '3rem'}\" strokeWidth=\"3\"></p-progressSpinner>\n        </div>\n        <mng-form-editor *ngIf=\"action.editorDescriptor && (loading$ | async) === false\" [descriptor]=\"action.editorDescriptor\" [item]=\"item\" (formSubmit)=\"onSubmit($event)\">\n        </mng-form-editor>\n    </div>\n    <div class=\"flex flex-row justify-content-between\">\n        <div></div>\n        <div>\n            <button\n                type=\"button\"\n                pButton\n                pRipple\n                [label]=\"'general.close' | translate\"\n                icon=\"pi pi-times\"\n                class=\"p-button-text\"\n                (click)=\"closeDialog()\"\n                [disabled]=\"submitLoading$ | async\"></button>\n            <button\n                *ngIf=\"isSaveButton\"\n                #submitButton\n                type=\"button\"\n                pButton\n                pRipple\n                [label]=\"'general.save' | translate\"\n                icon=\"pi pi-check\"\n                class=\"p-button-text\"\n                (click)=\"saveItem()\"\n                [loading]=\"(submitLoading$ | async) ?? false\"\n                [disabled]=\"(submitLoading$ | async) ?? false\"></button>\n        </div>\n    </div>\n</div>\n", components: [{ type: i4$3.ProgressSpinner, selector: "p-progressSpinner", inputs: ["style", "styleClass", "strokeWidth", "fill", "animationDuration"] }, { type: MngFormEditorComponent, selector: "mng-form-editor", inputs: ["descriptor", "submitLoading", "item", "isSubmitButtonVisible", "isFormDisabled"], outputs: ["formSubmit"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i9.Ripple, selector: "[pRipple]" }], pipes: { "async": i4$1.AsyncPipe, "translate": i3.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionDialogComponent, decorators: [{
+MngActionEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionEditorComponent, deps: [{ token: i0.Injector }, { token: i3$1.TranslateService }, { token: MngActionExecutorService }, { token: MngCommonsService }, { token: MngNavigationService }, { token: i3.DynamicDialogRef, optional: true }, { token: i3.DynamicDialogConfig, optional: true }, { token: MngViewContainerComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MngActionEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngActionEditorComponent, selector: "mng-action-editor", inputs: { action: "action", itemId: "itemId", item: "item", actionData: "actionData", dataProvider: "dataProvider", viewContainerInit: ["viewContainer", "viewContainerInit"] }, outputs: { actionRunEventEmitter: "actionSubmit" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "submitButtonElementRef", first: true, predicate: ["submitButton"], descendants: true }, { propertyName: "editorComponent", first: true, predicate: MngFormEditorComponent, descendants: true }], ngImport: i0, template: "<h2 *ngIf=\"!isDialog && title\">{{ title }}</h2>\n<div class=\"h-full flex flex-column\">\n    <div class=\"flex-grow-1\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n        <p-toolbar styleClass=\"mng-action-editor-toolbar\">\n            <ng-template pTemplate=\"left\">\n                <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n            </ng-template>\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n            </ng-template>\n        </p-toolbar>\n    </div>\n\n    <div class=\"flex-grow-1\">\n        <div class=\"text-center\" *ngIf=\"loading$ | async\">\n            <p-progressSpinner [style]=\"{width: '3rem', height: '3rem'}\" strokeWidth=\"3\"></p-progressSpinner>\n        </div>\n        <mng-form-editor *ngIf=\"action.editorDescriptor && (loading$ | async) === false\" [descriptor]=\"action.editorDescriptor\" [item]=\"item\" (formSubmit)=\"onSubmit($event)\">\n        </mng-form-editor>\n    </div>\n\n    <div class=\"flex flex-row justify-content-between\">\n        <div>\n            <mng-action *ngFor=\"let action of footerLeftActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n        </div>\n        <div>\n            <mng-action *ngFor=\"let action of footerRightActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n        </div>\n    </div>\n</div>\n", components: [{ 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: i6.ProgressSpinner, selector: "p-progressSpinner", inputs: ["style", "styleClass", "strokeWidth", "fill", "animationDuration"] }, { type: MngFormEditorComponent, selector: "mng-form-editor", inputs: ["descriptor", "submitLoading", "item", "isSubmitButtonVisible", "isFormDisabled"], outputs: ["formSubmit"] }], 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"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-action-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"h-full flex flex-column\">\n    <div class=\"flex-grow-1\">\n        <div class=\"text-center\" *ngIf=\"loading$ | async\">\n            <p-progressSpinner [style]=\"{width: '3rem', height: '3rem'}\" strokeWidth=\"3\"></p-progressSpinner>\n        </div>\n        <mng-form-editor *ngIf=\"action.editorDescriptor && (loading$ | async) === false\" [descriptor]=\"action.editorDescriptor\" [item]=\"item\" (formSubmit)=\"onSubmit($event)\">\n        </mng-form-editor>\n    </div>\n    <div class=\"flex flex-row justify-content-between\">\n        <div></div>\n        <div>\n            <button\n                type=\"button\"\n                pButton\n                pRipple\n                [label]=\"'general.close' | translate\"\n                icon=\"pi pi-times\"\n                class=\"p-button-text\"\n                (click)=\"closeDialog()\"\n                [disabled]=\"submitLoading$ | async\"></button>\n            <button\n                *ngIf=\"isSaveButton\"\n                #submitButton\n                type=\"button\"\n                pButton\n                pRipple\n                [label]=\"'general.save' | translate\"\n                icon=\"pi pi-check\"\n                class=\"p-button-text\"\n                (click)=\"saveItem()\"\n                [loading]=\"(submitLoading$ | async) ?? false\"\n                [disabled]=\"(submitLoading$ | async) ?? false\"></button>\n        </div>\n    </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i3.TranslateService }, { type: i2.DynamicDialogRef }, { type: i2.DynamicDialogConfig }, { type: MngActionService }, { type: MngCommonsService }]; }, propDecorators: { action: [{
+            args: [{ selector: 'mng-action-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: "<h2 *ngIf=\"!isDialog && title\">{{ title }}</h2>\n<div class=\"h-full flex flex-column\">\n    <div class=\"flex-grow-1\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n        <p-toolbar styleClass=\"mng-action-editor-toolbar\">\n            <ng-template pTemplate=\"left\">\n                <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n            </ng-template>\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n            </ng-template>\n        </p-toolbar>\n    </div>\n\n    <div class=\"flex-grow-1\">\n        <div class=\"text-center\" *ngIf=\"loading$ | async\">\n            <p-progressSpinner [style]=\"{width: '3rem', height: '3rem'}\" strokeWidth=\"3\"></p-progressSpinner>\n        </div>\n        <mng-form-editor *ngIf=\"action.editorDescriptor && (loading$ | async) === false\" [descriptor]=\"action.editorDescriptor\" [item]=\"item\" (formSubmit)=\"onSubmit($event)\">\n        </mng-form-editor>\n    </div>\n\n    <div class=\"flex flex-row justify-content-between\">\n        <div>\n            <mng-action *ngFor=\"let action of footerLeftActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n        </div>\n        <div>\n            <mng-action *ngFor=\"let action of footerRightActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n        </div>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i3$1.TranslateService }, { type: MngActionExecutorService }, { type: MngCommonsService }, { type: MngNavigationService }, { type: i3.DynamicDialogRef, decorators: [{
+                    type: Optional
+                }] }, { type: i3.DynamicDialogConfig, decorators: [{
+                    type: Optional
+                }] }, { type: MngViewContainerComponentService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { action: [{
                 type: Input
             }], itemId: [{
                 type: Input
@@ -4744,6 +5232,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
                 type: Input
             }], dataProvider: [{
                 type: Input
+            }], viewContainerInit: [{
+                type: Input,
+                args: ['viewContainer']
+            }], actionRunEventEmitter: [{
+                type: Output,
+                args: ['actionSubmit']
             }], templates: [{
                 type: ContentChildren,
                 args: [MngTemplateDirective]
@@ -4762,10 +5256,10 @@ class MngFormlyFieldAutocompleteComponent extends FieldType {
     }
 }
 MngFormlyFieldAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MngFormlyFieldAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldAutocompleteComponent, selector: "mng-formly-field-autocomplete", usesInheritance: true, ngImport: i0, template: "<mng-autocomplete\n    [id]=\"$any(key)\"\n    [formControl]=\"aFormControl\"\n    [formlyAttributes]=\"field\"\n    [dataProvider]=\"$any(descriptor.dataProvider)\"\n    [dataKeyProperty]=\"$any(descriptor.dataKeyProperty)\"\n    [itemsLabelProperty]=\"$any(descriptor.itemsLabelProperty)\">\n</mng-autocomplete>\n", components: [{ type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "multiselect", "placeholder", "className", "dropdownClassName"], outputs: ["valueChange"] }], directives: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldAutocompleteComponent, selector: "mng-formly-field-autocomplete", usesInheritance: true, ngImport: i0, template: "<mng-autocomplete\n    [id]=\"$any(key)\"\n    [formControl]=\"aFormControl\"\n    [formlyAttributes]=\"field\"\n    [dataProvider]=\"$any(descriptor.dataProvider)\"\n    [dataKeyProperty]=\"$any(descriptor.dataKeyProperty)\"\n    [itemsLabelProperty]=\"$any(descriptor.itemsLabelProperty)\"\n    [className]=\"descriptor.inputClassName\">\n</mng-autocomplete>\n", components: [{ type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "multiselect", "placeholder", "className", "dropdownClassName"], outputs: ["valueChange"] }], directives: [{ type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$2.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-formly-field-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-autocomplete\n    [id]=\"$any(key)\"\n    [formControl]=\"aFormControl\"\n    [formlyAttributes]=\"field\"\n    [dataProvider]=\"$any(descriptor.dataProvider)\"\n    [dataKeyProperty]=\"$any(descriptor.dataKeyProperty)\"\n    [itemsLabelProperty]=\"$any(descriptor.itemsLabelProperty)\">\n</mng-autocomplete>\n" }]
+            args: [{ selector: 'mng-formly-field-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-autocomplete\n    [id]=\"$any(key)\"\n    [formControl]=\"aFormControl\"\n    [formlyAttributes]=\"field\"\n    [dataProvider]=\"$any(descriptor.dataProvider)\"\n    [dataKeyProperty]=\"$any(descriptor.dataKeyProperty)\"\n    [itemsLabelProperty]=\"$any(descriptor.itemsLabelProperty)\"\n    [className]=\"descriptor.inputClassName\">\n</mng-autocomplete>\n" }]
         }] });
 
 class MngFormlyFieldInputComponent extends FieldType {
@@ -4779,10 +5273,10 @@ class MngFormlyFieldInputComponent extends FieldType {
     }
 }
 MngFormlyFieldInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MngFormlyFieldInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", 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    </p-inputNumber>\n\n    <div *ngSwitchCase=\"'switch'\" class=\"flex flex-column\">\n        <label [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n        <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></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 [name]=\"$any(key)\" [value]=\"option.value\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></p-radioButton>\n            <label [for]=\"option.value\" class=\"mng-radio-button-label\">{{ option.title | translate }}</label>\n        </div>\n    </ng-container>\n\n    <textarea *ngSwitchCase=\"'textarea'\" [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [rows]=\"descriptor.rows ?? 3\" pInputTextarea> </textarea>\n\n    <p-calendar\n        *ngSwitchCase=\"'datepicker'\"\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    </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    </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$3.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.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$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.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$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i10$1.InputText, selector: "[pInputText]" }], pipes: { "translate": i3.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", 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        [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$3.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$2.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabelledBy"], outputs: ["onChange"] }, { type: i3$2.ɵ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$2.ɵ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": i3$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", 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    </p-inputNumber>\n\n    <div *ngSwitchCase=\"'switch'\" class=\"flex flex-column\">\n        <label [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n        <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></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 [name]=\"$any(key)\" [value]=\"option.value\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></p-radioButton>\n            <label [for]=\"option.value\" class=\"mng-radio-button-label\">{{ option.title | translate }}</label>\n        </div>\n    </ng-container>\n\n    <textarea *ngSwitchCase=\"'textarea'\" [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [rows]=\"descriptor.rows ?? 3\" pInputTextarea> </textarea>\n\n    <p-calendar\n        *ngSwitchCase=\"'datepicker'\"\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    </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    </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        [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" }]
         }] });
 
 class MngFormlyFieldDropdownComponent extends FieldType {
@@ -4792,10 +5286,10 @@ class MngFormlyFieldDropdownComponent extends FieldType {
     }
 }
 MngFormlyFieldDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MngFormlyFieldDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldDropdownComponent, selector: "mng-formly-field-dropdown", usesInheritance: true, ngImport: i0, template: "<mng-dropdown\n    [id]=\"$any(key)\"\n    [formControl]=\"dFormControl\"\n    [formlyAttributes]=\"field\"\n    [placeholder]=\"$any(descriptor.placeholder)\"\n    [dataProvider]=\"descriptor.dataProvider\"\n    [itemsLabelProperty]=\"$any(descriptor.itemsLabelProperty)\"\n    [itemsValueProperty]=\"$any(descriptor.itemsValueProperty)\"\n    [dataKeyProperty]=\"$any(descriptor.dataKeyProperty)\"\n    [showClear]=\"!to.required\">\n</mng-dropdown>\n", components: [{ type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsValueProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName"], outputs: ["valueChange"] }], directives: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldDropdownComponent, selector: "mng-formly-field-dropdown", usesInheritance: true, ngImport: i0, 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    [itemsValueProperty]=\"descriptor.itemsValueProperty\"\n    [itemsDisabledProperty]=\"descriptor.itemsDisabledProperty\"\n    [dataKeyProperty]=\"descriptor.dataKeyProperty\"\n    [showClear]=\"!to.required\"\n    [className]=\"descriptor.inputClassName\">\n</mng-dropdown>\n", components: [{ type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsValueProperty", "itemsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName"], outputs: ["valueChange"] }], directives: [{ type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$2.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-formly-field-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-dropdown\n    [id]=\"$any(key)\"\n    [formControl]=\"dFormControl\"\n    [formlyAttributes]=\"field\"\n    [placeholder]=\"$any(descriptor.placeholder)\"\n    [dataProvider]=\"descriptor.dataProvider\"\n    [itemsLabelProperty]=\"$any(descriptor.itemsLabelProperty)\"\n    [itemsValueProperty]=\"$any(descriptor.itemsValueProperty)\"\n    [dataKeyProperty]=\"$any(descriptor.dataKeyProperty)\"\n    [showClear]=\"!to.required\">\n</mng-dropdown>\n" }]
+            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    [itemsValueProperty]=\"descriptor.itemsValueProperty\"\n    [itemsDisabledProperty]=\"descriptor.itemsDisabledProperty\"\n    [dataKeyProperty]=\"descriptor.dataKeyProperty\"\n    [showClear]=\"!to.required\"\n    [className]=\"descriptor.inputClassName\">\n</mng-dropdown>\n" }]
         }] });
 
 class MngTableLoadEvent {
@@ -4878,12 +5372,12 @@ class MngTableColumnFilterComponent {
         }
     }
 }
-MngTableColumnFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableColumnFilterComponent, deps: [{ token: i2$1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
-MngTableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", 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                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\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                [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                [showClear]=\"true\"\n                (valueChange)=\"filterCallback($event)\">\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", "itemsLabelProperty", "multiselect", "placeholder", "className", "dropdownClassName"], outputs: ["valueChange"] }, { type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsValueProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName"], outputs: ["valueChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.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": i3.TranslatePipe } });
+MngTableColumnFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableColumnFilterComponent, deps: [{ token: i2.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
+MngTableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", 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                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\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                [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                [showClear]=\"true\"\n                (valueChange)=\"filterCallback($event)\">\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", "itemsLabelProperty", "multiselect", "placeholder", "className", "dropdownClassName"], outputs: ["valueChange"] }, { type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "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": i3$1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", 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                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\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                [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                [showClear]=\"true\"\n                (valueChange)=\"filterCallback($event)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n" }]
-        }], ctorParameters: function () { return [{ type: i2$1.PrimeNGConfig }]; }, propDecorators: { descriptor: [{
+        }], ctorParameters: function () { return [{ type: i2.PrimeNGConfig }]; }, propDecorators: { descriptor: [{
                 type: Input
             }], display: [{
                 type: Input
@@ -4924,9 +5418,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
         }] });
 
 class MngBooleanPipe {
-    transform(value) {
+    transform(value, yes, no, icon = false) {
         if (typeof value === 'boolean') {
-            return value ? 'general.yes' : 'general.no';
+            if (icon) {
+                return value ? yes ?? 'pi pi-check' : no ?? 'pi pi-times';
+            }
+            else {
+                return value ? yes ?? 'general.yes' : no ?? 'general.no';
+            }
         }
         else {
             return value;
@@ -4972,10 +5471,10 @@ class MngTableColumnValueComponent {
     }
 }
 MngTableColumnValueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableColumnValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MngTableColumnValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: { descriptor: "descriptor", item: "item" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"descriptor.columnType\">\n    <ng-container *ngSwitchCase=\"columnTypeString\">\n        {{ descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property] }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeNumber\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | number: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeDate\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | date: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeBoolean\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | boolean }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeEnum\">\n        {{\n            (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property])\n                | enum: descriptor.enumType:descriptor.enumTitlePath:descriptor.enumNameAsValue\n                | translate\n        }}\n    </ng-container>\n</ng-container>\n", directives: [{ type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "propertyPath": MngPropertyPathPipe, "number": i4$1.DecimalPipe, "date": i4$1.DatePipe, "boolean": MngBooleanPipe, "translate": i3.TranslatePipe, "enum": MngEnumPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngTableColumnValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: { descriptor: "descriptor", item: "item" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"descriptor.columnType\">\n    <ng-container *ngSwitchCase=\"columnTypeString\">\n        {{ descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property] }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeNumber\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | number: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeDate\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | date: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeBoolean\">\n        <ng-container *ngIf=\"descriptor.booleanAsIcon; else booleanText\"></ng-container>\n        <i [class]=\"item[descriptor.property] | boolean: descriptor.booleanYes:descriptor.booleanNo:true\"></i>\n        <ng-template #booleanText>\n            {{\n                (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property])\n                    | boolean: descriptor.booleanYes:descriptor.booleanNo\n                    | translate\n            }}\n        </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeEnum\">\n        {{\n            (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property])\n                | enum: descriptor.enumType:descriptor.enumTitlePath:descriptor.enumNameAsValue\n                | translate\n        }}\n    </ng-container>\n</ng-container>\n", directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "propertyPath": MngPropertyPathPipe, "number": i4.DecimalPipe, "date": i4.DatePipe, "boolean": MngBooleanPipe, "translate": i3$1.TranslatePipe, "enum": MngEnumPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableColumnValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-table-column-value', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"descriptor.columnType\">\n    <ng-container *ngSwitchCase=\"columnTypeString\">\n        {{ descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property] }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeNumber\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | number: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeDate\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | date: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeBoolean\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | boolean }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeEnum\">\n        {{\n            (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property])\n                | enum: descriptor.enumType:descriptor.enumTitlePath:descriptor.enumNameAsValue\n                | translate\n        }}\n    </ng-container>\n</ng-container>\n" }]
+            args: [{ selector: 'mng-table-column-value', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"descriptor.columnType\">\n    <ng-container *ngSwitchCase=\"columnTypeString\">\n        {{ descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property] }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeNumber\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | number: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeDate\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | date: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeBoolean\">\n        <ng-container *ngIf=\"descriptor.booleanAsIcon; else booleanText\"></ng-container>\n        <i [class]=\"item[descriptor.property] | boolean: descriptor.booleanYes:descriptor.booleanNo:true\"></i>\n        <ng-template #booleanText>\n            {{\n                (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property])\n                    | boolean: descriptor.booleanYes:descriptor.booleanNo\n                    | translate\n            }}\n        </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeEnum\">\n        {{\n            (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property])\n                | enum: descriptor.enumType:descriptor.enumTitlePath:descriptor.enumNameAsValue\n                | translate\n        }}\n    </ng-container>\n</ng-container>\n" }]
         }], propDecorators: { descriptor: [{
                 type: Input
             }], item: [{
@@ -5000,18 +5499,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
 var TypeEnum = FilterDescriptor.TypeEnum;
 var PaginationModeEnum = TableDescriptor.PaginationModeEnum;
 class MngTableComponent {
-    constructor(injector, router, activatedRoute, translate, tableviewService) {
+    constructor(injector, router, activatedRoute, translate, viewContainerService) {
         this.injector = injector;
         this.router = router;
         this.activatedRoute = activatedRoute;
         this.translate = translate;
-        this.tableviewService = tableviewService;
+        this.viewContainerService = viewContainerService;
         this.filterDisplayRow = TableDescriptor.FilterDisplayEnum.Row;
         this.filterDisplayMenu = TableDescriptor.FilterDisplayEnum.Menu;
         this.useQueryParams = false;
         // extra features input
         this.selectionMode = 'multiple';
         this.selectionEnabled = false;
+        // visual
+        this.isColumnClickable = true;
         // event outputs
         this.loadEventEmitter = new EventEmitter();
         this.cellClickEventEmitter = new EventEmitter();
@@ -5189,7 +5690,7 @@ class MngTableComponent {
             this.isSortChanged = false;
             this.dataProviderLoadingSubject.next(false);
         }, err => {
-            ToastUtil.tableNotificationError(this.translate, this.descriptor, err, this.tableviewService);
+            ToastUtil.tableNotificationError(this.translate, this.descriptor, err, this.viewContainerService ?? undefined);
             const emptyQueryResult = new MediusQueryResult();
             emptyQueryResult.pageData = [];
             emptyQueryResult.allDataCount = 0;
@@ -5254,12 +5755,12 @@ class MngTableComponent {
         }
     }
 }
-MngTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableComponent, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: i3.TranslateService }, { token: TableviewComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MngTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableComponent, selector: "mng-table", inputs: { descriptor: "descriptor", items: "items", queryResult: "queryResult", loading: "loading", dataProvider: "dataProvider", useQueryParams: "useQueryParams", selectionMode: "selectionMode", selectionEnabled: "selectionEnabled", 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-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.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.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\">\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.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent"], outputs: ["instanceCreated"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i3.TranslatePipe, "i18nProperty": MngI18nPropertyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableComponent, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: i3$1.TranslateService }, { token: MngViewContainerComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MngTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableComponent, selector: "mng-table", inputs: { descriptor: "descriptor", items: "items", queryResult: "queryResult", loading: "loading", dataProvider: "dataProvider", useQueryParams: "useQueryParams", selectionMode: "selectionMode", selectionEnabled: "selectionEnabled", isColumnClickable: "isColumnClickable", 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.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.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"], 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": i3$1.TranslatePipe, "i18nProperty": MngI18nPropertyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", 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-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.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.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\">\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" }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i3.TranslateService }, { type: TableviewComponentService, decorators: [{
+            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.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.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" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i3$1.TranslateService }, { type: MngViewContainerComponentService, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { descriptor: [{
                 type: Input
@@ -5277,6 +5778,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
                 type: Input
             }], selectionEnabled: [{
                 type: Input
+            }], isColumnClickable: [{
+                type: Input
             }], captionComponent: [{
                 type: Input
             }], columnActionComponent: [{
@@ -5308,14 +5811,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
             }] } });
 
 class MngTableviewComponent {
-    constructor(route, messageService, translateService, dialogService, confirmationService, actionService, tableviewService) {
+    constructor(route, messageService, translateService, dialogService, confirmationService, actionExecutor, viewContainerService) {
         this.route = route;
         this.messageService = messageService;
         this.translateService = translateService;
         this.dialogService = dialogService;
         this.confirmationService = confirmationService;
-        this.actionService = actionService;
-        this.tableviewService = tableviewService;
+        this.actionExecutor = actionExecutor;
+        this.viewContainerService = viewContainerService;
         this.actions = [];
         this.tableComponent = null;
         this.rowClickActions = [];
@@ -5325,10 +5828,11 @@ class MngTableviewComponent {
         this.subscriptions = [];
     }
     ngOnInit() {
-        this.tableviewService.actions = this.actions;
-        this.tableviewService.dataProvider = this.dataProvider;
-        this.tableviewService.messageService = this.messageService;
-        const reloadTableSubscription = this.tableviewService.reloadTable$.subscribe(() => {
+        this.viewContainerService.actions = this.actions;
+        if (this.dataProvider) {
+            this.viewContainerService.dataProvider = this.dataProvider;
+        }
+        const reloadTableSubscription = this.viewContainerService.reloadTable$.subscribe(() => {
             this.reloadTable();
         });
         this.subscriptions.push(reloadTableSubscription);
@@ -5348,27 +5852,34 @@ class MngTableviewComponent {
                     break;
             }
         }
+        this.toolbarRightActions = this.toolbarRightActions.reverse();
     }
     ngOnDestroy() {
         this.subscriptions.forEach(s => s.unsubscribe());
     }
+    getMessageService() {
+        return this.messageService;
+    }
+    getDataProvider() {
+        return this.dataProvider;
+    }
     reloadTable() {
         this.tableComponent?.reload();
     }
     onTableCellClick(event) {
         if (this.rowClickActions.length) {
             for (const action of this.rowClickActions) {
-                this.actionService.triggerRowClickAction(action, event, this.route);
+                this.actionExecutor.triggerRowClickAction(action, event, this.route);
             }
         }
     }
 }
-MngTableviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableviewComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2$1.MessageService }, { token: i3.TranslateService }, { token: i2.DialogService }, { token: i2$1.ConfirmationService }, { token: MngActionService }, { token: TableviewComponentService }], target: i0.ɵɵFactoryTarget.Component });
-MngTableviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableviewComponent, selector: "mng-tableview", inputs: { descriptor: "descriptor", dataProvider: "dataProvider", actions: "actions" }, providers: [MessageService, ConfirmationService, TableviewComponentService], 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\" (cellClick)=\"onTableCellClick($event)\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-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: i7$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { type: i8$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass"] }, { type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData"] }, { type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4$1.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": i3.TranslatePipe } });
+MngTableviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableviewComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.MessageService }, { token: i3$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.1.3", 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]=\"rowInlineActions.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", "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": i3$1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-tableview', providers: [MessageService, ConfirmationService, TableviewComponentService], 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\" (cellClick)=\"onTableCellClick($event)\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-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" }]
-        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2$1.MessageService }, { type: i3.TranslateService }, { type: i2.DialogService }, { type: i2$1.ConfirmationService }, { type: MngActionService }, { type: TableviewComponentService }]; }, propDecorators: { descriptor: [{
+            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]=\"rowInlineActions.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" }]
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.MessageService }, { type: i3$1.TranslateService }, { type: i3.DialogService }, { type: i2.ConfirmationService }, { type: MngActionExecutorService }, { type: MngViewContainerComponentService }]; }, propDecorators: { descriptor: [{
                 type: Input
             }], dataProvider: [{
                 type: Input
@@ -5418,7 +5929,7 @@ class MngTableviewRouteComponent extends AMngTableviewRouteComponent {
         return this.route.snapshot.data['tableviewData'].dataProvider;
     }
     createActionDescriptors() {
-        return this.route.snapshot.data['tableviewData'].actions ?? super.createActionDescriptors();
+        return this.route.snapshot.data['tableviewData'].fieldActions ?? super.createActionDescriptors();
     }
 }
 MngTableviewRouteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableviewRouteComponent, deps: [{ token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
@@ -5578,36 +6089,52 @@ class MngFormlyFieldLookupDialogComponent extends FieldType {
     }
 }
 MngFormlyFieldLookupDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldLookupDialogComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-MngFormlyFieldLookupDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", 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\">\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\"></i>\n    <button pButton pRipple class=\"mng-dropdown-dialog-search-button\" type=\"button\" [label]=\"'general.search' | translate: {item: ''}\" (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-table-multiselect-dialog\">\n    <ng-template pTemplate=\"content\">\n        <mng-table\n            [descriptor]=\"descriptor.lookupTableDescriptor!\"\n            [dataProvider]=\"descriptor.lookupTableDataProvider\"\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$4.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", "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$1.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i9.Ripple, selector: "[pRipple]" }, { type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i3.TranslatePipe, "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldLookupDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", 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\"></i>\n    <button pButton pRipple class=\"mng-dropdown-dialog-search-button\" type=\"button\" [label]=\"'general.search' | translate: {item: ''}\" (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-table-multiselect-dialog\">\n    <ng-template pTemplate=\"content\">\n        <mng-table\n            [descriptor]=\"descriptor.lookupTableDescriptor!\"\n            [dataProvider]=\"descriptor.lookupTableDataProvider\"\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$4.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", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { type: i3$3.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$2.ɵ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": i3$1.TranslatePipe, "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", 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\">\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\"></i>\n    <button pButton pRipple class=\"mng-dropdown-dialog-search-button\" type=\"button\" [label]=\"'general.search' | translate: {item: ''}\" (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-table-multiselect-dialog\">\n    <ng-template pTemplate=\"content\">\n        <mng-table\n            [descriptor]=\"descriptor.lookupTableDescriptor!\"\n            [dataProvider]=\"descriptor.lookupTableDataProvider\"\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" }]
+            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\"></i>\n    <button pButton pRipple class=\"mng-dropdown-dialog-search-button\" type=\"button\" [label]=\"'general.search' | translate: {item: ''}\" (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-table-multiselect-dialog\">\n    <ng-template pTemplate=\"content\">\n        <mng-table\n            [descriptor]=\"descriptor.lookupTableDescriptor!\"\n            [dataProvider]=\"descriptor.lookupTableDataProvider\"\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" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { mngTable: [{
                 type: ViewChild,
                 args: [MngTableComponent]
             }] } });
 
+var SizeEnum = ActionDescriptor.SizeEnum;
 class MngFormlyFieldTableDialogFormComponent extends FieldType {
-    constructor() {
-        super(...arguments);
+    constructor(actionExecutor) {
+        super();
+        this.actionExecutor = actionExecutor;
         this.itemsSubject = new ReplaySubject(1);
         this.items$ = this.itemsSubject.asObservable();
-        this.toolbarActions = [];
-        this.rowActions = [];
+        this.toolbarRightActions = [];
+        this.rowClickActions = [];
+        this.rowInlineActions = [];
         this.subscriptions = [];
         this.isDisabledSubject = new BehaviorSubject(false);
         this.isEnabled$ = this.isDisabledSubject.asObservable().pipe(distinctUntilChanged(), map(e => !e));
     }
     ngOnInit() {
         this.descriptor = this.to['descriptor'];
-        const hasAddAction = this.descriptor.actions.some(a => a === FieldManyEditorDescriptor.ActionEnum.Add);
-        const hasEditAction = this.descriptor.actions.some(a => a === FieldManyEditorDescriptor.ActionEnum.Edit);
-        const hasDeleteAction = this.descriptor.actions.some(a => a === FieldManyEditorDescriptor.ActionEnum.Delete);
+        const hasViewAction = this.descriptor.fieldActions.some(a => a === FieldManyEditorDescriptor.ActionEnum.View);
+        const hasAddAction = this.descriptor.fieldActions.some(a => a === FieldManyEditorDescriptor.ActionEnum.Add);
+        const hasEditAction = this.descriptor.fieldActions.some(a => a === FieldManyEditorDescriptor.ActionEnum.Edit);
+        const hasDeleteAction = this.descriptor.fieldActions.some(a => a === FieldManyEditorDescriptor.ActionEnum.Delete);
+        if (hasViewAction) {
+            const viewAction = new ActionEditorDescriptor(this.descriptor.tableviewDescriptor.viewEditor, 'details', this.descriptor.editor.model.type, this.descriptor.property)
+                .withPosition(ActionPositionEnum.RowClick)
+                .withTitle(null)
+                .withIcon('pi pi-search')
+                .withClassName('mng-formly-field-table-form-dialog')
+                .withSize(SizeEnum.ExtraSmall);
+            viewAction.withEditorActions([new ActionEditorSubmitDescriptor(viewAction, ActionEditorSubmitDescriptor.TypeEnum.Cancel)]);
+            this.rowClickActions.push(viewAction);
+        }
         if (hasAddAction) {
             const addAction = new ActionEditorDescriptor(this.descriptor.tableviewDescriptor.addEditor, 'add', this.descriptor.editor.model.type, this.descriptor.property)
+                .withPosition(ActionPositionEnum.ToolbarRight)
                 .withTitle(null)
                 .withIcon('pi pi-plus')
                 .withClassName('mng-formly-field-table-form-dialog')
+                .withSize(SizeEnum.ExtraSmall)
                 .withSubmitFunction(ctx => {
                 if (!ctx.data?.item) {
                     throw new Error(`No item was provided in context, edit cannot be done.`);
@@ -5620,13 +6147,14 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
             })
                 .withIsVisibleFunction(() => of(!this.options?.formState.disabled))
                 .withIsEnabledFunction(() => this.isEnabled$);
-            this.toolbarActions.push(addAction);
+            this.toolbarRightActions.push(addAction);
         }
         if (hasEditAction) {
             const editAction = new ActionEditorDescriptor(this.descriptor.tableviewDescriptor.editEditor, 'edit', this.descriptor.editor.model.type, this.descriptor.property)
                 .withTitle(null)
                 .withIcon('pi pi-pencil')
                 .withClassName('mng-formly-field-table-form-dialog')
+                .withSize(SizeEnum.ExtraSmall)
                 .withSubmitFunction(ctx => {
                 if (!ctx.data?.item) {
                     throw new Error(`No item was provided in context, edit cannot be done.`);
@@ -5639,13 +6167,14 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
             })
                 .withIsVisibleFunction(() => of(!this.formControl?.disabled))
                 .withIsEnabledFunction(() => this.isEnabled$);
-            this.rowActions.push(editAction);
+            this.rowInlineActions.push(editAction);
         }
         if (hasDeleteAction) {
             const deleteAction = new ActionDescriptor(this.descriptor.tableviewDescriptor.model, 'delete', this.descriptor.editor.model.type, this.descriptor.property)
                 .withLevel(ActionLevelEnum.Danger)
                 .withTitle(null)
                 .withIcon('pi pi-trash')
+                .withSize(SizeEnum.ExtraSmall)
                 .withRunFunction(ctx => {
                 if (!ctx.data?.item) {
                     throw new Error(`No item was provided in context, delete cannot be done.`);
@@ -5667,7 +6196,20 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
             })
                 .withIsVisibleFunction(() => of(!this.options?.formState.disabled))
                 .withIsEnabledFunction(() => this.isEnabled$);
-            this.rowActions.push(deleteAction);
+            this.rowInlineActions.push(deleteAction);
+        }
+        for (const action of this.descriptor.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
         if (typeof this.formControl.value === 'undefined' || this.formControl.value === null) {
@@ -5691,13 +6233,21 @@ 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.1.3", ngImport: i0, type: MngFormlyFieldTableDialogFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MngFormlyFieldTableDialogFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldTableDialogFormComponent, selector: "mng-formly-table-dialog-form-field", usesInheritance: true, ngImport: i0, template: "<mng-table [descriptor]=\"descriptor.tableDescriptor\" [items]=\"items$\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-column md:flex-row md:justify-content-end table-header\">\n            <label class=\"mng-datatable-form-label p-m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n            <mng-action *ngFor=\"let action of toolbarActions\" [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 rowActions\"\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", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData"] }], directives: [{ type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i3.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldTableDialogFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldTableDialogFormComponent, deps: [{ token: MngActionExecutorService }], target: i0.ɵɵFactoryTarget.Component });
+MngFormlyFieldTableDialogFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", 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", "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": i3$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", 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$\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-column md:flex-row md:justify-content-end table-header\">\n            <label class=\"mng-datatable-form-label p-m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n            <mng-action *ngFor=\"let action of toolbarActions\" [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 rowActions\"\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$\" (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"] }]
+        }], ctorParameters: function () { return [{ type: MngActionExecutorService }]; } });
 
 class MngFormlyFieldTableDialogMultiselectComponent extends FieldType {
     constructor(injector) {
@@ -5804,16 +6354,16 @@ class MngFormlyFieldTableDialogMultiselectComponent extends FieldType {
     }
 }
 MngFormlyFieldTableDialogMultiselectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldTableDialogMultiselectComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-MngFormlyFieldTableDialogMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", 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 table-header\">\n            <label class=\"mng-datatable-form-label p-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\"\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\"\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-formly-field-table-multiselect-dialog\">\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", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { type: i1$4.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i9.Ripple, selector: "[pRipple]" }, { type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i3.TranslatePipe, "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldTableDialogMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", 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-formly-field-table-multiselect-dialog\">\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", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { type: i1$4.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$3.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": i3$1.TranslatePipe, "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", 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 table-header\">\n            <label class=\"mng-datatable-form-label p-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\"\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\"\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-formly-field-table-multiselect-dialog\">\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" }]
+            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-formly-field-table-multiselect-dialog\">\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" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
 class MngFormlyFieldTabsComponent extends FieldType {
 }
 MngFormlyFieldTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MngFormlyFieldTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldTabsComponent, selector: "mng-formly-field-tabs", usesInheritance: true, ngImport: i0, template: "<p-tabView>\n    <p-tabPanel\n        *ngFor=\"let tab of field.fieldGroup; let i = index; let last = last\"\n        [header]=\"tab.templateOptions?.label! | translate\"\n        [headerStyleClass]=\"$any(formControl!.valid ? 'p-tabview-title' : null)\">\n        <ng-template pTemplate=\"header\">\n            <span\n                class=\"p-tabview-title\"\n                [class.p-tabview-title-error]=\"formState.submittedOn && formState['tab_' + (tab.id ? tab.id : tab.templateOptions?.label!) + '_invalid']\"\n                >{{ tab.templateOptions?.label! | translate }}</span\n            >\n        </ng-template>\n        <formly-field [field]=\"tab\"></formly-field>\n    </p-tabPanel>\n</p-tabView>\n", components: [{ type: i1$5.TabView, selector: "p-tabView", inputs: ["orientation", "style", "styleClass", "controlClose", "scrollable", "activeIndex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { type: i1$5.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { type: i3$1.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i3.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldTabsComponent, selector: "mng-formly-field-tabs", usesInheritance: true, ngImport: i0, template: "<p-tabView>\n    <p-tabPanel\n        *ngFor=\"let tab of field.fieldGroup; let i = index; let last = last\"\n        [header]=\"tab.templateOptions?.label! | translate\"\n        [headerStyleClass]=\"$any(formControl!.valid ? 'p-tabview-title' : null)\">\n        <ng-template pTemplate=\"header\">\n            <span\n                class=\"p-tabview-title\"\n                [class.p-tabview-title-error]=\"formState.submittedOn && formState['tab_' + (tab.id ? tab.id : tab.templateOptions?.label!) + '_invalid']\"\n                >{{ tab.templateOptions?.label! | translate }}</span\n            >\n        </ng-template>\n        <formly-field [field]=\"tab\"></formly-field>\n    </p-tabPanel>\n</p-tabView>\n", components: [{ type: i1$5.TabView, selector: "p-tabView", inputs: ["orientation", "style", "styleClass", "controlClose", "scrollable", "activeIndex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { type: i1$5.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { type: i3$2.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i3$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-formly-field-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-tabView>\n    <p-tabPanel\n        *ngFor=\"let tab of field.fieldGroup; let i = index; let last = last\"\n        [header]=\"tab.templateOptions?.label! | translate\"\n        [headerStyleClass]=\"$any(formControl!.valid ? 'p-tabview-title' : null)\">\n        <ng-template pTemplate=\"header\">\n            <span\n                class=\"p-tabview-title\"\n                [class.p-tabview-title-error]=\"formState.submittedOn && formState['tab_' + (tab.id ? tab.id : tab.templateOptions?.label!) + '_invalid']\"\n                >{{ tab.templateOptions?.label! | translate }}</span\n            >\n        </ng-template>\n        <formly-field [field]=\"tab\"></formly-field>\n    </p-tabPanel>\n</p-tabView>\n" }]
@@ -5822,7 +6372,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
 class MngFormlyFieldFieldsetComponent extends FieldType {
 }
 MngFormlyFieldFieldsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MngFormlyFieldFieldsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldFieldsetComponent, selector: "mng-formly-field-fieldset", usesInheritance: true, ngImport: i0, template: "<ng-container *ngFor=\"let group of field.fieldGroup; let i = index; let last = last\">\n    <p-fieldset *ngIf=\"!group.templateOptions?.['descriptor']?.default; else defaultSet\" [legend]=\"group.templateOptions?.label! | translate\">\n        <formly-field [field]=\"group\"></formly-field>\n    </p-fieldset>\n    <ng-template #defaultSet>\n        <formly-field [field]=\"group\"></formly-field>\n    </ng-template>\n</ng-container>\n", components: [{ type: i1$6.Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { type: i3$1.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i3.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldFieldsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldFieldsetComponent, selector: "mng-formly-field-fieldset", usesInheritance: true, ngImport: i0, template: "<ng-container *ngFor=\"let group of field.fieldGroup; let i = index; let last = last\">\n    <p-fieldset *ngIf=\"!group.templateOptions?.['descriptor']?.default; else defaultSet\" [legend]=\"group.templateOptions?.label! | translate\">\n        <formly-field [field]=\"group\"></formly-field>\n    </p-fieldset>\n    <ng-template #defaultSet>\n        <formly-field [field]=\"group\"></formly-field>\n    </ng-template>\n</ng-container>\n", components: [{ type: i1$6.Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { type: i3$2.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i3$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldFieldsetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-formly-field-fieldset', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let group of field.fieldGroup; let i = index; let last = last\">\n    <p-fieldset *ngIf=\"!group.templateOptions?.['descriptor']?.default; else defaultSet\" [legend]=\"group.templateOptions?.label! | translate\">\n        <formly-field [field]=\"group\"></formly-field>\n    </p-fieldset>\n    <ng-template #defaultSet>\n        <formly-field [field]=\"group\"></formly-field>\n    </ng-template>\n</ng-container>\n" }]
@@ -5831,19 +6381,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
 class MngFormlyFieldWrapperComponent extends FieldWrapper {
 }
 MngFormlyFieldWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MngFormlyFieldWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldWrapperComponent, selector: "mng-formly-field-wrapper", usesInheritance: true, ngImport: i0, template: "<div class=\"field\">\n    <label [for]=\"key\">{{ $any(to?.label) | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n    <ng-container #fieldComponent></ng-container>\n    <small *ngIf=\"showError\" class=\"p-error\">\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </small>\n</div>\n", components: [{ type: i3$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i3.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldWrapperComponent, selector: "mng-formly-field-wrapper", usesInheritance: true, ngImport: i0, template: "<div class=\"field\">\n    <label [for]=\"key\" [class]=\"to?.['descriptor']?.['labelClassName'] ?? ''\"\n        >{{ $any(to?.label) | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label\n    >\n    <ng-container #fieldComponent></ng-container>\n    <small *ngIf=\"to?.['descriptor']?.['helpText']\">{{ to?.['descriptor']?.['helpText'] | translate }}</small>\n    <small *ngIf=\"showError\" class=\"p-error\">\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </small>\n</div>\n", components: [{ type: i3$2.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i3$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-formly-field-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"field\">\n    <label [for]=\"key\">{{ $any(to?.label) | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n    <ng-container #fieldComponent></ng-container>\n    <small *ngIf=\"showError\" class=\"p-error\">\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </small>\n</div>\n" }]
+            args: [{ selector: 'mng-formly-field-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"field\">\n    <label [for]=\"key\" [class]=\"to?.['descriptor']?.['labelClassName'] ?? ''\"\n        >{{ $any(to?.label) | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label\n    >\n    <ng-container #fieldComponent></ng-container>\n    <small *ngIf=\"to?.['descriptor']?.['helpText']\">{{ to?.['descriptor']?.['helpText'] | translate }}</small>\n    <small *ngIf=\"showError\" class=\"p-error\">\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </small>\n</div>\n" }]
         }] });
 
 class MngFormlyTableWrapperComponent extends FieldWrapper {
 }
 MngFormlyTableWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyTableWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MngFormlyTableWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyTableWrapperComponent, selector: "mng-formly-table-wrapper", usesInheritance: true, ngImport: i0, template: "<div class=\"field table\">\n    <ng-container #fieldComponent></ng-container>\n    <small *ngIf=\"showError\" class=\"p-error\">\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </small>\n</div>\n", components: [{ type: i3$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyTableWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyTableWrapperComponent, selector: "mng-formly-table-wrapper", usesInheritance: true, ngImport: i0, template: "<div class=\"field table\">\n    <ng-container #fieldComponent></ng-container>\n    <small *ngIf=\"to?.['descriptor']?.['helpText']\">{{ to?.['descriptor']?.['helpText'] | translate }}</small>\n    <small *ngIf=\"showError\" class=\"p-error\">\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </small>\n</div>\n", components: [{ type: i3$2.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i3$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyTableWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-formly-table-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"field table\">\n    <ng-container #fieldComponent></ng-container>\n    <small *ngIf=\"showError\" class=\"p-error\">\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </small>\n</div>\n" }]
+            args: [{ selector: 'mng-formly-table-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"field table\">\n    <ng-container #fieldComponent></ng-container>\n    <small *ngIf=\"to?.['descriptor']?.['helpText']\">{{ to?.['descriptor']?.['helpText'] | translate }}</small>\n    <small *ngIf=\"showError\" class=\"p-error\">\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </small>\n</div>\n" }]
         }] });
 
 class MngBreadcrumbComponent {
@@ -5852,7 +6402,7 @@ class MngBreadcrumbComponent {
     }
 }
 MngBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngBreadcrumbComponent, deps: [{ token: MngCommonsService }], target: i0.ɵɵFactoryTarget.Component });
-MngBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngBreadcrumbComponent, selector: "mng-breadcrumb", ngImport: i0, template: "<div class=\"layout-breadcrumb-container\">\n    <div class=\"layout-breadcrumb\">\n        <p-breadcrumb [home]=\"$any(mngCommons.breadcrumbHome$ | async)\" [model]=\"$any(mngCommons.breadcrumbs$ | async)\" styleClass=\"layout-breadcrumb py-2\"></p-breadcrumb>\n    </div>\n</div>\n", components: [{ type: i2$4.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }], pipes: { "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngBreadcrumbComponent, selector: "mng-breadcrumb", ngImport: i0, template: "<div class=\"layout-breadcrumb-container\">\n    <div class=\"layout-breadcrumb\">\n        <p-breadcrumb [home]=\"$any(mngCommons.breadcrumbHome$ | async)\" [model]=\"$any(mngCommons.breadcrumbs$ | async)\" styleClass=\"layout-breadcrumb py-2\"></p-breadcrumb>\n    </div>\n</div>\n", components: [{ type: i2$3.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngBreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-breadcrumb-container\">\n    <div class=\"layout-breadcrumb\">\n        <p-breadcrumb [home]=\"$any(mngCommons.breadcrumbHome$ | async)\" [model]=\"$any(mngCommons.breadcrumbs$ | async)\" styleClass=\"layout-breadcrumb py-2\"></p-breadcrumb>\n    </div>\n</div>\n" }]
@@ -5865,7 +6415,7 @@ class MngFooterComponent {
     }
 }
 MngFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFooterComponent, deps: [{ token: MngCommonsService }], target: i0.ɵɵFactoryTarget.Component });
-MngFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFooterComponent, selector: "mng-footer", ngImport: i0, template: "<div class=\"layout-footer\">\n    <div class=\"footer-logo-container\">\n        <img id=\"footer-logo\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" alt=\"atlantis-layout\" />\n        <span class=\"app-name\">{{ mngCommons.appName | translate }}</span>\n    </div>\n    <span class=\"copyright\">&#169; {{ mngCommons.appOwner | translate }} - {{ currentYear }}</span>\n</div>\n", pipes: { "translate": i3.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFooterComponent, selector: "mng-footer", ngImport: i0, template: "<div class=\"layout-footer\">\n    <div class=\"footer-logo-container\">\n        <img id=\"footer-logo\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" alt=\"atlantis-layout\" />\n        <span class=\"app-name\">{{ mngCommons.appName | translate }}</span>\n    </div>\n    <span class=\"copyright\">&#169; {{ mngCommons.appOwner | translate }} - {{ currentYear }}</span>\n</div>\n", pipes: { "translate": i3$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-footer\">\n    <div class=\"footer-logo-container\">\n        <img id=\"footer-logo\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" alt=\"atlantis-layout\" />\n        <span class=\"app-name\">{{ mngCommons.appName | translate }}</span>\n    </div>\n    <span class=\"copyright\">&#169; {{ mngCommons.appOwner | translate }} - {{ currentYear }}</span>\n</div>\n" }]
@@ -6201,7 +6751,7 @@ class MngMenuItemComponent {
     }
 }
 MngMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngMenuItemComponent, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: MngCommonsService }, { token: MngMainLayoutComponentService }], target: i0.ɵɵFactoryTarget.Component });
-MngMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: { item: "item", index: "index", root: "root", parentKey: "parentKey" }, host: { properties: { "class.layout-root-menuitem": "root", "class.active-menuitem": "active" } }, ngImport: i0, template: "<ng-container>\n    <div *ngIf=\"root && item.visible !== false && (isAllowed$ | async) === true\" class=\"layout-menuitem-root-text\">{{ item.label! | translate }}</div>\n    <a\n        *ngIf=\"(!item.routerLink || item.items) && item.visible !== false && (isAllowed$ | async) === true\"\n        [attr.href]=\"item.href\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"onMouseEnter()\"\n        (keydown.enter)=\"itemClick($event)\"\n        [routerLink]=\"item.routerLink\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <a\n        *ngIf=\"item.routerLink && !item.items && item.visible !== false && (isAllowed$ | async) === true\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"hover = true\"\n        (mouseleave)=\"hover = false\"\n        [routerLink]=\"item.routerLink\"\n        routerLinkActive=\"active-menuitem-routerlink\"\n        [routerLinkActiveOptions]=\"{exact: true}\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <ul\n        *ngIf=\"((item.items && active) || (item.items && (mngCommons.menuModeIsStatic$ | async) && (root || active))) && item.visible !== false && (isAllowed$ | async) === true\"\n        [@children]=\"\n            (mngCommons.menuModeIsSlim$ | async) && (mainLayoutService.isMobile$ | async) === false && root\n                ? active\n                    ? 'visible'\n                    : 'hidden'\n                : (mngCommons.menuModeIsStatic$ | async) && root && (mainLayoutService.isMobile$ | async) === false\n                ? 'visible'\n                : active\n                ? 'visibleAnimated'\n                : 'hiddenAnimated'\n        \">\n        <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n            <li mng-menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeClassName\"></li>\n        </ng-template>\n    </ul>\n</ng-container>\n", components: [{ type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: ["item", "index", "root", "parentKey"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i9.Ripple, selector: "[pRipple]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i3.TranslatePipe }, animations: [
+MngMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: { item: "item", index: "index", root: "root", parentKey: "parentKey" }, host: { properties: { "class.layout-root-menuitem": "root", "class.active-menuitem": "active" } }, ngImport: i0, template: "<ng-container>\n    <div *ngIf=\"root && item.visible !== false && (isAllowed$ | async) === true\" class=\"layout-menuitem-root-text\">{{ item.label! | translate }}</div>\n    <a\n        *ngIf=\"(!item.routerLink || item.items) && item.visible !== false && (isAllowed$ | async) === true\"\n        [attr.href]=\"item.href\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"onMouseEnter()\"\n        (keydown.enter)=\"itemClick($event)\"\n        [routerLink]=\"item.routerLink\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <a\n        *ngIf=\"item.routerLink && !item.items && item.visible !== false && (isAllowed$ | async) === true\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"hover = true\"\n        (mouseleave)=\"hover = false\"\n        [routerLink]=\"item.routerLink\"\n        routerLinkActive=\"active-menuitem-routerlink\"\n        [routerLinkActiveOptions]=\"{exact: true}\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <ul\n        *ngIf=\"((item.items && active) || (item.items && (mngCommons.menuModeIsStatic$ | async) && (root || active))) && item.visible !== false && (isAllowed$ | async) === true\"\n        [@children]=\"\n            (mngCommons.menuModeIsSlim$ | async) && (mainLayoutService.isMobile$ | async) === false && root\n                ? active\n                    ? 'visible'\n                    : 'hidden'\n                : (mngCommons.menuModeIsStatic$ | async) && root && (mainLayoutService.isMobile$ | async) === false\n                ? 'visible'\n                : active\n                ? 'visibleAnimated'\n                : 'hiddenAnimated'\n        \">\n        <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n            <li mng-menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeClassName\"></li>\n        </ng-template>\n    </ul>\n</ng-container>\n", components: [{ type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: ["item", "index", "root", "parentKey"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i8.Ripple, selector: "[pRipple]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe, "translate": i3$1.TranslatePipe }, animations: [
         trigger('children', [
             state('void', style({
                 height: '0px'
@@ -6271,7 +6821,7 @@ class MngMenuComponent {
     }
 }
 MngMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngMenuComponent, deps: [{ token: MngCommonsService }, { token: MngMainLayoutComponentService }], target: i0.ɵɵFactoryTarget.Component });
-MngMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngMenuComponent, selector: "mng-menu", ngImport: i0, template: "<div\n    class=\"layout-menu-wrapper\"\n    [ngClass]=\"{'layout-sidebar-active': (mainLayoutService.sidebarActive$ | async)}\"\n    (click)=\"mainLayoutService.onSidebarClick($event)\"\n    (mouseover)=\"mainLayoutService.onSidebarMouseOver($event)\"\n    (mouseleave)=\"mainLayoutService.onSidebarMouseLeave($event)\">\n    <div class=\"menu-logo\">\n        <a routerLink=\"/\" class=\"logo\">\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" />\n        </a>\n\n        <a routerLink=\"/\" class=\"app-name\" *ngIf=\"(mngCommons.menuModeIsSlim$ | async) === false || (mainLayoutService.isMobile$ | async)\">\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" />\n        </a>\n        <a *ngIf=\"mngCommons.menuPinEnabled\" class=\"menu-pin\" (click)=\"mainLayoutService.onToggleMenu($event)\">\n            <span *ngIf=\"mngCommons.menuModeIsOverlay$ | async\" class=\"pi pi-times\"></span>\n            <span\n                *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async) === false && (mainLayoutService.pinActive$ | async)\"\n                class=\"pi pi-unlock\"></span>\n            <span *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async) && (mainLayoutService.pinActive$ | async)\" class=\"pi pi-lock\"></span>\n        </a>\n    </div>\n\n    <div class=\"layout-menu-container\">\n        <ul class=\"layout-menu\">\n            <ng-container *ngFor=\"let item of mngCommons.menuItems; let i = index\">\n                <li mng-menuitem *ngIf=\"!item.separator\" [item]=\"item\" [index]=\"i\" [root]=\"true\"></li>\n                <li *ngIf=\"item.separator\" class=\"menu-separator\"></li>\n            </ng-container>\n        </ul>\n    </div>\n</div>\n", components: [{ type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: ["item", "index", "root", "parentKey"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngMenuComponent, selector: "mng-menu", ngImport: i0, template: "<div\n    class=\"layout-menu-wrapper\"\n    [ngClass]=\"{'layout-sidebar-active': (mainLayoutService.sidebarActive$ | async)}\"\n    (click)=\"mainLayoutService.onSidebarClick($event)\"\n    (mouseover)=\"mainLayoutService.onSidebarMouseOver($event)\"\n    (mouseleave)=\"mainLayoutService.onSidebarMouseLeave($event)\">\n    <div class=\"menu-logo\">\n        <a routerLink=\"/\" class=\"logo\">\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" />\n        </a>\n\n        <a routerLink=\"/\" class=\"app-name\" *ngIf=\"(mngCommons.menuModeIsSlim$ | async) === false || (mainLayoutService.isMobile$ | async)\">\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" />\n        </a>\n        <a *ngIf=\"mngCommons.menuPinEnabled\" class=\"menu-pin\" (click)=\"mainLayoutService.onToggleMenu($event)\">\n            <span *ngIf=\"mngCommons.menuModeIsOverlay$ | async\" class=\"pi pi-times\"></span>\n            <span\n                *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async) === false && (mainLayoutService.pinActive$ | async)\"\n                class=\"pi pi-unlock\"></span>\n            <span *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async) && (mainLayoutService.pinActive$ | async)\" class=\"pi pi-lock\"></span>\n        </a>\n    </div>\n\n    <div class=\"layout-menu-container\">\n        <ul class=\"layout-menu\">\n            <ng-container *ngFor=\"let item of mngCommons.menuItems; let i = index\">\n                <li mng-menuitem *ngIf=\"!item.separator\" [item]=\"item\" [index]=\"i\" [root]=\"true\"></li>\n                <li *ngIf=\"item.separator\" class=\"menu-separator\"></li>\n            </ng-container>\n        </ul>\n    </div>\n</div>\n", components: [{ type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: ["item", "index", "root", "parentKey"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"layout-menu-wrapper\"\n    [ngClass]=\"{'layout-sidebar-active': (mainLayoutService.sidebarActive$ | async)}\"\n    (click)=\"mainLayoutService.onSidebarClick($event)\"\n    (mouseover)=\"mainLayoutService.onSidebarMouseOver($event)\"\n    (mouseleave)=\"mainLayoutService.onSidebarMouseLeave($event)\">\n    <div class=\"menu-logo\">\n        <a routerLink=\"/\" class=\"logo\">\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" />\n        </a>\n\n        <a routerLink=\"/\" class=\"app-name\" *ngIf=\"(mngCommons.menuModeIsSlim$ | async) === false || (mainLayoutService.isMobile$ | async)\">\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" />\n        </a>\n        <a *ngIf=\"mngCommons.menuPinEnabled\" class=\"menu-pin\" (click)=\"mainLayoutService.onToggleMenu($event)\">\n            <span *ngIf=\"mngCommons.menuModeIsOverlay$ | async\" class=\"pi pi-times\"></span>\n            <span\n                *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async) === false && (mainLayoutService.pinActive$ | async)\"\n                class=\"pi pi-unlock\"></span>\n            <span *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async) && (mainLayoutService.pinActive$ | async)\" class=\"pi pi-lock\"></span>\n        </a>\n    </div>\n\n    <div class=\"layout-menu-container\">\n        <ul class=\"layout-menu\">\n            <ng-container *ngFor=\"let item of mngCommons.menuItems; let i = index\">\n                <li mng-menuitem *ngIf=\"!item.separator\" [item]=\"item\" [index]=\"i\" [root]=\"true\"></li>\n                <li *ngIf=\"item.separator\" class=\"menu-separator\"></li>\n            </ng-container>\n        </ul>\n    </div>\n</div>\n" }]
@@ -6313,7 +6863,7 @@ class MngTopbarComponent {
     }
 }
 MngTopbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTopbarComponent, deps: [{ token: i1.ActivatedRoute }, { token: MngCommonsService }, { token: MngMainLayoutComponentService }], target: i0.ɵɵFactoryTarget.Component });
-MngTopbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTopbarComponent, selector: "mng-topbar", viewQueries: [{ propertyName: "templates", predicate: MngTemplateDirective, descendants: true }], ngImport: i0, template: "<div class=\"layout-topbar\">\n    <div class=\"layout-topbar-left\">\n        <a\n            href=\"#\"\n            class=\"topbar-menu-button\"\n            (click)=\"mainLayoutService.onMenuButtonClick($event)\"\n            *ngIf=\"(mngCommons.menuModeIsOverlay$ | async) || (mainLayoutService.isMobile$ | async)\">\n            <i class=\"pi pi-bars\"></i>\n        </a>\n\n        <ng-container [mngComponent]=\"breadcrumbComponent\"></ng-container>\n    </div>\n\n    <ng-container [mngComponent]=\"menuComponent\"></ng-container>\n\n    <div class=\"layout-topbar-right\">\n        <ul class=\"layout-topbar-right-items\">\n            <li #profile class=\"profile-item\" [ngClass]=\"{'active-topmenuitem': (mainLayoutService.activeTopbarItem$ | async) === profile}\">\n                <a href=\"#\" (click)=\"mainLayoutService.onTopbarItemClick($event, profile)\">\n                    <i class=\"pi pi-fw pi-user\"></i>\n                </a>\n                <ul class=\"fadeInDown\" *ngIf=\"user\">\n                    <li role=\"menuitem\">\n                        <a>\n                            {{ user?.displayName ?? user?.username }}\n                        </a>\n                    </li>\n                    <li role=\"menuitem\" *ngIf=\"user?.logout || user?.logoutUrl\">\n                        <a [href]=\"user?.logoutUrl\" (click)=\"logout(user, $event)\">\n                            <i class=\"pi pi-fw pi-sign-out\"></i>\n                            <span>{{ 'mngTopbar.logout' | translate }}</span>\n                        </a>\n                    </li>\n                </ul>\n            </li>\n            <li *ngIf=\"languages.length > 1\" class=\"profile-item\" [ngClass]=\"{'active-topmenuitem': (mainLayoutService.activeTopbarItem$ | async) === profile}\">\n                <i class=\"pi pi-fw pi-globe\"></i>\n                <p-dropdown [ngModel]=\"selectedLanguage\" [options]=\"languages\" (onChange)=\"switchLanguage($event.value)\"></p-dropdown>\n            </li>\n        </ul>\n    </div>\n</div>\n", components: [{ type: i1$2.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "virtualScroll", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent"], outputs: ["instanceCreated"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: { "async": i4$1.AsyncPipe, "translate": i3.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngTopbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTopbarComponent, selector: "mng-topbar", viewQueries: [{ propertyName: "templates", predicate: MngTemplateDirective, descendants: true }], ngImport: i0, template: "<div class=\"layout-topbar\">\n    <div class=\"layout-topbar-left\">\n        <a\n            href=\"#\"\n            class=\"topbar-menu-button\"\n            (click)=\"mainLayoutService.onMenuButtonClick($event)\"\n            *ngIf=\"(mngCommons.menuModeIsOverlay$ | async) || (mainLayoutService.isMobile$ | async)\">\n            <i class=\"pi pi-bars\"></i>\n        </a>\n\n        <ng-container [mngComponent]=\"breadcrumbComponent\"></ng-container>\n    </div>\n\n    <ng-container [mngComponent]=\"menuComponent\"></ng-container>\n\n    <div class=\"layout-topbar-right\">\n        <ul class=\"layout-topbar-right-items\">\n            <li #profile class=\"profile-item\" [ngClass]=\"{'active-topmenuitem': (mainLayoutService.activeTopbarItem$ | async) === profile}\">\n                <a href=\"#\" (click)=\"mainLayoutService.onTopbarItemClick($event, profile)\">\n                    <i class=\"pi pi-fw pi-user\"></i>\n                </a>\n                <ul class=\"fadeInDown\" *ngIf=\"user\">\n                    <li role=\"menuitem\">\n                        <a>\n                            {{ user?.displayName ?? user?.username }}\n                        </a>\n                    </li>\n                    <li role=\"menuitem\" *ngIf=\"user?.logout || user?.logoutUrl\">\n                        <a [href]=\"user?.logoutUrl\" (click)=\"logout(user, $event)\">\n                            <i class=\"pi pi-fw pi-sign-out\"></i>\n                            <span>{{ 'mngTopbar.logout' | translate }}</span>\n                        </a>\n                    </li>\n                </ul>\n            </li>\n            <li *ngIf=\"languages.length > 1\" class=\"profile-item\" [ngClass]=\"{'active-topmenuitem': (mainLayoutService.activeTopbarItem$ | async) === profile}\">\n                <i class=\"pi pi-fw pi-globe\"></i>\n                <p-dropdown [ngModel]=\"selectedLanguage\" [options]=\"languages\" (onChange)=\"switchLanguage($event.value)\"></p-dropdown>\n            </li>\n        </ul>\n    </div>\n</div>\n", components: [{ type: i1$2.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "virtualScroll", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent"], outputs: ["instanceCreated"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: { "async": i4.AsyncPipe, "translate": i3$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTopbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-topbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-topbar\">\n    <div class=\"layout-topbar-left\">\n        <a\n            href=\"#\"\n            class=\"topbar-menu-button\"\n            (click)=\"mainLayoutService.onMenuButtonClick($event)\"\n            *ngIf=\"(mngCommons.menuModeIsOverlay$ | async) || (mainLayoutService.isMobile$ | async)\">\n            <i class=\"pi pi-bars\"></i>\n        </a>\n\n        <ng-container [mngComponent]=\"breadcrumbComponent\"></ng-container>\n    </div>\n\n    <ng-container [mngComponent]=\"menuComponent\"></ng-container>\n\n    <div class=\"layout-topbar-right\">\n        <ul class=\"layout-topbar-right-items\">\n            <li #profile class=\"profile-item\" [ngClass]=\"{'active-topmenuitem': (mainLayoutService.activeTopbarItem$ | async) === profile}\">\n                <a href=\"#\" (click)=\"mainLayoutService.onTopbarItemClick($event, profile)\">\n                    <i class=\"pi pi-fw pi-user\"></i>\n                </a>\n                <ul class=\"fadeInDown\" *ngIf=\"user\">\n                    <li role=\"menuitem\">\n                        <a>\n                            {{ user?.displayName ?? user?.username }}\n                        </a>\n                    </li>\n                    <li role=\"menuitem\" *ngIf=\"user?.logout || user?.logoutUrl\">\n                        <a [href]=\"user?.logoutUrl\" (click)=\"logout(user, $event)\">\n                            <i class=\"pi pi-fw pi-sign-out\"></i>\n                            <span>{{ 'mngTopbar.logout' | translate }}</span>\n                        </a>\n                    </li>\n                </ul>\n            </li>\n            <li *ngIf=\"languages.length > 1\" class=\"profile-item\" [ngClass]=\"{'active-topmenuitem': (mainLayoutService.activeTopbarItem$ | async) === profile}\">\n                <i class=\"pi pi-fw pi-globe\"></i>\n                <p-dropdown [ngModel]=\"selectedLanguage\" [options]=\"languages\" (onChange)=\"switchLanguage($event.value)\"></p-dropdown>\n            </li>\n        </ul>\n    </div>\n</div>\n" }]
@@ -6350,7 +6900,7 @@ class MngMainLayoutComponent {
     }
 }
 MngMainLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngMainLayoutComponent, deps: [{ token: i1.ActivatedRoute }, { token: MngCommonsService }, { token: MngMainLayoutComponentService }], target: i0.ɵɵFactoryTarget.Component });
-MngMainLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngMainLayoutComponent, selector: "mng-main-layout", host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [MngMainLayoutComponentService], viewQueries: [{ propertyName: "templates", predicate: MngTemplateDirective, descendants: true }], ngImport: i0, template: "<div\n    class=\"layout-wrapper\"\n    (click)=\"mainLayoutService.onLayoutClick()\"\n    [ngClass]=\"{\n        'layout-static': mngCommons.menuModeIsStatic$ | async,\n        'layout-overlay': mngCommons.menuModeIsOverlay$ | async,\n        'layout-slim': mngCommons.menuModeIsSlim$ | async,\n        'layout-sidebar': mngCommons.menuModeIsSidebar$ | async,\n        'layout-sidebar-static': (mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async),\n        'layout-overlay-active': mainLayoutService.overlayMenuActive$ | async,\n        'layout-mobile-active': mainLayoutService.staticMenuMobileActive$ | async,\n        'layout-static-inactive': (mainLayoutService.staticMenuDesktopInactive$ | async) && (mngCommons.menuModeIsStatic$ | async)\n    }\">\n    <div class=\"layout-main\">\n        <ng-container [mngComponent]=\"topbarComponent\"></ng-container>\n\n        <ng-container\n            *ngIf=\"\n                (mainLayoutService.isMobile$ | async) === false &&\n                ((mngCommons.menuModeIsStatic$ | async) || (mngCommons.menuModeIsSlim$ | async) || (mngCommons.menuModeIsSidebar$ | async))\n            \"\n            [mngComponent]=\"menuComponent\">\n        </ng-container>\n\n        <div class=\"layout-main-content\">\n            <router-outlet></router-outlet>\n        </div>\n\n        <ng-container [mngComponent]=\"footerComponent\"></ng-container>\n    </div>\n</div>\n", directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent"], outputs: ["instanceCreated"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngMainLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngMainLayoutComponent, selector: "mng-main-layout", host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [MngMainLayoutComponentService], viewQueries: [{ propertyName: "templates", predicate: MngTemplateDirective, descendants: true }], ngImport: i0, template: "<div\n    class=\"layout-wrapper\"\n    (click)=\"mainLayoutService.onLayoutClick()\"\n    [ngClass]=\"{\n        'layout-static': mngCommons.menuModeIsStatic$ | async,\n        'layout-overlay': mngCommons.menuModeIsOverlay$ | async,\n        'layout-slim': mngCommons.menuModeIsSlim$ | async,\n        'layout-sidebar': mngCommons.menuModeIsSidebar$ | async,\n        'layout-sidebar-static': (mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async),\n        'layout-overlay-active': mainLayoutService.overlayMenuActive$ | async,\n        'layout-mobile-active': mainLayoutService.staticMenuMobileActive$ | async,\n        'layout-static-inactive': (mainLayoutService.staticMenuDesktopInactive$ | async) && (mngCommons.menuModeIsStatic$ | async)\n    }\">\n    <div class=\"layout-main\">\n        <ng-container [mngComponent]=\"topbarComponent\"></ng-container>\n\n        <ng-container\n            *ngIf=\"\n                (mainLayoutService.isMobile$ | async) === false &&\n                ((mngCommons.menuModeIsStatic$ | async) || (mngCommons.menuModeIsSlim$ | async) || (mngCommons.menuModeIsSidebar$ | async))\n            \"\n            [mngComponent]=\"menuComponent\">\n        </ng-container>\n\n        <div class=\"layout-main-content\">\n            <router-outlet></router-outlet>\n        </div>\n\n        <ng-container [mngComponent]=\"footerComponent\"></ng-container>\n    </div>\n</div>\n", directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent"], outputs: ["instanceCreated"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngMainLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-main-layout', providers: [MngMainLayoutComponentService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"layout-wrapper\"\n    (click)=\"mainLayoutService.onLayoutClick()\"\n    [ngClass]=\"{\n        'layout-static': mngCommons.menuModeIsStatic$ | async,\n        'layout-overlay': mngCommons.menuModeIsOverlay$ | async,\n        'layout-slim': mngCommons.menuModeIsSlim$ | async,\n        'layout-sidebar': mngCommons.menuModeIsSidebar$ | async,\n        'layout-sidebar-static': (mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async),\n        'layout-overlay-active': mainLayoutService.overlayMenuActive$ | async,\n        'layout-mobile-active': mainLayoutService.staticMenuMobileActive$ | async,\n        'layout-static-inactive': (mainLayoutService.staticMenuDesktopInactive$ | async) && (mngCommons.menuModeIsStatic$ | async)\n    }\">\n    <div class=\"layout-main\">\n        <ng-container [mngComponent]=\"topbarComponent\"></ng-container>\n\n        <ng-container\n            *ngIf=\"\n                (mainLayoutService.isMobile$ | async) === false &&\n                ((mngCommons.menuModeIsStatic$ | async) || (mngCommons.menuModeIsSlim$ | async) || (mngCommons.menuModeIsSidebar$ | async))\n            \"\n            [mngComponent]=\"menuComponent\">\n        </ng-container>\n\n        <div class=\"layout-main-content\">\n            <router-outlet></router-outlet>\n        </div>\n\n        <ng-container [mngComponent]=\"footerComponent\"></ng-container>\n    </div>\n</div>\n" }]
@@ -6647,7 +7197,7 @@ const declarations = [
     // editor components
     MngFormEditorComponent,
     MngActionComponent,
-    MngActionDialogComponent,
+    MngActionEditorComponent,
     MngActionRouteComponent
 ];
 class MngCommonsModule {
@@ -6659,12 +7209,12 @@ class MngCommonsModule {
                 DialogService,
                 MessageService,
                 ConfirmationService,
-                MngActionService,
+                MngActionExecutorService,
                 MngNavigationService,
                 MngCommonsService,
                 // component service
                 MngMainLayoutComponentService,
-                TableviewComponentService,
+                MngViewContainerComponentService,
                 {
                     provide: MNG_MODULE_CONFIG_IT,
                     useValue: config
@@ -6695,6 +7245,14 @@ class MngCommonsModule {
                     multi: true,
                     useFactory: mngFormlyConfigProvider,
                     deps: [TranslateService, MNG_MODULE_CONFIG_IT]
+                },
+                {
+                    provide: ACTION_EDITOR_DIALOG_COMPONENT_SETTING,
+                    useValue: MngActionEditorComponent
+                },
+                {
+                    provide: MngErrorMapperService,
+                    useClass: DefaultMngErrorMapperService
                 }
             ]
         };
@@ -6741,13 +7299,13 @@ MngCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         // editor components
         MngFormEditorComponent,
         MngActionComponent,
-        MngActionDialogComponent,
+        MngActionEditorComponent,
         MngActionRouteComponent], imports: [
         // angular modules
         CommonModule,
         RouterModule,
         HttpClientModule,
-        ReactiveFormsModule, i3.TranslateModule, i3$1.FormlyModule, AutoCompleteModule,
+        ReactiveFormsModule, i3$1.TranslateModule, i3$2.FormlyModule, AutoCompleteModule,
         BreadcrumbModule,
         ButtonModule,
         CalendarModule,
@@ -6853,7 +7411,7 @@ MngCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         // editor components
         MngFormEditorComponent,
         MngActionComponent,
-        MngActionDialogComponent,
+        MngActionEditorComponent,
         MngActionRouteComponent] });
 MngCommonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngCommonsModule, imports: [[
             // angular modules
@@ -6930,7 +7488,7 @@ class AMngCrudApiService {
         this.objectSerializer = ObjectSerializer.get();
     }
     createPost(item, params) {
-        const url = `${this.getBasePath()}/${this.getServiceBasePath()}${this.getCreatePostPath()}`;
+        const url = `${this.getBasePath()}${this.getServiceBasePath()}${this.getCreatePostPath()}`;
         return this.http
             .post(url, this.objectSerializer.serializeClass(item, this.type), {
             withCredentials: true,
@@ -6941,7 +7499,7 @@ class AMngCrudApiService {
             .pipe(map(res => this.objectSerializer.deserializeClass(res, this.type)));
     }
     getAllPost(queryParamBody, params) {
-        const url = `${this.getBasePath()}/${this.getServiceBasePath()}${this.getGetAllPostPath()}`;
+        const url = `${this.getBasePath()}${this.getServiceBasePath()}${this.getGetAllPostPath()}`;
         return this.http
             .post(url, this.objectSerializer.serialize(queryParamBody, 'QueryParam'), {
             withCredentials: true,
@@ -6952,7 +7510,7 @@ class AMngCrudApiService {
             .pipe(map(res => this.objectSerializer.deserializeClass(res, this.queryResultType)));
     }
     getByIdGet(id, params) {
-        const url = `${this.getBasePath()}/${this.getServiceBasePath()}${this.getGetByIdGetPath(id)}`;
+        const url = `${this.getBasePath()}${this.getServiceBasePath()}${this.getGetByIdGetPath(id)}`;
         return this.http
             .get(url, {
             withCredentials: true,
@@ -6963,7 +7521,7 @@ class AMngCrudApiService {
             .pipe(map(res => this.objectSerializer.deserializeClass(res, this.type)));
     }
     updatePut(id, item, params) {
-        const url = `${this.getBasePath()}/${this.getServiceBasePath()}${this.getUpdatePutPath(id, item)}`;
+        const url = `${this.getBasePath()}${this.getServiceBasePath()}${this.getUpdatePutPath(id, item)}`;
         return this.http
             .put(url, this.objectSerializer.serializeClass(item, this.type), {
             withCredentials: true,
@@ -6974,7 +7532,7 @@ class AMngCrudApiService {
             .pipe(map(res => this.objectSerializer.deserializeClass(res, this.type)));
     }
     removeDelete(id, item, params) {
-        const url = `${this.getBasePath()}/${this.getServiceBasePath()}${this.getRemoveDeletePath(id, item)}`;
+        const url = `${this.getBasePath()}${this.getServiceBasePath()}${this.getRemoveDeletePath(id, item)}`;
         return this.http
             .request('delete', url, {
             withCredentials: true,
@@ -7458,5 +8016,5 @@ class RouteDataBuilder {
  * Generated bundle index. Do not edit.
  */
 
-export { AFieldDescriptor, AFieldGroupDescriptor, AGenericFieldDescriptor, AMngCrudApiService, AMngTableviewRouteComponent, ActionActivationResult, ActionActivationTriggerEnum, ActionDeleteDescriptor, ActionDescriptor, ActionEditorAddDescriptor, ActionEditorDescriptor, ActionEditorDetailsDescriptor, ActionEditorEditDescriptor, ActionError, ActionExecContext, ActionLevelEnum, ActionPositionEnum, ActionRunResult, ActionTriggerResult, ActionTypeEnum, ColumnDescriptor, DataProvider, EditorDataProvider, EditorDescriptor, EditorFormlyUtil, EnumName, EnumUtil, FieldGroupDescriptor, FieldInputDescriptor, FieldLookupDescriptor, FieldLookupEnumDescriptor, FieldManyEditorDescriptor, FieldManyToManyEditorDescriptor, FieldTabGroupDescriptor, FieldValidator, FilterDescriptor, FilterLookupDescriptor, FilterLookupEnumDescriptor, I18nUtil, LookupDataProvider, MNG_AUTOCOMPLETE_VALUE_ACCESSOR, MNG_DROPDOWN_VALUE_ACCESSOR, MediusFilterMatchType, MediusFilterParam, MediusQueryMode, MediusQueryParam, MediusQueryParamBuilder, MediusQueryResult, MediusQueryResultBase, MediusQueryResultWithObject, MediusRestUtil, MngActionComponent, MngActionDialogComponent, MngActionRouteComponent, MngActionService, MngAutocompleteComponent, MngBooleanPipe, MngBreadcrumbComponent, MngCommonsModule, MngCommonsService, MngComponentDirective, MngConfigurationService, MngDropdownComponent, MngEnumPipe, MngFooterComponent, MngFormEditorComponent, MngFormEditorSubmitEvent, MngFormFieldEvent, MngFormFieldEventComponentSubtype, MngFormFieldEventDialogSubtype, MngFormFieldEventTypeEnum, MngFormlyFieldAutocompleteComponent, MngFormlyFieldDropdownComponent, MngFormlyFieldFieldsetComponent, MngFormlyFieldInputComponent, MngFormlyFieldLookupDialogComponent, MngFormlyFieldTableDialogFormComponent, MngFormlyFieldTableDialogMultiselectComponent, MngFormlyFieldTabsComponent, MngFormlyFieldWrapperComponent, MngFormlyTableWrapperComponent, MngI18nPropertyPipe, MngMainLayoutComponent, MngMainLayoutComponentService, MngMenuComponent, MngMenuItemComponent, MngNavigationService, MngPropertyPathPipe, MngTableColumnFilterComponent, MngTableColumnValueComponent, MngTableComponent, MngTableviewComponent, MngTableviewRouteComponent, MngTemplateDirective, MngTopbarComponent, ModelDescriptor, ModelUtil, ObjectSerializer, RouteBuilder, RouteDataBuilder, RoutesBuilder, TableDataProvider, TableDescriptor, TableviewComponentService, TableviewDataProvider, TableviewDescriptor, ToastUtil, TypeName, TypeUtil, enumNameDecoratorPropertyName, enumsMapBase, formlyTypesConfig, formlyWrappersConfig, getEmailValidationMessage, getFormlyValidationMessages, getMaxLengthValidationMessage, getMinLengthValidationMessage, getRequiredValidationMessage, getTextPatternValidationMessage, mngCommonsInitializerProvider, mngConfigJsonAppInitializerProvider, mngConfigurationServiceProvider, mngFormlyConfigProvider, primeNgModules, typeMapBase, typeNameDecoratorPropertyName };
+export { AFieldDescriptor, AFieldGroupDescriptor, AGenericFieldDescriptor, AMngCrudApiService, AMngTableviewRouteComponent, ActionActivationResult, ActionActivationTriggerEnum, ActionDeleteDescriptor, ActionDescriptor, ActionEditorAddDescriptor, ActionEditorDescriptor, ActionEditorDetailsDescriptor, ActionEditorEditDescriptor, ActionEditorSubmitDescriptor, ActionError, ActionExecContext, ActionLevelEnum, ActionPositionEnum, ActionRunResult, ActionTriggerResult, ActionTypeEnum, ColumnDescriptor, DataProvider, DefaultMngErrorMapperService, EditorDataProvider, EditorDescriptor, EditorFormlyUtil, EnumName, EnumUtil, FieldDescriptor, FieldGroupDescriptor, FieldInputDescriptor, FieldLookupDescriptor, FieldLookupEnumDescriptor, FieldManyEditorDescriptor, FieldManyToManyEditorDescriptor, FieldTabGroupDescriptor, FieldValidator, FilterDescriptor, FilterLookupDescriptor, FilterLookupEnumDescriptor, I18nUtil, LookupDataProvider, MNG_AUTOCOMPLETE_VALUE_ACCESSOR, MNG_DROPDOWN_VALUE_ACCESSOR, MediusFilterMatchType, MediusFilterParam, MediusQueryMode, MediusQueryParam, MediusQueryParamBuilder, MediusQueryResult, MediusQueryResultBase, MediusQueryResultWithObject, 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, MngFormlyFieldLookupDialogComponent, MngFormlyFieldTableDialogFormComponent, MngFormlyFieldTableDialogMultiselectComponent, MngFormlyFieldTabsComponent, MngFormlyFieldWrapperComponent, MngFormlyTableWrapperComponent, MngI18nPropertyPipe, MngMainLayoutComponent, MngMainLayoutComponentService, MngMenuComponent, MngMenuItemComponent, MngNavigationService, MngPropertyPathPipe, MngTableColumnFilterComponent, MngTableColumnValueComponent, MngTableComponent, MngTableviewComponent, MngTableviewRouteComponent, MngTemplateDirective, MngTopbarComponent, MngViewContainerComponentService, ModelDescriptor, ModelUtil, ObjectSerializer, RouteBuilder, RouteDataBuilder, RoutesBuilder, TableDataProvider, TableDescriptor, TableviewDataProvider, TableviewDescriptor, ToastUtil, TypeName, TypeUtil, enumNameDecoratorPropertyName, enumsMapBase, formlyTypesConfig, formlyWrappersConfig, getEmailValidationMessage, getFormlyValidationMessages, getMaxLengthValidationMessage, getMinLengthValidationMessage, getRequiredValidationMessage, getTextPatternValidationMessage, mngCommonsInitializerProvider, mngConfigJsonAppInitializerProvider, mngConfigurationServiceProvider, mngFormlyConfigProvider, primeNgModules, typeMapBase, typeNameDecoratorPropertyName };
 //# sourceMappingURL=mediusinc-mng-commons.mjs.map