@mediusinc/mng-commons 0.1.0 → 0.2.0

package/fesm2020/mediusinc-mng-commons.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Pipe, EventEmitter, Component, ChangeDetectionStrategy, Output, ContentChildren, ViewChild, forwardRef, Injectable, InjectionToken, Inject, HostListener, Optional, APP_INITIALIZER, NgModule } from '@angular/core';
-import * as i6 from '@angular/common';
+import { Directive, Input, Pipe, EventEmitter, Component, ChangeDetectionStrategy, Output, ContentChildren, ViewChild, forwardRef, Injectable, InjectionToken, Inject, ViewChildren, HostListener, Optional, APP_INITIALIZER, NgModule } from '@angular/core';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/forms';
 import { FormGroup, NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule } from '@angular/forms';
@@ -22,7 +22,7 @@ import { ButtonModule } from 'primeng/button';
 import { CardModule } from 'primeng/card';
 import { CheckboxModule } from 'primeng/checkbox';
 import { ChipModule } from 'primeng/chip';
-import * as i6$1 from 'primeng/confirmdialog';
+import * as i6 from 'primeng/confirmdialog';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { ConfirmPopupModule } from 'primeng/confirmpopup';
 import * as i2$7 from 'primeng/dialog';
@@ -41,12 +41,12 @@ import { InputTextModule } from 'primeng/inputtext';
 import * as i8 from 'primeng/inputtextarea';
 import { InputTextareaModule } from 'primeng/inputtextarea';
 import { PaginatorModule } from 'primeng/paginator';
-import * as i4$2 from 'primeng/radiobutton';
+import * as i4$3 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import * as i9 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
 import { SelectButtonModule } from 'primeng/selectbutton';
-import * as i4$3 from 'primeng/table';
+import * as i4$4 from 'primeng/table';
 import { Table, TableModule } from 'primeng/table';
 import { TagModule } from 'primeng/tag';
 import * as i7$1 from 'primeng/toast';
@@ -54,10 +54,11 @@ import { ToastModule } from 'primeng/toast';
 import { ToggleButtonModule } from 'primeng/togglebutton';
 import * as i8$1 from 'primeng/toolbar';
 import { ToolbarModule } from 'primeng/toolbar';
+import * as i10 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
 import * as i3$1 from 'primeng/messages';
 import { MessagesModule } from 'primeng/messages';
-import * as i4 from 'primeng/progressspinner';
+import * as i4$1 from 'primeng/progressspinner';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import * as i1$4 from 'primeng/tabview';
 import { TabViewModule } from 'primeng/tabview';
@@ -72,33 +73,58 @@ import { SkeletonModule } from 'primeng/skeleton';
 import { of, throwError, Observable, Subject, ReplaySubject, from, BehaviorSubject } from 'rxjs';
 import 'reflect-metadata';
 import { mergeMap, map, first, finalize, catchError, filter, startWith } from 'rxjs/operators';
-import * as i4$1 from '@angular/platform-browser';
+import * as i4$2 from '@angular/platform-browser';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 
-class TemplateDirective {
-    constructor(template) {
+class MngComponentDirective {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+    ngOnInit() {
+        this.viewContainerRef.clear();
+        this.componentRef = this.viewContainerRef.createComponent(this.component);
+    }
+}
+MngComponentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngComponentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+MngComponentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: MngComponentDirective, selector: "[mngComponent]", inputs: { component: ["mngComponent", "component"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngComponentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mngComponent]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { component: [{
+                type: Input,
+                args: ['mngComponent']
+            }] } });
+
+class MngTemplateDirective {
+    constructor(template, viewContainerRef) {
         this.template = template;
+        this.viewContainerRef = viewContainerRef;
     }
     getType() {
         return this.name;
     }
+    getViewContainerRef() {
+        return this.viewContainerRef;
+    }
 }
-TemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-TemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: TemplateDirective, selector: "[mngTemplate]", inputs: { type: "type", name: ["mngTemplate", "name"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TemplateDirective, decorators: [{
+MngTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngTemplateDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+MngTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: MngTemplateDirective, selector: "[mngTemplate]", inputs: { type: "type", name: ["mngTemplate", "name"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mngTemplate]',
                     host: {}
                 }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { type: [{
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { type: [{
                 type: Input
             }], name: [{
                 type: Input,
                 args: ['mngTemplate']
             }] } });
 
-class BooleanPipe {
+class MngBooleanPipe {
     transform(value) {
         if (typeof value === 'boolean') {
             return value ? 'general.yes' : 'general.no';
@@ -108,9 +134,9 @@ class BooleanPipe {
         }
     }
 }
-BooleanPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BooleanPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-BooleanPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BooleanPipe, name: "boolean" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BooleanPipe, decorators: [{
+MngBooleanPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngBooleanPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MngBooleanPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngBooleanPipe, name: "boolean" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngBooleanPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'boolean',
@@ -118,7 +144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }] });
 
-class PropertyPathPipe {
+class MngPropertyPathPipe {
     transform(value, path = '') {
         if (path.indexOf('.') >= 0) {
             const pathSplit = path.split('.');
@@ -142,9 +168,9 @@ class PropertyPathPipe {
         }
     }
 }
-PropertyPathPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: PropertyPathPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-PropertyPathPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: PropertyPathPipe, name: "propertyPath" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: PropertyPathPipe, decorators: [{
+MngPropertyPathPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngPropertyPathPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MngPropertyPathPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngPropertyPathPipe, name: "propertyPath" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngPropertyPathPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'propertyPath',
@@ -152,34 +178,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }] });
 
-class MngEditorSubmitEvent {
+class MngFormEditorSubmitEvent {
     constructor(formItem) {
         this.formItem = formItem;
         this.success = true;
     }
-}
-class MngEditorItemEvent {
-    constructor(item) {
-        this.item = item;
-    }
-}
-class MngEditorSubmitTriggerEvent {
-}
-
-class MngTableLoadEvent {
-}
-class MngTableCellClickEvent {
-    constructor(column, rowItem, rowIndex) {
-        this.column = column;
-        this.rowItem = rowItem;
-        this.rowIndex = rowIndex;
-    }
-}
-class MngTableReloadEvent {
-    constructor() {
-        this.resetParams = false;
-        this.emitEvent = false;
-    }
 }
 
 class ActionDescriptor {
@@ -238,6 +241,9 @@ class ActionDescriptor {
     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');
@@ -332,6 +338,10 @@ class ActionDescriptor {
         this._icon = icon;
         return this;
     }
+    withTooltip(tooltip) {
+        this._title = tooltip;
+        return this;
+    }
     withClassName(className) {
         this._className = className;
         return this;
@@ -505,6 +515,79 @@ var ActionLevelEnum;
     ActionLevelEnum[ActionLevelEnum["Danger"] = 7] = "Danger";
 })(ActionLevelEnum || (ActionLevelEnum = {}));
 
+class DataProvider {
+    constructor(modelType, serviceType) {
+        this._modelType = modelType;
+        this._serviceType = serviceType;
+    }
+    get serviceType() {
+        return this._serviceType;
+    }
+    get modelType() {
+        return this._modelType;
+    }
+    get enumName() {
+        return this._enumName;
+    }
+    withServiceType(type) {
+        this._serviceType = type;
+        return this;
+    }
+    withEnumName(enumName) {
+        this._enumName = enumName;
+        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;
+        return this;
+    }
+}
+
 /* tslint:disable:no-angle-bracket-type-assertion no-trailing-whitespace member-ordering object-literal-key-quotes */
 /**
  * Generated API
@@ -769,76 +852,6 @@ const typeMapBase = {
     'QueryResultWithObject': MediusQueryResultWithObject
 };
 
-class DataProvider {
-    constructor(modelType, serviceType) {
-        this._modelType = modelType;
-        this._serviceType = serviceType;
-    }
-    get serviceType() {
-        return this._serviceType;
-    }
-    get modelType() {
-        return this._modelType;
-    }
-    get enumName() {
-        return this._enumName;
-    }
-    withServiceType(type) {
-        this._serviceType = type;
-        return this;
-    }
-    withEnumName(enumName) {
-        this._enumName = enumName;
-        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;
-        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 TableviewDataProvider extends EditorDataProvider {
     constructor(modelType, serviceType) {
         super(modelType, serviceType);
@@ -853,27 +866,6 @@ class TableviewDataProvider extends EditorDataProvider {
     }
 }
 
-class FieldValidator {
-    constructor(name, expression, message, options) {
-        this._name = name;
-        this._expression = expression;
-        this._message = message;
-        this._options = options;
-    }
-    get name() {
-        return this._name;
-    }
-    get expression() {
-        return this._expression;
-    }
-    get message() {
-        return this._message;
-    }
-    get options() {
-        return this._options;
-    }
-}
-
 class ObjectSerializer {
     constructor() {
         this._primitives = [
@@ -1884,6 +1876,27 @@ class FieldGroupDescriptor extends AFieldGroupDescriptor {
     }
 }
 
+class FieldValidator {
+    constructor(name, expression, message, options) {
+        this._name = name;
+        this._expression = expression;
+        this._message = message;
+        this._options = options;
+    }
+    get name() {
+        return this._name;
+    }
+    get expression() {
+        return this._expression;
+    }
+    get message() {
+        return this._message;
+    }
+    get options() {
+        return this._options;
+    }
+}
+
 class ModelDescriptor {
     constructor(modelType, idProperty, titleProperty) {
         this._type = modelType;
@@ -2800,6 +2813,44 @@ class ModelUtil {
     }
 }
 
+class ToastUtil {
+    static tableNotificationError(translationService, table, error, tableview) {
+        const params = {};
+        if (error?.message) {
+            params.errorMessage = `: ${error.message}`;
+        }
+        else {
+            params.errorMessage = '.';
+        }
+        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 });
+    }
+    static actionNotificationSuccess(translationService, action, functionName, customTitleKey, customMessageKey, tableview, 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 });
+    }
+    static actionNotificationError(translationService, action, error, functionName, tableview, item) {
+        const params = {};
+        if (error?.message) {
+            params.errorMessage = `: ${error.message}`;
+        }
+        else {
+            params.errorMessage = '.';
+        }
+        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 });
+    }
+    static getFormEditorWarningMessage(translationService, title, message) {
+        const actionErrorTitle = translationService.instant(title) ?? undefined;
+        const actionErrorMessage = translationService.instant(message) ?? undefined;
+        return { severity: 'warn', summary: actionErrorTitle, detail: actionErrorMessage };
+    }
+}
+
 const typeNameDecoratorPropertyName = 'typeName';
 function TypeName(typeName) {
     return function (target) {
@@ -2844,45 +2895,7 @@ class TypeUtil {
     }
 }
 
-class ToastUtil {
-    static tableNotificationError(translationService, table, error, tableview) {
-        const params = {};
-        if (error?.message) {
-            params.errorMessage = `: ${error.message}`;
-        }
-        else {
-            params.errorMessage = '.';
-        }
-        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 });
-    }
-    static actionNotificationSuccess(translationService, action, functionName, customTitleKey, customMessageKey, tableview, 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 });
-    }
-    static actionNotificationError(translationService, action, error, functionName, tableview, item) {
-        const params = {};
-        if (error?.message) {
-            params.errorMessage = `: ${error.message}`;
-        }
-        else {
-            params.errorMessage = '.';
-        }
-        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 });
-    }
-    static getFormEditorWarningMessage(translationService, title, message) {
-        const actionErrorTitle = translationService.instant(title) ?? undefined;
-        const actionErrorMessage = translationService.instant(message) ?? undefined;
-        return { severity: 'warn', summary: actionErrorTitle, detail: actionErrorMessage };
-    }
-}
-
-class FormEditorComponent {
+class MngFormEditorComponent {
     constructor(translateService) {
         this.translateService = translateService;
         this.submitLoading = false;
@@ -2935,7 +2948,7 @@ class FormEditorComponent {
                     field.setter(formSubmitItem, this.form.value[field.property]);
                 }
             });
-            this.submitEventEmitter.next(new MngEditorSubmitEvent(formSubmitItem));
+            this.submitEventEmitter.next(new MngFormEditorSubmitEvent(formSubmitItem));
         }
         else {
             // find and mark invalid tabs
@@ -2945,7 +2958,7 @@ class FormEditorComponent {
                     this.formOptions.formState['tab_' + (tab.id ? tab.id : tab.templateOptions?.label) + '_invalid'] = isInvalid;
                 }
             }
-            const event = new MngEditorSubmitEvent(formSubmitItem);
+            const event = new MngFormEditorSubmitEvent(formSubmitItem);
             event.success = false;
             this.formMessages.push(ToastUtil.getFormEditorWarningMessage(this.translateService, 'mngEditor.invalidFormToastTitle', 'mngEditor.invalidFormToastMessage'));
             this.submitEventEmitter.next(event);
@@ -2984,9 +2997,9 @@ class FormEditorComponent {
         this.formOptions.formState.disabled = this.isFormDisabled !== null ? this.isFormDisabled === true : this.descriptor.disabled;
     }
 }
-FormEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormEditorComponent, deps: [{ token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-FormEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormEditorComponent, selector: "mng-form-editor", inputs: { descriptor: "descriptor", submitLoading: "submitLoading", item: "item", isSubmitButtonVisible: "isSubmitButtonVisible", isFormDisabled: "isFormDisabled" }, outputs: { submitEventEmitter: "onSubmit" }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], 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.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { type: i3$1.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }], directives: [{ type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }], pipes: { "async": i6.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormEditorComponent, decorators: [{
+MngFormEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngFormEditorComponent, deps: [{ token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+MngFormEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MngFormEditorComponent, selector: "mng-form-editor", inputs: { descriptor: "descriptor", submitLoading: "submitLoading", item: "item", isSubmitButtonVisible: "isSubmitButtonVisible", isFormDisabled: "isFormDisabled" }, outputs: { submitEventEmitter: "onSubmit" }, 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.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { type: i3$1.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }], directives: [{ type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.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.1", 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: i2.TranslateService }]; }, propDecorators: { descriptor: [{
@@ -3004,7 +3017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 args: ['onSubmit']
             }], templates: [{
                 type: ContentChildren,
-                args: [TemplateDirective]
+                args: [MngTemplateDirective]
             }], submitButtonElementRef: [{
                 type: ViewChild,
                 args: ['submitButton']
@@ -3088,7 +3101,7 @@ class MngAutocompleteComponent {
     }
 }
 MngAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngAutocompleteComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-MngAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: { dataProvider: "dataProvider", dataKeyProperty: "dataKeyProperty", itemsLabelProperty: "itemsLabelProperty", multiselect: "multiselect", placeholder: "placeholder", className: "className", dropdownClassName: "dropdownClassName" }, outputs: { onChange: "onChange" }, providers: [MNG_AUTOCOMPLETE_VALUE_ACCESSOR], viewQueries: [{ propertyName: "primeAutocomplete", first: true, predicate: AutoComplete, descendants: true }], ngImport: i0, template: "<p-autoComplete [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]=\"'mngAutcomplete.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.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i6.AsyncPipe, "translate": i2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: { dataProvider: "dataProvider", dataKeyProperty: "dataKeyProperty", itemsLabelProperty: "itemsLabelProperty", multiselect: "multiselect", placeholder: "placeholder", className: "className", dropdownClassName: "dropdownClassName" }, outputs: { onChange: "onChange" }, providers: [MNG_AUTOCOMPLETE_VALUE_ACCESSOR], viewQueries: [{ propertyName: "primeAutocomplete", first: true, predicate: AutoComplete, descendants: true }], ngImport: i0, template: "<p-autoComplete [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]=\"'mngAutcomplete.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.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i4.AsyncPipe, "translate": i2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-autocomplete', providers: [MNG_AUTOCOMPLETE_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-autoComplete [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]=\"'mngAutcomplete.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" }]
@@ -3186,7 +3199,7 @@ class MngDropdownComponent {
     }
 }
 MngDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngDropdownComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-MngDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MngDropdownComponent, selector: "mng-dropdown", inputs: { dataProvider: "dataProvider", dataKeyProperty: "dataKeyProperty", itemsLabelProperty: "itemsLabelProperty", itemsValueProperty: "itemsValueProperty", multiselect: "multiselect", placeholder: "placeholder", showClear: "showClear", className: "className", dropdownClassName: "dropdownClassName" }, outputs: { onChange: "onChange" }, providers: [MNG_DROPDOWN_VALUE_ACCESSOR], viewQueries: [{ propertyName: "primeDropdown", first: true, predicate: Dropdown, descendants: true }], ngImport: i0, template: "<p-dropdown *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]=\"(items$ | async) ?? []\"\n            [showClear]=\"showClear\"\n            [autoDisplayFirst]=\"false\"\n            [styleClass]=\"$any(className)\"\n            [panelStyleClass]=\"$any(dropdownClassName)\"\n            (onChange)=\"onChange.emit($event.value)\"\n            appendTo=\"body\">\n</p-dropdown>\n<ng-template #pMultiselect>\n    <p-multiSelect 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                   (onChange)=\"onChange.emit($event.value)\"\n                   appendTo=\"body\">\n    </p-multiSelect>\n</ng-template>\n", components: [{ type: i1$1.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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i6.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MngDropdownComponent, selector: "mng-dropdown", inputs: { dataProvider: "dataProvider", dataKeyProperty: "dataKeyProperty", itemsLabelProperty: "itemsLabelProperty", itemsValueProperty: "itemsValueProperty", multiselect: "multiselect", placeholder: "placeholder", showClear: "showClear", className: "className", dropdownClassName: "dropdownClassName" }, outputs: { onChange: "onChange" }, providers: [MNG_DROPDOWN_VALUE_ACCESSOR], viewQueries: [{ propertyName: "primeDropdown", first: true, predicate: Dropdown, descendants: true }], ngImport: i0, template: "<p-dropdown *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]=\"(items$ | async) ?? []\"\n            [showClear]=\"showClear\"\n            [autoDisplayFirst]=\"false\"\n            [styleClass]=\"$any(className)\"\n            [panelStyleClass]=\"$any(dropdownClassName)\"\n            (onChange)=\"onChange.emit($event.value)\"\n            appendTo=\"body\">\n</p-dropdown>\n<ng-template #pMultiselect>\n    <p-multiSelect 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                   (onChange)=\"onChange.emit($event.value)\"\n                   appendTo=\"body\">\n    </p-multiSelect>\n</ng-template>\n", components: [{ type: i1$1.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.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.1", ngImport: i0, type: MngDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-dropdown', providers: [MNG_DROPDOWN_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-dropdown *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]=\"(items$ | async) ?? []\"\n            [showClear]=\"showClear\"\n            [autoDisplayFirst]=\"false\"\n            [styleClass]=\"$any(className)\"\n            [panelStyleClass]=\"$any(dropdownClassName)\"\n            (onChange)=\"onChange.emit($event.value)\"\n            appendTo=\"body\">\n</p-dropdown>\n<ng-template #pMultiselect>\n    <p-multiSelect 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                   (onChange)=\"onChange.emit($event.value)\"\n                   appendTo=\"body\">\n    </p-multiSelect>\n</ng-template>\n" }]
@@ -3273,7 +3286,6 @@ class ActionTriggerResult {
     }
 }
 
-// TODO: check if legit solution
 class TableviewComponentService {
     constructor() {
         this.actions = [];
@@ -3289,7 +3301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
-class ActionComponent {
+class MngActionComponent {
     constructor(route, translate, actionService, confirmationService, tableviewService) {
         this.route = route;
         this.translate = translate;
@@ -3306,6 +3318,7 @@ class ActionComponent {
         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);
+        this.$tooltip = I18nUtil.streamActionTranslation(this.translate, this.action, 'tooltip', this.action?.tooltip ?? undefined, this.item);
     }
     triggerAction(event) {
         this.loadingSubject.next(true);
@@ -3322,11 +3335,11 @@ class ActionComponent {
         return `${action.actionName}_${this.cmpId}`;
     }
 }
-ActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ActionComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2.TranslateService }, { token: MngActionService }, { token: i2$3.ConfirmationService }, { token: TableviewComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ActionComponent, 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 *ngIf=\"action.icon && action.title === null; else noIcon\" type=\"button\"\n            pButton pRipple\n            [icon]=\"action.icon\"\n            [loading]=\"($loading | async) ?? false\"\n            [disabled]=\"!($isEnabled | async)\"\n            (click)=\"triggerAction($event)\"\n            class=\"mng-action-button mng-action-button-icon p-button-rounded\"\n            [class.p-button-success]=\"action.level === 5\"\n            [class.p-button-danger]=\"action.level === 7\">\n    </button>\n    <ng-template #noIcon>\n        <button type=\"button\"\n                pButton pRipple\n                [icon]=\"$any(action.icon)\"\n                [label]=\"($label | async) ?? ''\"\n                [loading]=\"($loading | async) ?? false\"\n                [disabled]=\"!($isEnabled | async)\"\n                (click)=\"triggerAction($event)\"\n                class=\"mng-action-button p-button-text\"\n                [class.p-button-success]=\"action.level === 5\"\n                [class.p-button-danger]=\"action.level === 7\">\n        </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$1.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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i9.Ripple, selector: "[pRipple]" }], pipes: { "async": i6.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ActionComponent, decorators: [{
+MngActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngActionComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2.TranslateService }, { token: MngActionService }, { token: i2$3.ConfirmationService }, { token: TableviewComponentService }], target: i0.ɵɵFactoryTarget.Component });
+MngActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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 *ngIf=\"action.icon && action.title === null; else noIcon\" type=\"button\"\n            pButton pRipple\n            [icon]=\"action.icon\"\n            [loading]=\"($loading | async) ?? false\"\n            [disabled]=\"!($isEnabled | async)\"\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\">\n    </button>\n    <ng-template #noIcon>\n        <button type=\"button\"\n                pButton pRipple\n                [icon]=\"$any(action.icon)\"\n                [label]=\"($label | async) ?? ''\"\n                [loading]=\"($loading | async) ?? false\"\n                [disabled]=\"!($isEnabled | async)\"\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\">\n        </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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.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.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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 *ngIf=\"action.icon && action.title === null; else noIcon\" type=\"button\"\n            pButton pRipple\n            [icon]=\"action.icon\"\n            [loading]=\"($loading | async) ?? false\"\n            [disabled]=\"!($isEnabled | async)\"\n            (click)=\"triggerAction($event)\"\n            class=\"mng-action-button mng-action-button-icon p-button-rounded\"\n            [class.p-button-success]=\"action.level === 5\"\n            [class.p-button-danger]=\"action.level === 7\">\n    </button>\n    <ng-template #noIcon>\n        <button type=\"button\"\n                pButton pRipple\n                [icon]=\"$any(action.icon)\"\n                [label]=\"($label | async) ?? ''\"\n                [loading]=\"($loading | async) ?? false\"\n                [disabled]=\"!($isEnabled | async)\"\n                (click)=\"triggerAction($event)\"\n                class=\"mng-action-button p-button-text\"\n                [class.p-button-success]=\"action.level === 5\"\n                [class.p-button-danger]=\"action.level === 7\">\n        </button>\n    </ng-template>\n    <p-confirmDialog *ngIf=\"action.hasRunConfirmation\" [key]=\"action.actionName + '_' + cmpId\" [baseZIndex]=\"50\" appendTo=\"body\"></p-confirmDialog>\n</ng-container>\n" }]
+            args: [{ selector: 'mng-action', changeDetection: ChangeDetectionStrategy.OnPush, providers: [MessageService, ConfirmationService], template: "<ng-container *ngIf=\"$isVisible | async\">\n    <button *ngIf=\"action.icon && action.title === null; else noIcon\" type=\"button\"\n            pButton pRipple\n            [icon]=\"action.icon\"\n            [loading]=\"($loading | async) ?? false\"\n            [disabled]=\"!($isEnabled | async)\"\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\">\n    </button>\n    <ng-template #noIcon>\n        <button type=\"button\"\n                pButton pRipple\n                [icon]=\"$any(action.icon)\"\n                [label]=\"($label | async) ?? ''\"\n                [loading]=\"($loading | async) ?? false\"\n                [disabled]=\"!($isEnabled | async)\"\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\">\n        </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$2.ActivatedRoute }, { type: i2.TranslateService }, { type: MngActionService }, { type: i2$3.ConfirmationService }, { type: TableviewComponentService }]; }, propDecorators: { action: [{
                 type: Input
             }], item: [{
@@ -3337,7 +3350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 type: Input
             }] } });
 
-class ActionRouteComponent {
+class MngActionRouteComponent {
     constructor(router, route, confirmationService, navigationService, actionService, tableviewService) {
         this.router = router;
         this.route = route;
@@ -3389,7 +3402,7 @@ class ActionRouteComponent {
             .subscribe(res => {
             if (res.dialogRef) {
                 this.dialogRef = res.dialogRef;
-                this.dialogCloseSubscription = this.dialogRef.onClose.subscribe(e => {
+                this.dialogCloseSubscription = this.dialogRef?.onClose.subscribe(e => {
                     const actionEv = e;
                     if (!actionEv?.error || !actionEv?.error?.dismissed) {
                         this.tableviewService.reloadTable(); // reload only if no error in action and
@@ -3464,24 +3477,20 @@ class ActionRouteComponent {
         return null;
     }
 }
-ActionRouteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ActionRouteComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: i2$3.ConfirmationService }, { token: MngNavigationService }, { token: MngActionService }, { token: TableviewComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ActionRouteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ActionRouteComponent, 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$1.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.1", ngImport: i0, type: ActionRouteComponent, decorators: [{
+MngActionRouteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngActionRouteComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: i2$3.ConfirmationService }, { token: MngNavigationService }, { token: MngActionService }, { token: TableviewComponentService }], target: i0.ɵɵFactoryTarget.Component });
+MngActionRouteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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$2.Router }, { type: i1$2.ActivatedRoute }, { type: i2$3.ConfirmationService }, { type: MngNavigationService }, { type: MngActionService }, { type: TableviewComponentService }]; } });
 
-class ActionDialogComponent {
-    constructor(injector, translate, dialogRef, dialogConfig, actionService, mngCommonsService) {
+class MngActionDialogComponent {
+    constructor(injector, translate, dialogRef, dialogConfig, actionService) {
         this.injector = injector;
         this.translate = translate;
         this.dialogRef = dialogRef;
         this.dialogConfig = dialogConfig;
         this.actionService = actionService;
-        this.mngCommonsService = mngCommonsService;
-        // event outputs
-        this.createEventEmitter = new EventEmitter();
-        this.visibleChangeEventEmitter = new EventEmitter();
         this.cmpId = Math.random().toString(36).substring(2);
         this.loadingSubject = new ReplaySubject(1);
         this.submitLoadingSubject = new ReplaySubject(1);
@@ -3575,18 +3584,18 @@ class ActionDialogComponent {
             .subscribe(t => {
             requestAnimationFrame(() => {
                 this.dialogConfig.header = t ?? undefined;
-                this.mngCommonsService.setPageTitle(t ?? undefined);
+                // this.mngCommonsService.setPageTitle(t ?? undefined);
             });
         });
         this.subscriptions.push(subscription);
     }
 }
-ActionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ActionDialogComponent, deps: [{ token: i0.Injector }, { token: i2.TranslateService }, { token: i2$4.DynamicDialogRef }, { token: i2$4.DynamicDialogConfig }, { token: MngActionService }, { token: MngCommonsService }], target: i0.ɵɵFactoryTarget.Component });
-ActionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ActionDialogComponent, selector: "mng-action-dialog", inputs: { action: "action", itemId: "itemId", item: "item", actionData: "actionData", dataProvider: "dataProvider" }, outputs: { createEventEmitter: "onFinished", visibleChangeEventEmitter: "onVisibleChange" }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "submitButtonElementRef", first: true, predicate: ["submitButton"], descendants: true }, { propertyName: "editorComponent", first: true, predicate: FormEditorComponent, 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)\"\n                    [descriptor]=\"action.editorDescriptor\"\n                    [item]=\"item\"\n                    (onSubmit)=\"onSubmit($event)\">\n        </mng-form-editor>\n    </div>\n    <div class=\"flex flex-row justify-content-between\">\n        <div></div>\n        <div>\n            <button type=\"button\" pButton pRipple [label]=\"'general.close' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"closeDialog()\" [disabled]=\"submitLoading$ | async\"></button>\n            <button *ngIf=\"isSaveButton\" #submitButton type=\"button\" pButton 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\">\n            </button>\n        </div>\n    </div>\n</div>\n", components: [{ type: i4.ProgressSpinner, selector: "p-progressSpinner", inputs: ["style", "styleClass", "strokeWidth", "fill", "animationDuration"] }, { type: FormEditorComponent, selector: "mng-form-editor", inputs: ["descriptor", "submitLoading", "item", "isSubmitButtonVisible", "isFormDisabled"], outputs: ["onSubmit"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i9.Ripple, selector: "[pRipple]" }], pipes: { "async": i6.AsyncPipe, "translate": i2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ActionDialogComponent, decorators: [{
+MngActionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngActionDialogComponent, deps: [{ token: i0.Injector }, { token: i2.TranslateService }, { token: i2$4.DynamicDialogRef }, { token: i2$4.DynamicDialogConfig }, { token: MngActionService }], target: i0.ɵɵFactoryTarget.Component });
+MngActionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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)\"\n                    [descriptor]=\"action.editorDescriptor\"\n                    [item]=\"item\"\n                    (onSubmit)=\"onSubmit($event)\">\n        </mng-form-editor>\n    </div>\n    <div class=\"flex flex-row justify-content-between\">\n        <div></div>\n        <div>\n            <button type=\"button\" pButton pRipple [label]=\"'general.close' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"closeDialog()\" [disabled]=\"submitLoading$ | async\"></button>\n            <button *ngIf=\"isSaveButton\" #submitButton type=\"button\" pButton 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\">\n            </button>\n        </div>\n    </div>\n</div>\n", components: [{ type: i4$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["style", "styleClass", "strokeWidth", "fill", "animationDuration"] }, { type: MngFormEditorComponent, selector: "mng-form-editor", inputs: ["descriptor", "submitLoading", "item", "isSubmitButtonVisible", "isFormDisabled"], outputs: ["onSubmit"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i9.Ripple, selector: "[pRipple]" }], pipes: { "async": i4.AsyncPipe, "translate": i2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngActionDialogComponent, 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)\"\n                    [descriptor]=\"action.editorDescriptor\"\n                    [item]=\"item\"\n                    (onSubmit)=\"onSubmit($event)\">\n        </mng-form-editor>\n    </div>\n    <div class=\"flex flex-row justify-content-between\">\n        <div></div>\n        <div>\n            <button type=\"button\" pButton pRipple [label]=\"'general.close' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"closeDialog()\" [disabled]=\"submitLoading$ | async\"></button>\n            <button *ngIf=\"isSaveButton\" #submitButton type=\"button\" pButton 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\">\n            </button>\n        </div>\n    </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i2.TranslateService }, { type: i2$4.DynamicDialogRef }, { type: i2$4.DynamicDialogConfig }, { type: MngActionService }, { type: MngCommonsService }]; }, propDecorators: { action: [{
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i2.TranslateService }, { type: i2$4.DynamicDialogRef }, { type: i2$4.DynamicDialogConfig }, { type: MngActionService }]; }, propDecorators: { action: [{
                 type: Input
             }], itemId: [{
                 type: Input
@@ -3596,21 +3605,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 type: Input
             }], dataProvider: [{
                 type: Input
-            }], createEventEmitter: [{
-                type: Output,
-                args: ['onFinished']
-            }], visibleChangeEventEmitter: [{
-                type: Output,
-                args: ['onVisibleChange']
             }], templates: [{
                 type: ContentChildren,
-                args: [TemplateDirective]
+                args: [MngTemplateDirective]
             }], submitButtonElementRef: [{
                 type: ViewChild,
                 args: ['submitButton']
             }], editorComponent: [{
                 type: ViewChild,
-                args: [FormEditorComponent]
+                args: [MngFormEditorComponent]
             }] } });
 
 class MngActionService {
@@ -3801,7 +3804,7 @@ class MngActionService {
             if (sourceComponent) {
                 dialogConfig.data.sourceComponent = sourceComponent;
             }
-            const dialogRef = this.dialogService.open(ActionDialogComponent, dialogConfig);
+            const dialogRef = this.dialogService.open(MngActionDialogComponent, dialogConfig);
             return of(new ActionActivationResult(undefined, dialogRef));
         }
         else {
@@ -3894,6 +3897,7 @@ class MngConfigurationService {
      */
     addEnvironmentSource(environment) {
         this.projectEnvironment = environment;
+        this.mergeConfigs();
     }
     /**
      * Adds new config source from JSON file.
@@ -3946,12 +3950,13 @@ class MngConfigurationService {
 }
 MngConfigurationService._instance = null;
 
-const MNG_MODULE_CONFIG_IT = new InjectionToken('MngModuleConfig');
-
-const BROWSER_STORAGE_IT = new InjectionToken('Browser storage', {
+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;
@@ -4281,16 +4286,16 @@ class MngCommonsService {
         return titlePieces.join(' - ');
     }
 }
-MngCommonsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngCommonsService, deps: [{ token: i1$2.Router }, { token: i2$3.PrimeNGConfig }, { token: i2.TranslateService }, { token: i4$1.Title }, { token: MngConfigurationService }, { token: MNG_MODULE_CONFIG_IT }, { token: BROWSER_STORAGE_IT }], target: i0.ɵɵFactoryTarget.Injectable });
+MngCommonsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngCommonsService, deps: [{ token: i1$2.Router }, { token: i2$3.PrimeNGConfig }, { token: i2.TranslateService }, { token: i4$2.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.1", ngImport: i0, type: MngCommonsService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngCommonsService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i2$3.PrimeNGConfig }, { type: i2.TranslateService }, { type: i4$1.Title }, { type: MngConfigurationService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i2$3.PrimeNGConfig }, { type: i2.TranslateService }, { type: i4$2.Title }, { type: MngConfigurationService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MNG_MODULE_CONFIG_IT]
                 }] }, { type: Storage, decorators: [{
                     type: Inject,
-                    args: [BROWSER_STORAGE_IT]
+                    args: [MNG_BROWSER_STORAGE_IT]
                 }] }]; } });
 
 class MngNavigationService {
@@ -4330,11 +4335,11 @@ class MngNavigationService {
         }
     }
 }
-MngNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngNavigationService, deps: [{ token: i1$2.Router }, { token: i6.Location }], target: i0.ɵɵFactoryTarget.Injectable });
+MngNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngNavigationService, deps: [{ token: i1$2.Router }, { token: i4.Location }], target: i0.ɵɵFactoryTarget.Injectable });
 MngNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngNavigationService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngNavigationService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i6.Location }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i4.Location }]; } });
 
 class MngBreadcrumbComponent {
     constructor(mngCommons) {
@@ -4342,7 +4347,7 @@ class MngBreadcrumbComponent {
     }
 }
 MngBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngBreadcrumbComponent, deps: [{ token: MngCommonsService }], target: i0.ɵɵFactoryTarget.Component });
-MngBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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$5.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }], pipes: { "async": i6.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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$5.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.1", 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" }]
@@ -4361,7 +4366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
             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" }]
         }], ctorParameters: function () { return [{ type: MngCommonsService }]; } });
 
-class MainLayoutComponentService {
+class MngMainLayoutComponentService {
     constructor(mngCommons) {
         this.mngCommons = mngCommons;
         this._overlayMenuActive = false;
@@ -4540,9 +4545,9 @@ class MainLayoutComponentService {
         return width <= 991;
     }
 }
-MainLayoutComponentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MainLayoutComponentService, deps: [{ token: MngCommonsService }], target: i0.ɵɵFactoryTarget.Injectable });
-MainLayoutComponentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MainLayoutComponentService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MainLayoutComponentService, decorators: [{
+MngMainLayoutComponentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngMainLayoutComponentService, deps: [{ token: MngCommonsService }], target: i0.ɵɵFactoryTarget.Injectable });
+MngMainLayoutComponentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngMainLayoutComponentService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngMainLayoutComponentService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: MngCommonsService }]; } });
 
@@ -4644,8 +4649,8 @@ class MngMenuItemComponent {
         }
     }
 }
-MngMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngMenuItemComponent, deps: [{ token: i1$2.Router }, { token: i0.ChangeDetectorRef }, { token: MngCommonsService }, { token: MainLayoutComponentService }], target: i0.ɵɵFactoryTarget.Component });
-MngMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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\" class=\"layout-menuitem-root-text\">{{ item.label | translate }}</div>\n    <a *ngIf=\"(!item.routerLink || item.items) && item.visible !== false\"\n       [attr.href]=\"item.url\"\n       (click)=\"itemClick($event)\"\n       (mouseenter)=\"onMouseEnter()\"\n       (keydown.enter)=\"itemClick($event)\"\n       [attr.target]=\"item.target\"\n       [attr.tabindex]=\"0\"\n       [ngClass]=\"item.class\"\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 *ngIf=\"(item.routerLink && !item.items) && item.visible !== false\"\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.class\"\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 *ngIf=\"((item.items && active) || (item.items && (mngCommons.menuModeIsStatic$ | async) && (root || active))) && item.visible !== false\"\n        [@children]=\"((mngCommons.menuModeIsSlim$ | async) && !(mainLayoutService.isMobile$ | async) && root)\n            ? (active ? 'visible' : 'hidden')\n            : ((mngCommons.menuModeIsStatic$ | async) && root && !(mainLayoutService.isMobile$ | async) ? 'visible' : (active ? 'visibleAnimated' : 'hiddenAnimated'))\">\n        <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n                <li mng-menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeClass\"></li>\n        </ng-template>\n    </ul>\n</ng-container>\n", components: [{ type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: ["item", "index", "root", "parentKey"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.Ripple, selector: "[pRipple]" }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i2.TranslatePipe, "async": i6.AsyncPipe }, animations: [
+MngMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngMenuItemComponent, deps: [{ token: i1$2.Router }, { token: i0.ChangeDetectorRef }, { token: MngCommonsService }, { token: MngMainLayoutComponentService }], target: i0.ɵɵFactoryTarget.Component });
+MngMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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\" class=\"layout-menuitem-root-text\">{{ item.label | translate }}</div>\n    <a *ngIf=\"(!item.routerLink || item.items) && item.visible !== false\"\n       [attr.href]=\"item.url\"\n       (click)=\"itemClick($event)\"\n       (mouseenter)=\"onMouseEnter()\"\n       (keydown.enter)=\"itemClick($event)\"\n       [attr.target]=\"item.target\"\n       [attr.tabindex]=\"0\"\n       [ngClass]=\"item.class\"\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 *ngIf=\"(item.routerLink && !item.items) && item.visible !== false\"\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.class\"\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 *ngIf=\"((item.items && active) || (item.items && (mngCommons.menuModeIsStatic$ | async) && (root || active))) && item.visible !== false\"\n        [@children]=\"((mngCommons.menuModeIsSlim$ | async) && !(mainLayoutService.isMobile$ | async) && root)\n            ? (active ? 'visible' : 'hidden')\n            : ((mngCommons.menuModeIsStatic$ | async) && root && !(mainLayoutService.isMobile$ | async) ? 'visible' : (active ? 'visibleAnimated' : 'hiddenAnimated'))\">\n        <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n                <li mng-menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeClass\"></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: i9.Ripple, selector: "[pRipple]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i2.TranslatePipe, "async": i4.AsyncPipe }, animations: [
         trigger('children', [
             state('void', style({
                 height: '0px'
@@ -4698,7 +4703,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                             transition('void => visibleAnimated, visibleAnimated => void', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
                         ])
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n    <div *ngIf=\"root && item.visible !== false\" class=\"layout-menuitem-root-text\">{{ item.label | translate }}</div>\n    <a *ngIf=\"(!item.routerLink || item.items) && item.visible !== false\"\n       [attr.href]=\"item.url\"\n       (click)=\"itemClick($event)\"\n       (mouseenter)=\"onMouseEnter()\"\n       (keydown.enter)=\"itemClick($event)\"\n       [attr.target]=\"item.target\"\n       [attr.tabindex]=\"0\"\n       [ngClass]=\"item.class\"\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 *ngIf=\"(item.routerLink && !item.items) && item.visible !== false\"\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.class\"\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 *ngIf=\"((item.items && active) || (item.items && (mngCommons.menuModeIsStatic$ | async) && (root || active))) && item.visible !== false\"\n        [@children]=\"((mngCommons.menuModeIsSlim$ | async) && !(mainLayoutService.isMobile$ | async) && root)\n            ? (active ? 'visible' : 'hidden')\n            : ((mngCommons.menuModeIsStatic$ | async) && root && !(mainLayoutService.isMobile$ | async) ? 'visible' : (active ? 'visibleAnimated' : 'hiddenAnimated'))\">\n        <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n                <li mng-menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeClass\"></li>\n        </ng-template>\n    </ul>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i0.ChangeDetectorRef }, { type: MngCommonsService }, { type: MainLayoutComponentService }]; }, propDecorators: { item: [{
+        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i0.ChangeDetectorRef }, { type: MngCommonsService }, { type: MngMainLayoutComponentService }]; }, propDecorators: { item: [{
                 type: Input
             }], index: [{
                 type: Input
@@ -4714,47 +4719,79 @@ class MngMenuComponent {
         this.mainLayoutService = mainLayoutService;
     }
 }
-MngMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngMenuComponent, deps: [{ token: MngCommonsService }, { token: MainLayoutComponentService }], target: i0.ɵɵFactoryTarget.Component });
-MngMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MngMenuComponent, selector: "mng-menu", ngImport: i0, template: "<div class=\"layout-menu-wrapper\" [ngClass]=\"{ 'layout-sidebar-active': (mainLayoutService.sidebarActive$ | async) }\"\n     (click)=\"mainLayoutService.onSidebarClick($event)\" (mouseover)=\"mainLayoutService.onSidebarMouseOver($event)\" (mouseleave)=\"mainLayoutService.onSidebarMouseLeave($event)\">\n    <div class=\"menu-logo\">\n\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) || (mainLayoutService.isMobile$ | async)\">\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" />\n        </a>\n        <a *ngIf=\"mngCommons.menuPinEnabled\" href=\"javascript:void(0)\" class=\"menu-pin\" (click)=\"mainLayoutService.onToggleMenu($event)\">\n            <span *ngIf=\"mngCommons.menuModeIsOverlay$ | async\" class=\"pi pi-times\"></span>\n            <span *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && !(mainLayoutService.sidebarStatic$ | async) && (mainLayoutService.pinActive$ | async)\" 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: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i6.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngMenuComponent, deps: [{ token: MngCommonsService }, { token: MngMainLayoutComponentService }], target: i0.ɵɵFactoryTarget.Component });
+MngMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MngMenuComponent, selector: "mng-menu", ngImport: i0, template: "<div class=\"layout-menu-wrapper\" [ngClass]=\"{ 'layout-sidebar-active': (mainLayoutService.sidebarActive$ | async) }\"\n     (click)=\"mainLayoutService.onSidebarClick($event)\" (mouseover)=\"mainLayoutService.onSidebarMouseOver($event)\" (mouseleave)=\"mainLayoutService.onSidebarMouseLeave($event)\">\n    <div class=\"menu-logo\">\n\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) || (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 *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && !(mainLayoutService.sidebarStatic$ | async) && (mainLayoutService.pinActive$ | async)\" 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$2.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.1", ngImport: i0, type: MngMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-menu-wrapper\" [ngClass]=\"{ 'layout-sidebar-active': (mainLayoutService.sidebarActive$ | async) }\"\n     (click)=\"mainLayoutService.onSidebarClick($event)\" (mouseover)=\"mainLayoutService.onSidebarMouseOver($event)\" (mouseleave)=\"mainLayoutService.onSidebarMouseLeave($event)\">\n    <div class=\"menu-logo\">\n\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) || (mainLayoutService.isMobile$ | async)\">\n            <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" />\n        </a>\n        <a *ngIf=\"mngCommons.menuPinEnabled\" href=\"javascript:void(0)\" class=\"menu-pin\" (click)=\"mainLayoutService.onToggleMenu($event)\">\n            <span *ngIf=\"mngCommons.menuModeIsOverlay$ | async\" class=\"pi pi-times\"></span>\n            <span *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && !(mainLayoutService.sidebarStatic$ | async) && (mainLayoutService.pinActive$ | async)\" 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" }]
-        }], ctorParameters: function () { return [{ type: MngCommonsService }, { type: MainLayoutComponentService }]; } });
+            args: [{ selector: 'mng-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-menu-wrapper\" [ngClass]=\"{ 'layout-sidebar-active': (mainLayoutService.sidebarActive$ | async) }\"\n     (click)=\"mainLayoutService.onSidebarClick($event)\" (mouseover)=\"mainLayoutService.onSidebarMouseOver($event)\" (mouseleave)=\"mainLayoutService.onSidebarMouseLeave($event)\">\n    <div class=\"menu-logo\">\n\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) || (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 *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && !(mainLayoutService.sidebarStatic$ | async) && (mainLayoutService.pinActive$ | async)\" 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" }]
+        }], ctorParameters: function () { return [{ type: MngCommonsService }, { type: MngMainLayoutComponentService }]; } });
 
 class MngTopbarComponent {
-    constructor(mngCommons, mainLayoutService) {
+    constructor(route, mngCommons, mainLayoutService) {
+        this.route = route;
         this.mngCommons = mngCommons;
         this.mainLayoutService = mainLayoutService;
+        this.breadcrumbComponent = MngBreadcrumbComponent;
+        this.menuComponent = MngMenuComponent;
         this.languages = ['en'];
         this.selectedLanguage = 'en';
     }
-    switchLanguage(language) {
-        this.mngCommons.appLanguage = language;
-    }
     ngOnInit() {
+        const routeData = this.route.snapshot.data;
+        if (routeData?.breadcrumbComponent) {
+            this.breadcrumbComponent = routeData.breadcrumbComponent;
+        }
+        if (routeData?.menuComponent) {
+            this.menuComponent = routeData.menuComponent;
+        }
         this.languages = this.mngCommons.appLanguages;
         this.selectedLanguage = this.mngCommons.appLanguage;
         this.mngCommons.user$.subscribe(u => {
             this.user = u;
         });
     }
+    ngAfterViewInit() {
+        this.mainLayoutService.innerWidth = window.innerWidth;
+    }
+    switchLanguage(language) {
+        this.mngCommons.appLanguage = language;
+    }
     logout(user, event) {
         if (typeof user.logout === 'function') {
             user.logout();
         }
     }
 }
-MngTopbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngTopbarComponent, deps: [{ token: MngCommonsService }, { token: MainLayoutComponentService }], target: i0.ɵɵFactoryTarget.Component });
-MngTopbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MngTopbarComponent, selector: "mng-topbar", ngImport: i0, template: "<div class=\"layout-topbar\">\n    <div class=\"layout-topbar-left\">\n        <a href=\"#\" class=\"topbar-menu-button\" (click)=\"mainLayoutService.onMenuButtonClick($event)\" *ngIf=\"(mngCommons.menuModeIsOverlay$ | async) || (mainLayoutService.isMobile$ | async)\">\n            <i class=\"pi pi-bars\"></i>\n        </a>\n\n        <mng-breadcrumb></mng-breadcrumb>\n    </div>\n\n    <mng-menu></mng-menu>\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 ?? 'javascript:void(0)'\" (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: MngBreadcrumbComponent, selector: "mng-breadcrumb" }, { type: MngMenuComponent, selector: "mng-menu" }, { type: i1$1.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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i6.AsyncPipe, "translate": i2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngTopbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngTopbarComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: MngCommonsService }, { token: MngMainLayoutComponentService }], target: i0.ɵɵFactoryTarget.Component });
+MngTopbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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 href=\"#\" class=\"topbar-menu-button\" (click)=\"mainLayoutService.onMenuButtonClick($event)\" *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$1.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"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i4.AsyncPipe, "translate": i2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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 href=\"#\" class=\"topbar-menu-button\" (click)=\"mainLayoutService.onMenuButtonClick($event)\" *ngIf=\"(mngCommons.menuModeIsOverlay$ | async) || (mainLayoutService.isMobile$ | async)\">\n            <i class=\"pi pi-bars\"></i>\n        </a>\n\n        <mng-breadcrumb></mng-breadcrumb>\n    </div>\n\n    <mng-menu></mng-menu>\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 ?? 'javascript:void(0)'\" (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" }]
-        }], ctorParameters: function () { return [{ type: MngCommonsService }, { type: MainLayoutComponentService }]; } });
+            args: [{ selector: 'mng-topbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-topbar\">\n    <div class=\"layout-topbar-left\">\n        <a href=\"#\" class=\"topbar-menu-button\" (click)=\"mainLayoutService.onMenuButtonClick($event)\" *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" }]
+        }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: MngCommonsService }, { type: MngMainLayoutComponentService }]; }, propDecorators: { templates: [{
+                type: ViewChildren,
+                args: [MngTemplateDirective]
+            }] } });
 
 class MngMainLayoutComponent {
-    constructor(mngCommons, mainLayoutService) {
+    constructor(route, mngCommons, mainLayoutService) {
+        this.route = route;
         this.mngCommons = mngCommons;
         this.mainLayoutService = mainLayoutService;
+        this.topbarComponent = MngTopbarComponent;
+        this.menuComponent = MngMenuComponent;
+        this.footerComponent = MngFooterComponent;
+    }
+    ngOnInit() {
+        const routeData = this.route.snapshot.data;
+        if (routeData?.topbarComponent) {
+            this.topbarComponent = routeData.topbarComponent;
+        }
+        if (routeData?.menuComponent) {
+            this.menuComponent = routeData.menuComponent;
+        }
+        if (routeData?.footerComponent) {
+            this.footerComponent = routeData.footerComponent;
+        }
     }
     ngAfterViewInit() {
         this.mainLayoutService.innerWidth = window.innerWidth;
@@ -4764,77 +4801,96 @@ class MngMainLayoutComponent {
         this.mainLayoutService.innerWidth = target?.innerWidth ?? window.innerWidth;
     }
 }
-MngMainLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngMainLayoutComponent, deps: [{ token: MngCommonsService }, { token: MainLayoutComponentService }], target: i0.ɵɵFactoryTarget.Component });
-MngMainLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MngMainLayoutComponent, selector: "mng-main-layout", host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [MainLayoutComponentService], ngImport: i0, template: "<div class=\"layout-wrapper\"  (click)=\"mainLayoutService.onLayoutClick()\"\n     [ngClass]=\"{'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\n        <mng-topbar></mng-topbar>\n\n        <mng-menu *ngIf=\"!(mainLayoutService.isMobile$ | async) && ((mngCommons.menuModeIsStatic$ | async) || (mngCommons.menuModeIsSlim$ | async) || (mngCommons.menuModeIsSidebar$ | async))\"></mng-menu>\n\n        <div class=\"layout-main-content\">\n            <router-outlet></router-outlet>\n        </div>\n\n        <mng-footer></mng-footer>\n    </div>\n\n</div>\n", components: [{ type: MngTopbarComponent, selector: "mng-topbar" }, { type: MngMenuComponent, selector: "mng-menu" }, { type: MngFooterComponent, selector: "mng-footer" }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "async": i6.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngMainLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngMainLayoutComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: MngCommonsService }, { token: MngMainLayoutComponentService }], target: i0.ɵɵFactoryTarget.Component });
+MngMainLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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 class=\"layout-wrapper\"  (click)=\"mainLayoutService.onLayoutClick()\"\n     [ngClass]=\"{'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\n        <ng-container [mngComponent]=\"footerComponent\"></ng-container>\n\n        <ng-container *ngIf=\"!(mainLayoutService.isMobile$ | async) && ((mngCommons.menuModeIsStatic$ | async) || (mngCommons.menuModeIsSlim$ | async) || (mngCommons.menuModeIsSidebar$ | async))\"\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\n</div>\n", directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.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.1", ngImport: i0, type: MngMainLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-main-layout', providers: [MainLayoutComponentService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-wrapper\"  (click)=\"mainLayoutService.onLayoutClick()\"\n     [ngClass]=\"{'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\n        <mng-topbar></mng-topbar>\n\n        <mng-menu *ngIf=\"!(mainLayoutService.isMobile$ | async) && ((mngCommons.menuModeIsStatic$ | async) || (mngCommons.menuModeIsSlim$ | async) || (mngCommons.menuModeIsSidebar$ | async))\"></mng-menu>\n\n        <div class=\"layout-main-content\">\n            <router-outlet></router-outlet>\n        </div>\n\n        <mng-footer></mng-footer>\n    </div>\n\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: MngCommonsService }, { type: MainLayoutComponentService }]; }, propDecorators: { onWindowResize: [{
+            args: [{ selector: 'mng-main-layout', providers: [MngMainLayoutComponentService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-wrapper\"  (click)=\"mainLayoutService.onLayoutClick()\"\n     [ngClass]=\"{'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\n        <ng-container [mngComponent]=\"footerComponent\"></ng-container>\n\n        <ng-container *ngIf=\"!(mainLayoutService.isMobile$ | async) && ((mngCommons.menuModeIsStatic$ | async) || (mngCommons.menuModeIsSlim$ | async) || (mngCommons.menuModeIsSidebar$ | async))\"\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\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: MngCommonsService }, { type: MngMainLayoutComponentService }]; }, propDecorators: { templates: [{
+                type: ViewChildren,
+                args: [MngTemplateDirective]
+            }], onWindowResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
             }] } });
 
-class FormlyFieldWrapperComponent extends FieldWrapper {
+class MngFormlyFieldWrapperComponent extends FieldWrapper {
     ngOnInit() {
     }
 }
-FormlyFieldWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormlyFieldWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FormlyFieldWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormlyFieldWrapperComponent, 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.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormlyFieldWrapperComponent, decorators: [{
+MngFormlyFieldWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngFormlyFieldWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MngFormlyFieldWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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" }]
         }] });
 
-class FormlyTableWrapperComponent extends FieldWrapper {
+class MngFormlyTableWrapperComponent extends FieldWrapper {
     ngOnInit() {
     }
 }
-FormlyTableWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormlyTableWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FormlyTableWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormlyTableWrapperComponent, 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.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormlyTableWrapperComponent, decorators: [{
+MngFormlyTableWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngFormlyTableWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MngFormlyTableWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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" }]
         }] });
 
-class FormlyFieldAutocompleteComponent extends FieldType {
+class MngFormlyFieldAutocompleteComponent extends FieldType {
     ngOnInit() {
         this.aFormControl = this.formControl;
         this.descriptor = this.to['descriptor'];
     }
 }
-FormlyFieldAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormlyFieldAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FormlyFieldAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormlyFieldAutocompleteComponent, selector: "mng-formly-field-autocomplete", usesInheritance: true, ngImport: i0, template: "<mng-autocomplete [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: ["onChange"] }], directives: [{ type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormlyFieldAutocompleteComponent, decorators: [{
+MngFormlyFieldAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngFormlyFieldAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MngFormlyFieldAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MngFormlyFieldAutocompleteComponent, selector: "mng-formly-field-autocomplete", usesInheritance: true, ngImport: i0, template: "<mng-autocomplete [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: ["onChange"] }], directives: [{ type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngFormlyFieldAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-formly-field-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-autocomplete [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" }]
         }] });
 
-class FormlyFieldInputComponent extends FieldType {
+class MngFormlyFieldInputComponent extends FieldType {
     ngOnInit() {
         this.iFormControl = this.formControl;
         this.descriptor = this.to['descriptor'];
     }
 }
-FormlyFieldInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormlyFieldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FormlyFieldInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormlyFieldInputComponent, selector: "mng-formly-field-input", usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"to.type\">\n    <p-inputNumber *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                   [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)\"\n                       [formControl]=\"iFormControl\"\n                       [formlyAttributes]=\"field\">\n        </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 category of descriptor.radioOptions\" [id]=\"$any(key)\" class=\"p-field-radiobutton\">\n            <p-radioButton [value]=\"category\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></p-radioButton>\n            <label [for]=\"category\" class=\"mng-radio-button-label\">{{category}}</label>\n        </div>\n    </ng-container>\n\n    <textarea *ngSwitchCase=\"'textarea'\"\n              [id]=\"$any(key)\"\n              [formControl]=\"iFormControl\"\n              [formlyAttributes]=\"field\"\n              [rows]=\"descriptor.rows ?? 3\"\n              pInputTextarea>\n    </textarea>\n\n    <p-calendar *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    <input *ngSwitchDefault\n           pInputText\n           [id]=\"$any(key)\"\n           [type]=\"to.type || 'text'\"\n           [formControl]=\"iFormControl\"\n           [formlyAttributes]=\"field\"\n    />\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$6.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabelledBy"], outputs: ["onChange"] }, { type: i3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i4$2.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"] }], directives: [{ type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.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: i8.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i9$1.InputText, selector: "[pInputText]" }], pipes: { "translate": i2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormlyFieldInputComponent, decorators: [{
+MngFormlyFieldInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngFormlyFieldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MngFormlyFieldInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MngFormlyFieldInputComponent, selector: "mng-formly-field-input", usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"to.type\">\n    <p-inputNumber *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                   [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)\"\n                       [formControl]=\"iFormControl\"\n                       [formlyAttributes]=\"field\">\n        </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 category of descriptor.radioOptions\" [id]=\"$any(key)\" class=\"p-field-radiobutton\">\n            <p-radioButton [value]=\"category\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></p-radioButton>\n            <label [for]=\"category\" class=\"mng-radio-button-label\">{{category}}</label>\n        </div>\n    </ng-container>\n\n    <textarea *ngSwitchCase=\"'textarea'\"\n              [id]=\"$any(key)\"\n              [formControl]=\"iFormControl\"\n              [formlyAttributes]=\"field\"\n              [rows]=\"descriptor.rows ?? 3\"\n              pInputTextarea>\n    </textarea>\n\n    <p-calendar *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    <input *ngSwitchDefault\n           pInputText\n           [id]=\"$any(key)\"\n           [type]=\"to.type || 'text'\"\n           [formControl]=\"iFormControl\"\n           [formlyAttributes]=\"field\"\n    />\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$6.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabelledBy"], outputs: ["onChange"] }, { type: i3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i4$3.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"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.ɵ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: i2$1.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: i8.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i9$1.InputText, selector: "[pInputText]" }], pipes: { "translate": i2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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 *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                   [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)\"\n                       [formControl]=\"iFormControl\"\n                       [formlyAttributes]=\"field\">\n        </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 category of descriptor.radioOptions\" [id]=\"$any(key)\" class=\"p-field-radiobutton\">\n            <p-radioButton [value]=\"category\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></p-radioButton>\n            <label [for]=\"category\" class=\"mng-radio-button-label\">{{category}}</label>\n        </div>\n    </ng-container>\n\n    <textarea *ngSwitchCase=\"'textarea'\"\n              [id]=\"$any(key)\"\n              [formControl]=\"iFormControl\"\n              [formlyAttributes]=\"field\"\n              [rows]=\"descriptor.rows ?? 3\"\n              pInputTextarea>\n    </textarea>\n\n    <p-calendar *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    <input *ngSwitchDefault\n           pInputText\n           [id]=\"$any(key)\"\n           [type]=\"to.type || 'text'\"\n           [formControl]=\"iFormControl\"\n           [formlyAttributes]=\"field\"\n    />\n</ng-container>\n" }]
         }] });
 
-class FormlyFieldDropdownComponent extends FieldType {
+class MngFormlyFieldDropdownComponent extends FieldType {
     ngOnInit() {
         this.dFormControl = this.formControl;
         this.descriptor = this.to['descriptor'];
     }
 }
-FormlyFieldDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormlyFieldDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FormlyFieldDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormlyFieldDropdownComponent, selector: "mng-formly-field-dropdown", usesInheritance: true, ngImport: i0, template: "<mng-dropdown [id]=\"$any(key)\"\n                    [formControl]=\"dFormControl\"\n                    [formlyAttributes]=\"field\"\n                    [placeholder]=\"$any(descriptor.placeholder)\"\n                    [itemsLabelProperty]=\"$any(descriptor.itemsLabelProperty)\"\n                    [itemsValueProperty]=\"$any(descriptor.itemsValueProperty)\"\n                    [showClear]=\"!this.to.required\"\n                    [dataKeyProperty]=\"$any(descriptor.dataKeyProperty)\">\n</mng-dropdown>\n", components: [{ type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsValueProperty", "multiselect", "placeholder", "showClear", "className", "dropdownClassName"], outputs: ["onChange"] }], directives: [{ type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormlyFieldDropdownComponent, decorators: [{
+MngFormlyFieldDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngFormlyFieldDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MngFormlyFieldDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MngFormlyFieldDropdownComponent, selector: "mng-formly-field-dropdown", usesInheritance: true, ngImport: i0, template: "<mng-dropdown [id]=\"$any(key)\"\n                    [formControl]=\"dFormControl\"\n                    [formlyAttributes]=\"field\"\n                    [placeholder]=\"$any(descriptor.placeholder)\"\n                    [itemsLabelProperty]=\"$any(descriptor.itemsLabelProperty)\"\n                    [itemsValueProperty]=\"$any(descriptor.itemsValueProperty)\"\n                    [showClear]=\"!this.to.required\"\n                    [dataKeyProperty]=\"$any(descriptor.dataKeyProperty)\">\n</mng-dropdown>\n", components: [{ type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsValueProperty", "multiselect", "placeholder", "showClear", "className", "dropdownClassName"], outputs: ["onChange"] }], directives: [{ type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngFormlyFieldDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-formly-field-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-dropdown [id]=\"$any(key)\"\n                    [formControl]=\"dFormControl\"\n                    [formlyAttributes]=\"field\"\n                    [placeholder]=\"$any(descriptor.placeholder)\"\n                    [itemsLabelProperty]=\"$any(descriptor.itemsLabelProperty)\"\n                    [itemsValueProperty]=\"$any(descriptor.itemsValueProperty)\"\n                    [showClear]=\"!this.to.required\"\n                    [dataKeyProperty]=\"$any(descriptor.dataKeyProperty)\">\n</mng-dropdown>\n" }]
         }] });
 
+class MngTableLoadEvent {
+}
+class MngTableCellClickEvent {
+    constructor(column, rowItem, rowIndex) {
+        this.column = column;
+        this.rowItem = rowItem;
+        this.rowIndex = rowIndex;
+    }
+}
+class MngTableReloadEvent {
+    constructor() {
+        this.resetParams = false;
+        this.emitEvent = false;
+    }
+}
+
 /**
  * Cannot be on push change detection strategy because of filter updates triggered from route which causes to force update values in force metadata
  * and these must be propagated through to this component and beyond to primeNG.
@@ -4888,7 +4944,7 @@ class MngTableColumnFilterComponent {
     }
 }
 MngTableColumnFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngTableColumnFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MngTableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: { descriptor: "descriptor", display: "display" }, ngImport: i0, template: "<p-columnFilter class=\"ml-auto\"\n                [type]=\"primeType\" matchMode=\"equals\"\n                [field]=\"descriptor.property\" [display]=\"primeDisplay\"\n                [matchMode]=\"primeDefaultMatchMode\"\n                [placeholder]=\"(descriptor.placeholder ?? 'mngTable.typeToFilter') | translate\"\n                [showMatchModes]=\"primeType === 'text' || primeType === 'date' || primeType === 'numeric'\"\n                [showOperator]=\"false\" [showAddButton]=\"false\" [hideOnClear]=\"true\">\n    <ng-template *ngIf=\"lookupDescriptor\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <ng-container [ngSwitch]=\"lookupDescriptor.lookupType\">\n            <mng-autocomplete *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                              (onChange)=\"autocompleteFilter($event, filterCallback)\">\n            </mng-autocomplete>\n            <mng-dropdown *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                          (onChange)=\"filterCallback($event)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n", components: [{ type: i4$3.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: ["onChange"] }, { type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsValueProperty", "multiselect", "placeholder", "showClear", "className", "dropdownClassName"], outputs: ["onChange"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i2.TranslatePipe } });
+MngTableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: { descriptor: "descriptor", display: "display" }, ngImport: i0, template: "<p-columnFilter class=\"ml-auto\"\n                [type]=\"primeType\" matchMode=\"equals\"\n                [field]=\"descriptor.property\" [display]=\"primeDisplay\"\n                [matchMode]=\"primeDefaultMatchMode\"\n                [placeholder]=\"(descriptor.placeholder ?? 'mngTable.typeToFilter') | translate\"\n                [showMatchModes]=\"primeType === 'text' || primeType === 'date' || primeType === 'numeric'\"\n                [showOperator]=\"false\" [showAddButton]=\"false\" [hideOnClear]=\"true\">\n    <ng-template *ngIf=\"lookupDescriptor\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <ng-container [ngSwitch]=\"lookupDescriptor.lookupType\">\n            <mng-autocomplete *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                              (onChange)=\"autocompleteFilter($event, filterCallback)\">\n            </mng-autocomplete>\n            <mng-dropdown *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                          (onChange)=\"filterCallback($event)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n", components: [{ type: i4$4.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: ["onChange"] }, { type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsValueProperty", "multiselect", "placeholder", "showClear", "className", "dropdownClassName"], outputs: ["onChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngTableColumnFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-table-column-filter', template: "<p-columnFilter class=\"ml-auto\"\n                [type]=\"primeType\" matchMode=\"equals\"\n                [field]=\"descriptor.property\" [display]=\"primeDisplay\"\n                [matchMode]=\"primeDefaultMatchMode\"\n                [placeholder]=\"(descriptor.placeholder ?? 'mngTable.typeToFilter') | translate\"\n                [showMatchModes]=\"primeType === 'text' || primeType === 'date' || primeType === 'numeric'\"\n                [showOperator]=\"false\" [showAddButton]=\"false\" [hideOnClear]=\"true\">\n    <ng-template *ngIf=\"lookupDescriptor\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <ng-container [ngSwitch]=\"lookupDescriptor.lookupType\">\n            <mng-autocomplete *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                              (onChange)=\"autocompleteFilter($event, filterCallback)\">\n            </mng-autocomplete>\n            <mng-dropdown *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                          (onChange)=\"filterCallback($event)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n" }]
@@ -4907,7 +4963,7 @@ class MngTableColumnValueComponent {
     }
 }
 MngTableColumnValueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngTableColumnValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MngTableColumnValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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>\n", directives: [{ type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "propertyPath": PropertyPathPipe, "number": i6.DecimalPipe, "date": i6.DatePipe, "boolean": BooleanPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngTableColumnValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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>\n", directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "propertyPath": MngPropertyPathPipe, "number": i4.DecimalPipe, "date": i4.DatePipe, "boolean": MngBooleanPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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>\n" }]
@@ -4919,7 +4975,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 
 var TypeEnum = FilterDescriptor.TypeEnum;
 var PaginationModeEnum = TableDescriptor.PaginationModeEnum;
-class TableComponent {
+class MngTableComponent {
     constructor(injector, router, activatedRoute, translate, tableviewService) {
         this.injector = injector;
         this.router = router;
@@ -5166,9 +5222,9 @@ class TableComponent {
         }
     }
 }
-TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TableComponent, deps: [{ token: i0.Injector }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: i2.TranslateService }, { token: TableviewComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: TableComponent, selector: "mng-table", inputs: { descriptor: "descriptor", items: "items", queryResult: "queryResult", loading: "loading", dataProvider: "dataProvider", useQueryParams: "useQueryParams", selectionEnabled: "selectionEnabled" }, outputs: { loadEventEmitter: "onLoad", cellClickEventEmitter: "onCellClick", selectionChangeEventEmitter: "onSelectionChange" }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "primeTable", first: true, predicate: Table, 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 *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             sortMode=\"multiple\"\n             responsiveLayout=\"scroll\">\n\n        <ng-template *ngIf=\"captionTemplate || descriptor.title\" pTemplate=\"caption\">\n            <ng-container *ngIf=\"captionTemplate; else defaultCaption\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #defaultCaption>\n                <h5 class=\"p-m-0\">{{ descriptor.title }}</h5>\n            </ng-template>\n        </ng-template>\n\n        <ng-template pTemplate=\"header\">\n            <tr>\n                <th *ngIf=\"selectionEnabled\">\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                </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                            {{ descriptor.model.typeName + \".properties.\" + col.property | translate }}\n                            <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n                            <mng-table-column-filter *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                        {{ descriptor.model.typeName + \".properties.\" + col.property | translate }}\n                        <ng-container>\n                            <mng-table-column-filter *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\"></th>\n            </tr>\n            <tr *ngIf=\"descriptor.filterDisplay === filterDisplayRow\">\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\"></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\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\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\" class=\"text-right\">\n                    <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: { rowItem: item, rowIndex: idx }\"></ng-container>\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 ? 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 ? 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$3.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$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { type: i4$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: ["descriptor", "display"] }, { type: i4$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i6.AsyncPipe, "translate": i2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TableComponent, decorators: [{
+MngTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngTableComponent, deps: [{ token: i0.Injector }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: i2.TranslateService }, { token: TableviewComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MngTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MngTableComponent, selector: "mng-table", inputs: { descriptor: "descriptor", items: "items", queryResult: "queryResult", loading: "loading", dataProvider: "dataProvider", useQueryParams: "useQueryParams", selectionEnabled: "selectionEnabled" }, outputs: { loadEventEmitter: "onLoad", cellClickEventEmitter: "onCellClick", selectionChangeEventEmitter: "onSelectionChange" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "primeTable", first: true, predicate: Table, 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 *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             sortMode=\"multiple\"\n             responsiveLayout=\"scroll\">\n\n        <ng-template *ngIf=\"captionTemplate || descriptor.title\" pTemplate=\"caption\">\n            <ng-container *ngIf=\"captionTemplate; else defaultCaption\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #defaultCaption>\n                <h5 class=\"p-m-0\">{{ descriptor.title }}</h5>\n            </ng-template>\n        </ng-template>\n\n        <ng-template pTemplate=\"header\">\n            <tr>\n                <th *ngIf=\"selectionEnabled\">\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                </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                            {{ descriptor.model.typeName + \".properties.\" + col.property | translate }}\n                            <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n                            <mng-table-column-filter *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                        {{ descriptor.model.typeName + \".properties.\" + col.property | translate }}\n                        <ng-container>\n                            <mng-table-column-filter *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\"></th>\n            </tr>\n            <tr *ngIf=\"descriptor.filterDisplay === filterDisplayRow\">\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\"></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\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\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\" class=\"text-right\">\n                    <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: { rowItem: item, rowIndex: idx }\"></ng-container>\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 ? 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 ? 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$4.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$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { type: i4$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: ["descriptor", "display"] }, { type: i4$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i4.AsyncPipe, "translate": i2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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 *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             sortMode=\"multiple\"\n             responsiveLayout=\"scroll\">\n\n        <ng-template *ngIf=\"captionTemplate || descriptor.title\" pTemplate=\"caption\">\n            <ng-container *ngIf=\"captionTemplate; else defaultCaption\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #defaultCaption>\n                <h5 class=\"p-m-0\">{{ descriptor.title }}</h5>\n            </ng-template>\n        </ng-template>\n\n        <ng-template pTemplate=\"header\">\n            <tr>\n                <th *ngIf=\"selectionEnabled\">\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                </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                            {{ descriptor.model.typeName + \".properties.\" + col.property | translate }}\n                            <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n                            <mng-table-column-filter *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                        {{ descriptor.model.typeName + \".properties.\" + col.property | translate }}\n                        <ng-container>\n                            <mng-table-column-filter *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\"></th>\n            </tr>\n            <tr *ngIf=\"descriptor.filterDisplay === filterDisplayRow\">\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\"></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\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\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\" class=\"text-right\">\n                    <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: { rowItem: item, rowIndex: idx }\"></ng-container>\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 ? 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 ? 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$2.Router }, { type: i1$2.ActivatedRoute }, { type: i2.TranslateService }, { type: TableviewComponentService, decorators: [{
@@ -5198,13 +5254,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 args: ['onSelectionChange']
             }], templates: [{
                 type: ContentChildren,
-                args: [TemplateDirective]
+                args: [MngTemplateDirective]
             }], primeTable: [{
                 type: ViewChild,
                 args: [Table]
             }] } });
 
-class FormlyFieldTableDialogFormComponent extends FieldType {
+class MngFormlyFieldTableDialogFormComponent extends FieldType {
     constructor() {
         super(...arguments);
         this.itemsSubject = new ReplaySubject(1);
@@ -5295,14 +5351,14 @@ class FormlyFieldTableDialogFormComponent extends FieldType {
         this.subscriptions.forEach(s => s.unsubscribe());
     }
 }
-FormlyFieldTableDialogFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormlyFieldTableDialogFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FormlyFieldTableDialogFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormlyFieldTableDialogFormComponent, 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 *ngFor=\"let action of rowActions\"\n                    [action]=\"action\" [item]=\"item\" [itemId]=\"descriptor.tableviewDescriptor.model.idPropertyName ? item[descriptor.tableviewDescriptor.model.idPropertyName] : undefined\" [actionData]=\"{ itemIndex: idx }\">\n        </mng-action>\n    </ng-template>\n</mng-table>\n", styles: [".submit-button{display:none!important;visibility:hidden}\n"], components: [{ type: TableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionEnabled"], outputs: ["onLoad", "onCellClick", "onSelectionChange"] }, { type: ActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData"] }], directives: [{ type: TemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormlyFieldTableDialogFormComponent, decorators: [{
+MngFormlyFieldTableDialogFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngFormlyFieldTableDialogFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MngFormlyFieldTableDialogFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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 *ngFor=\"let action of rowActions\"\n                    [action]=\"action\" [item]=\"item\" [itemId]=\"descriptor.tableviewDescriptor.model.idPropertyName ? item[descriptor.tableviewDescriptor.model.idPropertyName] : undefined\" [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", "selectionEnabled"], outputs: ["onLoad", "onCellClick", "onSelectionChange"] }, { type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData"] }], 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": i2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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 *ngFor=\"let action of rowActions\"\n                    [action]=\"action\" [item]=\"item\" [itemId]=\"descriptor.tableviewDescriptor.model.idPropertyName ? item[descriptor.tableviewDescriptor.model.idPropertyName] : undefined\" [actionData]=\"{ itemIndex: idx }\">\n        </mng-action>\n    </ng-template>\n</mng-table>\n", styles: [".submit-button{display:none!important;visibility:hidden}\n"] }]
         }] });
 
-class FormlyFieldTableDialogMultiselectComponent extends FieldType {
+class MngFormlyFieldTableDialogMultiselectComponent extends FieldType {
     constructor(injector) {
         super();
         this.injector = injector;
@@ -5401,32 +5457,32 @@ class FormlyFieldTableDialogMultiselectComponent extends FieldType {
         }
     }
 }
-FormlyFieldTableDialogMultiselectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormlyFieldTableDialogMultiselectComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-FormlyFieldTableDialogMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormlyFieldTableDialogMultiselectComponent, 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 *ngIf=\"hasAddAction && !formControl.disabled\" pButton pRipple type=\"button\" icon=\"pi pi-plus\" class=\"p-button-rounded p-button-success\"\n                    (click)=\"openAddDialog()\">\n            </button>\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n        <button *ngIf=\"hasDeleteAction && !formControl.disabled\" pButton pRipple type=\"button\" icon=\"pi pi-trash\" class=\"p-button-rounded p-button-danger\"\n                (click)=\"removeItem(item)\">\n        </button>\n    </ng-template>\n</mng-table>\n\n<p-dialog *ngIf=\"hasAddAction\" [(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 [descriptor]=\"descriptor.mainTableDescriptor\"\n                   [queryResult]=\"addItemsAsync\"\n                   [selectionEnabled]=\"true\"\n                   [loading]=\"dialogIsLoading$\"\n                   (onSelectionChange)=\"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 pButton pRipple type=\"button\" [label]=\"'general.add' | translate\" icon=\"pi pi-check\" class=\"p-button-text\" (click)=\"addItems()\" [loading]=\"(dialogIsLoading$ | async) ?? false\" [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n", components: [{ type: TableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionEnabled"], outputs: ["onLoad", "onCellClick", "onSelectionChange"] }, { type: i2$7.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$1.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }], directives: [{ type: TemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i9.Ripple, selector: "[pRipple]" }, { type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i2.TranslatePipe, "async": i6.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormlyFieldTableDialogMultiselectComponent, decorators: [{
+MngFormlyFieldTableDialogMultiselectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngFormlyFieldTableDialogMultiselectComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+MngFormlyFieldTableDialogMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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 *ngIf=\"hasAddAction && !formControl.disabled\" pButton pRipple type=\"button\" icon=\"pi pi-plus\" class=\"p-button-rounded p-button-success\"\n                    (click)=\"openAddDialog()\">\n            </button>\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n        <button *ngIf=\"hasDeleteAction && !formControl.disabled\" pButton pRipple type=\"button\" icon=\"pi pi-trash\" class=\"p-button-rounded p-button-danger\"\n                (click)=\"removeItem(item)\">\n        </button>\n    </ng-template>\n</mng-table>\n\n<p-dialog *ngIf=\"hasAddAction\" [(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 [descriptor]=\"descriptor.mainTableDescriptor\"\n                   [queryResult]=\"addItemsAsync\"\n                   [selectionEnabled]=\"true\"\n                   [loading]=\"dialogIsLoading$\"\n                   (onSelectionChange)=\"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 pButton pRipple type=\"button\" [label]=\"'general.add' | translate\" icon=\"pi pi-check\" class=\"p-button-text\" (click)=\"addItems()\" [loading]=\"(dialogIsLoading$ | async) ?? false\" [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n", components: [{ type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionEnabled"], outputs: ["onLoad", "onCellClick", "onSelectionChange"] }, { type: i2$7.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$1.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: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i9.Ripple, selector: "[pRipple]" }, { type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i2.TranslatePipe, "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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 *ngIf=\"hasAddAction && !formControl.disabled\" pButton pRipple type=\"button\" icon=\"pi pi-plus\" class=\"p-button-rounded p-button-success\"\n                    (click)=\"openAddDialog()\">\n            </button>\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n        <button *ngIf=\"hasDeleteAction && !formControl.disabled\" pButton pRipple type=\"button\" icon=\"pi pi-trash\" class=\"p-button-rounded p-button-danger\"\n                (click)=\"removeItem(item)\">\n        </button>\n    </ng-template>\n</mng-table>\n\n<p-dialog *ngIf=\"hasAddAction\" [(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 [descriptor]=\"descriptor.mainTableDescriptor\"\n                   [queryResult]=\"addItemsAsync\"\n                   [selectionEnabled]=\"true\"\n                   [loading]=\"dialogIsLoading$\"\n                   (onSelectionChange)=\"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 pButton pRipple type=\"button\" [label]=\"'general.add' | translate\" icon=\"pi pi-check\" class=\"p-button-text\" (click)=\"addItems()\" [loading]=\"(dialogIsLoading$ | async) ?? false\" [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
-class FormlyFieldTabsComponent extends FieldType {
+class MngFormlyFieldTabsComponent extends FieldType {
 }
-FormlyFieldTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormlyFieldTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FormlyFieldTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormlyFieldTabsComponent, selector: "mng-formly-field-tabs", usesInheritance: true, ngImport: i0, template: "<p-tabView>\n    <p-tabPanel *ngFor=\"let tab of field.fieldGroup; let i = index; let last = last;\"\n                [header]=\"tab.templateOptions?.label!\"\n                [headerStyleClass]=\"formControl.valid ? 'p-tabview-title' : 'bla'\">\n        <ng-template pTemplate=\"header\">\n            <span class=\"p-tabview-title\" [class.p-tabview-title-error]=\"formState.submittedOn && formState['tab_' + (tab.id ? tab.id : tab.templateOptions?.label!) + '_invalid']\">{{ tab.templateOptions?.label! | translate }}</span>\n        </ng-template>\n        <formly-field [field]=\"tab\"></formly-field>\n    </p-tabPanel>\n</p-tabView>\n", components: [{ type: i1$4.TabView, selector: "p-tabView", inputs: ["orientation", "style", "styleClass", "controlClose", "scrollable", "activeIndex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { type: i1$4.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { type: i3.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormlyFieldTabsComponent, decorators: [{
+MngFormlyFieldTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngFormlyFieldTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MngFormlyFieldTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MngFormlyFieldTabsComponent, selector: "mng-formly-field-tabs", usesInheritance: true, ngImport: i0, template: "<p-tabView>\n    <p-tabPanel *ngFor=\"let tab of field.fieldGroup; let i = index; let last = last;\"\n                [header]=\"tab.templateOptions?.label!\"\n                [headerStyleClass]=\"formControl.valid ? 'p-tabview-title' : 'bla'\">\n        <ng-template pTemplate=\"header\">\n            <span class=\"p-tabview-title\" [class.p-tabview-title-error]=\"formState.submittedOn && formState['tab_' + (tab.id ? tab.id : tab.templateOptions?.label!) + '_invalid']\">{{ tab.templateOptions?.label! | translate }}</span>\n        </ng-template>\n        <formly-field [field]=\"tab\"></formly-field>\n    </p-tabPanel>\n</p-tabView>\n", components: [{ type: i1$4.TabView, selector: "p-tabView", inputs: ["orientation", "style", "styleClass", "controlClose", "scrollable", "activeIndex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { type: i1$4.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { type: i3.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngFormlyFieldTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-formly-field-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-tabView>\n    <p-tabPanel *ngFor=\"let tab of field.fieldGroup; let i = index; let last = last;\"\n                [header]=\"tab.templateOptions?.label!\"\n                [headerStyleClass]=\"formControl.valid ? 'p-tabview-title' : 'bla'\">\n        <ng-template pTemplate=\"header\">\n            <span class=\"p-tabview-title\" [class.p-tabview-title-error]=\"formState.submittedOn && formState['tab_' + (tab.id ? tab.id : tab.templateOptions?.label!) + '_invalid']\">{{ tab.templateOptions?.label! | translate }}</span>\n        </ng-template>\n        <formly-field [field]=\"tab\"></formly-field>\n    </p-tabPanel>\n</p-tabView>\n" }]
         }] });
 
-class FormlyFieldFieldsetComponent extends FieldType {
+class MngFormlyFieldFieldsetComponent extends FieldType {
 }
-FormlyFieldFieldsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormlyFieldFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FormlyFieldFieldsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormlyFieldFieldsetComponent, 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$5.Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { type: i3.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormlyFieldFieldsetComponent, decorators: [{
+MngFormlyFieldFieldsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngFormlyFieldFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MngFormlyFieldFieldsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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$5.Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { type: i3.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": i2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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" }]
         }] });
 
-class TableviewComponent {
+class MngTableviewComponent {
     constructor(route, messageService, translateService, dialogService, confirmationService, actionService, tableviewService) {
         this.route = route;
         this.messageService = messageService;
@@ -5474,11 +5530,11 @@ class TableviewComponent {
         }
     }
 }
-TableviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TableviewComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2$3.MessageService }, { token: i2.TranslateService }, { token: i2$4.DialogService }, { token: i2$3.ConfirmationService }, { token: MngActionService }, { token: TableviewComponentService }], target: i0.ɵɵFactoryTarget.Component });
-TableviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: TableviewComponent, selector: "mng-tableview", inputs: { descriptor: "descriptor", dataProvider: "dataProvider", actions: "actions" }, providers: [MessageService, ConfirmationService, TableviewComponentService], viewQueries: [{ propertyName: "tableComponent", first: true, predicate: TableComponent, descendants: true }], ngImport: i0, template: "<div class=\"mng-tableview\">\n\t<p-toast></p-toast>\n\n\t<div class=\"card\">\n\t\t<p-toolbar styleClass=\"mb-4\">\n\t\t\t<ng-template pTemplate=\"left\">\n\t\t\t\t<mng-action *ngFor=\"let action of toolbarLeftActions\"\n\t\t\t\t\t\t\t[action]=\"action\">\n\t\t\t\t</mng-action>\n\t\t\t</ng-template>\n\n\t\t\t<ng-template pTemplate=\"right\">\n\t\t\t\t<mng-action *ngFor=\"let action of toolbarRightActions\"\n\t\t\t\t\t\t\t[action]=\"action\">\n\t\t\t\t</mng-action>\n\t\t\t</ng-template>\n\t\t</p-toolbar>\n\n\t\t<mng-table [descriptor]=\"descriptor.table\"\n\t\t\t\t   [dataProvider]=\"dataProvider\"\n\t\t\t\t   [useQueryParams]=\"true\"\n\t\t\t\t   (onCellClick)=\"onTableCellClick($event)\">\n\t\t\t<ng-template mngTemplate=\"caption\">\n\t\t\t\t<div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n\t\t\t\t\t<h5 class=\"p-m-0\">{{ descriptor.tableTitle | translate }}</h5>\n\t\t\t\t\t<span class=\"p-input-icon-left\">\n\t\t\t\t\t\t<i class=\"pi pi-search\"></i>\n\t\t\t\t\t\t<input pInputText type=\"text\" [placeholder]=\"'mngTable.search' | translate\" />\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n\t\t\t\t<mng-action *ngFor=\"let action of rowInlineActions\"\n\t\t\t\t\t\t\t[action]=\"action\" [item]=\"item\" [itemId]=\"descriptor.model.idPropertyName ? item[descriptor.model.idPropertyName] : null\">\n\t\t\t\t</mng-action>\n\t\t\t</ng-template>\n\t\t</mng-table>\n\t</div>\n\n\t<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: ActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData"] }, { type: TableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionEnabled"], outputs: ["onLoad", "onCellClick", "onSelectionChange"] }], directives: [{ type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i9$1.InputText, selector: "[pInputText]" }, { type: i1$2.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "translate": i2.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TableviewComponent, decorators: [{
+MngTableviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngTableviewComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2$3.MessageService }, { token: i2.TranslateService }, { token: i2$4.DialogService }, { token: i2$3.ConfirmationService }, { token: MngActionService }, { token: TableviewComponentService }], target: i0.ɵɵFactoryTarget.Component });
+MngTableviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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\t<p-toast></p-toast>\n\n\t<div class=\"card\">\n\t\t<p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n\t\t\t<ng-template pTemplate=\"left\">\n\t\t\t\t<mng-action *ngFor=\"let action of toolbarLeftActions\"\n\t\t\t\t\t\t\t[action]=\"action\">\n\t\t\t\t</mng-action>\n\t\t\t</ng-template>\n\n\t\t\t<ng-template pTemplate=\"right\">\n\t\t\t\t<mng-action *ngFor=\"let action of toolbarRightActions\"\n\t\t\t\t\t\t\t[action]=\"action\">\n\t\t\t\t</mng-action>\n\t\t\t</ng-template>\n\t\t</p-toolbar>\n\n\t\t<mng-table [descriptor]=\"descriptor.table\"\n\t\t\t\t   [dataProvider]=\"dataProvider\"\n\t\t\t\t   [useQueryParams]=\"true\"\n\t\t\t\t   (onCellClick)=\"onTableCellClick($event)\">\n\t\t\t<ng-template mngTemplate=\"caption\">\n\t\t\t\t<div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n\t\t\t\t\t<h5 class=\"p-m-0\">{{ descriptor.tableTitle | translate }}</h5>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n\t\t\t\t<mng-action *ngFor=\"let action of rowInlineActions\"\n\t\t\t\t\t\t\t[action]=\"action\" [item]=\"item\" [itemId]=\"descriptor.model.idPropertyName ? item[descriptor.model.idPropertyName] : null\">\n\t\t\t\t</mng-action>\n\t\t\t</ng-template>\n\t\t</mng-table>\n\t</div>\n\n\t<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", "selectionEnabled"], outputs: ["onLoad", "onCellClick", "onSelectionChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$3.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$2.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "translate": i2.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngTableviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-tableview', providers: [MessageService, ConfirmationService, TableviewComponentService], template: "<div class=\"mng-tableview\">\n\t<p-toast></p-toast>\n\n\t<div class=\"card\">\n\t\t<p-toolbar styleClass=\"mb-4\">\n\t\t\t<ng-template pTemplate=\"left\">\n\t\t\t\t<mng-action *ngFor=\"let action of toolbarLeftActions\"\n\t\t\t\t\t\t\t[action]=\"action\">\n\t\t\t\t</mng-action>\n\t\t\t</ng-template>\n\n\t\t\t<ng-template pTemplate=\"right\">\n\t\t\t\t<mng-action *ngFor=\"let action of toolbarRightActions\"\n\t\t\t\t\t\t\t[action]=\"action\">\n\t\t\t\t</mng-action>\n\t\t\t</ng-template>\n\t\t</p-toolbar>\n\n\t\t<mng-table [descriptor]=\"descriptor.table\"\n\t\t\t\t   [dataProvider]=\"dataProvider\"\n\t\t\t\t   [useQueryParams]=\"true\"\n\t\t\t\t   (onCellClick)=\"onTableCellClick($event)\">\n\t\t\t<ng-template mngTemplate=\"caption\">\n\t\t\t\t<div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n\t\t\t\t\t<h5 class=\"p-m-0\">{{ descriptor.tableTitle | translate }}</h5>\n\t\t\t\t\t<span class=\"p-input-icon-left\">\n\t\t\t\t\t\t<i class=\"pi pi-search\"></i>\n\t\t\t\t\t\t<input pInputText type=\"text\" [placeholder]=\"'mngTable.search' | translate\" />\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n\t\t\t\t<mng-action *ngFor=\"let action of rowInlineActions\"\n\t\t\t\t\t\t\t[action]=\"action\" [item]=\"item\" [itemId]=\"descriptor.model.idPropertyName ? item[descriptor.model.idPropertyName] : null\">\n\t\t\t\t</mng-action>\n\t\t\t</ng-template>\n\t\t</mng-table>\n\t</div>\n\n\t<router-outlet></router-outlet>\n</div>\n" }]
+            args: [{ selector: 'mng-tableview', providers: [MessageService, ConfirmationService, TableviewComponentService], template: "<div class=\"mng-tableview\">\n\t<p-toast></p-toast>\n\n\t<div class=\"card\">\n\t\t<p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n\t\t\t<ng-template pTemplate=\"left\">\n\t\t\t\t<mng-action *ngFor=\"let action of toolbarLeftActions\"\n\t\t\t\t\t\t\t[action]=\"action\">\n\t\t\t\t</mng-action>\n\t\t\t</ng-template>\n\n\t\t\t<ng-template pTemplate=\"right\">\n\t\t\t\t<mng-action *ngFor=\"let action of toolbarRightActions\"\n\t\t\t\t\t\t\t[action]=\"action\">\n\t\t\t\t</mng-action>\n\t\t\t</ng-template>\n\t\t</p-toolbar>\n\n\t\t<mng-table [descriptor]=\"descriptor.table\"\n\t\t\t\t   [dataProvider]=\"dataProvider\"\n\t\t\t\t   [useQueryParams]=\"true\"\n\t\t\t\t   (onCellClick)=\"onTableCellClick($event)\">\n\t\t\t<ng-template mngTemplate=\"caption\">\n\t\t\t\t<div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n\t\t\t\t\t<h5 class=\"p-m-0\">{{ descriptor.tableTitle | translate }}</h5>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n\t\t\t\t<mng-action *ngFor=\"let action of rowInlineActions\"\n\t\t\t\t\t\t\t[action]=\"action\" [item]=\"item\" [itemId]=\"descriptor.model.idPropertyName ? item[descriptor.model.idPropertyName] : null\">\n\t\t\t\t</mng-action>\n\t\t\t</ng-template>\n\t\t</mng-table>\n\t</div>\n\n\t<router-outlet></router-outlet>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: i2$3.MessageService }, { type: i2.TranslateService }, { type: i2$4.DialogService }, { type: i2$3.ConfirmationService }, { type: MngActionService }, { type: TableviewComponentService }]; }, propDecorators: { descriptor: [{
                 type: Input
             }], dataProvider: [{
@@ -5487,7 +5543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 type: Input
             }], tableComponent: [{
                 type: ViewChild,
-                args: [TableComponent]
+                args: [MngTableComponent]
             }] } });
 
 class AMngTableviewRouteComponent {
@@ -5511,6 +5567,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
             type: Directive
         }], ctorParameters: function () { return []; } });
 
+function mngCommonsInitializerProvider(mngCommons) {
+    return () => mngCommons.initialize();
+}
+
 const mngConfigurationServiceProvider = (httpClient, moduleConfig) => {
     const service = MngConfigurationService.init(httpClient);
     if (moduleConfig?.configuration?.projectEnvironment) {
@@ -5519,17 +5579,24 @@ const mngConfigurationServiceProvider = (httpClient, moduleConfig) => {
     return service;
 };
 function mngConfigJsonAppInitializerProvider(configService, moduleConfig) {
-    return () => configService.addJsonSource(moduleConfig?.configuration?.jsonSource ?? undefined);
+    return () => {
+        if (moduleConfig?.configuration?.skipJsonSourceInit) {
+            return of(false);
+        }
+        else {
+            return configService.addJsonSource(moduleConfig?.configuration?.jsonSource ?? undefined);
+        }
+    };
 }
 
 const formlyWrappersConfig = [
-    { name: 'field', component: FormlyFieldWrapperComponent },
-    { name: 'field-table', component: FormlyTableWrapperComponent }
+    { name: 'field', component: MngFormlyFieldWrapperComponent },
+    { name: 'field-table', component: MngFormlyTableWrapperComponent }
 ];
 const formlyTypesConfig = [
     {
         name: 'input',
-        component: FormlyFieldInputComponent,
+        component: MngFormlyFieldInputComponent,
         wrappers: ['field'],
     },
     { name: 'string', extends: 'input' },
@@ -5562,7 +5629,7 @@ const formlyTypesConfig = [
     },
     {
         name: 'switch',
-        component: FormlyFieldInputComponent,
+        component: MngFormlyFieldInputComponent,
         defaultOptions: {
             templateOptions: {
                 type: 'switch',
@@ -5589,33 +5656,33 @@ const formlyTypesConfig = [
     },
     {
         name: 'dropdown',
-        component: FormlyFieldDropdownComponent,
+        component: MngFormlyFieldDropdownComponent,
         wrappers: ['field'],
     },
     { name: 'enum', extends: 'dropdown' },
     {
         name: 'autocomplete',
-        component: FormlyFieldAutocompleteComponent,
+        component: MngFormlyFieldAutocompleteComponent,
         wrappers: ['field']
     },
     {
         name: 'table-dialog-multiselect',
-        component: FormlyFieldTableDialogMultiselectComponent,
+        component: MngFormlyFieldTableDialogMultiselectComponent,
         wrappers: ['field-table']
     },
     {
         name: 'table-dialog-form',
-        component: FormlyFieldTableDialogFormComponent,
+        component: MngFormlyFieldTableDialogFormComponent,
         wrappers: ['field-table']
     },
     {
         name: 'tabs',
-        component: FormlyFieldTabsComponent,
+        component: MngFormlyFieldTabsComponent,
         wrappers: []
     },
     {
         name: 'fieldset',
-        component: FormlyFieldFieldsetComponent,
+        component: MngFormlyFieldFieldsetComponent,
         wrappers: []
     }
 ];
@@ -5686,10 +5753,6 @@ function mngFormlyConfigProvider(translate, moduleConfig = {}) {
     };
 }
 
-function mngCommonsInitializerProvider(mngCommons) {
-    return () => mngCommons.initialize();
-}
-
 // primeng modules
 const primeNgModules = [
     AutoCompleteModule,
@@ -5728,10 +5791,11 @@ const primeNgModules = [
 ];
 const declarations = [
     // directives
-    TemplateDirective,
+    MngComponentDirective,
+    MngTemplateDirective,
     // pipes
-    PropertyPathPipe,
-    BooleanPipe,
+    MngPropertyPathPipe,
+    MngBooleanPipe,
     // layout components
     MngBreadcrumbComponent,
     MngFooterComponent,
@@ -5743,26 +5807,26 @@ const declarations = [
     MngAutocompleteComponent,
     MngDropdownComponent,
     // formly wrappers
-    FormlyFieldWrapperComponent,
-    FormlyTableWrapperComponent,
+    MngFormlyFieldWrapperComponent,
+    MngFormlyTableWrapperComponent,
     // formly fields
-    FormlyFieldInputComponent,
-    FormlyFieldDropdownComponent,
-    FormlyFieldAutocompleteComponent,
-    FormlyFieldTableDialogMultiselectComponent,
-    FormlyFieldTableDialogFormComponent,
-    FormlyFieldTabsComponent,
-    FormlyFieldFieldsetComponent,
+    MngFormlyFieldInputComponent,
+    MngFormlyFieldDropdownComponent,
+    MngFormlyFieldAutocompleteComponent,
+    MngFormlyFieldTableDialogMultiselectComponent,
+    MngFormlyFieldTableDialogFormComponent,
+    MngFormlyFieldTabsComponent,
+    MngFormlyFieldFieldsetComponent,
     // table components
-    TableComponent,
-    TableviewComponent,
+    MngTableComponent,
+    MngTableviewComponent,
     MngTableColumnValueComponent,
     MngTableColumnFilterComponent,
     // editor components
-    FormEditorComponent,
-    ActionComponent,
-    ActionDialogComponent,
-    ActionRouteComponent
+    MngFormEditorComponent,
+    MngActionComponent,
+    MngActionDialogComponent,
+    MngActionRouteComponent
 ];
 class MngCommonsModule {
     static forRoot(config) {
@@ -5777,7 +5841,7 @@ class MngCommonsModule {
                 MngNavigationService,
                 MngCommonsService,
                 // component service
-                MainLayoutComponentService,
+                MngMainLayoutComponentService,
                 TableviewComponentService,
                 {
                     provide: MNG_MODULE_CONFIG_IT,
@@ -5817,10 +5881,11 @@ class MngCommonsModule {
 MngCommonsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngCommonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 MngCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngCommonsModule, declarations: [
         // directives
-        TemplateDirective,
+        MngComponentDirective,
+        MngTemplateDirective,
         // pipes
-        PropertyPathPipe,
-        BooleanPipe,
+        MngPropertyPathPipe,
+        MngBooleanPipe,
         // layout components
         MngBreadcrumbComponent,
         MngFooterComponent,
@@ -5832,26 +5897,26 @@ MngCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         MngAutocompleteComponent,
         MngDropdownComponent,
         // formly wrappers
-        FormlyFieldWrapperComponent,
-        FormlyTableWrapperComponent,
+        MngFormlyFieldWrapperComponent,
+        MngFormlyTableWrapperComponent,
         // formly fields
-        FormlyFieldInputComponent,
-        FormlyFieldDropdownComponent,
-        FormlyFieldAutocompleteComponent,
-        FormlyFieldTableDialogMultiselectComponent,
-        FormlyFieldTableDialogFormComponent,
-        FormlyFieldTabsComponent,
-        FormlyFieldFieldsetComponent,
+        MngFormlyFieldInputComponent,
+        MngFormlyFieldDropdownComponent,
+        MngFormlyFieldAutocompleteComponent,
+        MngFormlyFieldTableDialogMultiselectComponent,
+        MngFormlyFieldTableDialogFormComponent,
+        MngFormlyFieldTabsComponent,
+        MngFormlyFieldFieldsetComponent,
         // table components
-        TableComponent,
-        TableviewComponent,
+        MngTableComponent,
+        MngTableviewComponent,
         MngTableColumnValueComponent,
         MngTableColumnFilterComponent,
         // editor components
-        FormEditorComponent,
-        ActionComponent,
-        ActionDialogComponent,
-        ActionRouteComponent], imports: [
+        MngFormEditorComponent,
+        MngActionComponent,
+        MngActionDialogComponent,
+        MngActionRouteComponent], imports: [
         // angular modules
         CommonModule,
         RouterModule,
@@ -5888,12 +5953,45 @@ MngCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         TabViewModule,
         FieldsetModule,
         MultiSelectModule,
-        SkeletonModule], exports: [
+        SkeletonModule], exports: [AutoCompleteModule,
+        BreadcrumbModule,
+        ButtonModule,
+        CalendarModule,
+        CardModule,
+        CheckboxModule,
+        ChipModule,
+        ConfirmDialogModule,
+        ConfirmPopupModule,
+        DialogModule,
+        DynamicDialogModule,
+        DropdownModule,
+        InputNumberModule,
+        InputMaskModule,
+        InputSwitchModule,
+        InputTextModule,
+        InputTextareaModule,
+        PaginatorModule,
+        RadioButtonModule,
+        RippleModule,
+        SelectButtonModule,
+        TableModule,
+        TagModule,
+        ToastModule,
+        ToggleButtonModule,
+        ToolbarModule,
+        TooltipModule,
+        MessagesModule,
+        ProgressSpinnerModule,
+        TabViewModule,
+        FieldsetModule,
+        MultiSelectModule,
+        SkeletonModule, 
         // directives
-        TemplateDirective,
+        MngComponentDirective,
+        MngTemplateDirective,
         // pipes
-        PropertyPathPipe,
-        BooleanPipe,
+        MngPropertyPathPipe,
+        MngBooleanPipe,
         // layout components
         MngBreadcrumbComponent,
         MngFooterComponent,
@@ -5905,26 +6003,26 @@ MngCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         MngAutocompleteComponent,
         MngDropdownComponent,
         // formly wrappers
-        FormlyFieldWrapperComponent,
-        FormlyTableWrapperComponent,
+        MngFormlyFieldWrapperComponent,
+        MngFormlyTableWrapperComponent,
         // formly fields
-        FormlyFieldInputComponent,
-        FormlyFieldDropdownComponent,
-        FormlyFieldAutocompleteComponent,
-        FormlyFieldTableDialogMultiselectComponent,
-        FormlyFieldTableDialogFormComponent,
-        FormlyFieldTabsComponent,
-        FormlyFieldFieldsetComponent,
+        MngFormlyFieldInputComponent,
+        MngFormlyFieldDropdownComponent,
+        MngFormlyFieldAutocompleteComponent,
+        MngFormlyFieldTableDialogMultiselectComponent,
+        MngFormlyFieldTableDialogFormComponent,
+        MngFormlyFieldTabsComponent,
+        MngFormlyFieldFieldsetComponent,
         // table components
-        TableComponent,
-        TableviewComponent,
+        MngTableComponent,
+        MngTableviewComponent,
         MngTableColumnValueComponent,
         MngTableColumnFilterComponent,
         // editor components
-        FormEditorComponent,
-        ActionComponent,
-        ActionDialogComponent,
-        ActionRouteComponent] });
+        MngFormEditorComponent,
+        MngActionComponent,
+        MngActionDialogComponent,
+        MngActionRouteComponent] });
 MngCommonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngCommonsModule, imports: [[
             // angular modules
             CommonModule,
@@ -5937,7 +6035,39 @@ MngCommonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versio
             }),
             FormlyModule.forChild(),
             ...primeNgModules
-        ]] });
+        ], AutoCompleteModule,
+        BreadcrumbModule,
+        ButtonModule,
+        CalendarModule,
+        CardModule,
+        CheckboxModule,
+        ChipModule,
+        ConfirmDialogModule,
+        ConfirmPopupModule,
+        DialogModule,
+        DynamicDialogModule,
+        DropdownModule,
+        InputNumberModule,
+        InputMaskModule,
+        InputSwitchModule,
+        InputTextModule,
+        InputTextareaModule,
+        PaginatorModule,
+        RadioButtonModule,
+        RippleModule,
+        SelectButtonModule,
+        TableModule,
+        TagModule,
+        ToastModule,
+        ToggleButtonModule,
+        ToolbarModule,
+        TooltipModule,
+        MessagesModule,
+        ProgressSpinnerModule,
+        TabViewModule,
+        FieldsetModule,
+        MultiSelectModule,
+        SkeletonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MngCommonsModule, decorators: [{
             type: NgModule,
             args: [{
@@ -5958,12 +6088,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                         ...declarations
                     ],
                     exports: [
+                        ...primeNgModules,
                         ...declarations
                     ]
                 }]
         }] });
 
-class AbstractCrudApiService {
+class AMngCrudApiService {
     constructor(type, queryResultType, http) {
         this.type = type;
         this.queryResultType = queryResultType;
@@ -6041,5 +6172,5 @@ class AbstractCrudApiService {
  * Generated bundle index. Do not edit.
  */
 
-export { AFieldDescriptor, AFieldGroupDescriptor, AGenericFieldDescriptor, AMngTableviewRouteComponent, AbstractCrudApiService, ActionActivationTriggerEnum, ActionComponent, ActionDeleteDescriptor, ActionDescriptor, ActionDialogComponent, ActionEditorAddDescriptor, ActionEditorDescriptor, ActionEditorDetailsDescriptor, ActionEditorEditDescriptor, ActionLevelEnum, ActionPositionEnum, ActionRouteComponent, ActionTypeEnum, BROWSER_STORAGE_IT, BooleanPipe, ColumnDescriptor, EditorDataProvider, EditorDescriptor, EditorFormlyUtil, FieldGroupDescriptor, FieldInputDescriptor, FieldLookupDescriptor, FieldLookupEnumDescriptor, FieldManyEditorDescriptor, FieldManyToManyEditorDescriptor, FieldTabGroupDescriptor, FieldValidator, FilterDescriptor, FilterLookupDescriptor, FormEditorComponent, FormlyFieldAutocompleteComponent, FormlyFieldDropdownComponent, FormlyFieldFieldsetComponent, FormlyFieldInputComponent, FormlyFieldTableDialogFormComponent, FormlyFieldTableDialogMultiselectComponent, FormlyFieldTabsComponent, FormlyFieldWrapperComponent, FormlyTableWrapperComponent, I18nUtil, LookupDataProvider, MNG_AUTOCOMPLETE_VALUE_ACCESSOR, MNG_DROPDOWN_VALUE_ACCESSOR, MNG_MODULE_CONFIG_IT, MediusFilterMatchType, MediusFilterParam, MediusQueryMode, MediusQueryParam, MediusQueryParamBuilder, MediusQueryResult, MediusQueryResultBase, MediusQueryResultWithObject, MediusRestUtil, MngActionService, MngAutocompleteComponent, MngBreadcrumbComponent, MngCommonsModule, MngCommonsService, MngConfigurationService, MngDropdownComponent, MngEditorItemEvent, MngEditorSubmitEvent, MngEditorSubmitTriggerEvent, MngFooterComponent, MngMainLayoutComponent, MngMenuComponent, MngMenuItemComponent, MngNavigationService, MngTableCellClickEvent, MngTableColumnFilterComponent, MngTableColumnValueComponent, MngTableLoadEvent, MngTableReloadEvent, MngTopbarComponent, ModelDescriptor, ModelUtil, ObjectSerializer, PropertyPathPipe, TableComponent, TableDescriptor, TableviewComponent, TableviewDataProvider, TableviewDescriptor, TemplateDirective, TypeName, TypeUtil, enumsMapBase, mngConfigJsonAppInitializerProvider, mngConfigurationServiceProvider, mngFormlyConfigProvider, primeNgModules, typeMapBase, typeNameDecoratorPropertyName };
+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, FieldGroupDescriptor, FieldInputDescriptor, FieldLookupDescriptor, FieldLookupEnumDescriptor, FieldManyEditorDescriptor, FieldManyToManyEditorDescriptor, FieldTabGroupDescriptor, FieldValidator, FilterDescriptor, FilterLookupDescriptor, 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, MngFooterComponent, MngFormEditorComponent, MngFormEditorSubmitEvent, MngFormlyFieldAutocompleteComponent, MngFormlyFieldDropdownComponent, MngFormlyFieldFieldsetComponent, MngFormlyFieldInputComponent, MngFormlyFieldTableDialogFormComponent, MngFormlyFieldTableDialogMultiselectComponent, MngFormlyFieldTabsComponent, MngFormlyFieldWrapperComponent, MngFormlyTableWrapperComponent, MngMainLayoutComponent, MngMainLayoutComponentService, MngMenuComponent, MngMenuItemComponent, MngNavigationService, MngPropertyPathPipe, MngTableColumnFilterComponent, MngTableColumnValueComponent, MngTableComponent, MngTableviewComponent, MngTemplateDirective, MngTopbarComponent, ModelDescriptor, ModelUtil, ObjectSerializer, TableDescriptor, TableviewComponentService, TableviewDataProvider, TableviewDescriptor, ToastUtil, TypeName, TypeUtil, enumsMapBase, formlyTypesConfig, formlyWrappersConfig, getFormlyValidationMessages, getMaxLengthValidationMessage, getMinLengthValidationMessage, getRequiredValidationMessage, getTextPatternValidationMessage, mngCommonsInitializerProvider, mngConfigJsonAppInitializerProvider, mngConfigurationServiceProvider, mngFormlyConfigProvider, primeNgModules, typeMapBase, typeNameDecoratorPropertyName };
 //# sourceMappingURL=mediusinc-mng-commons.mjs.map