@mediusinc/mng-commons 0.2.15 → 0.2.18

package/fesm2015/mediusinc-mng-commons.mjs

@@ -2,20 +2,20 @@ import * as i4$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, Inject, Component, ChangeDetectionStrategy, Input, Directive, EventEmitter, Output, ContentChildren, ViewChild, forwardRef, Pipe, Optional, ViewChildren, HostListener, APP_INITIALIZER, NgModule } from '@angular/core';
-import * as i2$3 from '@angular/forms';
-import { Validators, FormGroup, NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { Injectable, InjectionToken, Inject, Component, ChangeDetectionStrategy, Input, EventEmitter, Directive, Output, ContentChildren, ViewChild, forwardRef, Pipe, Optional, ViewChildren, HostListener, APP_INITIALIZER, NgModule } from '@angular/core';
+import * as i4$2 from '@angular/forms';
+import { Validators, FormGroup, FormArray, NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/router';
 import { NavigationEnd, GuardsCheckEnd, RouterModule } from '@angular/router';
-import * as i3 from '@ngx-formly/core';
+import * as i3$1 from '@ngx-formly/core';
 import { FieldType, FieldWrapper, FORMLY_CONFIG, FormlyModule } from '@ngx-formly/core';
-import * as i2$2 from '@ngx-translate/core';
+import * as i3 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import * as i2$1 from 'primeng/api';
 import { MessageService, ConfirmationService, FilterMatchMode } from 'primeng/api';
 import * as i1$1 from 'primeng/autocomplete';
 import { AutoComplete, AutoCompleteModule } from 'primeng/autocomplete';
-import * as i2$7 from 'primeng/breadcrumb';
+import * as i2$4 from 'primeng/breadcrumb';
 import { BreadcrumbModule } from 'primeng/breadcrumb';
 import * as i8 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
@@ -27,42 +27,42 @@ import { ChipModule } from 'primeng/chip';
 import * as i6 from 'primeng/confirmdialog';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { ConfirmPopupModule } from 'primeng/confirmpopup';
-import * as i2$6 from 'primeng/dialog';
+import * as i1$4 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i1$2 from 'primeng/dropdown';
 import { Dropdown, DropdownModule } from 'primeng/dropdown';
 import * as i2 from 'primeng/dynamicdialog';
 import { DynamicDialogModule, DialogService } from 'primeng/dynamicdialog';
-import * as i1$5 from 'primeng/fieldset';
+import * as i1$6 from 'primeng/fieldset';
 import { FieldsetModule } from 'primeng/fieldset';
 import { FileUploadModule } from 'primeng/fileupload';
 import * as i6$1 from 'primeng/inputmask';
 import { InputMaskModule } from 'primeng/inputmask';
 import * as i1$3 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
-import * as i2$5 from 'primeng/inputswitch';
+import * as i2$3 from 'primeng/inputswitch';
 import { InputSwitchModule } from 'primeng/inputswitch';
 import * as i10$1 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i9$1 from 'primeng/inputtextarea';
 import { InputTextareaModule } from 'primeng/inputtextarea';
-import * as i3$1 from 'primeng/messages';
+import * as i3$2 from 'primeng/messages';
 import { MessagesModule } from 'primeng/messages';
-import * as i2$4 from 'primeng/multiselect';
+import * as i2$2 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
 import { PaginatorModule } from 'primeng/paginator';
-import * as i4$2 from 'primeng/progressspinner';
+import * as i4$3 from 'primeng/progressspinner';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
-import * as i4$3 from 'primeng/radiobutton';
+import * as i4$4 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 i7 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
-import * as i4$4 from 'primeng/table';
+import * as i4$5 from 'primeng/table';
 import { Table, TableModule } from 'primeng/table';
-import * as i1$4 from 'primeng/tabview';
+import * as i1$5 from 'primeng/tabview';
 import { TabViewModule } from 'primeng/tabview';
 import { TagModule } from 'primeng/tag';
 import * as i7$1 from 'primeng/toast';
@@ -72,7 +72,7 @@ import * as i8$1 from 'primeng/toolbar';
 import { ToolbarModule } from 'primeng/toolbar';
 import * as i10 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import { of, throwError, Observable, from, BehaviorSubject, Subject, ReplaySubject, distinctUntilChanged, combineLatest } from 'rxjs';
+import { of, throwError, Subject, Observable, from, BehaviorSubject, ReplaySubject, distinctUntilChanged, combineLatest } from 'rxjs';
 import 'reflect-metadata';
 import { mergeMap, map, first, catchError, filter, finalize, startWith } from 'rxjs/operators';
 import * as i4 from '@angular/platform-browser';
@@ -417,6 +417,40 @@ var ActionLevelEnum;
     ActionLevelEnum[ActionLevelEnum["Danger"] = 7] = "Danger";
 })(ActionLevelEnum || (ActionLevelEnum = {}));
 
+class MngFormEditorSubmitEvent {
+    constructor(formItem) {
+        this.formItem = formItem;
+        this.success = true;
+    }
+}
+var MngFormFieldEventTypeEnum;
+(function (MngFormFieldEventTypeEnum) {
+    MngFormFieldEventTypeEnum[MngFormFieldEventTypeEnum["Component"] = 0] = "Component";
+    MngFormFieldEventTypeEnum[MngFormFieldEventTypeEnum["ValueChange"] = 1] = "ValueChange";
+    MngFormFieldEventTypeEnum[MngFormFieldEventTypeEnum["DataProvider"] = 2] = "DataProvider";
+    MngFormFieldEventTypeEnum[MngFormFieldEventTypeEnum["Dialog"] = 3] = "Dialog";
+    MngFormFieldEventTypeEnum[MngFormFieldEventTypeEnum["Other"] = 4] = "Other";
+})(MngFormFieldEventTypeEnum || (MngFormFieldEventTypeEnum = {}));
+class MngFormFieldEventComponentSubtype {
+}
+MngFormFieldEventComponentSubtype.ON_INIT = 'Component.OnInit';
+MngFormFieldEventComponentSubtype.ON_VIEW_INIT = 'Component.OnViewInit';
+MngFormFieldEventComponentSubtype.ON_CONTENT_INIT = 'Component.OnContentInit';
+MngFormFieldEventComponentSubtype.ON_DESTROY = 'Component.OnDestroy';
+class MngFormFieldEventDialogSubtype {
+}
+MngFormFieldEventDialogSubtype.VISIBILITY = 'Dialog.Visibility';
+MngFormFieldEventDialogSubtype.TABLE_CAPTION_COMPONENT_INSTANCE = 'Dialog.MngTable.CaptionComponentInstance';
+MngFormFieldEventDialogSubtype.TABLE_COLUMN_ACTIONS_COMPONENT_INSTANCE = 'Dialog.MngTable.ColumnActionsComponentInstance';
+class MngFormFieldEvent {
+    constructor(type, componentType, componentInstance, data = {}) {
+        this.type = type;
+        this.componentType = componentType;
+        this.componentInstance = componentInstance;
+        this.data = data;
+    }
+}
+
 class DataProvider {
     constructor(modelType, serviceType) {
         this._modelType = modelType;
@@ -735,6 +769,20 @@ const typeMapBase = {
     QueryResultWithObject: MediusQueryResultWithObject
 };
 
+class TableDataProvider extends DataProvider {
+    constructor(modelType, serviceType) {
+        super(modelType, serviceType);
+        this._getAll = () => of(new MediusQueryResult());
+    }
+    get getAll() {
+        return this._getAll;
+    }
+    withGetAll(getAll) {
+        this._getAll = getAll;
+        return this;
+    }
+}
+
 class TableviewDataProvider extends EditorDataProvider {
     constructor(modelType, serviceType) {
         super(modelType, serviceType);
@@ -894,11 +942,19 @@ class EditorDescriptor {
 EditorDescriptor.defaultGroupName = '_default';
 class AGenericFieldDescriptor {
     constructor(editor) {
+        this._config = {};
         this._editor = editor;
     }
     get editor() {
         return this._editor;
     }
+    get config() {
+        return this._config;
+    }
+    withConfig(config) {
+        this._config = config;
+        return this;
+    }
 }
 class AFieldDescriptor extends AGenericFieldDescriptor {
     constructor(editor, property) {
@@ -907,6 +963,7 @@ class AFieldDescriptor extends AGenericFieldDescriptor {
         this._disabled = false;
         this._className = '';
         this._validators = [];
+        this._eventsSubject = new Subject();
         this._property = property;
         this._label = I18nUtil.getModelPropertyKey(this._editor.model, property);
     }
@@ -940,8 +997,14 @@ class AFieldDescriptor extends AGenericFieldDescriptor {
     get validators() {
         return this._validators;
     }
-    get disabledFunction() {
-        return this._disabledFunction;
+    get requiredExpression() {
+        return this._requiredExpression;
+    }
+    get disabledExpression() {
+        return this._disabledExpression;
+    }
+    get hiddenExpression() {
+        return this._hiddenExpression;
     }
     get property() {
         return this._property;
@@ -954,17 +1017,24 @@ class AFieldDescriptor extends AGenericFieldDescriptor {
         this._placeholder = placeholder;
         return this;
     }
-    withRequired(required = true) {
+    withRequired(required = true, requiredExpression) {
         this._required = required;
+        if (requiredExpression) {
+            this._requiredExpression = requiredExpression;
+        }
         return this;
     }
-    withDisabled(disabled = true, disabledFunction) {
+    withDisabled(disabled = true, disabledExpression) {
         this._disabled = disabled;
-        if (disabledFunction) {
-            this._disabledFunction = disabledFunction;
+        if (disabledExpression) {
+            this._disabledExpression = disabledExpression;
         }
         return this;
     }
+    withHidden(hiddenExpression) {
+        this._hiddenExpression = hiddenExpression;
+        return this;
+    }
     withDefaultValue(defaultValue) {
         this._defaultValue = defaultValue;
         return this;
@@ -985,13 +1055,21 @@ class AFieldDescriptor extends AGenericFieldDescriptor {
         this._validators.push(new FieldValidator(name, expression, message));
         return this;
     }
+    nextEvent(type, cmpType, cmpInstance, data) {
+        this._eventsSubject.next(new MngFormFieldEvent(type, cmpType, cmpInstance, data));
+    }
+    get events$() {
+        return this._eventsSubject.asObservable();
+    }
     copyFieldsTo(obj) {
         obj._label = this._label;
         obj._placeholder = this._placeholder;
         obj._required = this._required;
         obj._disabled = this._disabled;
         obj._defaultValue = this._defaultValue;
-        obj._disabledFunction = this._disabledFunction;
+        obj._requiredExpression = this._requiredExpression;
+        obj._hiddenExpression = this._hiddenExpression;
+        obj._disabledExpression = this._disabledExpression;
         obj._className = this._className;
         obj._getter = this._getter;
         obj._setter = this._setter;
@@ -1002,6 +1080,7 @@ class FieldInputDescriptor extends AFieldDescriptor {
     constructor(editor, property) {
         super(editor, property);
         this._fieldType = FieldInputDescriptor.TypeEnum.Text;
+        this._numberUseGrouping = true;
         // radio specific properties
         this._radioOptions = [];
         this._datePickerShowTime = false;
@@ -1027,6 +1106,9 @@ class FieldInputDescriptor extends AFieldDescriptor {
     get numberMaxFractionDigits() {
         return this._numberMaxFractionDigits;
     }
+    get numberUseGrouping() {
+        return this._numberUseGrouping;
+    }
     get radioOptions() {
         return this._radioOptions;
     }
@@ -1060,6 +1142,10 @@ class FieldInputDescriptor extends AFieldDescriptor {
     get customComponentName() {
         return this._customComponentName;
     }
+    asHidden() {
+        this._fieldType = FieldInputDescriptor.TypeEnum.Hidden;
+        return this;
+    }
     asText(minLength, maxLength, pattern, isEmail) {
         this._fieldType = FieldInputDescriptor.TypeEnum.Text;
         this._minLength = minLength;
@@ -1078,13 +1164,14 @@ class FieldInputDescriptor extends AFieldDescriptor {
         this._pattern = pattern;
         return this;
     }
-    asNumber(step, min, max, minFractionDigits, maxFractionDigits) {
+    asNumber(step, min, max, minFractionDigits, maxFractionDigits, numberUseGrouping = true) {
         this._fieldType = FieldInputDescriptor.TypeEnum.Number;
         this._numberStep = step;
         this._numberMinFractionDigits = minFractionDigits;
         this._numberMaxFractionDigits = maxFractionDigits;
         this._numberMin = min !== null && min !== void 0 ? min : Number.MIN_SAFE_INTEGER;
         this._numberMax = max !== null && max !== void 0 ? max : Number.MAX_SAFE_INTEGER;
+        this._numberUseGrouping = numberUseGrouping;
         return this;
     }
     asSwitch() {
@@ -1135,6 +1222,7 @@ class FieldInputDescriptor extends AFieldDescriptor {
         field._numberStep = this._numberStep;
         field._numberMinFractionDigits = this._numberMinFractionDigits;
         field._numberMaxFractionDigits = this._numberMaxFractionDigits;
+        field._numberUseGrouping = this._numberUseGrouping;
         field._radioOptions = [...this._radioOptions];
         field._datePickerFormat = this._datePickerFormat;
         field._datePickerMin = this._datePickerMin;
@@ -1152,14 +1240,15 @@ class FieldInputDescriptor extends AFieldDescriptor {
 (function (FieldInputDescriptor) {
     let TypeEnum;
     (function (TypeEnum) {
-        TypeEnum[TypeEnum["Text"] = 0] = "Text";
-        TypeEnum[TypeEnum["Textarea"] = 1] = "Textarea";
-        TypeEnum[TypeEnum["Number"] = 2] = "Number";
-        TypeEnum[TypeEnum["Switch"] = 3] = "Switch";
-        TypeEnum[TypeEnum["Radio"] = 4] = "Radio";
-        TypeEnum[TypeEnum["Datepicker"] = 5] = "Datepicker";
-        TypeEnum[TypeEnum["Mask"] = 6] = "Mask";
-        TypeEnum[TypeEnum["Custom"] = 7] = "Custom";
+        TypeEnum[TypeEnum["Hidden"] = 0] = "Hidden";
+        TypeEnum[TypeEnum["Text"] = 1] = "Text";
+        TypeEnum[TypeEnum["Textarea"] = 2] = "Textarea";
+        TypeEnum[TypeEnum["Number"] = 3] = "Number";
+        TypeEnum[TypeEnum["Switch"] = 4] = "Switch";
+        TypeEnum[TypeEnum["Radio"] = 5] = "Radio";
+        TypeEnum[TypeEnum["Datepicker"] = 6] = "Datepicker";
+        TypeEnum[TypeEnum["Mask"] = 7] = "Mask";
+        TypeEnum[TypeEnum["Custom"] = 8] = "Custom";
     })(TypeEnum = FieldInputDescriptor.TypeEnum || (FieldInputDescriptor.TypeEnum = {}));
 })(FieldInputDescriptor || (FieldInputDescriptor = {}));
 class FieldLookupDescriptor extends AFieldDescriptor {
@@ -1184,9 +1273,15 @@ class FieldLookupDescriptor extends AFieldDescriptor {
     get dataProvider() {
         return this._dataProvider;
     }
+    get lookupTableDataProvider() {
+        return this._lookupTableDataProvider;
+    }
     get modelType() {
         return this._modelType;
     }
+    get lookupTableDescriptor() {
+        return this._lookupTableDescriptor;
+    }
     withItemsLabelProperty(itemsLabelProperty) {
         this._itemsLabelProperty = itemsLabelProperty;
         return this;
@@ -1212,10 +1307,19 @@ class FieldLookupDescriptor extends AFieldDescriptor {
         this._dataProvider = dataProvider;
         return this;
     }
+    withConfig(config) {
+        return super.withConfig(config);
+    }
     asAutocomplete() {
         this._lookupType = FieldLookupDescriptor.LookupTypeEnum.Autocomplete;
         return this;
     }
+    asDialog(lookupTableDescriptor, tableDataProvider) {
+        this._lookupType = FieldLookupDescriptor.LookupTypeEnum.Dialog;
+        this._lookupTableDescriptor = lookupTableDescriptor;
+        this._lookupTableDataProvider = tableDataProvider;
+        return this;
+    }
     copy() {
         const field = new FieldLookupDescriptor(this._editor, this._property, this._modelType);
         this.copyFieldsTo(field);
@@ -1224,6 +1328,7 @@ class FieldLookupDescriptor extends AFieldDescriptor {
         field._itemsValueProperty = this._itemsValueProperty;
         field._dataKeyProperty = this._dataKeyProperty;
         field._dataProvider = this._dataProvider;
+        field._lookupTableDescriptor = this._lookupTableDescriptor;
         return field;
     }
 }
@@ -1232,6 +1337,7 @@ class FieldLookupDescriptor extends AFieldDescriptor {
     (function (LookupTypeEnum) {
         LookupTypeEnum[LookupTypeEnum["Dropdown"] = 0] = "Dropdown";
         LookupTypeEnum[LookupTypeEnum["Autocomplete"] = 1] = "Autocomplete";
+        LookupTypeEnum[LookupTypeEnum["Dialog"] = 2] = "Dialog";
     })(LookupTypeEnum = FieldLookupDescriptor.LookupTypeEnum || (FieldLookupDescriptor.LookupTypeEnum = {}));
 })(FieldLookupDescriptor || (FieldLookupDescriptor = {}));
 class FieldLookupEnumDescriptor extends FieldLookupDescriptor {
@@ -1248,7 +1354,6 @@ class FieldLookupEnumDescriptor extends FieldLookupDescriptor {
         this.withLookupDataProvider(dataProvider);
         this.withItemsLabelProperty('title');
         this.withItemsValueProperty('value');
-        this.withDataKeyProperty('value');
     }
     get enumType() {
         return this._enumType;
@@ -2025,7 +2130,6 @@ class FilterLookupEnumDescriptor extends FilterLookupDescriptor {
         this.withLookupDataProvider(dataProvider);
         this.withItemsLabelProperty('title');
         this.withItemsValueProperty('value');
-        this.withDataKeyProperty('value');
     }
     get enumType() {
         return this._enumType;
@@ -2271,6 +2375,8 @@ class EditorFormlyUtil {
         field.templateOptions['descriptor'] = descriptor;
         if (descriptor instanceof FieldInputDescriptor) {
             switch (descriptor.fieldType) {
+                case FieldInputDescriptor.TypeEnum.Hidden:
+                    break;
                 case FieldInputDescriptor.TypeEnum.Textarea:
                     field.type = 'textarea';
                     break;
@@ -2310,6 +2416,9 @@ class EditorFormlyUtil {
                 case FieldLookupDescriptor.LookupTypeEnum.Autocomplete:
                     field.type = 'autocomplete';
                     break;
+                case FieldLookupDescriptor.LookupTypeEnum.Dialog:
+                    field.type = 'dialog';
+                    break;
                 case FieldLookupDescriptor.LookupTypeEnum.Dropdown:
                 default:
                     field.type = 'dropdown';
@@ -2325,11 +2434,17 @@ class EditorFormlyUtil {
         if (descriptor.label) {
             field.templateOptions.label = descriptor.label;
         }
+        if (descriptor.requiredExpression) {
+            field.expressionProperties['templateOptions.required'] = descriptor.requiredExpression;
+        }
         if (descriptor.required) {
             field.templateOptions.required = true;
         }
-        if (descriptor.disabledFunction) {
-            field.expressionProperties['templateOptions.disabled'] = descriptor.disabledFunction;
+        if (descriptor.hiddenExpression) {
+            field.expressionProperties['hide'] = descriptor.hiddenExpression;
+        }
+        if (descriptor.disabledExpression) {
+            field.expressionProperties['templateOptions.disabled'] = descriptor.disabledExpression;
         }
         else if (descriptor.disabled) {
             field.templateOptions.disabled = true;
@@ -3431,11 +3546,11 @@ class MngActionService {
         }
     }
 }
-MngActionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionService, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i2.DialogService }, { token: i2$1.ConfirmationService }, { token: i2$2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+MngActionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionService, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i2.DialogService }, { token: i2$1.ConfirmationService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
 MngActionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Router }, { type: i2.DialogService }, { type: i2$1.ConfirmationService }, { type: i2$2.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Router }, { type: i2.DialogService }, { type: i2$1.ConfirmationService }, { type: i3.TranslateService }]; } });
 
 class MngConfigurationService {
     constructor(http) {
@@ -3479,7 +3594,7 @@ class MngConfigurationService {
             const pathSegments = url.split('/');
             pathSegments[pathSegments.length - 1] = 'env.json';
             return this.http.get(pathSegments.join('/'));
-        }), first(), map(res => {
+        }), map(res => {
             this.jsonEnvironments.push(res);
             this.mergeConfigs();
             return true;
@@ -3851,12 +3966,12 @@ class MngCommonsService {
         return titlePieces.join(' - ');
     }
 }
-MngCommonsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngCommonsService, deps: [{ token: i1.Router }, { token: i2$1.PrimeNGConfig }, { token: i2$2.TranslateService }, { token: i4.Title }, { token: MngConfigurationService }, { token: MNG_MODULE_CONFIG_IT }, { token: MNG_BROWSER_STORAGE_IT }], target: i0.ɵɵFactoryTarget.Injectable });
+MngCommonsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngCommonsService, deps: [{ token: i1.Router }, { token: i2$1.PrimeNGConfig }, { token: i3.TranslateService }, { token: i4.Title }, { token: MngConfigurationService }, { token: MNG_MODULE_CONFIG_IT }, { token: MNG_BROWSER_STORAGE_IT }], target: i0.ɵɵFactoryTarget.Injectable });
 MngCommonsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngCommonsService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngCommonsService, decorators: [{
             type: Injectable
         }], ctorParameters: function () {
-        return [{ type: i1.Router }, { type: i2$1.PrimeNGConfig }, { type: i2$2.TranslateService }, { type: i4.Title }, { type: MngConfigurationService }, { type: undefined, decorators: [{
+        return [{ type: i1.Router }, { type: i2$1.PrimeNGConfig }, { type: i3.TranslateService }, { type: i4.Title }, { type: MngConfigurationService }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [MNG_MODULE_CONFIG_IT]
                     }] }, { type: Storage, decorators: [{
@@ -3964,12 +4079,12 @@ class MngActionComponent {
         return `${action.actionName}_${this.cmpId}`;
     }
 }
-MngActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2$2.TranslateService }, { token: MngActionService }, { token: i2$1.ConfirmationService }, { token: TableviewComponentService }], target: i0.ɵɵFactoryTarget.Component });
+MngActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionComponent, deps: [{ token: i1.ActivatedRoute }, { token: i3.TranslateService }, { token: MngActionService }, { token: i2$1.ConfirmationService }, { token: TableviewComponentService }], target: i0.ɵɵFactoryTarget.Component });
 MngActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngActionComponent, selector: "mng-action", inputs: { action: "action", item: "item", itemId: "itemId", actionData: "actionData" }, providers: [MessageService, ConfirmationService], ngImport: i0, template: "<ng-container *ngIf=\"$isVisible | async\">\n    <button\n        *ngIf=\"action.icon && action.title === null; else noIcon\"\n        type=\"button\"\n        pButton\n        pRipple\n        [icon]=\"action.icon\"\n        [loading]=\"($loading | async) ?? false\"\n        [disabled]=\"($isEnabled | async) === false\"\n        [pTooltip]=\"$any($tooltip | async)\"\n        (click)=\"triggerAction($event)\"\n        class=\"mng-action-button mng-action-button-icon p-button-rounded\"\n        [class.p-button-primary]=\"action.level === 1\"\n        [class.p-button-success]=\"action.level === 5\"\n        [class.p-button-danger]=\"action.level === 7\"></button>\n    <ng-template #noIcon>\n        <button\n            type=\"button\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.icon)\"\n            [label]=\"($label | async) ?? ''\"\n            [loading]=\"($loading | async) ?? false\"\n            [disabled]=\"($isEnabled | async) === false\"\n            [pTooltip]=\"$any($tooltip | async)\"\n            (click)=\"triggerAction($event)\"\n            class=\"mng-action-button p-button-text\"\n            [class.p-button-primary]=\"action.level === 1\"\n            [class.p-button-success]=\"action.level === 5\"\n            [class.p-button-danger]=\"action.level === 7\"></button>\n    </ng-template>\n    <p-confirmDialog *ngIf=\"action.hasRunConfirmation\" [key]=\"action.actionName + '_' + cmpId\" [baseZIndex]=\"50\" appendTo=\"body\"></p-confirmDialog>\n</ng-container>\n", components: [{ type: i6.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i9.Ripple, selector: "[pRipple]" }, { type: i10.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], pipes: { "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-action', changeDetection: ChangeDetectionStrategy.OnPush, providers: [MessageService, ConfirmationService], template: "<ng-container *ngIf=\"$isVisible | async\">\n    <button\n        *ngIf=\"action.icon && action.title === null; else noIcon\"\n        type=\"button\"\n        pButton\n        pRipple\n        [icon]=\"action.icon\"\n        [loading]=\"($loading | async) ?? false\"\n        [disabled]=\"($isEnabled | async) === false\"\n        [pTooltip]=\"$any($tooltip | async)\"\n        (click)=\"triggerAction($event)\"\n        class=\"mng-action-button mng-action-button-icon p-button-rounded\"\n        [class.p-button-primary]=\"action.level === 1\"\n        [class.p-button-success]=\"action.level === 5\"\n        [class.p-button-danger]=\"action.level === 7\"></button>\n    <ng-template #noIcon>\n        <button\n            type=\"button\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.icon)\"\n            [label]=\"($label | async) ?? ''\"\n            [loading]=\"($loading | async) ?? false\"\n            [disabled]=\"($isEnabled | async) === false\"\n            [pTooltip]=\"$any($tooltip | async)\"\n            (click)=\"triggerAction($event)\"\n            class=\"mng-action-button p-button-text\"\n            [class.p-button-primary]=\"action.level === 1\"\n            [class.p-button-success]=\"action.level === 5\"\n            [class.p-button-danger]=\"action.level === 7\"></button>\n    </ng-template>\n    <p-confirmDialog *ngIf=\"action.hasRunConfirmation\" [key]=\"action.actionName + '_' + cmpId\" [baseZIndex]=\"50\" appendTo=\"body\"></p-confirmDialog>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2$2.TranslateService }, { type: MngActionService }, { type: i2$1.ConfirmationService }, { type: TableviewComponentService }]; }, propDecorators: { action: [{
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i3.TranslateService }, { type: MngActionService }, { type: i2$1.ConfirmationService }, { type: TableviewComponentService }]; }, propDecorators: { action: [{
                 type: Input
             }], item: [{
                 type: Input
@@ -4123,14 +4238,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
 class MngComponentDirective {
     constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
+        this.componentInstanceEventEmitter = new EventEmitter();
     }
     ngOnInit() {
         this.viewContainerRef.clear();
         this.componentRef = this.viewContainerRef.createComponent(this.component);
+        this.componentInstanceEventEmitter.next(this.componentRef.instance);
     }
 }
 MngComponentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngComponentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-MngComponentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: MngComponentDirective, selector: "[mngComponent]", inputs: { component: ["mngComponent", "component"] }, ngImport: i0 });
+MngComponentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: MngComponentDirective, selector: "[mngComponent]", inputs: { component: ["mngComponent", "component"] }, outputs: { componentInstanceEventEmitter: "instanceCreated" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngComponentDirective, decorators: [{
             type: Directive,
             args: [{
@@ -4139,6 +4256,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { component: [{
                 type: Input,
                 args: ['mngComponent']
+            }], componentInstanceEventEmitter: [{
+                type: Output,
+                args: ['instanceCreated']
             }] } });
 
 class MngTemplateDirective {
@@ -4167,13 +4287,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
                 args: ['mngTemplate']
             }] } });
 
-class MngFormEditorSubmitEvent {
-    constructor(formItem) {
-        this.formItem = formItem;
-        this.success = true;
-    }
-}
-
 class MngFormEditorComponent {
     constructor(translateService) {
         this.translateService = translateService;
@@ -4196,7 +4309,7 @@ class MngFormEditorComponent {
         this.subscriptions = [];
     }
     ngOnInit() {
-        this.updateFormModel(this.item);
+        this.resetFormModel(this.item);
         this.submitLoading$ = this.submitLoading instanceof Observable ? this.submitLoading : of(this.submitLoading);
         // init fields for formly
         this.formFields = EditorFormlyUtil.createFormlyConfigFromDescriptor(this.descriptor);
@@ -4241,6 +4354,58 @@ class MngFormEditorComponent {
         });
         return formValue;
     }
+    getFormField(key) {
+        return this.findFormField(this.form, key.split('.'));
+    }
+    setFormFieldValue(key, value) {
+        const control = this.getFormField(key);
+        if (control) {
+            control.setValue(value);
+        }
+        else {
+            console.warn(`Value was not set, because field ${key} was not found.`);
+        }
+    }
+    patchFormFieldValue(key, value) {
+        const control = this.getFormField(key);
+        if (control) {
+            control.patchValue(value);
+        }
+        else {
+            console.warn(`Value was not set, because field ${key} was not found.`);
+        }
+    }
+    resetFormFieldValue(key, value) {
+        const control = this.getFormField(key);
+        if (control) {
+            control.reset(value);
+        }
+        else {
+            console.warn(`Value was not set, because field ${key} was not found.`);
+        }
+    }
+    findFormField(control, keyPath) {
+        if (keyPath.length === 0) {
+            return control;
+        }
+        if (keyPath.length === 1) {
+            return control.get(keyPath[0]);
+        }
+        let nextControl = null;
+        if (control instanceof FormGroup) {
+            const nextField = control.get(keyPath[0]);
+        }
+        else if (control instanceof FormArray) {
+            const idx = +keyPath[0];
+            if (!isNaN(idx)) {
+                nextControl = control.at(idx);
+            }
+        }
+        if (!control) {
+            return null;
+        }
+        return this.findFormField(nextControl, keyPath.slice(1));
+    }
     isAnyFieldInvalid(fields = []) {
         var _a;
         for (const field of fields) {
@@ -4257,7 +4422,7 @@ class MngFormEditorComponent {
         }
         return false;
     }
-    updateFormModel(item) {
+    resetFormModel(item) {
         this.formOrigItem = item;
         // TODO: to check if this is ok, could be problems with dates, if so, try lodash
         const formModel = JSON.parse(JSON.stringify(item !== null && item !== void 0 ? item : {}));
@@ -4276,12 +4441,12 @@ class MngFormEditorComponent {
         this.formOptions.formState.disabled = this.isFormDisabled !== null ? this.isFormDisabled === true : this.descriptor.disabled;
     }
 }
-MngFormEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormEditorComponent, deps: [{ token: i2$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-MngFormEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormEditorComponent, selector: "mng-form-editor", inputs: { descriptor: "descriptor", submitLoading: "submitLoading", item: "item", isSubmitButtonVisible: "isSubmitButtonVisible", isFormDisabled: "isFormDisabled" }, outputs: { formSubmitEventEmitter: "formSubmit" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "submitButtonElementRef", first: true, predicate: ["submitButton"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit($event)\">\n    <formly-form [form]=\"form\" [fields]=\"formFields\" [options]=\"formOptions\" [model]=\"formModel\"></formly-form>\n    <button #submitButton pButton type=\"submit\" [class.hidden]=\"!isSubmitButtonVisible\" [disabled]=\"form.disabled\" [loading]=\"(submitLoading$ | async) ?? false\"></button>\n</form>\n<p-messages [value]=\"formMessages\" [enableService]=\"false\"></p-messages>\n", components: [{ type: i3.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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }], pipes: { "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormEditorComponent, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+MngFormEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormEditorComponent, selector: "mng-form-editor", inputs: { descriptor: "descriptor", submitLoading: "submitLoading", item: "item", isSubmitButtonVisible: "isSubmitButtonVisible", isFormDisabled: "isFormDisabled" }, outputs: { formSubmitEventEmitter: "formSubmit" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "submitButtonElementRef", first: true, predicate: ["submitButton"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit($event)\">\n    <formly-form [form]=\"form\" [fields]=\"formFields\" [options]=\"formOptions\" [model]=\"formModel\"></formly-form>\n    <button #submitButton pButton type=\"submit\" [class.hidden]=\"!isSubmitButtonVisible\" [disabled]=\"form.disabled\" [loading]=\"(submitLoading$ | async) ?? false\"></button>\n</form>\n<p-messages [value]=\"formMessages\" [enableService]=\"false\"></p-messages>\n", components: [{ type: i3$1.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { type: i3$2.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }], directives: [{ type: i4$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }], pipes: { "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-form-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit($event)\">\n    <formly-form [form]=\"form\" [fields]=\"formFields\" [options]=\"formOptions\" [model]=\"formModel\"></formly-form>\n    <button #submitButton pButton type=\"submit\" [class.hidden]=\"!isSubmitButtonVisible\" [disabled]=\"form.disabled\" [loading]=\"(submitLoading$ | async) ?? false\"></button>\n</form>\n<p-messages [value]=\"formMessages\" [enableService]=\"false\"></p-messages>\n" }]
-        }], ctorParameters: function () { return [{ type: i2$2.TranslateService }]; }, propDecorators: { descriptor: [{
+        }], ctorParameters: function () { return [{ type: i3.TranslateService }]; }, propDecorators: { descriptor: [{
                 type: Input
             }], submitLoading: [{
                 type: Input
@@ -4333,11 +4498,13 @@ class MngAutocompleteComponent {
             console.warn(`Data provider should be provided for MngAutocompleteComponent.`);
         }
     }
+    ngOnDestroy() {
+        var _a;
+        (_a = this.searchSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
     onSearch(event) {
-        if (this.searchSubscription) {
-            // try to cancel existing HTTP request subscription
-            this.searchSubscription.unsubscribe();
-        }
+        var _a;
+        (_a = this.searchSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         if (this.dataProvider) {
             this.isLoading = true;
             const queryParamBuilder = MediusQueryParamBuilder.create();
@@ -4347,11 +4514,14 @@ class MngAutocompleteComponent {
             if (event.query && event.query.length > 0 && this.itemsLabelProperty) {
                 queryParamBuilder.withFilter(this.itemsLabelProperty, event.query, undefined, MediusFilterMatchType.StartsWith);
             }
-            this.searchSubscription = this.dataProvider
-                .lookup(queryParamBuilder.build(), this.dataProviderService, event.query)
-                .pipe(first(), finalize(() => (this.isLoading = false)))
-                .subscribe((res) => {
-                this.suggestionsSubject.next(res);
+            this.searchSubscription = this.dataProvider.lookup(queryParamBuilder.build(), this.dataProviderService, event.query).subscribe({
+                next: (res) => {
+                    this.suggestionsSubject.next(res);
+                    this.isLoading = false;
+                },
+                error: () => {
+                    this.isLoading = false;
+                }
             });
         }
     }
@@ -4375,13 +4545,10 @@ class MngAutocompleteComponent {
     }
     writeValue(obj) {
         this.autocompleteFormControl.setValue(obj, { emitEvent: false });
-        if (this.primeAutocomplete) {
-            this.primeAutocomplete.writeValue(obj);
-        }
     }
 }
 MngAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngAutocompleteComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-MngAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: { dataProvider: "dataProvider", dataKeyProperty: "dataKeyProperty", itemsLabelProperty: "itemsLabelProperty", multiselect: "multiselect", placeholder: "placeholder", className: "className", dropdownClassName: "dropdownClassName" }, outputs: { valueChangeEventEmitter: "valueChange" }, providers: [MNG_AUTOCOMPLETE_VALUE_ACCESSOR], viewQueries: [{ propertyName: "primeAutocomplete", first: true, predicate: AutoComplete, descendants: true }], ngImport: i0, template: "<p-autoComplete\n    [formControl]=\"autocompleteFormControl\"\n    [placeholder]=\"$any(placeholder)\"\n    [dropdown]=\"true\"\n    [dataKey]=\"$any(dataKeyProperty)\"\n    [field]=\"$any(itemsLabelProperty)\"\n    [suggestions]=\"(suggestions$ | async) ?? []\"\n    [multiple]=\"multiselect\"\n    [showEmptyMessage]=\"true\"\n    [emptyMessage]=\"'mngAutocomplete.noMatches' | translate\"\n    [styleClass]=\"$any(className)\"\n    [panelStyleClass]=\"$any(dropdownClassName)\"\n    (completeMethod)=\"onSearch($event)\"\n    (onSelect)=\"onSelect($event)\"\n    appendTo=\"body\"\n    dropdownMode=\"current\">\n</p-autoComplete>\n", components: [{ type: i1$1.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "virtualScroll", "itemSize", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "field", "scrollHeight", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "suggestions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide"] }], directives: [{ type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i2$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: { dataProvider: "dataProvider", dataKeyProperty: "dataKeyProperty", itemsLabelProperty: "itemsLabelProperty", multiselect: "multiselect", placeholder: "placeholder", className: "className", dropdownClassName: "dropdownClassName" }, outputs: { valueChangeEventEmitter: "valueChange" }, providers: [MNG_AUTOCOMPLETE_VALUE_ACCESSOR], viewQueries: [{ propertyName: "primeAutocomplete", first: true, predicate: AutoComplete, descendants: true }], ngImport: i0, template: "<p-autoComplete\n    [formControl]=\"autocompleteFormControl\"\n    [placeholder]=\"$any(placeholder)\"\n    [dropdown]=\"true\"\n    [dataKey]=\"$any(dataKeyProperty)\"\n    [field]=\"$any(itemsLabelProperty)\"\n    [suggestions]=\"(suggestions$ | async) ?? []\"\n    [multiple]=\"multiselect\"\n    [showEmptyMessage]=\"true\"\n    [emptyMessage]=\"'mngAutocomplete.noMatches' | translate\"\n    [styleClass]=\"$any(className)\"\n    [panelStyleClass]=\"$any(dropdownClassName)\"\n    (completeMethod)=\"onSearch($event)\"\n    (onSelect)=\"onSelect($event)\"\n    appendTo=\"body\"\n    dropdownMode=\"current\">\n</p-autoComplete>\n", components: [{ type: i1$1.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "virtualScroll", "itemSize", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "field", "scrollHeight", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "suggestions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide"] }], directives: [{ type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i3.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-autocomplete', providers: [MNG_AUTOCOMPLETE_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-autoComplete\n    [formControl]=\"autocompleteFormControl\"\n    [placeholder]=\"$any(placeholder)\"\n    [dropdown]=\"true\"\n    [dataKey]=\"$any(dataKeyProperty)\"\n    [field]=\"$any(itemsLabelProperty)\"\n    [suggestions]=\"(suggestions$ | async) ?? []\"\n    [multiple]=\"multiselect\"\n    [showEmptyMessage]=\"true\"\n    [emptyMessage]=\"'mngAutocomplete.noMatches' | translate\"\n    [styleClass]=\"$any(className)\"\n    [panelStyleClass]=\"$any(dropdownClassName)\"\n    (completeMethod)=\"onSearch($event)\"\n    (onSelect)=\"onSelect($event)\"\n    appendTo=\"body\"\n    dropdownMode=\"current\">\n</p-autoComplete>\n" }]
@@ -4417,6 +4584,7 @@ class MngDropdownComponent {
         this.injector = injector;
         this.multiselect = false;
         this.showClear = true;
+        this.selectFirstItem = false;
         this.className = null;
         this.dropdownClassName = null;
         this.valueChangeEventEmitter = new EventEmitter();
@@ -4438,21 +4606,14 @@ class MngDropdownComponent {
         if (this.dataProvider) {
             this.dataProviderService = this.dataProvider.serviceType ? this.injector.get(this.dataProvider.serviceType) : null;
             const queryParamBuilder = MediusQueryParamBuilder.create();
-            this.dataProvider
-                .lookup(queryParamBuilder.build(), this.dataProviderService)
-                .pipe(first())
-                .subscribe(res => {
+            this.itemsSubscription = this.dataProvider.lookup(queryParamBuilder.build(), this.dataProviderService).subscribe(res => {
                 this.itemsSubject.next(res);
             });
-            if (!((_a = this.dropdownFormControl) === null || _a === void 0 ? void 0 : _a.value)) {
+            if (this.selectFirstItem && !((_a = this.dropdownFormControl) === null || _a === void 0 ? void 0 : _a.value)) {
                 this.items$.pipe(first()).subscribe(res => {
                     var _a;
-                    // TODO: check if really only way
-                    if (res.length === 1) {
-                        const value = this.itemsValueProperty ? res[0][this.itemsValueProperty] : res[0];
-                        (_a = this.dropdownFormControl) === null || _a === void 0 ? void 0 : _a.patchValue(value);
-                        console.log('patched dropdown form value with', value);
-                    }
+                    const value = this.itemsValueProperty ? res[0][this.itemsValueProperty] : res[0];
+                    (_a = this.dropdownFormControl) === null || _a === void 0 ? void 0 : _a.setValue(value);
                 });
             }
         }
@@ -4460,6 +4621,10 @@ class MngDropdownComponent {
             console.warn(`Data provider should be provided for MngDropdownComponent.`);
         }
     }
+    ngOnDestroy() {
+        var _a;
+        (_a = this.itemsSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
     registerOnChange(fn) {
         this.onChangeFn = fn;
     }
@@ -4475,16 +4640,14 @@ class MngDropdownComponent {
         }
     }
     writeValue(obj) {
-        var _a;
         this.dropdownFormControl.setValue(obj, { emitEvent: false });
-        (_a = this.primeDropdown) === null || _a === void 0 ? void 0 : _a.writeValue(obj);
     }
 }
 MngDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngDropdownComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-MngDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngDropdownComponent, selector: "mng-dropdown", inputs: { dataProvider: "dataProvider", dataKeyProperty: "dataKeyProperty", itemsLabelProperty: "itemsLabelProperty", itemsValueProperty: "itemsValueProperty", multiselect: "multiselect", placeholder: "placeholder", showClear: "showClear", className: "className", dropdownClassName: "dropdownClassName" }, outputs: { valueChangeEventEmitter: "valueChange" }, providers: [MNG_DROPDOWN_VALUE_ACCESSOR], viewQueries: [{ propertyName: "primeDropdown", first: true, predicate: Dropdown, descendants: true }], ngImport: i0, template: "<p-dropdown\n    *ngIf=\"!multiselect; else pMultiselect\"\n    [formControl]=\"dropdownFormControl\"\n    [placeholder]=\"$any(placeholder)\"\n    [dataKey]=\"$any(dataKeyProperty)\"\n    [optionLabel]=\"$any(itemsLabelProperty)\"\n    [optionValue]=\"$any(itemsValueProperty)\"\n    [options]=\"(items$ | async) ?? []\"\n    [showClear]=\"showClear\"\n    [autoDisplayFirst]=\"false\"\n    [styleClass]=\"$any(className)\"\n    [panelStyleClass]=\"$any(dropdownClassName)\"\n    appendTo=\"body\">\n</p-dropdown>\n<ng-template #pMultiselect>\n    <p-multiSelect\n        display=\"chip\"\n        [formControl]=\"dropdownFormControl\"\n        [defaultLabel]=\"$any(placeholder)\"\n        [dataKey]=\"$any(dataKeyProperty)\"\n        [optionLabel]=\"$any(itemsLabelProperty)\"\n        [optionValue]=\"$any(itemsValueProperty)\"\n        [options]=\"(items$ | async) ?? []\"\n        [styleClass]=\"$any(className)\"\n        [panelStyleClass]=\"$any(dropdownClassName)\"\n        [filter]=\"false\"\n        appendTo=\"body\">\n    </p-multiSelect>\n</ng-template>\n", components: [{ type: i1$2.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "virtualScroll", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear"] }, { type: i2$4.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "autoZIndex", "baseZIndex", "filterBy", "virtualScroll", "itemSize", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "scrollHeight", "defaultLabel", "placeholder", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onPanelShow", "onPanelHide"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngDropdownComponent, selector: "mng-dropdown", inputs: { dataProvider: "dataProvider", dataKeyProperty: "dataKeyProperty", itemsLabelProperty: "itemsLabelProperty", itemsValueProperty: "itemsValueProperty", multiselect: "multiselect", placeholder: "placeholder", showClear: "showClear", selectFirstItem: "selectFirstItem", className: "className", dropdownClassName: "dropdownClassName" }, outputs: { valueChangeEventEmitter: "valueChange" }, providers: [MNG_DROPDOWN_VALUE_ACCESSOR], viewQueries: [{ propertyName: "primeDropdown", first: true, predicate: Dropdown, descendants: true }], ngImport: i0, template: "<p-dropdown\n    *ngIf=\"!multiselect; else pMultiselect\"\n    [formControl]=\"dropdownFormControl\"\n    [placeholder]=\"$any(placeholder)\"\n    [dataKey]=\"$any(dataKeyProperty)\"\n    [optionLabel]=\"$any(itemsLabelProperty)\"\n    [optionValue]=\"$any(itemsValueProperty)\"\n    [options]=\"$any(items$ | async)\"\n    [showClear]=\"showClear\"\n    [autoDisplayFirst]=\"false\"\n    [styleClass]=\"$any(className)\"\n    [panelStyleClass]=\"$any(dropdownClassName)\"\n    appendTo=\"body\">\n</p-dropdown>\n<ng-template #pMultiselect>\n    <p-multiSelect\n        display=\"chip\"\n        [formControl]=\"dropdownFormControl\"\n        [defaultLabel]=\"$any(placeholder)\"\n        [dataKey]=\"$any(dataKeyProperty)\"\n        [optionLabel]=\"$any(itemsLabelProperty)\"\n        [optionValue]=\"$any(itemsValueProperty)\"\n        [options]=\"(items$ | async) ?? []\"\n        [styleClass]=\"$any(className)\"\n        [panelStyleClass]=\"$any(dropdownClassName)\"\n        [filter]=\"false\"\n        appendTo=\"body\">\n    </p-multiSelect>\n</ng-template>\n", components: [{ type: i1$2.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "virtualScroll", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear"] }, { type: i2$2.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "autoZIndex", "baseZIndex", "filterBy", "virtualScroll", "itemSize", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "scrollHeight", "defaultLabel", "placeholder", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onPanelShow", "onPanelHide"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-dropdown', providers: [MNG_DROPDOWN_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-dropdown\n    *ngIf=\"!multiselect; else pMultiselect\"\n    [formControl]=\"dropdownFormControl\"\n    [placeholder]=\"$any(placeholder)\"\n    [dataKey]=\"$any(dataKeyProperty)\"\n    [optionLabel]=\"$any(itemsLabelProperty)\"\n    [optionValue]=\"$any(itemsValueProperty)\"\n    [options]=\"(items$ | async) ?? []\"\n    [showClear]=\"showClear\"\n    [autoDisplayFirst]=\"false\"\n    [styleClass]=\"$any(className)\"\n    [panelStyleClass]=\"$any(dropdownClassName)\"\n    appendTo=\"body\">\n</p-dropdown>\n<ng-template #pMultiselect>\n    <p-multiSelect\n        display=\"chip\"\n        [formControl]=\"dropdownFormControl\"\n        [defaultLabel]=\"$any(placeholder)\"\n        [dataKey]=\"$any(dataKeyProperty)\"\n        [optionLabel]=\"$any(itemsLabelProperty)\"\n        [optionValue]=\"$any(itemsValueProperty)\"\n        [options]=\"(items$ | async) ?? []\"\n        [styleClass]=\"$any(className)\"\n        [panelStyleClass]=\"$any(dropdownClassName)\"\n        [filter]=\"false\"\n        appendTo=\"body\">\n    </p-multiSelect>\n</ng-template>\n" }]
+            args: [{ selector: 'mng-dropdown', providers: [MNG_DROPDOWN_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-dropdown\n    *ngIf=\"!multiselect; else pMultiselect\"\n    [formControl]=\"dropdownFormControl\"\n    [placeholder]=\"$any(placeholder)\"\n    [dataKey]=\"$any(dataKeyProperty)\"\n    [optionLabel]=\"$any(itemsLabelProperty)\"\n    [optionValue]=\"$any(itemsValueProperty)\"\n    [options]=\"$any(items$ | async)\"\n    [showClear]=\"showClear\"\n    [autoDisplayFirst]=\"false\"\n    [styleClass]=\"$any(className)\"\n    [panelStyleClass]=\"$any(dropdownClassName)\"\n    appendTo=\"body\">\n</p-dropdown>\n<ng-template #pMultiselect>\n    <p-multiSelect\n        display=\"chip\"\n        [formControl]=\"dropdownFormControl\"\n        [defaultLabel]=\"$any(placeholder)\"\n        [dataKey]=\"$any(dataKeyProperty)\"\n        [optionLabel]=\"$any(itemsLabelProperty)\"\n        [optionValue]=\"$any(itemsValueProperty)\"\n        [options]=\"(items$ | async) ?? []\"\n        [styleClass]=\"$any(className)\"\n        [panelStyleClass]=\"$any(dropdownClassName)\"\n        [filter]=\"false\"\n        appendTo=\"body\">\n    </p-multiSelect>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { dataProvider: [{
                 type: Input
             }], dataKeyProperty: [{
@@ -4499,6 +4662,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
                 type: Input
             }], showClear: [{
                 type: Input
+            }], selectFirstItem: [{
+                type: Input
             }], className: [{
                 type: Input
             }], dropdownClassName: [{
@@ -4621,12 +4786,12 @@ class MngActionDialogComponent {
         this.subscriptions.push(subscription);
     }
 }
-MngActionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionDialogComponent, deps: [{ token: i0.Injector }, { token: i2$2.TranslateService }, { token: i2.DynamicDialogRef }, { token: i2.DynamicDialogConfig }, { token: MngActionService }, { token: MngCommonsService }], target: i0.ɵɵFactoryTarget.Component });
-MngActionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngActionDialogComponent, selector: "mng-action-dialog", inputs: { action: "action", itemId: "itemId", item: "item", actionData: "actionData", dataProvider: "dataProvider" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "submitButtonElementRef", first: true, predicate: ["submitButton"], descendants: true }, { propertyName: "editorComponent", first: true, predicate: MngFormEditorComponent, descendants: true }], ngImport: i0, template: "<div class=\"h-full flex flex-column\">\n    <div class=\"flex-grow-1\">\n        <div class=\"text-center\" *ngIf=\"loading$ | async\">\n            <p-progressSpinner [style]=\"{width: '3rem', height: '3rem'}\" strokeWidth=\"3\"></p-progressSpinner>\n        </div>\n        <mng-form-editor *ngIf=\"action.editorDescriptor && (loading$ | async) === false\" [descriptor]=\"action.editorDescriptor\" [item]=\"item\" (formSubmit)=\"onSubmit($event)\">\n        </mng-form-editor>\n    </div>\n    <div class=\"flex flex-row justify-content-between\">\n        <div></div>\n        <div>\n            <button\n                type=\"button\"\n                pButton\n                pRipple\n                [label]=\"'general.close' | translate\"\n                icon=\"pi pi-times\"\n                class=\"p-button-text\"\n                (click)=\"closeDialog()\"\n                [disabled]=\"submitLoading$ | async\"></button>\n            <button\n                *ngIf=\"isSaveButton\"\n                #submitButton\n                type=\"button\"\n                pButton\n                pRipple\n                [label]=\"'general.save' | translate\"\n                icon=\"pi pi-check\"\n                class=\"p-button-text\"\n                (click)=\"saveItem()\"\n                [loading]=\"(submitLoading$ | async) ?? false\"\n                [disabled]=\"(submitLoading$ | async) ?? false\"></button>\n        </div>\n    </div>\n</div>\n", components: [{ type: i4$2.ProgressSpinner, selector: "p-progressSpinner", inputs: ["style", "styleClass", "strokeWidth", "fill", "animationDuration"] }, { type: MngFormEditorComponent, selector: "mng-form-editor", inputs: ["descriptor", "submitLoading", "item", "isSubmitButtonVisible", "isFormDisabled"], outputs: ["formSubmit"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i9.Ripple, selector: "[pRipple]" }], pipes: { "async": i4$1.AsyncPipe, "translate": i2$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngActionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionDialogComponent, deps: [{ token: i0.Injector }, { token: i3.TranslateService }, { token: i2.DynamicDialogRef }, { token: i2.DynamicDialogConfig }, { token: MngActionService }, { token: MngCommonsService }], target: i0.ɵɵFactoryTarget.Component });
+MngActionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngActionDialogComponent, selector: "mng-action-dialog", inputs: { action: "action", itemId: "itemId", item: "item", actionData: "actionData", dataProvider: "dataProvider" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "submitButtonElementRef", first: true, predicate: ["submitButton"], descendants: true }, { propertyName: "editorComponent", first: true, predicate: MngFormEditorComponent, descendants: true }], ngImport: i0, template: "<div class=\"h-full flex flex-column\">\n    <div class=\"flex-grow-1\">\n        <div class=\"text-center\" *ngIf=\"loading$ | async\">\n            <p-progressSpinner [style]=\"{width: '3rem', height: '3rem'}\" strokeWidth=\"3\"></p-progressSpinner>\n        </div>\n        <mng-form-editor *ngIf=\"action.editorDescriptor && (loading$ | async) === false\" [descriptor]=\"action.editorDescriptor\" [item]=\"item\" (formSubmit)=\"onSubmit($event)\">\n        </mng-form-editor>\n    </div>\n    <div class=\"flex flex-row justify-content-between\">\n        <div></div>\n        <div>\n            <button\n                type=\"button\"\n                pButton\n                pRipple\n                [label]=\"'general.close' | translate\"\n                icon=\"pi pi-times\"\n                class=\"p-button-text\"\n                (click)=\"closeDialog()\"\n                [disabled]=\"submitLoading$ | async\"></button>\n            <button\n                *ngIf=\"isSaveButton\"\n                #submitButton\n                type=\"button\"\n                pButton\n                pRipple\n                [label]=\"'general.save' | translate\"\n                icon=\"pi pi-check\"\n                class=\"p-button-text\"\n                (click)=\"saveItem()\"\n                [loading]=\"(submitLoading$ | async) ?? false\"\n                [disabled]=\"(submitLoading$ | async) ?? false\"></button>\n        </div>\n    </div>\n</div>\n", components: [{ type: i4$3.ProgressSpinner, selector: "p-progressSpinner", inputs: ["style", "styleClass", "strokeWidth", "fill", "animationDuration"] }, { type: MngFormEditorComponent, selector: "mng-form-editor", inputs: ["descriptor", "submitLoading", "item", "isSubmitButtonVisible", "isFormDisabled"], outputs: ["formSubmit"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i9.Ripple, selector: "[pRipple]" }], pipes: { "async": i4$1.AsyncPipe, "translate": i3.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-action-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"h-full flex flex-column\">\n    <div class=\"flex-grow-1\">\n        <div class=\"text-center\" *ngIf=\"loading$ | async\">\n            <p-progressSpinner [style]=\"{width: '3rem', height: '3rem'}\" strokeWidth=\"3\"></p-progressSpinner>\n        </div>\n        <mng-form-editor *ngIf=\"action.editorDescriptor && (loading$ | async) === false\" [descriptor]=\"action.editorDescriptor\" [item]=\"item\" (formSubmit)=\"onSubmit($event)\">\n        </mng-form-editor>\n    </div>\n    <div class=\"flex flex-row justify-content-between\">\n        <div></div>\n        <div>\n            <button\n                type=\"button\"\n                pButton\n                pRipple\n                [label]=\"'general.close' | translate\"\n                icon=\"pi pi-times\"\n                class=\"p-button-text\"\n                (click)=\"closeDialog()\"\n                [disabled]=\"submitLoading$ | async\"></button>\n            <button\n                *ngIf=\"isSaveButton\"\n                #submitButton\n                type=\"button\"\n                pButton\n                pRipple\n                [label]=\"'general.save' | translate\"\n                icon=\"pi pi-check\"\n                class=\"p-button-text\"\n                (click)=\"saveItem()\"\n                [loading]=\"(submitLoading$ | async) ?? false\"\n                [disabled]=\"(submitLoading$ | async) ?? false\"></button>\n        </div>\n    </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i2$2.TranslateService }, { type: i2.DynamicDialogRef }, { type: i2.DynamicDialogConfig }, { type: MngActionService }, { type: MngCommonsService }]; }, propDecorators: { action: [{
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i3.TranslateService }, { type: i2.DynamicDialogRef }, { type: i2.DynamicDialogConfig }, { type: MngActionService }, { type: MngCommonsService }]; }, propDecorators: { action: [{
                 type: Input
             }], itemId: [{
                 type: Input
@@ -4654,7 +4819,7 @@ class MngFormlyFieldAutocompleteComponent extends FieldType {
     }
 }
 MngFormlyFieldAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MngFormlyFieldAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldAutocompleteComponent, selector: "mng-formly-field-autocomplete", usesInheritance: true, ngImport: i0, template: "<mng-autocomplete\n    [id]=\"$any(key)\"\n    [formControl]=\"aFormControl\"\n    [formlyAttributes]=\"field\"\n    [dataProvider]=\"$any(descriptor.dataProvider)\"\n    [dataKeyProperty]=\"$any(descriptor.dataKeyProperty)\"\n    [itemsLabelProperty]=\"$any(descriptor.itemsLabelProperty)\">\n</mng-autocomplete>\n", components: [{ type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "multiselect", "placeholder", "className", "dropdownClassName"], outputs: ["valueChange"] }], directives: [{ type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldAutocompleteComponent, selector: "mng-formly-field-autocomplete", usesInheritance: true, ngImport: i0, template: "<mng-autocomplete\n    [id]=\"$any(key)\"\n    [formControl]=\"aFormControl\"\n    [formlyAttributes]=\"field\"\n    [dataProvider]=\"$any(descriptor.dataProvider)\"\n    [dataKeyProperty]=\"$any(descriptor.dataKeyProperty)\"\n    [itemsLabelProperty]=\"$any(descriptor.itemsLabelProperty)\">\n</mng-autocomplete>\n", components: [{ type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "multiselect", "placeholder", "className", "dropdownClassName"], outputs: ["valueChange"] }], directives: [{ type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-formly-field-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-autocomplete\n    [id]=\"$any(key)\"\n    [formControl]=\"aFormControl\"\n    [formlyAttributes]=\"field\"\n    [dataProvider]=\"$any(descriptor.dataProvider)\"\n    [dataKeyProperty]=\"$any(descriptor.dataKeyProperty)\"\n    [itemsLabelProperty]=\"$any(descriptor.itemsLabelProperty)\">\n</mng-autocomplete>\n" }]
@@ -4671,10 +4836,10 @@ class MngFormlyFieldInputComponent extends FieldType {
     }
 }
 MngFormlyFieldInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MngFormlyFieldInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldInputComponent, selector: "mng-formly-field-input", usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"to.type\">\n    <p-inputNumber\n        *ngSwitchCase=\"'number'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [min]=\"$any(descriptor.numberMin)\"\n        [max]=\"$any(descriptor.numberMax)\"\n        [step]=\"$any(descriptor.numberStep)\"\n        [minFractionDigits]=\"descriptor.numberMinFractionDigits || 0\"\n        [maxFractionDigits]=\"descriptor.numberMaxFractionDigits || 0\">\n    </p-inputNumber>\n\n    <div *ngSwitchCase=\"'switch'\" class=\"flex flex-column\">\n        <label [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n        <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></p-inputSwitch>\n        <small *ngIf=\"showError\" class=\"p-error\">\n            <formly-validation-message [field]=\"field\"></formly-validation-message>\n        </small>\n    </div>\n\n    <ng-container *ngSwitchCase=\"'radio'\">\n        <div *ngFor=\"let option of descriptor.radioOptions\" [id]=\"$any(key)\" class=\"field-radiobutton\">\n            <p-radioButton [name]=\"$any(key)\" [value]=\"option.value\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></p-radioButton>\n            <label [for]=\"option.value\" class=\"mng-radio-button-label\">{{ option.title | translate }}</label>\n        </div>\n    </ng-container>\n\n    <textarea *ngSwitchCase=\"'textarea'\" [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [rows]=\"descriptor.rows ?? 3\" pInputTextarea> </textarea>\n\n    <p-calendar\n        *ngSwitchCase=\"'datepicker'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [dateFormat]=\"$any(descriptor.datePickerFormat)\"\n        [minDate]=\"$any(descriptor.datePickerMin)\"\n        [maxDate]=\"$any(descriptor.datePickerMax)\"\n        [showTime]=\"descriptor.datePickerShowTime\"\n        [showIcon]=\"true\">\n    </p-calendar>\n\n    <p-inputMask\n        *ngSwitchCase=\"'mask'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [mask]=\"$any(descriptor.mask)\"\n        [placeholder]=\"$any(descriptor.placeholder)\"\n        [slotChar]=\"$any(descriptor.slotChar)\">\n    </p-inputMask>\n\n    <input *ngSwitchDefault pInputText [id]=\"$any(key)\" [type]=\"to.type || 'text'\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" />\n</ng-container>\n", components: [{ type: i1$3.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }, { type: i2$5.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.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { type: i6$1.InputMask, selector: "p-inputMask", inputs: ["type", "slotChar", "autoClear", "style", "inputId", "styleClass", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "disabled", "readonly", "unmask", "name", "required", "characterPattern", "autoFocus", "autocomplete", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown"] }], directives: [{ type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9$1.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { type: i4$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i10$1.InputText, selector: "[pInputText]" }], pipes: { "translate": i2$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldInputComponent, selector: "mng-formly-field-input", usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"to.type\">\n    <p-inputNumber\n        *ngSwitchCase=\"'number'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [min]=\"$any(descriptor.numberMin)\"\n        [max]=\"$any(descriptor.numberMax)\"\n        [step]=\"$any(descriptor.numberStep)\"\n        [useGrouping]=\"$any(descriptor.numberUseGrouping)\"\n        [minFractionDigits]=\"descriptor.numberMinFractionDigits || 0\"\n        [maxFractionDigits]=\"descriptor.numberMaxFractionDigits || 0\">\n    </p-inputNumber>\n\n    <div *ngSwitchCase=\"'switch'\" class=\"flex flex-column\">\n        <label [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n        <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></p-inputSwitch>\n        <small *ngIf=\"showError\" class=\"p-error\">\n            <formly-validation-message [field]=\"field\"></formly-validation-message>\n        </small>\n    </div>\n\n    <ng-container *ngSwitchCase=\"'radio'\">\n        <div *ngFor=\"let option of descriptor.radioOptions\" [id]=\"$any(key)\" class=\"field-radiobutton\">\n            <p-radioButton [name]=\"$any(key)\" [value]=\"option.value\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></p-radioButton>\n            <label [for]=\"option.value\" class=\"mng-radio-button-label\">{{ option.title | translate }}</label>\n        </div>\n    </ng-container>\n\n    <textarea *ngSwitchCase=\"'textarea'\" [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [rows]=\"descriptor.rows ?? 3\" pInputTextarea> </textarea>\n\n    <p-calendar\n        *ngSwitchCase=\"'datepicker'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [dateFormat]=\"$any(descriptor.datePickerFormat)\"\n        [minDate]=\"$any(descriptor.datePickerMin)\"\n        [maxDate]=\"$any(descriptor.datePickerMax)\"\n        [showTime]=\"descriptor.datePickerShowTime\"\n        [showIcon]=\"true\">\n    </p-calendar>\n\n    <p-inputMask\n        *ngSwitchCase=\"'mask'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [mask]=\"$any(descriptor.mask)\"\n        [placeholder]=\"$any(descriptor.placeholder)\"\n        [slotChar]=\"$any(descriptor.slotChar)\">\n    </p-inputMask>\n\n    <input *ngSwitchDefault pInputText [id]=\"$any(key)\" [type]=\"to.type || 'text'\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" />\n</ng-container>\n", components: [{ type: i1$3.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }, { type: i2$3.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabelledBy"], outputs: ["onChange"] }, { type: i3$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i4$4.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i5.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { type: i6$1.InputMask, selector: "p-inputMask", inputs: ["type", "slotChar", "autoClear", "style", "inputId", "styleClass", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "disabled", "readonly", "unmask", "name", "required", "characterPattern", "autoFocus", "autocomplete", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown"] }], directives: [{ type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9$1.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { type: i4$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i10$1.InputText, selector: "[pInputText]" }], pipes: { "translate": i3.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-formly-field-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"to.type\">\n    <p-inputNumber\n        *ngSwitchCase=\"'number'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [min]=\"$any(descriptor.numberMin)\"\n        [max]=\"$any(descriptor.numberMax)\"\n        [step]=\"$any(descriptor.numberStep)\"\n        [minFractionDigits]=\"descriptor.numberMinFractionDigits || 0\"\n        [maxFractionDigits]=\"descriptor.numberMaxFractionDigits || 0\">\n    </p-inputNumber>\n\n    <div *ngSwitchCase=\"'switch'\" class=\"flex flex-column\">\n        <label [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n        <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></p-inputSwitch>\n        <small *ngIf=\"showError\" class=\"p-error\">\n            <formly-validation-message [field]=\"field\"></formly-validation-message>\n        </small>\n    </div>\n\n    <ng-container *ngSwitchCase=\"'radio'\">\n        <div *ngFor=\"let option of descriptor.radioOptions\" [id]=\"$any(key)\" class=\"field-radiobutton\">\n            <p-radioButton [name]=\"$any(key)\" [value]=\"option.value\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></p-radioButton>\n            <label [for]=\"option.value\" class=\"mng-radio-button-label\">{{ option.title | translate }}</label>\n        </div>\n    </ng-container>\n\n    <textarea *ngSwitchCase=\"'textarea'\" [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [rows]=\"descriptor.rows ?? 3\" pInputTextarea> </textarea>\n\n    <p-calendar\n        *ngSwitchCase=\"'datepicker'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [dateFormat]=\"$any(descriptor.datePickerFormat)\"\n        [minDate]=\"$any(descriptor.datePickerMin)\"\n        [maxDate]=\"$any(descriptor.datePickerMax)\"\n        [showTime]=\"descriptor.datePickerShowTime\"\n        [showIcon]=\"true\">\n    </p-calendar>\n\n    <p-inputMask\n        *ngSwitchCase=\"'mask'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [mask]=\"$any(descriptor.mask)\"\n        [placeholder]=\"$any(descriptor.placeholder)\"\n        [slotChar]=\"$any(descriptor.slotChar)\">\n    </p-inputMask>\n\n    <input *ngSwitchDefault pInputText [id]=\"$any(key)\" [type]=\"to.type || 'text'\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" />\n</ng-container>\n" }]
+            args: [{ selector: 'mng-formly-field-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"to.type\">\n    <p-inputNumber\n        *ngSwitchCase=\"'number'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [min]=\"$any(descriptor.numberMin)\"\n        [max]=\"$any(descriptor.numberMax)\"\n        [step]=\"$any(descriptor.numberStep)\"\n        [useGrouping]=\"$any(descriptor.numberUseGrouping)\"\n        [minFractionDigits]=\"descriptor.numberMinFractionDigits || 0\"\n        [maxFractionDigits]=\"descriptor.numberMaxFractionDigits || 0\">\n    </p-inputNumber>\n\n    <div *ngSwitchCase=\"'switch'\" class=\"flex flex-column\">\n        <label [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n        <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></p-inputSwitch>\n        <small *ngIf=\"showError\" class=\"p-error\">\n            <formly-validation-message [field]=\"field\"></formly-validation-message>\n        </small>\n    </div>\n\n    <ng-container *ngSwitchCase=\"'radio'\">\n        <div *ngFor=\"let option of descriptor.radioOptions\" [id]=\"$any(key)\" class=\"field-radiobutton\">\n            <p-radioButton [name]=\"$any(key)\" [value]=\"option.value\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\"></p-radioButton>\n            <label [for]=\"option.value\" class=\"mng-radio-button-label\">{{ option.title | translate }}</label>\n        </div>\n    </ng-container>\n\n    <textarea *ngSwitchCase=\"'textarea'\" [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [rows]=\"descriptor.rows ?? 3\" pInputTextarea> </textarea>\n\n    <p-calendar\n        *ngSwitchCase=\"'datepicker'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [dateFormat]=\"$any(descriptor.datePickerFormat)\"\n        [minDate]=\"$any(descriptor.datePickerMin)\"\n        [maxDate]=\"$any(descriptor.datePickerMax)\"\n        [showTime]=\"descriptor.datePickerShowTime\"\n        [showIcon]=\"true\">\n    </p-calendar>\n\n    <p-inputMask\n        *ngSwitchCase=\"'mask'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [mask]=\"$any(descriptor.mask)\"\n        [placeholder]=\"$any(descriptor.placeholder)\"\n        [slotChar]=\"$any(descriptor.slotChar)\">\n    </p-inputMask>\n\n    <input *ngSwitchDefault pInputText [id]=\"$any(key)\" [type]=\"to.type || 'text'\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" />\n</ng-container>\n" }]
         }] });
 
 class MngFormlyFieldDropdownComponent extends FieldType {
@@ -4684,10 +4849,10 @@ class MngFormlyFieldDropdownComponent extends FieldType {
     }
 }
 MngFormlyFieldDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MngFormlyFieldDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldDropdownComponent, selector: "mng-formly-field-dropdown", usesInheritance: true, ngImport: i0, template: "<mng-dropdown\n    [id]=\"$any(key)\"\n    [formControl]=\"dFormControl\"\n    [formlyAttributes]=\"field\"\n    [placeholder]=\"$any(descriptor.placeholder)\"\n    [dataProvider]=\"descriptor.dataProvider\"\n    [itemsLabelProperty]=\"$any(descriptor.itemsLabelProperty)\"\n    [itemsValueProperty]=\"$any(descriptor.itemsValueProperty)\"\n    [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: ["valueChange"] }], directives: [{ type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldDropdownComponent, selector: "mng-formly-field-dropdown", usesInheritance: true, ngImport: i0, template: "<mng-dropdown\n    [id]=\"$any(key)\"\n    [formControl]=\"dFormControl\"\n    [formlyAttributes]=\"field\"\n    [placeholder]=\"$any(descriptor.placeholder)\"\n    [dataProvider]=\"descriptor.dataProvider\"\n    [itemsLabelProperty]=\"$any(descriptor.itemsLabelProperty)\"\n    [itemsValueProperty]=\"$any(descriptor.itemsValueProperty)\"\n    [dataKeyProperty]=\"$any(descriptor.dataKeyProperty)\"\n    [showClear]=\"!to.required\">\n</mng-dropdown>\n", components: [{ type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsValueProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName"], outputs: ["valueChange"] }], directives: [{ type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-formly-field-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-dropdown\n    [id]=\"$any(key)\"\n    [formControl]=\"dFormControl\"\n    [formlyAttributes]=\"field\"\n    [placeholder]=\"$any(descriptor.placeholder)\"\n    [dataProvider]=\"descriptor.dataProvider\"\n    [itemsLabelProperty]=\"$any(descriptor.itemsLabelProperty)\"\n    [itemsValueProperty]=\"$any(descriptor.itemsValueProperty)\"\n    [showClear]=\"!this.to.required\"\n    [dataKeyProperty]=\"$any(descriptor.dataKeyProperty)\">\n</mng-dropdown>\n" }]
+            args: [{ selector: 'mng-formly-field-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-dropdown\n    [id]=\"$any(key)\"\n    [formControl]=\"dFormControl\"\n    [formlyAttributes]=\"field\"\n    [placeholder]=\"$any(descriptor.placeholder)\"\n    [dataProvider]=\"descriptor.dataProvider\"\n    [itemsLabelProperty]=\"$any(descriptor.itemsLabelProperty)\"\n    [itemsValueProperty]=\"$any(descriptor.itemsValueProperty)\"\n    [dataKeyProperty]=\"$any(descriptor.dataKeyProperty)\"\n    [showClear]=\"!to.required\">\n</mng-dropdown>\n" }]
         }] });
 
 class MngTableLoadEvent {
@@ -4772,7 +4937,7 @@ class MngTableColumnFilterComponent {
     }
 }
 MngTableColumnFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableColumnFilterComponent, deps: [{ token: i2$1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
-MngTableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: { descriptor: "descriptor", display: "display" }, ngImport: i0, template: "<p-columnFilter\n    class=\"ml-auto\"\n    [type]=\"primeType\"\n    matchMode=\"equals\"\n    [field]=\"descriptor.property\"\n    [display]=\"primeDisplay\"\n    [matchMode]=\"primeDefaultMatchMode\"\n    [matchModeOptions]=\"$any(primeMatchModes)\"\n    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n    [showMatchModes]=\"true\"\n    [showOperator]=\"false\"\n    [showAddButton]=\"false\"\n    [hideOnClear]=\"true\">\n    <ng-template *ngIf=\"lookupDescriptor\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <ng-container [ngSwitch]=\"lookupDescriptor.lookupType\">\n            <mng-autocomplete\n                *ngSwitchCase=\"lookupTypeAutocomplete\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                (valueChange)=\"autocompleteFilter($event, filterCallback)\">\n            </mng-autocomplete>\n            <mng-dropdown\n                *ngSwitchCase=\"lookupTypeDropdown\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                [showClear]=\"true\"\n                (valueChange)=\"filterCallback($event)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n", components: [{ type: i4$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: ["valueChange"] }, { type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsValueProperty", "multiselect", "placeholder", "showClear", "className", "dropdownClassName"], outputs: ["valueChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i2$2.TranslatePipe } });
+MngTableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: { descriptor: "descriptor", display: "display" }, ngImport: i0, template: "<p-columnFilter\n    class=\"ml-auto\"\n    [type]=\"primeType\"\n    matchMode=\"equals\"\n    [field]=\"descriptor.property\"\n    [display]=\"primeDisplay\"\n    [matchMode]=\"primeDefaultMatchMode\"\n    [matchModeOptions]=\"$any(primeMatchModes)\"\n    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n    [showMatchModes]=\"true\"\n    [showOperator]=\"false\"\n    [showAddButton]=\"false\"\n    [hideOnClear]=\"true\">\n    <ng-template *ngIf=\"lookupDescriptor\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <ng-container [ngSwitch]=\"lookupDescriptor.lookupType\">\n            <mng-autocomplete\n                *ngSwitchCase=\"lookupTypeAutocomplete\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                (valueChange)=\"autocompleteFilter($event, filterCallback)\">\n            </mng-autocomplete>\n            <mng-dropdown\n                *ngSwitchCase=\"lookupTypeDropdown\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                [showClear]=\"true\"\n                (valueChange)=\"filterCallback($event)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n", components: [{ type: i4$5.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping"] }, { type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "multiselect", "placeholder", "className", "dropdownClassName"], outputs: ["valueChange"] }, { type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsValueProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName"], outputs: ["valueChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableColumnFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-table-column-filter', template: "<p-columnFilter\n    class=\"ml-auto\"\n    [type]=\"primeType\"\n    matchMode=\"equals\"\n    [field]=\"descriptor.property\"\n    [display]=\"primeDisplay\"\n    [matchMode]=\"primeDefaultMatchMode\"\n    [matchModeOptions]=\"$any(primeMatchModes)\"\n    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n    [showMatchModes]=\"true\"\n    [showOperator]=\"false\"\n    [showAddButton]=\"false\"\n    [hideOnClear]=\"true\">\n    <ng-template *ngIf=\"lookupDescriptor\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <ng-container [ngSwitch]=\"lookupDescriptor.lookupType\">\n            <mng-autocomplete\n                *ngSwitchCase=\"lookupTypeAutocomplete\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                (valueChange)=\"autocompleteFilter($event, filterCallback)\">\n            </mng-autocomplete>\n            <mng-dropdown\n                *ngSwitchCase=\"lookupTypeDropdown\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                [showClear]=\"true\"\n                (valueChange)=\"filterCallback($event)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n" }]
@@ -4865,7 +5030,7 @@ class MngTableColumnValueComponent {
     }
 }
 MngTableColumnValueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableColumnValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MngTableColumnValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: { descriptor: "descriptor", item: "item" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"descriptor.columnType\">\n    <ng-container *ngSwitchCase=\"columnTypeString\">\n        {{ descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property] }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeNumber\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | number: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeDate\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | date: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeBoolean\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | boolean }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeEnum\">\n        {{\n            (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property])\n                | enum: descriptor.enumType:descriptor.enumTitlePath:descriptor.enumNameAsValue\n                | translate\n        }}\n    </ng-container>\n</ng-container>\n", directives: [{ type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "propertyPath": MngPropertyPathPipe, "number": i4$1.DecimalPipe, "date": i4$1.DatePipe, "boolean": MngBooleanPipe, "translate": i2$2.TranslatePipe, "enum": MngEnumPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngTableColumnValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: { descriptor: "descriptor", item: "item" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"descriptor.columnType\">\n    <ng-container *ngSwitchCase=\"columnTypeString\">\n        {{ descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property] }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeNumber\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | number: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeDate\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | date: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeBoolean\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | boolean }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeEnum\">\n        {{\n            (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property])\n                | enum: descriptor.enumType:descriptor.enumTitlePath:descriptor.enumNameAsValue\n                | translate\n        }}\n    </ng-container>\n</ng-container>\n", directives: [{ type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "propertyPath": MngPropertyPathPipe, "number": i4$1.DecimalPipe, "date": i4$1.DatePipe, "boolean": MngBooleanPipe, "translate": i3.TranslatePipe, "enum": MngEnumPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableColumnValueComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-table-column-value', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"descriptor.columnType\">\n    <ng-container *ngSwitchCase=\"columnTypeString\">\n        {{ descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property] }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeNumber\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | number: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeDate\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | date: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeBoolean\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | boolean }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeEnum\">\n        {{\n            (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property])\n                | enum: descriptor.enumType:descriptor.enumTitlePath:descriptor.enumNameAsValue\n                | translate\n        }}\n    </ng-container>\n</ng-container>\n" }]
@@ -4903,11 +5068,14 @@ class MngTableComponent {
         this.filterDisplayMenu = TableDescriptor.FilterDisplayEnum.Menu;
         this.useQueryParams = false;
         // extra features input
+        this.selectionMode = 'multiple';
         this.selectionEnabled = false;
         // event outputs
         this.loadEventEmitter = new EventEmitter();
         this.cellClickEventEmitter = new EventEmitter();
         this.selectionChangeEventEmitter = new EventEmitter();
+        this.captionCmpInstEventEmitter = new EventEmitter();
+        this.columnActionCmpInstEventEmitter = new EventEmitter();
         // data provider and items
         this.useDataProvider = false;
         this.useQueryParamsInitialized = false;
@@ -5007,6 +5175,8 @@ class MngTableComponent {
         });
     }
     ngOnDestroy() {
+        var _a;
+        (_a = this.dataProviderSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         this.subscriptions.forEach(s => s.unsubscribe());
     }
     reload(emitEvent = false, resetParams = false) {
@@ -5047,21 +5217,25 @@ class MngTableComponent {
     onSelectionChange(event) {
         this.selectionChangeEventEmitter.emit(event);
     }
+    onCaptionCmpInst(instance) {
+        this.captionCmpInstEventEmitter.next(instance);
+    }
+    onColumnActionCmpInst(instance) {
+        this.columnActionCmpInstEventEmitter.next(instance);
+    }
     loadTableWithDataProvider(queryParam = null, emitEvent = true) {
-        var _a, _b;
+        var _a, _b, _c;
         if (!this.useDataProvider) {
             return;
         }
-        if (this.dataProviderSubscription) {
-            this.dataProviderSubscription.unsubscribe();
-        }
+        (_a = this.dataProviderSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         this.dataProviderLoadingSubject.next(true);
         if (!queryParam) {
             queryParam = MediusQueryParamBuilder.create(this.rowsPerPageOptions[0]).build();
         }
         this.dataProviderLatestQueryParam = queryParam;
         this.dataProviderLatestQueryParamVersion++;
-        this.dataProviderSubscription = (_a = this.dataProvider) === null || _a === void 0 ? void 0 : _a.getAll(queryParam, this.dataProviderService).pipe(first(), finalize(() => this.dataProviderLoadingSubject.next(false))).subscribe(res => {
+        this.dataProviderSubscription = (_b = this.dataProvider) === null || _b === void 0 ? void 0 : _b.getAll(queryParam, this.dataProviderService).subscribe(res => {
             var _a, _b, _c;
             if (this.infiniteScroll) {
                 if (this.isFilterChanged || this.isSortChanged) {
@@ -5075,16 +5249,18 @@ class MngTableComponent {
             }
             this.isFilterChanged = false;
             this.isSortChanged = false;
+            this.dataProviderLoadingSubject.next(false);
         }, err => {
             ToastUtil.tableNotificationError(this.translate, this.descriptor, err, this.tableviewService);
             const emptyQueryResult = new MediusQueryResult();
             emptyQueryResult.pageData = [];
             emptyQueryResult.allDataCount = 0;
             this.dataProviderQueryResultSubject.next(emptyQueryResult);
+            this.dataProviderLoadingSubject.next(false);
         });
         if (emitEvent) {
             const mngEvent = new MngTableLoadEvent();
-            mngEvent.originalEvent = (_b = this.dataProviderLatestLazyLoadEvent) !== null && _b !== void 0 ? _b : undefined;
+            mngEvent.originalEvent = (_c = this.dataProviderLatestLazyLoadEvent) !== null && _c !== void 0 ? _c : undefined;
             mngEvent.queryParam = queryParam;
             this.loadEventEmitter.next(mngEvent);
         }
@@ -5142,13 +5318,13 @@ class MngTableComponent {
         }
     }
 }
-MngTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableComponent, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2$2.TranslateService }, { token: TableviewComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MngTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableComponent, selector: "mng-table", inputs: { descriptor: "descriptor", items: "items", queryResult: "queryResult", loading: "loading", dataProvider: "dataProvider", useQueryParams: "useQueryParams", selectionEnabled: "selectionEnabled" }, outputs: { loadEventEmitter: "tableLoad", cellClickEventEmitter: "cellClick", selectionChangeEventEmitter: "selectionChange" }, 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\n        *ngIf=\"!useQueryParams || useQueryParamsInitialized\"\n        [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n        [dataKey]=\"$any(descriptor.dataKeyProperty)\"\n        [lazy]=\"useDataProvider\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"useDataProvider && !infiniteScroll\"\n        [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n        [first]=\"$any(infiniteScroll ? 0 : offset)\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"$any(multiSortMeta)\"\n        [filters]=\"filterMetadata\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [scrollable]=\"infiniteScroll\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualRowHeight]=\"$any(rowHeight)\"\n        [scrollHeight]=\"$any(scrollHeight)\"\n        [rowHover]=\"true\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\"\n        sortMode=\"multiple\"\n        responsiveLayout=\"scroll\">\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 *ngIf=\"!descriptor.hideHeader\">\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                            {{ col.property | i18nProperty: descriptor.model | translate }}\n                            <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </div>\n                    </th>\n                    <th *ngIf=\"!col.isSortEnabled\">\n                        {{ col.property | i18nProperty: descriptor.model | translate }}\n                        <ng-container>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </ng-container>\n                    </th>\n                </ng-container>\n                <th *ngIf=\"columnActionTemplate\"></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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i2$2.TranslatePipe, "i18nProperty": MngI18nPropertyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableComponent, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: i3.TranslateService }, { token: TableviewComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MngTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableComponent, selector: "mng-table", inputs: { descriptor: "descriptor", items: "items", queryResult: "queryResult", loading: "loading", dataProvider: "dataProvider", useQueryParams: "useQueryParams", selectionMode: "selectionMode", selectionEnabled: "selectionEnabled", captionComponent: "captionComponent", columnActionComponent: "columnActionComponent" }, outputs: { loadEventEmitter: "tableLoad", cellClickEventEmitter: "cellClick", selectionChangeEventEmitter: "selectionChange", captionCmpInstEventEmitter: "captionComponentInstance", columnActionCmpInstEventEmitter: "columnActionComponentInstance" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "primeTable", first: true, predicate: Table, descendants: true }, { propertyName: "components", predicate: MngComponentDirective, descendants: true }], ngImport: i0, template: "<div [style.height]=\"scrollHeight === 'flex' ? 'calc(100vh - ' + descriptor.tableFullHeightOffset + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    <p-table\n        *ngIf=\"!useQueryParams || useQueryParamsInitialized\"\n        [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n        [dataKey]=\"$any(descriptor.dataKeyProperty)\"\n        [lazy]=\"useDataProvider\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"useDataProvider && !infiniteScroll\"\n        [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n        [first]=\"$any(infiniteScroll ? 0 : offset)\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"$any(multiSortMeta)\"\n        [filters]=\"filterMetadata\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [scrollable]=\"infiniteScroll\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualRowHeight]=\"$any(rowHeight)\"\n        [scrollHeight]=\"$any(scrollHeight)\"\n        [rowHover]=\"true\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\"\n        [selectionMode]=\"selectionMode\"\n        sortMode=\"multiple\"\n        responsiveLayout=\"scroll\">\n        <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor.title\" pTemplate=\"caption\">\n            <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #componentOrDefaultCaption>\n                <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n                <ng-template #defaultCaption>\n                    <h5 class=\"p-m-0\">{{ descriptor.title }}</h5>\n                </ng-template>\n            </ng-template>\n        </ng-template>\n\n        <ng-template pTemplate=\"header\">\n            <tr *ngIf=\"!descriptor.hideHeader\">\n                <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                </th>\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 2.25em\"></th>\n                <ng-container *ngFor=\"let col of descriptor.columns\">\n                    <th *ngIf=\"col.isSortEnabled\" [pSortableColumn]=\"col.property\">\n                        <div class=\"flex justify-content-between align-items-center\">\n                            {{ col.property | i18nProperty: descriptor.model | translate }}\n                            <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </div>\n                    </th>\n                    <th *ngIf=\"!col.isSortEnabled\">\n                        {{ col.property | i18nProperty: descriptor.model | translate }}\n                        <ng-container>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </ng-container>\n                    </th>\n                </ng-container>\n                <th *ngIf=\"columnActionTemplate || columnActionComponent\"></th>\n            </tr>\n            <tr *ngIf=\"descriptor.filterDisplay === filterDisplayRow\">\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 2.25em\"></th>\n                <th *ngFor=\"let col of descriptor.columns\">\n                    <div class=\"flex\" *ngIf=\"col.filterDescriptor\">\n                        <mng-table-column-filter [display]=\"descriptor.filterDisplay\" [descriptor]=\"col.filterDescriptor\"></mng-table-column-filter>\n                    </div>\n                </th>\n                <th *ngIf=\"columnActionTemplate || columnActionComponent\"></th>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n            <tr [style.height.px]=\"descriptor.rowHeight\">\n                <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\">\n                    <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                </td>\n                <td *ngFor=\"let col of descriptor.columns\" (click)=\"onCellClick(col, item, idx)\" class=\"clickable\">\n                    <mng-table-column-value [descriptor]=\"col\" [item]=\"item\"></mng-table-column-value>\n                </td>\n                <td *ngIf=\"columnActionTemplate || columnActionComponent\" class=\"text-right\">\n                    <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponent\">\n                        <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                    </ng-container>\n                    <ng-template #showColumnActionComponent>\n                        <span [mngComponent]=\"columnActionComponent!\" (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n                    </ng-template>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"loadingbody\">\n            <tr [style.height.px]=\"descriptor.rowHeight\">\n                <td [attr.colspan]=\"descriptor.columns.length + (columnActionTemplate || columnActionComponent ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    <div class=\"loading-text\"></div>\n                    <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"emptymessage\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"descriptor.columns.length + (columnActionTemplate || columnActionComponent ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    {{ 'mngTable.noItems' | translate }}\n                </td>\n            </tr>\n        </ng-template>\n    </p-table>\n</div>\n", components: [{ type: i4$5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollDelay", "virtualRowHeight", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "minBufferPx", "maxBufferPx", "responsiveLayout", "breakpoint", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { type: i4$5.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { type: i4$5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: ["descriptor", "display"] }, { type: i4$5.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { type: i4$5.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { type: i7.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent"], outputs: ["instanceCreated"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i3.TranslatePipe, "i18nProperty": MngI18nPropertyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.height]=\"scrollHeight === 'flex' ? 'calc(100vh - ' + descriptor.tableFullHeightOffset + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    <p-table\n        *ngIf=\"!useQueryParams || useQueryParamsInitialized\"\n        [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n        [dataKey]=\"$any(descriptor.dataKeyProperty)\"\n        [lazy]=\"useDataProvider\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"useDataProvider && !infiniteScroll\"\n        [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n        [first]=\"$any(infiniteScroll ? 0 : offset)\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"$any(multiSortMeta)\"\n        [filters]=\"filterMetadata\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [scrollable]=\"infiniteScroll\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualRowHeight]=\"$any(rowHeight)\"\n        [scrollHeight]=\"$any(scrollHeight)\"\n        [rowHover]=\"true\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\"\n        sortMode=\"multiple\"\n        responsiveLayout=\"scroll\">\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 *ngIf=\"!descriptor.hideHeader\">\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                            {{ col.property | i18nProperty: descriptor.model | translate }}\n                            <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </div>\n                    </th>\n                    <th *ngIf=\"!col.isSortEnabled\">\n                        {{ col.property | i18nProperty: descriptor.model | translate }}\n                        <ng-container>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </ng-container>\n                    </th>\n                </ng-container>\n                <th *ngIf=\"columnActionTemplate\"></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" }]
+            args: [{ selector: 'mng-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.height]=\"scrollHeight === 'flex' ? 'calc(100vh - ' + descriptor.tableFullHeightOffset + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    <p-table\n        *ngIf=\"!useQueryParams || useQueryParamsInitialized\"\n        [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n        [dataKey]=\"$any(descriptor.dataKeyProperty)\"\n        [lazy]=\"useDataProvider\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"useDataProvider && !infiniteScroll\"\n        [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n        [first]=\"$any(infiniteScroll ? 0 : offset)\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"$any(multiSortMeta)\"\n        [filters]=\"filterMetadata\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [scrollable]=\"infiniteScroll\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualRowHeight]=\"$any(rowHeight)\"\n        [scrollHeight]=\"$any(scrollHeight)\"\n        [rowHover]=\"true\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\"\n        [selectionMode]=\"selectionMode\"\n        sortMode=\"multiple\"\n        responsiveLayout=\"scroll\">\n        <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor.title\" pTemplate=\"caption\">\n            <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #componentOrDefaultCaption>\n                <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n                <ng-template #defaultCaption>\n                    <h5 class=\"p-m-0\">{{ descriptor.title }}</h5>\n                </ng-template>\n            </ng-template>\n        </ng-template>\n\n        <ng-template pTemplate=\"header\">\n            <tr *ngIf=\"!descriptor.hideHeader\">\n                <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                </th>\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 2.25em\"></th>\n                <ng-container *ngFor=\"let col of descriptor.columns\">\n                    <th *ngIf=\"col.isSortEnabled\" [pSortableColumn]=\"col.property\">\n                        <div class=\"flex justify-content-between align-items-center\">\n                            {{ col.property | i18nProperty: descriptor.model | translate }}\n                            <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </div>\n                    </th>\n                    <th *ngIf=\"!col.isSortEnabled\">\n                        {{ col.property | i18nProperty: descriptor.model | translate }}\n                        <ng-container>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </ng-container>\n                    </th>\n                </ng-container>\n                <th *ngIf=\"columnActionTemplate || columnActionComponent\"></th>\n            </tr>\n            <tr *ngIf=\"descriptor.filterDisplay === filterDisplayRow\">\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 2.25em\"></th>\n                <th *ngFor=\"let col of descriptor.columns\">\n                    <div class=\"flex\" *ngIf=\"col.filterDescriptor\">\n                        <mng-table-column-filter [display]=\"descriptor.filterDisplay\" [descriptor]=\"col.filterDescriptor\"></mng-table-column-filter>\n                    </div>\n                </th>\n                <th *ngIf=\"columnActionTemplate || columnActionComponent\"></th>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n            <tr [style.height.px]=\"descriptor.rowHeight\">\n                <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\">\n                    <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                </td>\n                <td *ngFor=\"let col of descriptor.columns\" (click)=\"onCellClick(col, item, idx)\" class=\"clickable\">\n                    <mng-table-column-value [descriptor]=\"col\" [item]=\"item\"></mng-table-column-value>\n                </td>\n                <td *ngIf=\"columnActionTemplate || columnActionComponent\" class=\"text-right\">\n                    <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponent\">\n                        <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                    </ng-container>\n                    <ng-template #showColumnActionComponent>\n                        <span [mngComponent]=\"columnActionComponent!\" (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n                    </ng-template>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"loadingbody\">\n            <tr [style.height.px]=\"descriptor.rowHeight\">\n                <td [attr.colspan]=\"descriptor.columns.length + (columnActionTemplate || columnActionComponent ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    <div class=\"loading-text\"></div>\n                    <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"emptymessage\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"descriptor.columns.length + (columnActionTemplate || columnActionComponent ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    {{ 'mngTable.noItems' | translate }}\n                </td>\n            </tr>\n        </ng-template>\n    </p-table>\n</div>\n" }]
         }], ctorParameters: function () {
-        return [{ type: i0.Injector }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2$2.TranslateService }, { type: TableviewComponentService, decorators: [{
+        return [{ type: i0.Injector }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i3.TranslateService }, { type: TableviewComponentService, decorators: [{
                         type: Optional
                     }] }];
     }, propDecorators: { descriptor: [{
@@ -5163,8 +5339,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
                 type: Input
             }], useQueryParams: [{
                 type: Input
+            }], selectionMode: [{
+                type: Input
             }], selectionEnabled: [{
                 type: Input
+            }], captionComponent: [{
+                type: Input
+            }], columnActionComponent: [{
+                type: Input
             }], loadEventEmitter: [{
                 type: Output,
                 args: ['tableLoad']
@@ -5174,14 +5356,310 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
             }], selectionChangeEventEmitter: [{
                 type: Output,
                 args: ['selectionChange']
+            }], captionCmpInstEventEmitter: [{
+                type: Output,
+                args: ['captionComponentInstance']
+            }], columnActionCmpInstEventEmitter: [{
+                type: Output,
+                args: ['columnActionComponentInstance']
             }], templates: [{
                 type: ContentChildren,
                 args: [MngTemplateDirective]
+            }], components: [{
+                type: ViewChildren,
+                args: [MngComponentDirective]
             }], primeTable: [{
                 type: ViewChild,
                 args: [Table]
             }] } });
 
+class MngTableviewComponent {
+    constructor(route, messageService, translateService, dialogService, confirmationService, actionService, tableviewService) {
+        this.route = route;
+        this.messageService = messageService;
+        this.translateService = translateService;
+        this.dialogService = dialogService;
+        this.confirmationService = confirmationService;
+        this.actionService = actionService;
+        this.tableviewService = tableviewService;
+        this.actions = [];
+        this.tableComponent = null;
+        this.rowClickActions = [];
+        this.rowInlineActions = [];
+        this.toolbarLeftActions = [];
+        this.toolbarRightActions = [];
+        this.subscriptions = [];
+    }
+    ngOnInit() {
+        this.tableviewService.actions = this.actions;
+        this.tableviewService.dataProvider = this.dataProvider;
+        this.tableviewService.messageService = this.messageService;
+        const reloadTableSubscription = this.tableviewService.reloadTable$.subscribe(() => {
+            this.reloadTable();
+        });
+        this.subscriptions.push(reloadTableSubscription);
+        for (const action of this.actions) {
+            switch (action.position) {
+                case ActionPositionEnum.RowClick:
+                    this.rowClickActions.push(action);
+                    break;
+                case ActionPositionEnum.RowInline:
+                    this.rowInlineActions.push(action);
+                    break;
+                case ActionPositionEnum.ToolbarLeft:
+                    this.toolbarLeftActions.push(action);
+                    break;
+                case ActionPositionEnum.ToolbarRight:
+                    this.toolbarRightActions.push(action);
+                    break;
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach(s => s.unsubscribe());
+    }
+    reloadTable() {
+        var _a;
+        (_a = this.tableComponent) === null || _a === void 0 ? void 0 : _a.reload();
+    }
+    onTableCellClick(event) {
+        if (this.rowClickActions.length) {
+            for (const action of this.rowClickActions) {
+                this.actionService.triggerRowClickAction(action, event, this.route);
+            }
+        }
+    }
+}
+MngTableviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableviewComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2$1.MessageService }, { token: i3.TranslateService }, { token: i2.DialogService }, { token: i2$1.ConfirmationService }, { token: MngActionService }, { token: TableviewComponentService }], target: i0.ɵɵFactoryTarget.Component });
+MngTableviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableviewComponent, selector: "mng-tableview", inputs: { descriptor: "descriptor", dataProvider: "dataProvider", actions: "actions" }, providers: [MessageService, ConfirmationService, TableviewComponentService], viewQueries: [{ propertyName: "tableComponent", first: true, predicate: MngTableComponent, descendants: true }], ngImport: i0, template: "<div class=\"mng-tableview\">\n    <p-toast></p-toast>\n\n    <div class=\"card\">\n        <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n            <ng-template pTemplate=\"left\">\n                <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\"> </mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\"> </mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table [descriptor]=\"descriptor.table\" [dataProvider]=\"dataProvider\" [useQueryParams]=\"true\" (cellClick)=\"onTableCellClick($event)\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-m-0\">{{ descriptor.tableTitle | translate }}</h5>\n                </div>\n            </ng-template>\n            <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n                <mng-action\n                    *ngFor=\"let action of rowInlineActions\"\n                    [action]=\"action\"\n                    [item]=\"item\"\n                    [itemId]=\"descriptor.model.idPropertyName ? item[descriptor.model.idPropertyName] : null\">\n                </mng-action>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n", components: [{ type: i7$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { type: i8$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass"] }, { type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData"] }, { type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mng-tableview', providers: [MessageService, ConfirmationService, TableviewComponentService], template: "<div class=\"mng-tableview\">\n    <p-toast></p-toast>\n\n    <div class=\"card\">\n        <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n            <ng-template pTemplate=\"left\">\n                <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\"> </mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\"> </mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table [descriptor]=\"descriptor.table\" [dataProvider]=\"dataProvider\" [useQueryParams]=\"true\" (cellClick)=\"onTableCellClick($event)\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-m-0\">{{ descriptor.tableTitle | translate }}</h5>\n                </div>\n            </ng-template>\n            <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n                <mng-action\n                    *ngFor=\"let action of rowInlineActions\"\n                    [action]=\"action\"\n                    [item]=\"item\"\n                    [itemId]=\"descriptor.model.idPropertyName ? item[descriptor.model.idPropertyName] : null\">\n                </mng-action>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2$1.MessageService }, { type: i3.TranslateService }, { type: i2.DialogService }, { type: i2$1.ConfirmationService }, { type: MngActionService }, { type: TableviewComponentService }]; }, propDecorators: { descriptor: [{
+                type: Input
+            }], dataProvider: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], tableComponent: [{
+                type: ViewChild,
+                args: [MngTableComponent]
+            }] } });
+
+class AMngTableviewRouteComponent {
+    ngOnInit() {
+        this.descriptor = this.createTableviewDescriptor();
+        this.dataProvider = this.createTableviewDataProvider();
+        this.actions = this.createActionDescriptors();
+    }
+    createActionDescriptors() {
+        const actions = [];
+        actions.push(new ActionEditorDetailsDescriptor(this.descriptor.viewEditor));
+        actions.push(new ActionEditorAddDescriptor(this.descriptor.addEditor));
+        actions.push(new ActionEditorEditDescriptor(this.descriptor.editEditor));
+        actions.push(new ActionDeleteDescriptor(this.descriptor.model));
+        return actions;
+    }
+}
+AMngTableviewRouteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: AMngTableviewRouteComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+AMngTableviewRouteComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: AMngTableviewRouteComponent, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: AMngTableviewRouteComponent, decorators: [{
+            type: Directive
+        }] });
+
+class MngTableviewRouteComponent extends AMngTableviewRouteComponent {
+    constructor(route) {
+        super();
+        this.route = route;
+    }
+    createTableviewDescriptor() {
+        if (!this.route.snapshot.data['tableviewData'].descriptor) {
+            throw Error('Tableview requires a descriptor.');
+        }
+        return this.route.snapshot.data['tableviewData'].descriptor;
+    }
+    createTableviewDataProvider() {
+        if (!this.route.snapshot.data['tableviewData'].dataProvider) {
+            throw Error('Tableview requires a data provider.');
+        }
+        return this.route.snapshot.data['tableviewData'].dataProvider;
+    }
+    createActionDescriptors() {
+        var _a;
+        return (_a = this.route.snapshot.data['tableviewData'].actions) !== null && _a !== void 0 ? _a : super.createActionDescriptors();
+    }
+}
+MngTableviewRouteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableviewRouteComponent, deps: [{ token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+MngTableviewRouteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableviewRouteComponent, selector: "mng-tableview-route", usesInheritance: true, ngImport: i0, template: "<div class=\"grid\">\n    <div class=\"col-12\">\n        <mng-tableview [descriptor]=\"descriptor\" [dataProvider]=\"dataProvider\" [actions]=\"actions\"></mng-tableview>\n    </div>\n</div>\n", components: [{ type: MngTableviewComponent, selector: "mng-tableview", inputs: ["descriptor", "dataProvider", "actions"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableviewRouteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mng-tableview-route', template: "<div class=\"grid\">\n    <div class=\"col-12\">\n        <mng-tableview [descriptor]=\"descriptor\" [dataProvider]=\"dataProvider\" [actions]=\"actions\"></mng-tableview>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }]; } });
+
+class MngFormlyFieldLookupDialogComponent extends FieldType {
+    constructor(injector) {
+        super();
+        this.injector = injector;
+        this.fieldLabelFormControl = new FormControl();
+        this.itemsSubject = new ReplaySubject(1);
+        this.itemsAsync = this.itemsSubject.asObservable();
+        this.addItemsSubject = new ReplaySubject(1);
+        this.addItemsAsync = this.addItemsSubject.asObservable();
+        this.dialogUseDataProvider = false;
+        this.dialogDataProviderService = null;
+        this.dialogIsLoadingSubject = new ReplaySubject(1);
+        this.isDialogVisible = false;
+        this.dialogAreItemsLoaded = false;
+        this.dialogSelectedItem = null;
+        this.dialogMessages = [];
+        this.dialogIsLoading$ = this.dialogIsLoadingSubject.asObservable();
+        this.subscriptions = [];
+    }
+    ngOnInit() {
+        var _a;
+        this.descriptor = this.to['descriptor'];
+        // emit lifecycle event
+        this.descriptor.nextEvent(MngFormFieldEventTypeEnum.Component, MngFormlyFieldLookupDialogComponent, this, {
+            eventSubtype: MngFormFieldEventComponentSubtype.ON_INIT
+        });
+        this.config = this.descriptor.config;
+        if (!this.descriptor.lookupTableDataProvider && ((_a = this.descriptor.dataProvider) === null || _a === void 0 ? void 0 : _a.serviceType)) {
+            this.dialogUseDataProvider = true;
+            this.dialogDataProviderService = this.injector.get(this.descriptor.dataProvider.serviceType);
+        }
+        // init values
+        this.setFieldLabelValue(this.formControl.value);
+        const subscription = this.formControl.valueChanges.pipe(startWith(this.formControl.value), distinctUntilChanged((prev, curr) => {
+            var _a;
+            const compareProp = (_a = this.descriptor.lookupTableDescriptor.dataKeyProperty) !== null && _a !== void 0 ? _a : this.descriptor.lookupTableDescriptor.model.idPropertyName;
+            if (compareProp && typeof prev === 'object' && typeof curr === 'object') {
+                return prev[compareProp] === curr[compareProp];
+            }
+            else {
+                return prev === curr;
+            }
+        })).subscribe(v => {
+            this.setFieldLabelValue(v);
+            this.itemsSubject.next(v);
+            this.descriptor.nextEvent(MngFormFieldEventTypeEnum.ValueChange, MngFormlyFieldLookupDialogComponent, this, {
+                value: v
+            });
+        });
+        this.subscriptions.push(subscription);
+    }
+    ngAfterViewInit() {
+        this.descriptor.nextEvent(MngFormFieldEventTypeEnum.Component, MngFormlyFieldLookupDialogComponent, this, {
+            eventSubtype: MngFormFieldEventComponentSubtype.ON_VIEW_INIT
+        });
+    }
+    ngOnDestroy() {
+        var _a, _b;
+        (_a = this.lookupDataProviderSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this.subscriptions.forEach(s => s.unsubscribe());
+        // emit lifecycle event
+        (_b = this.descriptor) === null || _b === void 0 ? void 0 : _b.nextEvent(MngFormFieldEventTypeEnum.Component, MngFormlyFieldLookupDialogComponent, this, {
+            eventSubtype: MngFormFieldEventComponentSubtype.ON_DESTROY
+        });
+    }
+    openSelectDialog() {
+        var _a;
+        if (!this.dialogAreItemsLoaded && this.dialogUseDataProvider) {
+            this.dialogIsLoadingSubject.next(true);
+            const queryParamBuilder = MediusQueryParamBuilder.create(50);
+            if (this.descriptor.lookupTableDescriptor.hasDefaultSort) {
+                this.descriptor.lookupTableDescriptor.defaultSortProperty.forEach((p, idx) => queryParamBuilder.withSort(p, this.descriptor.lookupTableDescriptor.defaultSortAsc[idx]));
+            }
+            this.lookupDataProviderSubscription = (_a = this.descriptor.dataProvider) === null || _a === void 0 ? void 0 : _a.lookup(queryParamBuilder.build(), this.dialogDataProviderService).subscribe({
+                next: res => {
+                    const mqr = new MediusQueryResult();
+                    mqr.pageData = res;
+                    mqr.allDataCount = res.length;
+                    this.addItemsSubject.next(mqr);
+                    this.dialogAreItemsLoaded = true;
+                    this.dialogIsLoadingSubject.next(false);
+                    this.descriptor.nextEvent(MngFormFieldEventTypeEnum.DataProvider, MngFormlyFieldLookupDialogComponent, this, {
+                        eventSubtype: 'LookupNext',
+                        queryResult: mqr
+                    });
+                },
+                error: err => {
+                    this.dialogIsLoadingSubject.next(false);
+                    this.descriptor.nextEvent(MngFormFieldEventTypeEnum.DataProvider, MngFormlyFieldLookupDialogComponent, this, {
+                        eventSubtype: 'LookupError',
+                        queryResult: err
+                    });
+                }
+            });
+        }
+        this.dialogSelectedItem = null;
+        this.isDialogVisible = true;
+        this.descriptor.nextEvent(MngFormFieldEventTypeEnum.Dialog, MngFormlyFieldLookupDialogComponent, this, {
+            eventSubtype: MngFormFieldEventDialogSubtype.VISIBILITY,
+            dialogVisible: true
+        });
+    }
+    onSelectionChange(item) {
+        this.dialogSelectedItem = item;
+    }
+    onCaptionCmpInst(instance) {
+        this.descriptor.nextEvent(MngFormFieldEventTypeEnum.Dialog, MngFormlyFieldLookupDialogComponent, this, {
+            eventSubtype: MngFormFieldEventDialogSubtype.TABLE_CAPTION_COMPONENT_INSTANCE,
+            captionComponentInstance: instance
+        });
+    }
+    onColumnActionCmpInst(instance) {
+        this.descriptor.nextEvent(MngFormFieldEventTypeEnum.Dialog, MngFormlyFieldLookupDialogComponent, this, {
+            eventSubtype: MngFormFieldEventDialogSubtype.TABLE_COLUMN_ACTIONS_COMPONENT_INSTANCE,
+            captionComponentInstance: instance
+        });
+    }
+    clear() {
+        this.formControl.setValue(undefined);
+        this.dialogSelectedItem = null;
+        this.dialogAreItemsLoaded = false;
+        this.hideDialog();
+    }
+    hideDialog() {
+        this.isDialogVisible = false;
+        this.descriptor.nextEvent(MngFormFieldEventTypeEnum.Dialog, MngFormlyFieldLookupDialogComponent, this, {
+            eventSubtype: MngFormFieldEventDialogSubtype.VISIBILITY,
+            dialogVisible: false
+        });
+    }
+    addItem() {
+        this.formControl.setValue(this.dialogSelectedItem);
+        this.dialogSelectedItem = null;
+        this.dialogAreItemsLoaded = false;
+        this.hideDialog();
+    }
+    setFieldLabelValue(value) {
+        var _a, _b;
+        if (!value) {
+            this.fieldLabelFormControl.setValue('');
+            return;
+        }
+        if (typeof value === 'object') {
+            const labelProperty = (_a = this.descriptor.itemsLabelProperty) !== null && _a !== void 0 ? _a : (_b = this.descriptor.lookupTableDescriptor) === null || _b === void 0 ? void 0 : _b.model.titlePropertyName;
+            if (!labelProperty) {
+                throw new Error('Could not determine label property.');
+            }
+            this.fieldLabelFormControl.setValue(value[labelProperty]);
+        }
+        else {
+            this.fieldLabelFormControl.setValue(value);
+        }
+    }
+}
+MngFormlyFieldLookupDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldLookupDialogComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+MngFormlyFieldLookupDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldLookupDialogComponent, selector: "mng-formly-field-lookup-dialog", viewQueries: [{ propertyName: "mngTable", first: true, predicate: MngTableComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"p-inputgroup mng-dropdown-dialog\">\n    <input pInputText type=\"text\" [id]=\"$any(key)\" [readonly]=\"true\" [formlyAttributes]=\"field\" [formControl]=\"fieldLabelFormControl\" />\n    <i class=\"mng-dropdown-clear-icon pi pi-times\" (click)=\"clear()\" *ngIf=\"!to.required && formControl?.value\"></i>\n    <button pButton pRipple class=\"mng-dropdown-dialog-search-button\" type=\"button\" [label]=\"'general.search' | translate: {item: ''}\" (click)=\"openSelectDialog()\"></button>\n</div>\n\n<p-dialog\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.search' | translate: {item: to?.label!}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-formly-field-table-multiselect-dialog\">\n    <ng-template pTemplate=\"content\">\n        <mng-table\n            [descriptor]=\"descriptor.lookupTableDescriptor!\"\n            [dataProvider]=\"descriptor.lookupTableDataProvider\"\n            [queryResult]=\"addItemsAsync\"\n            [selectionEnabled]=\"true\"\n            [selectionMode]=\"'single'\"\n            [loading]=\"dialogIsLoading$\"\n            [captionComponent]=\"config?.table?.captionComponent\"\n            [columnActionComponent]=\"config?.table?.columnActionComponent\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            (captionComponentInstance)=\"onCaptionCmpInst($event)\"\n            (columnActionComponentInstance)=\"onColumnActionCmpInst($event)\">\n        </mng-table>\n        <p-messages [value]=\"dialogMessages\"></p-messages>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n        <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [label]=\"'general.select' | translate\"\n            icon=\"pi pi-check\"\n            class=\"p-button-text\"\n            (click)=\"addItem()\"\n            [loading]=\"(dialogIsLoading$ | async) ?? false\"\n            [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n", components: [{ type: i1$4.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { type: i3$2.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }], directives: [{ type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i10$1.InputText, selector: "[pInputText]" }, { type: i3$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i9.Ripple, selector: "[pRipple]" }, { type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i3.TranslatePipe, "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldLookupDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mng-formly-field-lookup-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"p-inputgroup mng-dropdown-dialog\">\n    <input pInputText type=\"text\" [id]=\"$any(key)\" [readonly]=\"true\" [formlyAttributes]=\"field\" [formControl]=\"fieldLabelFormControl\" />\n    <i class=\"mng-dropdown-clear-icon pi pi-times\" (click)=\"clear()\" *ngIf=\"!to.required && formControl?.value\"></i>\n    <button pButton pRipple class=\"mng-dropdown-dialog-search-button\" type=\"button\" [label]=\"'general.search' | translate: {item: ''}\" (click)=\"openSelectDialog()\"></button>\n</div>\n\n<p-dialog\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.search' | translate: {item: to?.label!}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-formly-field-table-multiselect-dialog\">\n    <ng-template pTemplate=\"content\">\n        <mng-table\n            [descriptor]=\"descriptor.lookupTableDescriptor!\"\n            [dataProvider]=\"descriptor.lookupTableDataProvider\"\n            [queryResult]=\"addItemsAsync\"\n            [selectionEnabled]=\"true\"\n            [selectionMode]=\"'single'\"\n            [loading]=\"dialogIsLoading$\"\n            [captionComponent]=\"config?.table?.captionComponent\"\n            [columnActionComponent]=\"config?.table?.columnActionComponent\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            (captionComponentInstance)=\"onCaptionCmpInst($event)\"\n            (columnActionComponentInstance)=\"onColumnActionCmpInst($event)\">\n        </mng-table>\n        <p-messages [value]=\"dialogMessages\"></p-messages>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n        <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [label]=\"'general.select' | translate\"\n            icon=\"pi pi-check\"\n            class=\"p-button-text\"\n            (click)=\"addItem()\"\n            [loading]=\"(dialogIsLoading$ | async) ?? false\"\n            [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { mngTable: [{
+                type: ViewChild,
+                args: [MngTableComponent]
+            }] } });
+
 class MngFormlyFieldTableDialogFormComponent extends FieldType {
     constructor() {
         super(...arguments);
@@ -5190,6 +5668,8 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
         this.toolbarActions = [];
         this.rowActions = [];
         this.subscriptions = [];
+        this.isDisabledSubject = new BehaviorSubject(false);
+        this.isEnabled$ = this.isDisabledSubject.asObservable().pipe(distinctUntilChanged(), map(e => !e));
     }
     ngOnInit() {
         this.descriptor = this.to['descriptor'];
@@ -5212,7 +5692,8 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
                 this.formControl.patchValue(value);
                 return of(ctx.data.item);
             })
-                .withIsVisibleFunction(() => { var _a; return of(!((_a = this.options) === null || _a === void 0 ? void 0 : _a.formState.disabled)); });
+                .withIsVisibleFunction(() => { var _a; return of(!((_a = this.options) === null || _a === void 0 ? void 0 : _a.formState.disabled)); })
+                .withIsEnabledFunction(() => this.isEnabled$);
             this.toolbarActions.push(addAction);
         }
         if (hasEditAction) {
@@ -5231,7 +5712,8 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
                 this.formControl.patchValue(formControlValue);
                 return of(ctx.data.item);
             })
-                .withIsVisibleFunction(() => { var _a; return of(!((_a = this.options) === null || _a === void 0 ? void 0 : _a.formState.disabled)); });
+                .withIsVisibleFunction(() => { var _a; return of(!((_a = this.formControl) === null || _a === void 0 ? void 0 : _a.disabled)); })
+                .withIsEnabledFunction(() => this.isEnabled$);
             this.rowActions.push(editAction);
         }
         if (hasDeleteAction) {
@@ -5259,24 +5741,35 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
                 this.formControl.patchValue(formControlValue);
                 return of(ctx.data.item);
             })
-                .withIsVisibleFunction(() => { var _a; return of(!((_a = this.options) === null || _a === void 0 ? void 0 : _a.formState.disabled)); });
+                .withIsVisibleFunction(() => { var _a; return of(!((_a = this.options) === null || _a === void 0 ? void 0 : _a.formState.disabled)); })
+                .withIsEnabledFunction(() => this.isEnabled$);
             this.rowActions.push(deleteAction);
         }
         // init values
         if (typeof this.formControl.value === 'undefined' || this.formControl.value === null) {
             this.formControl.patchValue([]);
         }
-        const subscription = this.formControl.valueChanges.pipe(startWith(this.formControl.value)).subscribe(v => {
+        let subscription = this.formControl.valueChanges.pipe(startWith(this.formControl.value)).subscribe(v => {
             this.itemsSubject.next(v);
         });
         this.subscriptions.push(subscription);
+        this.isDisabledSubject.next(this.formControl.disabled);
+        subscription = this.formControl.statusChanges.pipe().subscribe(status => {
+            if (status === 'DISABLED' && !this.isDisabledSubject.value) {
+                this.isDisabledSubject.next(true);
+            }
+            else if (status !== 'DISABLED' && this.isDisabledSubject.value) {
+                this.isDisabledSubject.next(false);
+            }
+        });
+        this.subscriptions.push(subscription);
     }
     ngOnDestroy() {
         this.subscriptions.forEach(s => s.unsubscribe());
     }
 }
 MngFormlyFieldTableDialogFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldTableDialogFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MngFormlyFieldTableDialogFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldTableDialogFormComponent, selector: "mng-formly-table-dialog-form-field", usesInheritance: true, ngImport: i0, template: "<mng-table [descriptor]=\"descriptor.tableDescriptor\" [items]=\"items$\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-column md:flex-row md:justify-content-end table-header\">\n            <label class=\"mng-datatable-form-label p-m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n            <mng-action *ngFor=\"let action of toolbarActions\" [action]=\"action\"></mng-action>\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\" let-idx=\"rowIndex\">\n        <mng-action\n            *ngFor=\"let action of rowActions\"\n            [action]=\"action\"\n            [item]=\"item\"\n            [itemId]=\"descriptor.tableviewDescriptor.model.idPropertyName ? item[descriptor.tableviewDescriptor.model.idPropertyName] : undefined\"\n            [actionData]=\"{itemIndex: idx}\">\n        </mng-action>\n    </ng-template>\n</mng-table>\n", styles: [".submit-button{display:none!important;visibility:hidden}\n"], components: [{ type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionEnabled"], outputs: ["tableLoad", "cellClick", "selectionChange"] }, { type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData"] }], directives: [{ type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i2$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldTableDialogFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldTableDialogFormComponent, selector: "mng-formly-table-dialog-form-field", usesInheritance: true, ngImport: i0, template: "<mng-table [descriptor]=\"descriptor.tableDescriptor\" [items]=\"items$\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-column md:flex-row md:justify-content-end table-header\">\n            <label class=\"mng-datatable-form-label p-m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n            <mng-action *ngFor=\"let action of toolbarActions\" [action]=\"action\"></mng-action>\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\" let-idx=\"rowIndex\">\n        <mng-action\n            *ngFor=\"let action of rowActions\"\n            [action]=\"action\"\n            [item]=\"item\"\n            [itemId]=\"descriptor.tableviewDescriptor.model.idPropertyName ? item[descriptor.tableviewDescriptor.model.idPropertyName] : undefined\"\n            [actionData]=\"{itemIndex: idx}\">\n        </mng-action>\n    </ng-template>\n</mng-table>\n", styles: [".submit-button{display:none!important;visibility:hidden}\n"], components: [{ type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData"] }], directives: [{ type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i3.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldTableDialogFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-formly-table-dialog-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-table [descriptor]=\"descriptor.tableDescriptor\" [items]=\"items$\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-column md:flex-row md:justify-content-end table-header\">\n            <label class=\"mng-datatable-form-label p-m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n            <mng-action *ngFor=\"let action of toolbarActions\" [action]=\"action\"></mng-action>\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\" let-idx=\"rowIndex\">\n        <mng-action\n            *ngFor=\"let action of rowActions\"\n            [action]=\"action\"\n            [item]=\"item\"\n            [itemId]=\"descriptor.tableviewDescriptor.model.idPropertyName ? item[descriptor.tableviewDescriptor.model.idPropertyName] : undefined\"\n            [actionData]=\"{itemIndex: idx}\">\n        </mng-action>\n    </ng-template>\n</mng-table>\n", styles: [".submit-button{display:none!important;visibility:hidden}\n"] }]
@@ -5321,6 +5814,8 @@ class MngFormlyFieldTableDialogMultiselectComponent extends FieldType {
         this.subscriptions.push(subscription);
     }
     ngOnDestroy() {
+        var _a;
+        (_a = this.lookupDataProviderSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         this.subscriptions.forEach(s => s.unsubscribe());
     }
     openAddDialog() {
@@ -5335,9 +5830,15 @@ class MngFormlyFieldTableDialogMultiselectComponent extends FieldType {
                 const filterValues = this.formControl.value.map((i) => i[this.descriptor.excludeValueProperty]);
                 queryParamBuilder.withFilter(this.descriptor.excludeFilterProperty, filterValues, undefined, MediusFilterMatchType.NotIn);
             }
-            (_a = this.descriptor.lookupTableDataProvider) === null || _a === void 0 ? void 0 : _a.getAll(queryParamBuilder.build(), this.dialogDataProviderService).pipe(first(), finalize(() => this.dialogIsLoadingSubject.next(false))).subscribe(res => {
-                this.addItemsSubject.next(res);
-                this.dialogAreItemsLoaded = true;
+            this.lookupDataProviderSubscription = (_a = this.descriptor.lookupTableDataProvider) === null || _a === void 0 ? void 0 : _a.getAll(queryParamBuilder.build(), this.dialogDataProviderService).subscribe({
+                next: res => {
+                    this.addItemsSubject.next(res);
+                    this.dialogAreItemsLoaded = true;
+                    this.dialogIsLoadingSubject.next(false);
+                },
+                error: () => {
+                    this.dialogIsLoadingSubject.next(false);
+                }
             });
         }
         this.dialogSelectedAddItems = [];
@@ -5382,16 +5883,16 @@ class MngFormlyFieldTableDialogMultiselectComponent extends FieldType {
     }
 }
 MngFormlyFieldTableDialogMultiselectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldTableDialogMultiselectComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-MngFormlyFieldTableDialogMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldTableDialogMultiselectComponent, selector: "mng-formly-table-multiselect-add-field", usesInheritance: true, ngImport: i0, template: "<mng-table [descriptor]=\"descriptor.mainTableDescriptor\" [items]=\"itemsAsync\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-column md:flex-row md:justify-content-end table-header\">\n            <label class=\"mng-datatable-form-label p-m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n            <button\n                *ngIf=\"hasAddAction && !formControl!.disabled\"\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-plus\"\n                class=\"p-button-rounded p-button-success\"\n                (click)=\"openAddDialog()\"></button>\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n        <button\n            *ngIf=\"hasDeleteAction && !formControl!.disabled\"\n            pButton\n            pRipple\n            type=\"button\"\n            icon=\"pi pi-trash\"\n            class=\"p-button-rounded p-button-danger\"\n            (click)=\"removeItem(item)\"></button>\n    </ng-template>\n</mng-table>\n\n<p-dialog\n    *ngIf=\"hasAddAction\"\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.addItem' | translate: {item: to?.label!}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-formly-field-table-multiselect-dialog\">\n    <ng-template pTemplate=\"content\">\n        <mng-table\n            [descriptor]=\"descriptor.mainTableDescriptor\"\n            [queryResult]=\"addItemsAsync\"\n            [selectionEnabled]=\"true\"\n            [loading]=\"dialogIsLoading$\"\n            (selectionChange)=\"onSelectionChange($event)\">\n        </mng-table>\n        <p-messages [value]=\"dialogMessages\"></p-messages>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n        <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [label]=\"'general.add' | translate\"\n            icon=\"pi pi-check\"\n            class=\"p-button-text\"\n            (click)=\"addItems()\"\n            [loading]=\"(dialogIsLoading$ | async) ?? false\"\n            [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n", components: [{ type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionEnabled"], outputs: ["tableLoad", "cellClick", "selectionChange"] }, { type: i2$6.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i9.Ripple, selector: "[pRipple]" }, { type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i2$2.TranslatePipe, "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldTableDialogMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldTableDialogMultiselectComponent, selector: "mng-formly-table-multiselect-add-field", usesInheritance: true, ngImport: i0, template: "<mng-table [descriptor]=\"descriptor.mainTableDescriptor\" [items]=\"itemsAsync\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-column md:flex-row md:justify-content-end table-header\">\n            <label class=\"mng-datatable-form-label p-m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n            <button\n                *ngIf=\"hasAddAction && !options?.formState?.disabled\"\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-plus\"\n                class=\"p-button-rounded p-button-success\"\n                (click)=\"openAddDialog()\"\n                [disabled]=\"formControl!.disabled\"></button>\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n        <button\n            *ngIf=\"hasDeleteAction && !options?.formState?.disabled\"\n            pButton\n            pRipple\n            type=\"button\"\n            icon=\"pi pi-trash\"\n            class=\"p-button-rounded p-button-danger\"\n            (click)=\"removeItem(item)\"\n            [disabled]=\"formControl!.disabled\"></button>\n    </ng-template>\n</mng-table>\n\n<p-dialog\n    *ngIf=\"hasAddAction\"\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.addItem' | translate: {item: to?.label!}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-formly-field-table-multiselect-dialog\">\n    <ng-template pTemplate=\"content\">\n        <mng-table\n            [descriptor]=\"descriptor.mainTableDescriptor\"\n            [queryResult]=\"addItemsAsync\"\n            [selectionEnabled]=\"true\"\n            [loading]=\"dialogIsLoading$\"\n            (selectionChange)=\"onSelectionChange($event)\">\n        </mng-table>\n        <p-messages [value]=\"dialogMessages\"></p-messages>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n        <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [label]=\"'general.add' | translate\"\n            icon=\"pi pi-check\"\n            class=\"p-button-text\"\n            (click)=\"addItems()\"\n            [loading]=\"(dialogIsLoading$ | async) ?? false\"\n            [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n", components: [{ type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { type: i1$4.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { type: i3$2.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }], directives: [{ type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i9.Ripple, selector: "[pRipple]" }, { type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i3.TranslatePipe, "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldTableDialogMultiselectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-formly-table-multiselect-add-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-table [descriptor]=\"descriptor.mainTableDescriptor\" [items]=\"itemsAsync\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-column md:flex-row md:justify-content-end table-header\">\n            <label class=\"mng-datatable-form-label p-m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n            <button\n                *ngIf=\"hasAddAction && !formControl!.disabled\"\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-plus\"\n                class=\"p-button-rounded p-button-success\"\n                (click)=\"openAddDialog()\"></button>\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n        <button\n            *ngIf=\"hasDeleteAction && !formControl!.disabled\"\n            pButton\n            pRipple\n            type=\"button\"\n            icon=\"pi pi-trash\"\n            class=\"p-button-rounded p-button-danger\"\n            (click)=\"removeItem(item)\"></button>\n    </ng-template>\n</mng-table>\n\n<p-dialog\n    *ngIf=\"hasAddAction\"\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.addItem' | translate: {item: to?.label!}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-formly-field-table-multiselect-dialog\">\n    <ng-template pTemplate=\"content\">\n        <mng-table\n            [descriptor]=\"descriptor.mainTableDescriptor\"\n            [queryResult]=\"addItemsAsync\"\n            [selectionEnabled]=\"true\"\n            [loading]=\"dialogIsLoading$\"\n            (selectionChange)=\"onSelectionChange($event)\">\n        </mng-table>\n        <p-messages [value]=\"dialogMessages\"></p-messages>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n        <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [label]=\"'general.add' | translate\"\n            icon=\"pi pi-check\"\n            class=\"p-button-text\"\n            (click)=\"addItems()\"\n            [loading]=\"(dialogIsLoading$ | async) ?? false\"\n            [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n" }]
+            args: [{ selector: 'mng-formly-table-multiselect-add-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-table [descriptor]=\"descriptor.mainTableDescriptor\" [items]=\"itemsAsync\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-column md:flex-row md:justify-content-end table-header\">\n            <label class=\"mng-datatable-form-label p-m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n            <button\n                *ngIf=\"hasAddAction && !options?.formState?.disabled\"\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-plus\"\n                class=\"p-button-rounded p-button-success\"\n                (click)=\"openAddDialog()\"\n                [disabled]=\"formControl!.disabled\"></button>\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n        <button\n            *ngIf=\"hasDeleteAction && !options?.formState?.disabled\"\n            pButton\n            pRipple\n            type=\"button\"\n            icon=\"pi pi-trash\"\n            class=\"p-button-rounded p-button-danger\"\n            (click)=\"removeItem(item)\"\n            [disabled]=\"formControl!.disabled\"></button>\n    </ng-template>\n</mng-table>\n\n<p-dialog\n    *ngIf=\"hasAddAction\"\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.addItem' | translate: {item: to?.label!}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-formly-field-table-multiselect-dialog\">\n    <ng-template pTemplate=\"content\">\n        <mng-table\n            [descriptor]=\"descriptor.mainTableDescriptor\"\n            [queryResult]=\"addItemsAsync\"\n            [selectionEnabled]=\"true\"\n            [loading]=\"dialogIsLoading$\"\n            (selectionChange)=\"onSelectionChange($event)\">\n        </mng-table>\n        <p-messages [value]=\"dialogMessages\"></p-messages>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n        <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [label]=\"'general.add' | translate\"\n            icon=\"pi pi-check\"\n            class=\"p-button-text\"\n            (click)=\"addItems()\"\n            [loading]=\"(dialogIsLoading$ | async) ?? false\"\n            [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
 class MngFormlyFieldTabsComponent extends FieldType {
 }
 MngFormlyFieldTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MngFormlyFieldTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldTabsComponent, selector: "mng-formly-field-tabs", usesInheritance: true, ngImport: i0, template: "<p-tabView>\n    <p-tabPanel\n        *ngFor=\"let tab of field.fieldGroup; let i = index; let last = last\"\n        [header]=\"tab.templateOptions?.label! | translate\"\n        [headerStyleClass]=\"$any(formControl!.valid ? 'p-tabview-title' : null)\">\n        <ng-template pTemplate=\"header\">\n            <span\n                class=\"p-tabview-title\"\n                [class.p-tabview-title-error]=\"formState.submittedOn && formState['tab_' + (tab.id ? tab.id : tab.templateOptions?.label!) + '_invalid']\"\n                >{{ tab.templateOptions?.label! | translate }}</span\n            >\n        </ng-template>\n        <formly-field [field]=\"tab\"></formly-field>\n    </p-tabPanel>\n</p-tabView>\n", components: [{ type: i1$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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i2$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldTabsComponent, selector: "mng-formly-field-tabs", usesInheritance: true, ngImport: i0, template: "<p-tabView>\n    <p-tabPanel\n        *ngFor=\"let tab of field.fieldGroup; let i = index; let last = last\"\n        [header]=\"tab.templateOptions?.label! | translate\"\n        [headerStyleClass]=\"$any(formControl!.valid ? 'p-tabview-title' : null)\">\n        <ng-template pTemplate=\"header\">\n            <span\n                class=\"p-tabview-title\"\n                [class.p-tabview-title-error]=\"formState.submittedOn && formState['tab_' + (tab.id ? tab.id : tab.templateOptions?.label!) + '_invalid']\"\n                >{{ tab.templateOptions?.label! | translate }}</span\n            >\n        </ng-template>\n        <formly-field [field]=\"tab\"></formly-field>\n    </p-tabPanel>\n</p-tabView>\n", components: [{ type: i1$5.TabView, selector: "p-tabView", inputs: ["orientation", "style", "styleClass", "controlClose", "scrollable", "activeIndex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { type: i1$5.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { type: i3$1.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i3.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-formly-field-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-tabView>\n    <p-tabPanel\n        *ngFor=\"let tab of field.fieldGroup; let i = index; let last = last\"\n        [header]=\"tab.templateOptions?.label! | translate\"\n        [headerStyleClass]=\"$any(formControl!.valid ? 'p-tabview-title' : null)\">\n        <ng-template pTemplate=\"header\">\n            <span\n                class=\"p-tabview-title\"\n                [class.p-tabview-title-error]=\"formState.submittedOn && formState['tab_' + (tab.id ? tab.id : tab.templateOptions?.label!) + '_invalid']\"\n                >{{ tab.templateOptions?.label! | translate }}</span\n            >\n        </ng-template>\n        <formly-field [field]=\"tab\"></formly-field>\n    </p-tabPanel>\n</p-tabView>\n" }]
@@ -5400,7 +5901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
 class MngFormlyFieldFieldsetComponent extends FieldType {
 }
 MngFormlyFieldFieldsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MngFormlyFieldFieldsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldFieldsetComponent, selector: "mng-formly-field-fieldset", usesInheritance: true, ngImport: i0, template: "<ng-container *ngFor=\"let group of field.fieldGroup; let i = index; let last = last\">\n    <p-fieldset *ngIf=\"!group.templateOptions?.['descriptor']?.default; else defaultSet\" [legend]=\"group.templateOptions?.label! | translate\">\n        <formly-field [field]=\"group\"></formly-field>\n    </p-fieldset>\n    <ng-template #defaultSet>\n        <formly-field [field]=\"group\"></formly-field>\n    </ng-template>\n</ng-container>\n", components: [{ type: i1$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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i2$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldFieldsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldFieldsetComponent, selector: "mng-formly-field-fieldset", usesInheritance: true, ngImport: i0, template: "<ng-container *ngFor=\"let group of field.fieldGroup; let i = index; let last = last\">\n    <p-fieldset *ngIf=\"!group.templateOptions?.['descriptor']?.default; else defaultSet\" [legend]=\"group.templateOptions?.label! | translate\">\n        <formly-field [field]=\"group\"></formly-field>\n    </p-fieldset>\n    <ng-template #defaultSet>\n        <formly-field [field]=\"group\"></formly-field>\n    </ng-template>\n</ng-container>\n", components: [{ type: i1$6.Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { type: i3$1.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i3.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldFieldsetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-formly-field-fieldset', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let group of field.fieldGroup; let i = index; let last = last\">\n    <p-fieldset *ngIf=\"!group.templateOptions?.['descriptor']?.default; else defaultSet\" [legend]=\"group.templateOptions?.label! | translate\">\n        <formly-field [field]=\"group\"></formly-field>\n    </p-fieldset>\n    <ng-template #defaultSet>\n        <formly-field [field]=\"group\"></formly-field>\n    </ng-template>\n</ng-container>\n" }]
@@ -5409,7 +5910,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
 class MngFormlyFieldWrapperComponent extends FieldWrapper {
 }
 MngFormlyFieldWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MngFormlyFieldWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldWrapperComponent, selector: "mng-formly-field-wrapper", usesInheritance: true, ngImport: i0, template: "<div class=\"field\">\n    <label [for]=\"key\">{{ $any(to?.label) | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n    <ng-container #fieldComponent></ng-container>\n    <small *ngIf=\"showError\" class=\"p-error\">\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </small>\n</div>\n", components: [{ type: i3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i2$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldWrapperComponent, selector: "mng-formly-field-wrapper", usesInheritance: true, ngImport: i0, template: "<div class=\"field\">\n    <label [for]=\"key\">{{ $any(to?.label) | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n    <ng-container #fieldComponent></ng-container>\n    <small *ngIf=\"showError\" class=\"p-error\">\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </small>\n</div>\n", components: [{ type: i3$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i3.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-formly-field-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"field\">\n    <label [for]=\"key\">{{ $any(to?.label) | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n    <ng-container #fieldComponent></ng-container>\n    <small *ngIf=\"showError\" class=\"p-error\">\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </small>\n</div>\n" }]
@@ -5418,7 +5919,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
 class MngFormlyTableWrapperComponent extends FieldWrapper {
 }
 MngFormlyTableWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyTableWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MngFormlyTableWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyTableWrapperComponent, selector: "mng-formly-table-wrapper", usesInheritance: true, ngImport: i0, template: "<div class=\"field table\">\n    <ng-container #fieldComponent></ng-container>\n    <small *ngIf=\"showError\" class=\"p-error\">\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </small>\n</div>\n", components: [{ type: i3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyTableWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyTableWrapperComponent, selector: "mng-formly-table-wrapper", usesInheritance: true, ngImport: i0, template: "<div class=\"field table\">\n    <ng-container #fieldComponent></ng-container>\n    <small *ngIf=\"showError\" class=\"p-error\">\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </small>\n</div>\n", components: [{ type: i3$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyTableWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-formly-table-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"field table\">\n    <ng-container #fieldComponent></ng-container>\n    <small *ngIf=\"showError\" class=\"p-error\">\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </small>\n</div>\n" }]
@@ -5430,7 +5931,7 @@ class MngBreadcrumbComponent {
     }
 }
 MngBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngBreadcrumbComponent, deps: [{ token: MngCommonsService }], target: i0.ɵɵFactoryTarget.Component });
-MngBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngBreadcrumbComponent, selector: "mng-breadcrumb", ngImport: i0, template: "<div class=\"layout-breadcrumb-container\">\n    <div class=\"layout-breadcrumb\">\n        <p-breadcrumb [home]=\"$any(mngCommons.breadcrumbHome$ | async)\" [model]=\"$any(mngCommons.breadcrumbs$ | async)\" styleClass=\"layout-breadcrumb py-2\"></p-breadcrumb>\n    </div>\n</div>\n", components: [{ type: i2$7.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }], pipes: { "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngBreadcrumbComponent, selector: "mng-breadcrumb", ngImport: i0, template: "<div class=\"layout-breadcrumb-container\">\n    <div class=\"layout-breadcrumb\">\n        <p-breadcrumb [home]=\"$any(mngCommons.breadcrumbHome$ | async)\" [model]=\"$any(mngCommons.breadcrumbs$ | async)\" styleClass=\"layout-breadcrumb py-2\"></p-breadcrumb>\n    </div>\n</div>\n", components: [{ type: i2$4.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }], pipes: { "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngBreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-breadcrumb-container\">\n    <div class=\"layout-breadcrumb\">\n        <p-breadcrumb [home]=\"$any(mngCommons.breadcrumbHome$ | async)\" [model]=\"$any(mngCommons.breadcrumbs$ | async)\" styleClass=\"layout-breadcrumb py-2\"></p-breadcrumb>\n    </div>\n</div>\n" }]
@@ -5443,7 +5944,7 @@ class MngFooterComponent {
     }
 }
 MngFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFooterComponent, deps: [{ token: MngCommonsService }], target: i0.ɵɵFactoryTarget.Component });
-MngFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFooterComponent, selector: "mng-footer", ngImport: i0, template: "<div class=\"layout-footer\">\n    <div class=\"footer-logo-container\">\n        <img id=\"footer-logo\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" alt=\"atlantis-layout\" />\n        <span class=\"app-name\">{{ mngCommons.appName | translate }}</span>\n    </div>\n    <span class=\"copyright\">&#169; {{ mngCommons.appOwner | translate }} - {{ currentYear }}</span>\n</div>\n", pipes: { "translate": i2$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFooterComponent, selector: "mng-footer", ngImport: i0, template: "<div class=\"layout-footer\">\n    <div class=\"footer-logo-container\">\n        <img id=\"footer-logo\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" alt=\"atlantis-layout\" />\n        <span class=\"app-name\">{{ mngCommons.appName | translate }}</span>\n    </div>\n    <span class=\"copyright\">&#169; {{ mngCommons.appOwner | translate }} - {{ currentYear }}</span>\n</div>\n", pipes: { "translate": i3.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-footer\">\n    <div class=\"footer-logo-container\">\n        <img id=\"footer-logo\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" alt=\"atlantis-layout\" />\n        <span class=\"app-name\">{{ mngCommons.appName | translate }}</span>\n    </div>\n    <span class=\"copyright\">&#169; {{ mngCommons.appOwner | translate }} - {{ currentYear }}</span>\n</div>\n" }]
@@ -5781,7 +6282,7 @@ class MngMenuItemComponent {
     }
 }
 MngMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngMenuItemComponent, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: MngCommonsService }, { token: MngMainLayoutComponentService }], target: i0.ɵɵFactoryTarget.Component });
-MngMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: { item: "item", index: "index", root: "root", parentKey: "parentKey" }, host: { properties: { "class.layout-root-menuitem": "root", "class.active-menuitem": "active" } }, ngImport: i0, template: "<ng-container>\n    <div *ngIf=\"root && item.visible !== false && (isAllowed$ | async) === true\" class=\"layout-menuitem-root-text\">{{ item.label! | translate }}</div>\n    <a\n        *ngIf=\"(!item.routerLink || item.items) && item.visible !== false && (isAllowed$ | async) === true\"\n        [attr.href]=\"item.href\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"onMouseEnter()\"\n        (keydown.enter)=\"itemClick($event)\"\n        [routerLink]=\"item.routerLink\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <a\n        *ngIf=\"item.routerLink && !item.items && item.visible !== false && (isAllowed$ | async) === true\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"hover = true\"\n        (mouseleave)=\"hover = false\"\n        [routerLink]=\"item.routerLink\"\n        routerLinkActive=\"active-menuitem-routerlink\"\n        [routerLinkActiveOptions]=\"{exact: true}\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <ul\n        *ngIf=\"((item.items && active) || (item.items && (mngCommons.menuModeIsStatic$ | async) && (root || active))) && item.visible !== false && (isAllowed$ | async) === true\"\n        [@children]=\"\n            (mngCommons.menuModeIsSlim$ | async) && (mainLayoutService.isMobile$ | async) === false && root\n                ? active\n                    ? 'visible'\n                    : 'hidden'\n                : (mngCommons.menuModeIsStatic$ | async) && root && (mainLayoutService.isMobile$ | async) === false\n                ? 'visible'\n                : active\n                ? 'visibleAnimated'\n                : 'hiddenAnimated'\n        \">\n        <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n            <li mng-menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeClassName\"></li>\n        </ng-template>\n    </ul>\n</ng-container>\n", components: [{ type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: ["item", "index", "root", "parentKey"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i9.Ripple, selector: "[pRipple]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i2$2.TranslatePipe }, animations: [
+MngMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: { item: "item", index: "index", root: "root", parentKey: "parentKey" }, host: { properties: { "class.layout-root-menuitem": "root", "class.active-menuitem": "active" } }, ngImport: i0, template: "<ng-container>\n    <div *ngIf=\"root && item.visible !== false && (isAllowed$ | async) === true\" class=\"layout-menuitem-root-text\">{{ item.label! | translate }}</div>\n    <a\n        *ngIf=\"(!item.routerLink || item.items) && item.visible !== false && (isAllowed$ | async) === true\"\n        [attr.href]=\"item.href\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"onMouseEnter()\"\n        (keydown.enter)=\"itemClick($event)\"\n        [routerLink]=\"item.routerLink\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <a\n        *ngIf=\"item.routerLink && !item.items && item.visible !== false && (isAllowed$ | async) === true\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"hover = true\"\n        (mouseleave)=\"hover = false\"\n        [routerLink]=\"item.routerLink\"\n        routerLinkActive=\"active-menuitem-routerlink\"\n        [routerLinkActiveOptions]=\"{exact: true}\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <ul\n        *ngIf=\"((item.items && active) || (item.items && (mngCommons.menuModeIsStatic$ | async) && (root || active))) && item.visible !== false && (isAllowed$ | async) === true\"\n        [@children]=\"\n            (mngCommons.menuModeIsSlim$ | async) && (mainLayoutService.isMobile$ | async) === false && root\n                ? active\n                    ? 'visible'\n                    : 'hidden'\n                : (mngCommons.menuModeIsStatic$ | async) && root && (mainLayoutService.isMobile$ | async) === false\n                ? 'visible'\n                : active\n                ? 'visibleAnimated'\n                : 'hiddenAnimated'\n        \">\n        <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n            <li mng-menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeClassName\"></li>\n        </ng-template>\n    </ul>\n</ng-container>\n", components: [{ type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: ["item", "index", "root", "parentKey"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i9.Ripple, selector: "[pRipple]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i3.TranslatePipe }, animations: [
         trigger('children', [
             state('void', style({
                 height: '0px'
@@ -5880,8 +6381,6 @@ class MngTopbarComponent {
         this.mngCommons.user$.subscribe(u => {
             this.user = u;
         });
-    }
-    ngAfterViewInit() {
         this.mainLayoutService.innerWidth = window.innerWidth;
     }
     switchLanguage(language) {
@@ -5895,7 +6394,7 @@ class MngTopbarComponent {
     }
 }
 MngTopbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTopbarComponent, deps: [{ token: i1.ActivatedRoute }, { token: MngCommonsService }, { token: MngMainLayoutComponentService }], target: i0.ɵɵFactoryTarget.Component });
-MngTopbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTopbarComponent, selector: "mng-topbar", viewQueries: [{ propertyName: "templates", predicate: MngTemplateDirective, descendants: true }], ngImport: i0, template: "<div class=\"layout-topbar\">\n    <div class=\"layout-topbar-left\">\n        <a\n            href=\"#\"\n            class=\"topbar-menu-button\"\n            (click)=\"mainLayoutService.onMenuButtonClick($event)\"\n            *ngIf=\"(mngCommons.menuModeIsOverlay$ | async) || (mainLayoutService.isMobile$ | async)\">\n            <i class=\"pi pi-bars\"></i>\n        </a>\n\n        <ng-container [mngComponent]=\"breadcrumbComponent\"></ng-container>\n    </div>\n\n    <ng-container [mngComponent]=\"menuComponent\"></ng-container>\n\n    <div class=\"layout-topbar-right\">\n        <ul class=\"layout-topbar-right-items\">\n            <li #profile class=\"profile-item\" [ngClass]=\"{'active-topmenuitem': (mainLayoutService.activeTopbarItem$ | async) === profile}\">\n                <a href=\"#\" (click)=\"mainLayoutService.onTopbarItemClick($event, profile)\">\n                    <i class=\"pi pi-fw pi-user\"></i>\n                </a>\n                <ul class=\"fadeInDown\" *ngIf=\"user\">\n                    <li role=\"menuitem\">\n                        <a>\n                            {{ user?.displayName ?? user?.username }}\n                        </a>\n                    </li>\n                    <li role=\"menuitem\" *ngIf=\"user?.logout || user?.logoutUrl\">\n                        <a [href]=\"user?.logoutUrl\" (click)=\"logout(user, $event)\">\n                            <i class=\"pi pi-fw pi-sign-out\"></i>\n                            <span>{{ 'mngTopbar.logout' | translate }}</span>\n                        </a>\n                    </li>\n                </ul>\n            </li>\n            <li *ngIf=\"languages.length > 1\" class=\"profile-item\" [ngClass]=\"{'active-topmenuitem': (mainLayoutService.activeTopbarItem$ | async) === profile}\">\n                <i class=\"pi pi-fw pi-globe\"></i>\n                <p-dropdown [ngModel]=\"selectedLanguage\" [options]=\"languages\" (onChange)=\"switchLanguage($event.value)\"></p-dropdown>\n            </li>\n        </ul>\n    </div>\n</div>\n", components: [{ type: i1$2.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "virtualScroll", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i2$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngTopbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTopbarComponent, selector: "mng-topbar", viewQueries: [{ propertyName: "templates", predicate: MngTemplateDirective, descendants: true }], ngImport: i0, template: "<div class=\"layout-topbar\">\n    <div class=\"layout-topbar-left\">\n        <a\n            href=\"#\"\n            class=\"topbar-menu-button\"\n            (click)=\"mainLayoutService.onMenuButtonClick($event)\"\n            *ngIf=\"(mngCommons.menuModeIsOverlay$ | async) || (mainLayoutService.isMobile$ | async)\">\n            <i class=\"pi pi-bars\"></i>\n        </a>\n\n        <ng-container [mngComponent]=\"breadcrumbComponent\"></ng-container>\n    </div>\n\n    <ng-container [mngComponent]=\"menuComponent\"></ng-container>\n\n    <div class=\"layout-topbar-right\">\n        <ul class=\"layout-topbar-right-items\">\n            <li #profile class=\"profile-item\" [ngClass]=\"{'active-topmenuitem': (mainLayoutService.activeTopbarItem$ | async) === profile}\">\n                <a href=\"#\" (click)=\"mainLayoutService.onTopbarItemClick($event, profile)\">\n                    <i class=\"pi pi-fw pi-user\"></i>\n                </a>\n                <ul class=\"fadeInDown\" *ngIf=\"user\">\n                    <li role=\"menuitem\">\n                        <a>\n                            {{ user?.displayName ?? user?.username }}\n                        </a>\n                    </li>\n                    <li role=\"menuitem\" *ngIf=\"user?.logout || user?.logoutUrl\">\n                        <a [href]=\"user?.logoutUrl\" (click)=\"logout(user, $event)\">\n                            <i class=\"pi pi-fw pi-sign-out\"></i>\n                            <span>{{ 'mngTopbar.logout' | translate }}</span>\n                        </a>\n                    </li>\n                </ul>\n            </li>\n            <li *ngIf=\"languages.length > 1\" class=\"profile-item\" [ngClass]=\"{'active-topmenuitem': (mainLayoutService.activeTopbarItem$ | async) === profile}\">\n                <i class=\"pi pi-fw pi-globe\"></i>\n                <p-dropdown [ngModel]=\"selectedLanguage\" [options]=\"languages\" (onChange)=\"switchLanguage($event.value)\"></p-dropdown>\n            </li>\n        </ul>\n    </div>\n</div>\n", components: [{ type: i1$2.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "virtualScroll", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent"], outputs: ["instanceCreated"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i3.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTopbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-topbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-topbar\">\n    <div class=\"layout-topbar-left\">\n        <a\n            href=\"#\"\n            class=\"topbar-menu-button\"\n            (click)=\"mainLayoutService.onMenuButtonClick($event)\"\n            *ngIf=\"(mngCommons.menuModeIsOverlay$ | async) || (mainLayoutService.isMobile$ | async)\">\n            <i class=\"pi pi-bars\"></i>\n        </a>\n\n        <ng-container [mngComponent]=\"breadcrumbComponent\"></ng-container>\n    </div>\n\n    <ng-container [mngComponent]=\"menuComponent\"></ng-container>\n\n    <div class=\"layout-topbar-right\">\n        <ul class=\"layout-topbar-right-items\">\n            <li #profile class=\"profile-item\" [ngClass]=\"{'active-topmenuitem': (mainLayoutService.activeTopbarItem$ | async) === profile}\">\n                <a href=\"#\" (click)=\"mainLayoutService.onTopbarItemClick($event, profile)\">\n                    <i class=\"pi pi-fw pi-user\"></i>\n                </a>\n                <ul class=\"fadeInDown\" *ngIf=\"user\">\n                    <li role=\"menuitem\">\n                        <a>\n                            {{ user?.displayName ?? user?.username }}\n                        </a>\n                    </li>\n                    <li role=\"menuitem\" *ngIf=\"user?.logout || user?.logoutUrl\">\n                        <a [href]=\"user?.logoutUrl\" (click)=\"logout(user, $event)\">\n                            <i class=\"pi pi-fw pi-sign-out\"></i>\n                            <span>{{ 'mngTopbar.logout' | translate }}</span>\n                        </a>\n                    </li>\n                </ul>\n            </li>\n            <li *ngIf=\"languages.length > 1\" class=\"profile-item\" [ngClass]=\"{'active-topmenuitem': (mainLayoutService.activeTopbarItem$ | async) === profile}\">\n                <i class=\"pi pi-fw pi-globe\"></i>\n                <p-dropdown [ngModel]=\"selectedLanguage\" [options]=\"languages\" (onChange)=\"switchLanguage($event.value)\"></p-dropdown>\n            </li>\n        </ul>\n    </div>\n</div>\n" }]
@@ -5924,8 +6423,6 @@ class MngMainLayoutComponent {
         if (routeData === null || routeData === void 0 ? void 0 : routeData.footerComponent) {
             this.footerComponent = routeData.footerComponent;
         }
-    }
-    ngAfterViewInit() {
         this.mainLayoutService.innerWidth = window.innerWidth;
     }
     onWindowResize(event) {
@@ -5935,7 +6432,7 @@ class MngMainLayoutComponent {
     }
 }
 MngMainLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngMainLayoutComponent, deps: [{ token: i1.ActivatedRoute }, { token: MngCommonsService }, { token: MngMainLayoutComponentService }], target: i0.ɵɵFactoryTarget.Component });
-MngMainLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngMainLayoutComponent, selector: "mng-main-layout", host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [MngMainLayoutComponentService], viewQueries: [{ propertyName: "templates", predicate: MngTemplateDirective, descendants: true }], ngImport: i0, template: "<div\n    class=\"layout-wrapper\"\n    (click)=\"mainLayoutService.onLayoutClick()\"\n    [ngClass]=\"{\n        'layout-static': mngCommons.menuModeIsStatic$ | async,\n        'layout-overlay': mngCommons.menuModeIsOverlay$ | async,\n        'layout-slim': mngCommons.menuModeIsSlim$ | async,\n        'layout-sidebar': mngCommons.menuModeIsSidebar$ | async,\n        'layout-sidebar-static': (mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async),\n        'layout-overlay-active': mainLayoutService.overlayMenuActive$ | async,\n        'layout-mobile-active': mainLayoutService.staticMenuMobileActive$ | async,\n        'layout-static-inactive': (mainLayoutService.staticMenuDesktopInactive$ | async) && (mngCommons.menuModeIsStatic$ | async)\n    }\">\n    <div class=\"layout-main\">\n        <ng-container [mngComponent]=\"topbarComponent\"></ng-container>\n\n        <ng-container\n            *ngIf=\"\n                (mainLayoutService.isMobile$ | async) === false &&\n                ((mngCommons.menuModeIsStatic$ | async) || (mngCommons.menuModeIsSlim$ | async) || (mngCommons.menuModeIsSidebar$ | async))\n            \"\n            [mngComponent]=\"menuComponent\">\n        </ng-container>\n\n        <div class=\"layout-main-content\">\n            <router-outlet></router-outlet>\n        </div>\n\n        <ng-container [mngComponent]=\"footerComponent\"></ng-container>\n    </div>\n</div>\n", directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngMainLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngMainLayoutComponent, selector: "mng-main-layout", host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [MngMainLayoutComponentService], viewQueries: [{ propertyName: "templates", predicate: MngTemplateDirective, descendants: true }], ngImport: i0, template: "<div\n    class=\"layout-wrapper\"\n    (click)=\"mainLayoutService.onLayoutClick()\"\n    [ngClass]=\"{\n        'layout-static': mngCommons.menuModeIsStatic$ | async,\n        'layout-overlay': mngCommons.menuModeIsOverlay$ | async,\n        'layout-slim': mngCommons.menuModeIsSlim$ | async,\n        'layout-sidebar': mngCommons.menuModeIsSidebar$ | async,\n        'layout-sidebar-static': (mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async),\n        'layout-overlay-active': mainLayoutService.overlayMenuActive$ | async,\n        'layout-mobile-active': mainLayoutService.staticMenuMobileActive$ | async,\n        'layout-static-inactive': (mainLayoutService.staticMenuDesktopInactive$ | async) && (mngCommons.menuModeIsStatic$ | async)\n    }\">\n    <div class=\"layout-main\">\n        <ng-container [mngComponent]=\"topbarComponent\"></ng-container>\n\n        <ng-container\n            *ngIf=\"\n                (mainLayoutService.isMobile$ | async) === false &&\n                ((mngCommons.menuModeIsStatic$ | async) || (mngCommons.menuModeIsSlim$ | async) || (mngCommons.menuModeIsSidebar$ | async))\n            \"\n            [mngComponent]=\"menuComponent\">\n        </ng-container>\n\n        <div class=\"layout-main-content\">\n            <router-outlet></router-outlet>\n        </div>\n\n        <ng-container [mngComponent]=\"footerComponent\"></ng-container>\n    </div>\n</div>\n", directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent"], outputs: ["instanceCreated"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngMainLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-main-layout', providers: [MngMainLayoutComponentService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"layout-wrapper\"\n    (click)=\"mainLayoutService.onLayoutClick()\"\n    [ngClass]=\"{\n        'layout-static': mngCommons.menuModeIsStatic$ | async,\n        'layout-overlay': mngCommons.menuModeIsOverlay$ | async,\n        'layout-slim': mngCommons.menuModeIsSlim$ | async,\n        'layout-sidebar': mngCommons.menuModeIsSidebar$ | async,\n        'layout-sidebar-static': (mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async),\n        'layout-overlay-active': mainLayoutService.overlayMenuActive$ | async,\n        'layout-mobile-active': mainLayoutService.staticMenuMobileActive$ | async,\n        'layout-static-inactive': (mainLayoutService.staticMenuDesktopInactive$ | async) && (mngCommons.menuModeIsStatic$ | async)\n    }\">\n    <div class=\"layout-main\">\n        <ng-container [mngComponent]=\"topbarComponent\"></ng-container>\n\n        <ng-container\n            *ngIf=\"\n                (mainLayoutService.isMobile$ | async) === false &&\n                ((mngCommons.menuModeIsStatic$ | async) || (mngCommons.menuModeIsSlim$ | async) || (mngCommons.menuModeIsSidebar$ | async))\n            \"\n            [mngComponent]=\"menuComponent\">\n        </ng-container>\n\n        <div class=\"layout-main-content\">\n            <router-outlet></router-outlet>\n        </div>\n\n        <ng-container [mngComponent]=\"footerComponent\"></ng-container>\n    </div>\n</div>\n" }]
@@ -5947,129 +6444,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
                 args: ['window:resize', ['$event']]
             }] } });
 
-class MngTableviewComponent {
-    constructor(route, messageService, translateService, dialogService, confirmationService, actionService, tableviewService) {
-        this.route = route;
-        this.messageService = messageService;
-        this.translateService = translateService;
-        this.dialogService = dialogService;
-        this.confirmationService = confirmationService;
-        this.actionService = actionService;
-        this.tableviewService = tableviewService;
-        this.actions = [];
-        this.tableComponent = null;
-        this.rowClickActions = [];
-        this.rowInlineActions = [];
-        this.toolbarLeftActions = [];
-        this.toolbarRightActions = [];
-        this.subscriptions = [];
-    }
-    ngOnInit() {
-        this.tableviewService.actions = this.actions;
-        this.tableviewService.dataProvider = this.dataProvider;
-        this.tableviewService.messageService = this.messageService;
-        const reloadTableSubscription = this.tableviewService.reloadTable$.subscribe(() => {
-            this.reloadTable();
-        });
-        this.subscriptions.push(reloadTableSubscription);
-        for (const action of this.actions) {
-            switch (action.position) {
-                case ActionPositionEnum.RowClick:
-                    this.rowClickActions.push(action);
-                    break;
-                case ActionPositionEnum.RowInline:
-                    this.rowInlineActions.push(action);
-                    break;
-                case ActionPositionEnum.ToolbarLeft:
-                    this.toolbarLeftActions.push(action);
-                    break;
-                case ActionPositionEnum.ToolbarRight:
-                    this.toolbarRightActions.push(action);
-                    break;
-            }
-        }
-    }
-    ngOnDestroy() {
-        this.subscriptions.forEach(s => s.unsubscribe());
-    }
-    reloadTable() {
-        var _a;
-        (_a = this.tableComponent) === null || _a === void 0 ? void 0 : _a.reload();
-    }
-    onTableCellClick(event) {
-        if (this.rowClickActions.length) {
-            for (const action of this.rowClickActions) {
-                this.actionService.triggerRowClickAction(action, event, this.route);
-            }
-        }
-    }
-}
-MngTableviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableviewComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2$1.MessageService }, { token: i2$2.TranslateService }, { token: i2.DialogService }, { token: i2$1.ConfirmationService }, { token: MngActionService }, { token: TableviewComponentService }], target: i0.ɵɵFactoryTarget.Component });
-MngTableviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableviewComponent, selector: "mng-tableview", inputs: { descriptor: "descriptor", dataProvider: "dataProvider", actions: "actions" }, providers: [MessageService, ConfirmationService, TableviewComponentService], viewQueries: [{ propertyName: "tableComponent", first: true, predicate: MngTableComponent, descendants: true }], ngImport: i0, template: "<div class=\"mng-tableview\">\n    <p-toast></p-toast>\n\n    <div class=\"card\">\n        <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n            <ng-template pTemplate=\"left\">\n                <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\"> </mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\"> </mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table [descriptor]=\"descriptor.table\" [dataProvider]=\"dataProvider\" [useQueryParams]=\"true\" (cellClick)=\"onTableCellClick($event)\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-m-0\">{{ descriptor.tableTitle | translate }}</h5>\n                </div>\n            </ng-template>\n            <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n                <mng-action\n                    *ngFor=\"let action of rowInlineActions\"\n                    [action]=\"action\"\n                    [item]=\"item\"\n                    [itemId]=\"descriptor.model.idPropertyName ? item[descriptor.model.idPropertyName] : null\">\n                </mng-action>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n", components: [{ type: i7$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { type: i8$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass"] }, { type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData"] }, { type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionEnabled"], outputs: ["tableLoad", "cellClick", "selectionChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "translate": i2$2.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableviewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mng-tableview', providers: [MessageService, ConfirmationService, TableviewComponentService], template: "<div class=\"mng-tableview\">\n    <p-toast></p-toast>\n\n    <div class=\"card\">\n        <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n            <ng-template pTemplate=\"left\">\n                <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\"> </mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\"> </mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table [descriptor]=\"descriptor.table\" [dataProvider]=\"dataProvider\" [useQueryParams]=\"true\" (cellClick)=\"onTableCellClick($event)\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-m-0\">{{ descriptor.tableTitle | translate }}</h5>\n                </div>\n            </ng-template>\n            <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n                <mng-action\n                    *ngFor=\"let action of rowInlineActions\"\n                    [action]=\"action\"\n                    [item]=\"item\"\n                    [itemId]=\"descriptor.model.idPropertyName ? item[descriptor.model.idPropertyName] : null\">\n                </mng-action>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2$1.MessageService }, { type: i2$2.TranslateService }, { type: i2.DialogService }, { type: i2$1.ConfirmationService }, { type: MngActionService }, { type: TableviewComponentService }]; }, propDecorators: { descriptor: [{
-                type: Input
-            }], dataProvider: [{
-                type: Input
-            }], actions: [{
-                type: Input
-            }], tableComponent: [{
-                type: ViewChild,
-                args: [MngTableComponent]
-            }] } });
-
-class AMngTableviewRouteComponent {
-    ngOnInit() {
-        this.descriptor = this.createTableviewDescriptor();
-        this.dataProvider = this.createTableviewDataProvider();
-        this.actions = this.createActionDescriptors();
-    }
-    createActionDescriptors() {
-        const actions = [];
-        actions.push(new ActionEditorDetailsDescriptor(this.descriptor.viewEditor));
-        actions.push(new ActionEditorAddDescriptor(this.descriptor.addEditor));
-        actions.push(new ActionEditorEditDescriptor(this.descriptor.editEditor));
-        actions.push(new ActionDeleteDescriptor(this.descriptor.model));
-        return actions;
-    }
-}
-AMngTableviewRouteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: AMngTableviewRouteComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-AMngTableviewRouteComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: AMngTableviewRouteComponent, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: AMngTableviewRouteComponent, decorators: [{
-            type: Directive
-        }] });
-
-class MngTableviewRouteComponent extends AMngTableviewRouteComponent {
-    constructor(route) {
-        super();
-        this.route = route;
-    }
-    createTableviewDescriptor() {
-        if (!this.route.snapshot.data['tableviewData'].descriptor) {
-            throw Error('Tableview requires a descriptor.');
-        }
-        return this.route.snapshot.data['tableviewData'].descriptor;
-    }
-    createTableviewDataProvider() {
-        if (!this.route.snapshot.data['tableviewData'].dataProvider) {
-            throw Error('Tableview requires a data provider.');
-        }
-        return this.route.snapshot.data['tableviewData'].dataProvider;
-    }
-    createActionDescriptors() {
-        var _a;
-        return (_a = this.route.snapshot.data['tableviewData'].actions) !== null && _a !== void 0 ? _a : super.createActionDescriptors();
-    }
-}
-MngTableviewRouteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableviewRouteComponent, deps: [{ token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-MngTableviewRouteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableviewRouteComponent, selector: "mng-tableview-route", usesInheritance: true, ngImport: i0, template: "<div class=\"grid\">\n    <div class=\"col-12\">\n        <mng-tableview [descriptor]=\"descriptor\" [dataProvider]=\"dataProvider\" [actions]=\"actions\"></mng-tableview>\n    </div>\n</div>\n", components: [{ type: MngTableviewComponent, selector: "mng-tableview", inputs: ["descriptor", "dataProvider", "actions"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableviewRouteComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mng-tableview-route', template: "<div class=\"grid\">\n    <div class=\"col-12\">\n        <mng-tableview [descriptor]=\"descriptor\" [dataProvider]=\"dataProvider\" [actions]=\"actions\"></mng-tableview>\n    </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }]; } });
-
 function mngCommonsInitializerProvider(mngCommons) {
     return () => mngCommons.initialize();
 }
@@ -6179,6 +6553,11 @@ const formlyTypesConfig = [
         component: MngFormlyFieldAutocompleteComponent,
         wrappers: ['field']
     },
+    {
+        name: 'dialog',
+        component: MngFormlyFieldLookupDialogComponent,
+        wrappers: ['field']
+    },
     {
         name: 'table-dialog-multiselect',
         component: MngFormlyFieldTableDialogMultiselectComponent,
@@ -6344,6 +6723,7 @@ const declarations = [
     MngFormlyFieldInputComponent,
     MngFormlyFieldDropdownComponent,
     MngFormlyFieldAutocompleteComponent,
+    MngFormlyFieldLookupDialogComponent,
     MngFormlyFieldTableDialogMultiselectComponent,
     MngFormlyFieldTableDialogFormComponent,
     MngFormlyFieldTabsComponent,
@@ -6437,6 +6817,7 @@ MngCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         MngFormlyFieldInputComponent,
         MngFormlyFieldDropdownComponent,
         MngFormlyFieldAutocompleteComponent,
+        MngFormlyFieldLookupDialogComponent,
         MngFormlyFieldTableDialogMultiselectComponent,
         MngFormlyFieldTableDialogFormComponent,
         MngFormlyFieldTabsComponent,
@@ -6457,7 +6838,7 @@ MngCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         CommonModule,
         RouterModule,
         HttpClientModule,
-        ReactiveFormsModule, i2$2.TranslateModule, i3.FormlyModule, AutoCompleteModule,
+        ReactiveFormsModule, i3.TranslateModule, i3$1.FormlyModule, AutoCompleteModule,
         BreadcrumbModule,
         ButtonModule,
         CalendarModule,
@@ -6550,6 +6931,7 @@ MngCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         MngFormlyFieldInputComponent,
         MngFormlyFieldDropdownComponent,
         MngFormlyFieldAutocompleteComponent,
+        MngFormlyFieldLookupDialogComponent,
         MngFormlyFieldTableDialogMultiselectComponent,
         MngFormlyFieldTableDialogFormComponent,
         MngFormlyFieldTabsComponent,
@@ -6639,54 +7021,59 @@ class AMngCrudApiService {
         this.http = http;
         this.objectSerializer = ObjectSerializer.get();
     }
-    createPost(item) {
+    createPost(item, params) {
         const url = `${this.getBasePath()}/${this.getServiceBasePath()}${this.getCreatePostPath()}`;
         return this.http
             .post(url, this.objectSerializer.serializeClass(item, this.type), {
             withCredentials: true,
             observe: 'body',
-            reportProgress: false
+            reportProgress: false,
+            params: params
         })
             .pipe(map(res => this.objectSerializer.deserializeClass(res, this.type)));
     }
-    getAllPost(queryParam) {
+    getAllPost(queryParamBody, params) {
         const url = `${this.getBasePath()}/${this.getServiceBasePath()}${this.getGetAllPostPath()}`;
         return this.http
-            .post(url, this.objectSerializer.serialize(queryParam, 'QueryParam'), {
+            .post(url, this.objectSerializer.serialize(queryParamBody, 'QueryParam'), {
             withCredentials: true,
             observe: 'body',
-            reportProgress: false
+            reportProgress: false,
+            params: params
         })
             .pipe(map(res => this.objectSerializer.deserializeClass(res, this.queryResultType)));
     }
-    getByIdGet(id) {
+    getByIdGet(id, params) {
         const url = `${this.getBasePath()}/${this.getServiceBasePath()}${this.getGetByIdGetPath(id)}`;
         return this.http
             .get(url, {
             withCredentials: true,
             observe: 'body',
-            reportProgress: false
+            reportProgress: false,
+            params: params
         })
             .pipe(map(res => this.objectSerializer.deserializeClass(res, this.type)));
     }
-    updatePut(id, item) {
+    updatePut(id, item, params) {
         const url = `${this.getBasePath()}/${this.getServiceBasePath()}${this.getUpdatePutPath(id, item)}`;
         return this.http
             .put(url, this.objectSerializer.serializeClass(item, this.type), {
             withCredentials: true,
             observe: 'body',
-            reportProgress: false
+            reportProgress: false,
+            params: params
         })
             .pipe(map(res => this.objectSerializer.deserializeClass(res, this.type)));
     }
-    removeDelete(id, item) {
+    removeDelete(id, item, params) {
         const url = `${this.getBasePath()}/${this.getServiceBasePath()}${this.getRemoveDeletePath(id, item)}`;
         return this.http
             .request('delete', url, {
             withCredentials: true,
             observe: 'body',
             reportProgress: false,
-            body: this.objectSerializer.serializeClass(item, this.type)
+            body: item ? this.objectSerializer.serializeClass(item, this.type) : undefined,
+            params: params
         })
             .pipe(map(res => this.objectSerializer.deserializeClass(res, this.type)));
     }
@@ -6737,12 +7124,30 @@ class RoutesBuilder {
     constructor(layoutRoute) {
         this.routes = [];
         this.layoutRoute = layoutRoute === null || layoutRoute === void 0 ? void 0 : layoutRoute.withRoot(this);
+        this.currentRoute = layoutRoute;
     }
     static create() {
         return new RoutesBuilder();
     }
-    static createWithLayout(layoutComponent = MngMainLayoutComponent) {
-        const routesBuilder = new RoutesBuilder(RouteBuilder.create('', layoutComponent));
+    static createWithLayout(layoutComponent = MngMainLayoutComponent, topbarComponent, breadcrumbComponent, menuComponent, footerComponent) {
+        const layoutRoute = RouteBuilder.create('', layoutComponent);
+        if (topbarComponent || breadcrumbComponent || menuComponent || footerComponent) {
+            const dataBuilder = RouteDataBuilder.create();
+            if (topbarComponent) {
+                dataBuilder.withTopbarComponent(topbarComponent);
+            }
+            if (breadcrumbComponent) {
+                dataBuilder.withBreadcrumbComponent(breadcrumbComponent);
+            }
+            if (menuComponent) {
+                dataBuilder.withMenuComponent(menuComponent);
+            }
+            if (footerComponent) {
+                dataBuilder.withFooterComponent(footerComponent);
+            }
+            layoutRoute.withDataBuilder(dataBuilder);
+        }
+        const routesBuilder = new RoutesBuilder(layoutRoute);
         return routesBuilder;
     }
     addAngularRoute(route) {
@@ -6832,15 +7237,9 @@ class RouteBuilder {
     static createFromRoute(route) {
         return new RouteBuilder(route);
     }
-    static createTableviewRoutes(path, descriptor, tableviewDataProvider, actions, hasDetails = true, hasEdit = true, hasAdd = true) {
+    static createTableviewRoutes(path, descriptor, dataProvider, actions, hasDetails = true, hasEdit = true, hasAdd = true) {
         const tableviewRoute = RouteBuilder.createFromRoute({
-            data: {
-                tableviewData: {
-                    descriptor: descriptor,
-                    dataProvider: tableviewDataProvider,
-                    actions: actions
-                }
-            },
+            data: RouteDataBuilder.create().withTableview(descriptor, dataProvider, actions).build(),
             path: path,
             component: MngTableviewRouteComponent
         });
@@ -6922,6 +7321,10 @@ class RouteBuilder {
         this.route.data = data;
         return this;
     }
+    withDataBuilder(dataBuilder) {
+        this.route.data = dataBuilder.build();
+        return this;
+    }
     withMngMenuItem(menuItem) {
         this.menuItem = menuItem;
         return this;
@@ -7092,6 +7495,54 @@ class RouteBuilder {
         return guards;
     }
 }
+class RouteDataBuilder {
+    constructor(init) {
+        this.data = init !== null && init !== void 0 ? init : {};
+        if (!this.data.breadcrumb) {
+            this.data.breadcrumb = null;
+        }
+    }
+    static create(data) {
+        return new RouteDataBuilder(data);
+    }
+    withBreadcrumb(breadcrumb) {
+        this.data.breadcrumb = breadcrumb;
+        return this;
+    }
+    withPageTitle(pageTitle) {
+        this.data.pageTitle = pageTitle;
+        return this;
+    }
+    withTableview(descriptor, dataProvider, actions) {
+        this.data.tableview = {
+            descriptor: descriptor,
+            dataProvider: dataProvider
+        };
+        if (actions) {
+            this.data.tableview.actions = actions;
+        }
+        return this;
+    }
+    withTopbarComponent(component) {
+        this.data.topbarComponent = component;
+        return this;
+    }
+    withBreadcrumbComponent(component) {
+        this.data.breadcrumbComponent = component;
+        return this;
+    }
+    withMenuComponent(component) {
+        this.data.menuComponent = component;
+        return this;
+    }
+    withFooterComponent(component) {
+        this.data.footerComponent = component;
+        return this;
+    }
+    build() {
+        return this.data;
+    }
+}
 
 /*
  * Public API Surface of mng-commons
@@ -7101,5 +7552,5 @@ class RouteBuilder {
  * Generated bundle index. Do not edit.
  */
 
-export { AFieldDescriptor, AFieldGroupDescriptor, AGenericFieldDescriptor, AMngCrudApiService, AMngTableviewRouteComponent, ActionActivationResult, ActionActivationTriggerEnum, ActionDeleteDescriptor, ActionDescriptor, ActionEditorAddDescriptor, ActionEditorDescriptor, ActionEditorDetailsDescriptor, ActionEditorEditDescriptor, ActionError, ActionExecContext, ActionLevelEnum, ActionPositionEnum, ActionRunResult, ActionTriggerResult, ActionTypeEnum, ColumnDescriptor, DataProvider, EditorDataProvider, EditorDescriptor, EditorFormlyUtil, EnumName, EnumUtil, FieldGroupDescriptor, FieldInputDescriptor, FieldLookupDescriptor, FieldLookupEnumDescriptor, FieldManyEditorDescriptor, FieldManyToManyEditorDescriptor, FieldTabGroupDescriptor, FieldValidator, FilterDescriptor, FilterLookupDescriptor, FilterLookupEnumDescriptor, I18nUtil, LookupDataProvider, MNG_AUTOCOMPLETE_VALUE_ACCESSOR, MNG_DROPDOWN_VALUE_ACCESSOR, MediusFilterMatchType, MediusFilterParam, MediusQueryMode, MediusQueryParam, MediusQueryParamBuilder, MediusQueryResult, MediusQueryResultBase, MediusQueryResultWithObject, MediusRestUtil, MngActionComponent, MngActionDialogComponent, MngActionRouteComponent, MngActionService, MngAutocompleteComponent, MngBooleanPipe, MngBreadcrumbComponent, MngCommonsModule, MngCommonsService, MngComponentDirective, MngConfigurationService, MngDropdownComponent, MngEnumPipe, MngFooterComponent, MngFormEditorComponent, MngFormEditorSubmitEvent, MngFormlyFieldAutocompleteComponent, MngFormlyFieldDropdownComponent, MngFormlyFieldFieldsetComponent, MngFormlyFieldInputComponent, MngFormlyFieldTableDialogFormComponent, MngFormlyFieldTableDialogMultiselectComponent, MngFormlyFieldTabsComponent, MngFormlyFieldWrapperComponent, MngFormlyTableWrapperComponent, MngI18nPropertyPipe, MngMainLayoutComponent, MngMainLayoutComponentService, MngMenuComponent, MngMenuItemComponent, MngNavigationService, MngPropertyPathPipe, MngTableColumnFilterComponent, MngTableColumnValueComponent, MngTableComponent, MngTableviewComponent, MngTableviewRouteComponent, MngTemplateDirective, MngTopbarComponent, ModelDescriptor, ModelUtil, ObjectSerializer, RouteBuilder, RoutesBuilder, TableDescriptor, TableviewComponentService, TableviewDataProvider, TableviewDescriptor, ToastUtil, TypeName, TypeUtil, enumNameDecoratorPropertyName, enumsMapBase, formlyTypesConfig, formlyWrappersConfig, getEmailValidationMessage, getFormlyValidationMessages, getMaxLengthValidationMessage, getMinLengthValidationMessage, getRequiredValidationMessage, getTextPatternValidationMessage, mngCommonsInitializerProvider, mngConfigJsonAppInitializerProvider, mngConfigurationServiceProvider, mngFormlyConfigProvider, primeNgModules, typeMapBase, typeNameDecoratorPropertyName };
+export { AFieldDescriptor, AFieldGroupDescriptor, AGenericFieldDescriptor, AMngCrudApiService, AMngTableviewRouteComponent, ActionActivationResult, ActionActivationTriggerEnum, ActionDeleteDescriptor, ActionDescriptor, ActionEditorAddDescriptor, ActionEditorDescriptor, ActionEditorDetailsDescriptor, ActionEditorEditDescriptor, ActionError, ActionExecContext, ActionLevelEnum, ActionPositionEnum, ActionRunResult, ActionTriggerResult, ActionTypeEnum, ColumnDescriptor, DataProvider, EditorDataProvider, EditorDescriptor, EditorFormlyUtil, EnumName, EnumUtil, FieldGroupDescriptor, FieldInputDescriptor, FieldLookupDescriptor, FieldLookupEnumDescriptor, FieldManyEditorDescriptor, FieldManyToManyEditorDescriptor, FieldTabGroupDescriptor, FieldValidator, FilterDescriptor, FilterLookupDescriptor, FilterLookupEnumDescriptor, I18nUtil, LookupDataProvider, MNG_AUTOCOMPLETE_VALUE_ACCESSOR, MNG_DROPDOWN_VALUE_ACCESSOR, MediusFilterMatchType, MediusFilterParam, MediusQueryMode, MediusQueryParam, MediusQueryParamBuilder, MediusQueryResult, MediusQueryResultBase, MediusQueryResultWithObject, MediusRestUtil, MngActionComponent, MngActionDialogComponent, MngActionRouteComponent, MngActionService, MngAutocompleteComponent, MngBooleanPipe, MngBreadcrumbComponent, MngCommonsModule, MngCommonsService, MngComponentDirective, MngConfigurationService, MngDropdownComponent, MngEnumPipe, MngFooterComponent, MngFormEditorComponent, MngFormEditorSubmitEvent, MngFormFieldEvent, MngFormFieldEventComponentSubtype, MngFormFieldEventDialogSubtype, MngFormFieldEventTypeEnum, MngFormlyFieldAutocompleteComponent, MngFormlyFieldDropdownComponent, MngFormlyFieldFieldsetComponent, MngFormlyFieldInputComponent, MngFormlyFieldLookupDialogComponent, MngFormlyFieldTableDialogFormComponent, MngFormlyFieldTableDialogMultiselectComponent, MngFormlyFieldTabsComponent, MngFormlyFieldWrapperComponent, MngFormlyTableWrapperComponent, MngI18nPropertyPipe, MngMainLayoutComponent, MngMainLayoutComponentService, MngMenuComponent, MngMenuItemComponent, MngNavigationService, MngPropertyPathPipe, MngTableColumnFilterComponent, MngTableColumnValueComponent, MngTableComponent, MngTableviewComponent, MngTableviewRouteComponent, MngTemplateDirective, MngTopbarComponent, ModelDescriptor, ModelUtil, ObjectSerializer, RouteBuilder, RouteDataBuilder, RoutesBuilder, TableDataProvider, TableDescriptor, TableviewComponentService, TableviewDataProvider, TableviewDescriptor, ToastUtil, TypeName, TypeUtil, enumNameDecoratorPropertyName, enumsMapBase, formlyTypesConfig, formlyWrappersConfig, getEmailValidationMessage, getFormlyValidationMessages, getMaxLengthValidationMessage, getMinLengthValidationMessage, getRequiredValidationMessage, getTextPatternValidationMessage, mngCommonsInitializerProvider, mngConfigJsonAppInitializerProvider, mngConfigurationServiceProvider, mngFormlyConfigProvider, primeNgModules, typeMapBase, typeNameDecoratorPropertyName };
 //# sourceMappingURL=mediusinc-mng-commons.mjs.map