@mediusinc/mng-commons 0.3.2 → 0.4.1

package/fesm2015/mediusinc-mng-commons.mjs

@@ -3,17 +3,17 @@ import { CommonModule } from '@angular/common';
 import { HttpErrorResponse, HttpClient, HttpClientModule } from '@angular/common/http';
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, Pipe, Inject, EventEmitter, Component, ChangeDetectionStrategy, Optional, HostBinding, Input, Output, Directive, ContentChildren, ViewChild, forwardRef, ViewChildren, HostListener, APP_INITIALIZER, NgModule } from '@angular/core';
-import * as i2$1 from '@angular/forms';
+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$2 from '@ngx-formly/core';
+import * as i3$1 from '@ngx-formly/core';
 import { FieldType, FieldWrapper, FORMLY_CONFIG, FormlyModule } from '@ngx-formly/core';
-import * as i3$1 from '@ngx-translate/core';
+import * as i1$1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import * as i2 from 'primeng/api';
 import { ConfirmationService, MessageService, FilterMatchMode } from 'primeng/api';
-import * as i1$1 from 'primeng/autocomplete';
+import * as i2$1 from 'primeng/autocomplete';
 import { AutoComplete, AutoCompleteModule } from 'primeng/autocomplete';
 import * as i2$4 from 'primeng/breadcrumb';
 import { BreadcrumbModule } from 'primeng/breadcrumb';
@@ -46,21 +46,21 @@ import * as i10 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i9$1 from 'primeng/inputtextarea';
 import { InputTextareaModule } from 'primeng/inputtextarea';
-import * as i3$3 from 'primeng/messages';
+import * as i3$2 from 'primeng/messages';
 import { MessagesModule } from 'primeng/messages';
-import * as i3$4 from 'primeng/multiselect';
+import * as i3$3 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
 import { PaginatorModule } from 'primeng/paginator';
 import * as i6 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 i8 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import * as i7$1 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 { TabViewModule } from 'primeng/tabview';
@@ -68,7 +68,7 @@ import { TagModule } from 'primeng/tag';
 import * as i6$2 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
 import { ToggleButtonModule } from 'primeng/togglebutton';
-import * as i4$2 from 'primeng/toolbar';
+import * as i4$3 from 'primeng/toolbar';
 import { ToolbarModule } from 'primeng/toolbar';
 import * as i9 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
@@ -314,6 +314,7 @@ class MediusQueryParamBuilder {
         const queryParam = new MediusQueryParam();
         queryParam.itemsPerPage = itemsPerPage;
         queryParam.itemsOffset = itemsOffset;
+        queryParam.queryMode = MediusQueryMode.All;
         return new MediusQueryParamBuilder(queryParam);
     }
     withItemsPerPage(itemsPerPage) {
@@ -324,6 +325,10 @@ class MediusQueryParamBuilder {
         this.queryParam.itemsOffset = itemsOffset;
         return this;
     }
+    withQueryMode(queryMode) {
+        this.queryParam.queryMode = queryMode;
+        return this;
+    }
     withSort(property, asc = true) {
         if (!this.queryParam.sortProperty || !this.queryParam.sortAsc) {
             this.queryParam.sortProperty = [];
@@ -960,1517 +965,1591 @@ 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 FilterDescriptor {
+    constructor(property) {
+        this._filterType = FilterDescriptor.TypeEnum.String;
+        this._matchModes = null;
+        this._className = '';
+        this._property = property;
     }
-}
-
-class EditorDescriptor {
-    constructor(modelType, idProperty, titleProperty, tableviewEditorType = EditorDescriptor.TableviewEditorTypeEnum.None) {
-        this._tabs = [];
-        this._groups = [];
-        this._fields = [];
-        this._disabled = false;
-        this._model = new ModelDescriptor(modelType, idProperty, titleProperty);
-        this._tableviewEditorType = tableviewEditorType;
+    get filterType() {
+        return this._filterType;
     }
-    get model() {
-        return this._model;
+    get filterProperty() {
+        return this._filterProperty;
     }
-    get tabs() {
-        return this._tabs;
+    get matchModes() {
+        return this._matchModes;
     }
-    get fields() {
-        return this._fields;
+    get placeholder() {
+        return this._placeholder;
     }
-    get tableviewEditorType() {
-        return this._disabled;
+    get className() {
+        return this._className;
     }
-    get disabled() {
-        return this._disabled;
+    get property() {
+        return this._property;
     }
-    createTabGroup(name, title) {
-        const tabGroup = new FieldTabGroupDescriptor(this, name);
-        if (!title) {
-            title = I18nUtil.getModelTabKey(this.model, name);
-        }
-        tabGroup.withTitle(title);
-        this.createTabGroupDescriptor(tabGroup);
-        return tabGroup;
+    asFilterType(filterType) {
+        this._filterType = filterType;
+        return this;
     }
-    createFieldGroup(name, title) {
-        const fieldGroup = new FieldGroupDescriptor(this, name);
-        if (title !== null) {
-            if (!title) {
-                title = I18nUtil.getModelGroupKey(this.model, name);
-            }
-            fieldGroup.withTitle(title);
-        }
-        this.createFieldGroupDescriptor(fieldGroup);
-        return fieldGroup;
+    /**
+     * Sets different filter property name instead of default property. Use this if API requires different property provided to perform correct filter.
+     * @param filterProperty
+     */
+    withFilterProperty(filterProperty) {
+        this._filterProperty = filterProperty;
+        return this;
     }
-    addFieldDescriptor(field) {
-        var _a;
-        this.createDefaultGroup();
-        this._fields.push(field);
-        (_a = this._currentGroup) === null || _a === void 0 ? void 0 : _a.addField(field);
+    withPlaceholder(placeholder) {
+        this._placeholder = placeholder;
         return this;
     }
-    addField(property) {
-        const field = new FieldInputDescriptor(this, property);
-        this.addFieldDescriptor(field);
-        return field;
+    withClassName(className) {
+        this._className = className;
+        return this;
     }
-    removeField(property) {
-        const fieldIdx = this._fields.findIndex(f => f.property === property);
-        if (fieldIdx < 0) {
-            throw new Error(`Field ${property} does not exist.`);
-        }
-        const field = this._fields[fieldIdx];
-        if (field.group) {
-            const groupFieldIdx = field.group.fields.findIndex(f => f instanceof AFieldDescriptor && f.property === property);
-            if (groupFieldIdx >= 0) {
-                field.group.fields.splice(groupFieldIdx, 1);
-            }
-        }
-        this._fields.splice(fieldIdx, 1);
+    withMatchModes(matchModes) {
+        this._matchModes = matchModes;
         return this;
     }
-    getField(property) {
-        var _a;
-        return (_a = this._fields.find(f => f.property === property)) !== null && _a !== void 0 ? _a : null;
+    copy() {
+        const descriptor = new FilterDescriptor(this._property);
+        this.copyFieldsTo(descriptor);
+        return descriptor;
     }
-    addFieldLookup(property, modelType) {
-        const field = new FieldLookupDescriptor(this, property, modelType);
-        this.addFieldDescriptor(field);
-        return field;
+    copyFieldsTo(descriptor) {
+        descriptor._filterType = this._filterType;
+        descriptor._filterProperty = this._filterProperty;
+        descriptor._placeholder = this._placeholder;
+        descriptor._className = this._className;
     }
-    addFieldLookupEnum(property, enumType, options, nameAsValue = false, optionsTitlePath) {
-        const field = new FieldLookupEnumDescriptor(this, property, enumType, options, nameAsValue, optionsTitlePath);
-        this.addFieldDescriptor(field);
-        return field;
+}
+(function (FilterDescriptor) {
+    let TypeEnum;
+    (function (TypeEnum) {
+        TypeEnum[TypeEnum["String"] = 0] = "String";
+        TypeEnum[TypeEnum["Number"] = 1] = "Number";
+        TypeEnum[TypeEnum["Boolean"] = 2] = "Boolean";
+        TypeEnum[TypeEnum["Date"] = 3] = "Date";
+        TypeEnum[TypeEnum["Lookup"] = 4] = "Lookup";
+        TypeEnum[TypeEnum["LookupEnum"] = 5] = "LookupEnum";
+    })(TypeEnum = FilterDescriptor.TypeEnum || (FilterDescriptor.TypeEnum = {}));
+    let MatchModeEnum;
+    (function (MatchModeEnum) {
+        MatchModeEnum["StartsWith"] = "startsWith";
+        MatchModeEnum["Contains"] = "contains";
+        MatchModeEnum["EndsWith"] = "endsWith";
+        MatchModeEnum["Equals"] = "equals";
+        MatchModeEnum["NotEquals"] = "notEquals";
+        MatchModeEnum["In"] = "in";
+        MatchModeEnum["LessThan"] = "lt";
+        MatchModeEnum["LessThanOrEqualTo"] = "lte";
+        MatchModeEnum["GreaterThan"] = "gt";
+        MatchModeEnum["GreaterThanOrEqualTo"] = "gte";
+        MatchModeEnum["Between"] = "between";
+        MatchModeEnum["DateIs"] = "dateIs";
+        MatchModeEnum["DateIsNot"] = "dateIsNot";
+        MatchModeEnum["DateBefore"] = "dateBefore";
+        MatchModeEnum["DateAfter"] = "dateAfter";
+    })(MatchModeEnum = FilterDescriptor.MatchModeEnum || (FilterDescriptor.MatchModeEnum = {}));
+})(FilterDescriptor || (FilterDescriptor = {}));
+class FilterLookupDescriptor extends FilterDescriptor {
+    constructor(property, modelType) {
+        super(property);
+        this._modelType = null;
+        this._lookupType = FilterLookupDescriptor.LookupTypeEnum.Dropdown;
+        this._itemsLabelTranslate = false;
+        this._multiselect = false;
+        this._dropdownClassName = 'mng-filter-lookup-dropdown';
+        this._autocompleteOpenOnFocus = false;
+        this._autocompleteInlineSearch = false;
+        this._modelType = modelType;
+        this._filterType = FilterDescriptor.TypeEnum.Lookup;
+        ModelUtil.trySetLookupItemsProperties(this);
     }
-    addFieldManyEditor(property, tableviewDescriptor) {
-        const field = new FieldManyEditorDescriptor(this, property, tableviewDescriptor);
-        this.addFieldDescriptor(field);
-        return field;
+    get lookupType() {
+        return this._lookupType;
     }
-    addFieldManyToManyEditor(property, mainTableDescriptor, lookupTableDescriptor) {
-        const field = new FieldManyToManyEditorDescriptor(this, property, mainTableDescriptor, lookupTableDescriptor);
-        this.addFieldDescriptor(field);
-        return field;
+    get dataProvider() {
+        return this._dataProvider;
     }
-    withDisabled(disabled = true) {
-        this._disabled = disabled;
-        return this;
+    get itemsLabelProperty() {
+        return this._itemsLabelProperty;
     }
-    addValidator(name, expression) {
-        if (this._currentGroup) {
-            this._currentGroup.withValidator(name, expression);
-        }
+    get itemsLabelTranslate() {
+        return this._itemsLabelTranslate;
     }
-    copy() {
-        const editor = new EditorDescriptor(this.model.type, this.model.idPropertyName, this.model.titlePropertyName);
-        for (const tabGroup of this._tabs) {
-            editor.createTabGroupDescriptor(tabGroup.copy());
-        }
-        for (const tabGroup of editor._tabs) {
-            for (const fieldGroup of tabGroup.fields) {
-                editor._fields.push(...fieldGroup.fields);
-            }
-            editor._groups.push(...tabGroup.fields);
-        }
-        editor._currentTabGroup = editor._tabs[editor._tabs.length - 1];
-        editor._currentGroup = editor._currentTabGroup.fields[editor._currentTabGroup.fields.length - 1];
-        editor._disabled = this._disabled;
-        return editor;
+    get itemsValueProperty() {
+        return this._itemsValueProperty;
     }
-    createFieldGroupDescriptor(fieldGroup) {
-        var _a;
-        this.createDefaultTabGroup();
-        this._currentGroup = fieldGroup;
-        this._groups.push(fieldGroup);
-        (_a = this._currentTabGroup) === null || _a === void 0 ? void 0 : _a.addField(fieldGroup);
-        return this;
+    get dataKeyProperty() {
+        return this._dataKeyProperty;
     }
-    createTabGroupDescriptor(tabGroup) {
-        this._currentTabGroup = tabGroup;
-        this._tabs.push(tabGroup);
-        return this;
+    get multiselect() {
+        return this._multiselect;
     }
-    createDefaultGroup() {
-        var _a;
-        this.createDefaultTabGroup();
-        if (((_a = this._currentTabGroup) === null || _a === void 0 ? void 0 : _a.fields.length) === 0) {
-            this.createFieldGroup(EditorDescriptor.defaultGroupName, null);
-        }
+    get autocompleteOpenOnFocus() {
+        return this._autocompleteOpenOnFocus;
     }
-    createDefaultTabGroup() {
-        if (this._tabs.length === 0) {
-            this.createTabGroup(EditorDescriptor.defaultGroupName, 'general.general');
-        }
+    get autocompleteInlineSearch() {
+        return this._autocompleteInlineSearch;
     }
-}
-EditorDescriptor.defaultGroupName = '_default';
-(function (EditorDescriptor) {
-    let TableviewEditorTypeEnum;
-    (function (TableviewEditorTypeEnum) {
-        TableviewEditorTypeEnum[TableviewEditorTypeEnum["None"] = 0] = "None";
-        TableviewEditorTypeEnum[TableviewEditorTypeEnum["View"] = 1] = "View";
-        TableviewEditorTypeEnum[TableviewEditorTypeEnum["Edit"] = 2] = "Edit";
-        TableviewEditorTypeEnum[TableviewEditorTypeEnum["Add"] = 3] = "Add";
-    })(TableviewEditorTypeEnum = EditorDescriptor.TableviewEditorTypeEnum || (EditorDescriptor.TableviewEditorTypeEnum = {}));
-})(EditorDescriptor || (EditorDescriptor = {}));
-class AGenericFieldDescriptor {
-    constructor(editor) {
-        this._config = {};
-        this._editor = editor;
+    get dropdownClassName() {
+        return this._dropdownClassName;
     }
-    get editor() {
-        return this._editor;
+    get modelType() {
+        return this._modelType;
     }
-    get config() {
-        return this._config;
+    withItemsLabelProperty(itemsLabelProperty, translate = false) {
+        this._itemsLabelProperty = itemsLabelProperty;
+        this._itemsLabelTranslate = translate;
+        return this;
     }
-    withConfig(config) {
-        this._config = config;
+    withItemsValueProperty(itemsValueProperty) {
+        this._itemsValueProperty = itemsValueProperty;
+        this._dataKeyProperty = itemsValueProperty;
         return this;
     }
-}
-class AFieldDescriptor extends AGenericFieldDescriptor {
-    constructor(editor, property) {
-        super(editor);
-        this._required = false;
-        this._disabled = false;
-        this._validators = [];
-        this._className = '';
-        this._labelClassName = '';
-        this._inputClassName = '';
-        this._size = FieldDescriptor.SizeEnum.Normal;
-        this._eventsSubject = new Subject();
-        this._property = property;
-        this._label = I18nUtil.getModelPropertyKey(this._editor.model, property);
+    withDataKeyProperty(dataKeyProperty) {
+        this._dataKeyProperty = dataKeyProperty;
+        this._itemsValueProperty = dataKeyProperty;
+        return this;
     }
-    get property() {
-        return this._property;
+    withLookup(lookup, serviceType) {
+        const dataProvider = new LookupDataProvider(this._modelType);
+        if (serviceType) {
+            dataProvider.withServiceType(serviceType);
+        }
+        dataProvider.withLookup(lookup);
+        this._dataProvider = dataProvider;
+        return this;
     }
-    get group() {
-        return this._group;
+    withLookupDataProvider(dataProvider) {
+        this._dataProvider = dataProvider;
+        return this;
     }
-    get label() {
-        return this._label;
+    withMultiselect(multiselect = true) {
+        this._multiselect = multiselect;
+        return this;
     }
-    get placeholder() {
-        return this._placeholder;
+    withDropdownClassName(dropdownClassName) {
+        this._dropdownClassName = dropdownClassName;
+        return this;
     }
-    get helpText() {
-        return this._helpText;
+    asAutocomplete(openOnFocus = false, inlineSearch = false) {
+        this._lookupType = FilterLookupDescriptor.LookupTypeEnum.Autocomplete;
+        this._autocompleteOpenOnFocus = openOnFocus;
+        this._autocompleteInlineSearch = inlineSearch;
+        return this;
     }
-    get required() {
-        return this._required;
+    copy() {
+        const descriptor = new FilterLookupDescriptor(this._property, this._modelType);
+        this.copyFieldsTo(descriptor);
+        return descriptor;
     }
-    get disabled() {
-        return this._disabled;
+    copyFieldsTo(filter) {
+        super.copyFieldsTo(filter);
+        filter._dataProvider = this._dataProvider;
+        filter._lookupType = this._lookupType;
+        filter._itemsLabelProperty = this._itemsLabelProperty;
+        filter._itemsLabelTranslate = this._itemsLabelTranslate;
+        filter._itemsValueProperty = this._itemsValueProperty;
+        filter._dataKeyProperty = this._dataKeyProperty;
+        filter._multiselect = this._multiselect;
+        filter._dropdownClassName = this._dropdownClassName;
+        filter._autocompleteOpenOnFocus = this._autocompleteOpenOnFocus;
+        filter._autocompleteInlineSearch = this._autocompleteInlineSearch;
     }
-    get defaultValue() {
-        return this._defaultValue;
+}
+class FilterLookupEnumDescriptor extends FilterLookupDescriptor {
+    constructor(property, enumType, options, nameAsValue = false, optionsTitlePath) {
+        super(property, null);
+        this._enumType = enumType;
+        if (typeof optionsTitlePath === 'undefined') {
+            optionsTitlePath = TypeUtil.findEnumName(enumType);
+        }
+        const optionEnumValues = Array.isArray(options)
+            ? EnumUtil.fromValuesAsEnumValueArray(enumType, options, nameAsValue, optionsTitlePath !== null && optionsTitlePath !== void 0 ? optionsTitlePath : undefined)
+            : EnumUtil.fromConstantsAsEnumValueArray(enumType, nameAsValue, optionsTitlePath !== null && optionsTitlePath !== void 0 ? optionsTitlePath : undefined);
+        const dataProvider = new LookupDataProvider(null).withLookup(() => of(optionEnumValues));
+        this.withLookupDataProvider(dataProvider);
+        this.withItemsLabelProperty('title', optionsTitlePath !== null);
+        this.withItemsValueProperty('value');
     }
-    get getter() {
-        return this._getter;
+    get enumType() {
+        return this._enumType;
     }
-    get setter() {
-        return this._setter;
+    asAutocomplete(openOnFocus = true) {
+        super.asAutocomplete(openOnFocus, true);
+        return this;
     }
-    get validators() {
-        return this._validators;
+    copy() {
+        const field = new FilterLookupEnumDescriptor(this._property, this._enumType, []);
+        this.copyFieldsTo(field);
+        return field;
     }
-    get requiredExpression() {
-        return this._requiredExpression;
+}
+(function (FilterLookupDescriptor) {
+    let LookupTypeEnum;
+    (function (LookupTypeEnum) {
+        LookupTypeEnum[LookupTypeEnum["Dropdown"] = 0] = "Dropdown";
+        LookupTypeEnum[LookupTypeEnum["Autocomplete"] = 1] = "Autocomplete";
+    })(LookupTypeEnum = FilterLookupDescriptor.LookupTypeEnum || (FilterLookupDescriptor.LookupTypeEnum = {}));
+})(FilterLookupDescriptor || (FilterLookupDescriptor = {}));
+
+class ColumnDescriptor {
+    constructor(table, property) {
+        this._columnType = ColumnDescriptor.TypeEnum.String;
+        this._isSortEnabled = false;
+        this._enumNameAsValue = false;
+        // boolean specifics
+        this._booleanAsIcon = false;
+        this._table = table;
+        this._property = property;
     }
-    get disabledExpression() {
-        return this._disabledExpression;
+    get columnType() {
+        return this._columnType;
     }
-    get hiddenExpression() {
-        return this._hiddenExpression;
+    get title() {
+        return this._title;
     }
-    get className() {
-        return this._className;
+    get jsonPath() {
+        return this._jsonPath;
     }
-    get labelClassName() {
-        return this._labelClassName;
+    get isSortEnabled() {
+        return this._isSortEnabled;
     }
-    get inputClassName() {
-        return this._inputClassName;
+    get filterDescriptor() {
+        return this._filterDescriptor;
     }
-    get size() {
-        return this._size;
+    get displayFormat() {
+        return this._displayFormat;
     }
-    get isSizeSmall() {
-        return this._size === FieldDescriptor.SizeEnum.Small;
+    get table() {
+        return this._table;
     }
-    get isSizeLarge() {
-        return this._size === FieldDescriptor.SizeEnum.Large;
+    get property() {
+        return this._property;
     }
-    withLabel(label) {
-        this._label = label;
-        return this;
+    get enumType() {
+        return this._enumType;
     }
-    withPlaceholder(placeholder) {
-        this._placeholder = placeholder;
-        return this;
+    get enumTitlePath() {
+        return this._enumTitlePath;
     }
-    withHelpText(helpText) {
-        this._helpText = helpText;
-        return this;
+    get enumNameAsValue() {
+        return this._enumNameAsValue;
     }
-    withRequired(required = true, requiredExpression) {
-        this._required = required;
-        if (requiredExpression) {
-            this._requiredExpression = requiredExpression;
-        }
-        return this;
+    get booleanAsIcon() {
+        return this._booleanAsIcon;
     }
-    withDisabled(disabled = true, disabledExpression) {
-        this._disabled = disabled;
-        if (disabledExpression) {
-            this._disabledExpression = disabledExpression;
-        }
-        return this;
+    get booleanYes() {
+        return this._booleanYes;
     }
-    withHidden(hiddenExpression) {
-        this._hiddenExpression = hiddenExpression;
+    get booleanNo() {
+        return this._booleanNo;
+    }
+    get objectModelType() {
+        return this._objectModelType;
+    }
+    get objectTitleProperty() {
+        return this._objectTitleProperty;
+    }
+    get customComponentType() {
+        return this._customComponentType;
+    }
+    asType(type = ColumnDescriptor.TypeEnum.String) {
+        this._columnType = type;
         return this;
     }
-    withDefaultValue(defaultValue) {
-        this._defaultValue = defaultValue;
+    asNumber(displayFormat = '1.0-0') {
+        this._columnType = ColumnDescriptor.TypeEnum.Number;
+        this._displayFormat = displayFormat;
         return this;
     }
-    withGetter(getter) {
-        this._getter = getter;
+    asDate(displayFormat = 'dd.MM.yyyy') {
+        this._columnType = ColumnDescriptor.TypeEnum.Date;
+        this._displayFormat = displayFormat;
         return this;
     }
-    withSetter(setter) {
-        this._setter = setter;
+    asBoolean(yes, no, asIcon = false) {
+        this._columnType = ColumnDescriptor.TypeEnum.Boolean;
+        this._booleanAsIcon = asIcon;
+        this._booleanYes = yes;
+        this._booleanNo = no;
         return this;
     }
-    withValidator(name, expression, message) {
-        this._validators.push(new FieldValidator(name, expression, message));
+    asEnum(enumType, nameAsValue = false, titlePath) {
+        this._columnType = ColumnDescriptor.TypeEnum.Enum;
+        this._enumType = enumType;
+        this._enumNameAsValue = nameAsValue;
+        if (typeof titlePath === 'undefined') {
+            titlePath = TypeUtil.findEnumName(enumType);
+        }
+        this._enumTitlePath = titlePath;
         return this;
     }
-    withClassName(className, labelClassName = '', inputClassName = '') {
-        this._className = className;
-        this._labelClassName = labelClassName;
-        this._inputClassName = inputClassName;
+    asCustomComponent(customComponentType) {
+        this._columnType = ColumnDescriptor.TypeEnum.Custom;
+        this._customComponentType = customComponentType;
         return this;
     }
-    withSize(size = FieldDescriptor.SizeEnum.Normal) {
-        this._size = size;
+    withObjectProperty(modelType, titleProperty) {
+        var _a;
+        this._objectModelType = modelType;
+        if (!titleProperty) {
+            this._objectTitleProperty = (_a = ModelUtil.findTitleAttribute(modelType)) !== null && _a !== void 0 ? _a : undefined;
+        }
+        else {
+            this._objectTitleProperty = titleProperty;
+        }
         return this;
     }
-    nextEvent(type, cmpType, cmpInstance, data) {
-        this._eventsSubject.next(new MngFormFieldEvent(type, cmpType, cmpInstance, data));
+    withTitle(title) {
+        this._title = title;
+        return this;
     }
-    get events$() {
-        return this._eventsSubject.asObservable();
+    withJsonPath(path) {
+        this._jsonPath = path;
+        return this;
     }
-    copyFieldsTo(obj) {
-        obj._label = this._label;
-        obj._placeholder = this._placeholder;
-        obj._helpText = this._helpText;
-        obj._required = this._required;
-        obj._disabled = this._disabled;
-        obj._defaultValue = this._defaultValue;
-        obj._requiredExpression = this._requiredExpression;
-        obj._hiddenExpression = this._hiddenExpression;
-        obj._disabledExpression = this._disabledExpression;
-        obj._className = this._className;
-        obj._size = this.size;
-        obj._getter = this._getter;
-        obj._setter = this._setter;
-        obj._validators = this._validators;
-    }
-}
-var FieldDescriptor;
-(function (FieldDescriptor) {
-    let SizeEnum;
-    (function (SizeEnum) {
-        SizeEnum[SizeEnum["Small"] = 0] = "Small";
-        SizeEnum[SizeEnum["Normal"] = 1] = "Normal";
-        SizeEnum[SizeEnum["Large"] = 2] = "Large";
-    })(SizeEnum = FieldDescriptor.SizeEnum || (FieldDescriptor.SizeEnum = {}));
-})(FieldDescriptor || (FieldDescriptor = {}));
-class FieldInputDescriptor extends AFieldDescriptor {
-    constructor(editor, property) {
-        super(editor, property);
-        this._fieldType = FieldInputDescriptor.TypeEnum.Text;
-        this._numberUseGrouping = true;
-        // radio specific properties
-        this._radioOptions = [];
-        this._datePickerShowTime = false;
-    }
-    get fieldType() {
-        return this._fieldType;
-    }
-    get rows() {
-        return this._rows;
-    }
-    get numberMin() {
-        return this._numberMin;
-    }
-    get numberMax() {
-        return this._numberMax;
-    }
-    get numberStep() {
-        return this._numberStep;
-    }
-    get numberMinFractionDigits() {
-        return this._numberMinFractionDigits;
-    }
-    get numberMaxFractionDigits() {
-        return this._numberMaxFractionDigits;
-    }
-    get numberUseGrouping() {
-        return this._numberUseGrouping;
-    }
-    get radioOptions() {
-        return this._radioOptions;
-    }
-    get datePickerFormat() {
-        return this._datePickerFormat;
+    withFilter(forceSimple = false) {
+        this._filterDescriptor = new FilterDescriptor(this._property);
+        let filterType;
+        if (!forceSimple && this._objectModelType) {
+            return this.withFilterLookup();
+        }
+        switch (this._columnType) {
+            case ColumnDescriptor.TypeEnum.Number:
+                filterType = FilterDescriptor.TypeEnum.Number;
+                break;
+            case ColumnDescriptor.TypeEnum.Boolean:
+                filterType = FilterDescriptor.TypeEnum.Boolean;
+                break;
+            case ColumnDescriptor.TypeEnum.Date:
+                filterType = FilterDescriptor.TypeEnum.Date;
+                break;
+            case ColumnDescriptor.TypeEnum.Enum:
+                if (!forceSimple) {
+                    return this.withFilterLookupEnum();
+                }
+                else {
+                    filterType = FilterDescriptor.TypeEnum.String;
+                    break;
+                }
+            case ColumnDescriptor.TypeEnum.String:
+            case ColumnDescriptor.TypeEnum.Custom:
+            default:
+                filterType = FilterDescriptor.TypeEnum.String;
+                break;
+        }
+        this._filterDescriptor.asFilterType(filterType);
+        return this._filterDescriptor;
     }
-    get datePickerMin() {
-        return this._datePickerMin;
+    withFilterLookup() {
+        var _a;
+        const filterDescriptor = new FilterLookupDescriptor(this._property, (_a = this._objectModelType) !== null && _a !== void 0 ? _a : null);
+        this._filterDescriptor = filterDescriptor;
+        return filterDescriptor;
     }
-    get datePickerMax() {
-        return this._datePickerMax;
+    withFilterLookupEnum(options) {
+        if (this._columnType !== ColumnDescriptor.TypeEnum.Enum || !this._enumType) {
+            throw new Error(`Column ${this._property} is not of type enum or enum type is undefined.`);
+        }
+        const filterDescriptor = new FilterLookupEnumDescriptor(this._property, this._enumType, options, this._enumNameAsValue, this._enumTitlePath);
+        this._filterDescriptor = filterDescriptor;
+        return filterDescriptor;
     }
-    get datePickerShowTime() {
-        return this._datePickerShowTime;
+    withSort(isEnabled = true) {
+        this._isSortEnabled = isEnabled;
+        return this;
     }
-    get maxLength() {
-        return this._maxLength;
+    copy() {
+        var _a;
+        const descriptor = new ColumnDescriptor(this._table, this._property);
+        descriptor._jsonPath = this._jsonPath;
+        descriptor._title = this._title;
+        descriptor._isSortEnabled = this._isSortEnabled;
+        descriptor._columnType = this._columnType;
+        descriptor._filterDescriptor = (_a = this._filterDescriptor) === null || _a === void 0 ? void 0 : _a.copy();
+        descriptor._enumType = this._enumType;
+        descriptor._enumTitlePath = this._enumTitlePath;
+        descriptor._enumNameAsValue = this._enumNameAsValue;
+        descriptor._booleanAsIcon = this._booleanAsIcon;
+        descriptor._booleanYes = this._booleanYes;
+        descriptor._booleanNo = this._booleanNo;
+        descriptor._objectModelType = this._objectModelType;
+        descriptor._objectTitleProperty = this._objectTitleProperty;
+        return descriptor;
     }
-    get minLength() {
-        return this._minLength;
+}
+(function (ColumnDescriptor) {
+    let TypeEnum;
+    (function (TypeEnum) {
+        TypeEnum[TypeEnum["String"] = 0] = "String";
+        TypeEnum[TypeEnum["Number"] = 1] = "Number";
+        TypeEnum[TypeEnum["Boolean"] = 2] = "Boolean";
+        TypeEnum[TypeEnum["Date"] = 3] = "Date";
+        TypeEnum[TypeEnum["Enum"] = 4] = "Enum";
+        TypeEnum[TypeEnum["Custom"] = 5] = "Custom";
+    })(TypeEnum = ColumnDescriptor.TypeEnum || (ColumnDescriptor.TypeEnum = {}));
+})(ColumnDescriptor || (ColumnDescriptor = {}));
+
+class EditorDescriptor {
+    constructor(modelType, idProperty, titleProperty, tableviewEditorType = EditorDescriptor.TableviewEditorTypeEnum.None) {
+        this._tabs = [];
+        this._groups = [];
+        this._fields = [];
+        this._disabled = false;
+        this._model = new ModelDescriptor(modelType, idProperty, titleProperty);
+        this._tableviewEditorType = tableviewEditorType;
     }
-    get pattern() {
-        return this._pattern;
+    get model() {
+        return this._model;
     }
-    get mask() {
-        return this._mask;
+    get tabs() {
+        return this._tabs;
     }
-    get slotChar() {
-        return this._slotChar;
+    get fields() {
+        return this._fields;
     }
-    get customComponentName() {
-        return this._customComponentName;
+    get tableviewEditorType() {
+        return this._disabled;
     }
-    asHidden() {
-        this._fieldType = FieldInputDescriptor.TypeEnum.Hidden;
-        return this;
+    get disabled() {
+        return this._disabled;
     }
-    asText(minLength, maxLength, pattern, isEmail) {
-        this._fieldType = FieldInputDescriptor.TypeEnum.Text;
-        this._minLength = minLength;
-        this._maxLength = maxLength;
-        this._pattern = pattern;
-        if (isEmail) {
-            this.withValidator('email', control => !Validators.email(control));
+    createTabGroup(name, title) {
+        const tabGroup = new FieldTabGroupDescriptor(this, name);
+        if (!title) {
+            title = I18nUtil.getModelTabKey(this.model, name);
         }
-        return this;
-    }
-    asTextarea(rows = 3, minLength, maxLength, pattern) {
-        this._fieldType = FieldInputDescriptor.TypeEnum.Textarea;
-        this._rows = rows;
-        this._minLength = minLength;
-        this._maxLength = maxLength;
-        this._pattern = pattern;
-        return this;
+        tabGroup.withTitle(title);
+        this.createTabGroupDescriptor(tabGroup);
+        return tabGroup;
     }
-    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;
+    createFieldGroup(name, title) {
+        const fieldGroup = new FieldGroupDescriptor(this, name);
+        if (title !== null) {
+            if (!title) {
+                title = I18nUtil.getModelGroupKey(this.model, name);
+            }
+            fieldGroup.withTitle(title);
+        }
+        this.createFieldGroupDescriptor(fieldGroup);
+        return fieldGroup;
     }
-    asSwitch() {
-        this._fieldType = FieldInputDescriptor.TypeEnum.Switch;
+    addFieldDescriptor(field) {
+        var _a;
+        this.createDefaultGroup();
+        this._fields.push(field);
+        (_a = this._currentGroup) === null || _a === void 0 ? void 0 : _a.addField(field);
         return this;
     }
-    asRadio(options, optionsTitlePath) {
-        this._fieldType = FieldInputDescriptor.TypeEnum.Radio;
-        this._radioOptions = options.map(o => ({ value: o, title: `${optionsTitlePath ? `${optionsTitlePath}.` : ''}${o}` }));
-        return this;
+    addField(property) {
+        const field = new FieldInputDescriptor(this, property);
+        this.addFieldDescriptor(field);
+        return field;
     }
-    asRadioFromEnum(enumType, optionsTitlePath, values, nameAsValue = false) {
-        this._fieldType = FieldInputDescriptor.TypeEnum.Radio;
-        if (typeof optionsTitlePath === 'undefined') {
-            optionsTitlePath = TypeUtil.findEnumName(enumType);
+    removeField(property) {
+        const fieldIdx = this._fields.findIndex(f => f.property === property);
+        if (fieldIdx < 0) {
+            throw new Error(`Field ${property} does not exist.`);
         }
-        this._radioOptions = Array.isArray(values)
-            ? EnumUtil.fromValuesAsEnumValueArray(enumType, values, nameAsValue, optionsTitlePath !== null && optionsTitlePath !== void 0 ? optionsTitlePath : undefined)
-            : EnumUtil.fromConstantsAsEnumValueArray(enumType, nameAsValue, optionsTitlePath !== null && optionsTitlePath !== void 0 ? optionsTitlePath : undefined);
-        return this;
-    }
-    asDatePicker(format, min, max, showTime) {
-        this._fieldType = FieldInputDescriptor.TypeEnum.Datepicker;
-        this._datePickerFormat = format ? format : 'dd.mm.yy';
-        this._datePickerMin = min;
-        this._datePickerMax = max;
-        this._datePickerShowTime = showTime !== null && showTime !== void 0 ? showTime : false;
-        return this;
-    }
-    asMask(mask, slotChar) {
-        this._fieldType = FieldInputDescriptor.TypeEnum.Mask;
-        this._mask = mask;
-        this._slotChar = slotChar;
+        const field = this._fields[fieldIdx];
+        if (field.group) {
+            const groupFieldIdx = field.group.fields.findIndex(f => f instanceof AFieldDescriptor && f.property === property);
+            if (groupFieldIdx >= 0) {
+                field.group.fields.splice(groupFieldIdx, 1);
+            }
+        }
+        this._fields.splice(fieldIdx, 1);
         return this;
     }
-    asCustomComponent(customComponentName) {
-        this._fieldType = FieldInputDescriptor.TypeEnum.Custom;
-        this._customComponentName = customComponentName;
-        return this;
+    getField(property) {
+        var _a;
+        return (_a = this._fields.find(f => f.property === property)) !== null && _a !== void 0 ? _a : null;
     }
-    copy() {
-        const field = new FieldInputDescriptor(this._editor, this._property);
-        this.copyFieldsTo(field);
-        field._fieldType = this._fieldType;
-        field._rows = this._rows;
-        field._numberMin = this._numberMin;
-        field._numberMax = this._numberMax;
-        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;
-        field._datePickerMax = this._datePickerMax;
-        field._datePickerShowTime = this._datePickerShowTime;
-        field._maxLength = this._maxLength;
-        field._minLength = this._minLength;
-        field._pattern = this._pattern;
-        field._mask = this._mask;
-        field._slotChar = this._slotChar;
-        field._customComponentName = this._customComponentName;
+    addFieldLookup(property, modelType) {
+        const field = new FieldLookupDescriptor(this, property, modelType);
+        this.addFieldDescriptor(field);
         return field;
     }
-}
-(function (FieldInputDescriptor) {
-    let TypeEnum;
-    (function (TypeEnum) {
-        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 {
-    constructor(editor, property, modelType) {
-        super(editor, property);
-        this._lookupType = FieldLookupDescriptor.LookupTypeEnum.Dropdown;
-        this._itemsLabelTranslate = false;
-        this._modelType = modelType;
-        ModelUtil.trySetLookupItemsProperties(this);
-    }
-    get lookupType() {
-        return this._lookupType;
-    }
-    get itemsLabelProperty() {
-        return this._itemsLabelProperty;
-    }
-    get itemsLabelTranslate() {
-        return this._itemsLabelTranslate;
-    }
-    get itemsValueProperty() {
-        return this._itemsValueProperty;
-    }
-    get itemsDisabledProperty() {
-        return this._itemsDisabledProperty;
-    }
-    get dataKeyProperty() {
-        return this._dataKeyProperty;
-    }
-    get dataProvider() {
-        return this._dataProvider;
-    }
-    get lookupTableDataProvider() {
-        return this._lookupTableDataProvider;
-    }
-    get modelType() {
-        return this._modelType;
-    }
-    get lookupTableDescriptor() {
-        return this._lookupTableDescriptor;
+    addFieldLookupEnum(property, enumType, options, nameAsValue = false, optionsTitlePath) {
+        const field = new FieldLookupEnumDescriptor(this, property, enumType, options, nameAsValue, optionsTitlePath);
+        this.addFieldDescriptor(field);
+        return field;
     }
-    withItemsLabelProperty(itemsLabelProperty, translate = false) {
-        this._itemsLabelProperty = itemsLabelProperty;
-        this._itemsLabelTranslate = translate;
-        return this;
+    addFieldManyEditor(property, tableviewDescriptor) {
+        const field = new FieldManyEditorDescriptor(this, property, tableviewDescriptor);
+        this.addFieldDescriptor(field);
+        return field;
     }
-    withItemsValueProperty(itemsValueProperty) {
-        this._itemsValueProperty = itemsValueProperty;
-        this._dataKeyProperty = undefined;
-        return this;
+    addFieldManyToManyEditor(property, mainTableDescriptor, lookupTableDescriptor) {
+        const field = new FieldManyToManyEditorDescriptor(this, property, mainTableDescriptor, lookupTableDescriptor);
+        this.addFieldDescriptor(field);
+        return field;
     }
-    withItemsDisabledProperty(itemsDisabledProperty) {
-        this._itemsDisabledProperty = itemsDisabledProperty;
+    withDisabled(disabled = true) {
+        this._disabled = disabled;
         return this;
     }
-    withDataKeyProperty(property) {
-        this._dataKeyProperty = property;
-        this._itemsValueProperty = undefined;
-        return this;
+    addValidator(name, expression) {
+        if (this._currentGroup) {
+            this._currentGroup.withValidator(name, expression);
+        }
     }
-    withLookup(lookup, serviceType) {
-        const dataProvider = new LookupDataProvider(this._modelType);
-        if (serviceType) {
-            dataProvider.withServiceType(serviceType);
+    copy() {
+        const editor = new EditorDescriptor(this.model.type, this.model.idPropertyName, this.model.titlePropertyName);
+        for (const tabGroup of this._tabs) {
+            editor.createTabGroupDescriptor(tabGroup.copy());
         }
-        dataProvider.withLookup(lookup);
-        this._dataProvider = dataProvider;
+        for (const tabGroup of editor._tabs) {
+            for (const fieldGroup of tabGroup.fields) {
+                editor._fields.push(...fieldGroup.fields);
+            }
+            editor._groups.push(...tabGroup.fields);
+        }
+        editor._currentTabGroup = editor._tabs[editor._tabs.length - 1];
+        editor._currentGroup = editor._currentTabGroup.fields[editor._currentTabGroup.fields.length - 1];
+        editor._disabled = this._disabled;
+        return editor;
+    }
+    createFieldGroupDescriptor(fieldGroup) {
+        var _a;
+        this.createDefaultTabGroup();
+        this._currentGroup = fieldGroup;
+        this._groups.push(fieldGroup);
+        (_a = this._currentTabGroup) === null || _a === void 0 ? void 0 : _a.addField(fieldGroup);
         return this;
     }
-    withLookupDataProvider(dataProvider) {
-        this._dataProvider = dataProvider;
+    createTabGroupDescriptor(tabGroup) {
+        this._currentTabGroup = tabGroup;
+        this._tabs.push(tabGroup);
         return this;
     }
-    withConfig(config) {
-        return super.withConfig(config);
+    createDefaultGroup() {
+        var _a;
+        this.createDefaultTabGroup();
+        if (((_a = this._currentTabGroup) === null || _a === void 0 ? void 0 : _a.fields.length) === 0) {
+            this.createFieldGroup(EditorDescriptor.defaultGroupName, null);
+        }
     }
-    asAutocomplete() {
-        this._lookupType = FieldLookupDescriptor.LookupTypeEnum.Autocomplete;
-        return this;
+    createDefaultTabGroup() {
+        if (this._tabs.length === 0) {
+            this.createTabGroup(EditorDescriptor.defaultGroupName, 'general.general');
+        }
     }
-    asDialog(lookupTableDescriptor, tableDataProvider) {
-        this._lookupType = FieldLookupDescriptor.LookupTypeEnum.Dialog;
-        this._lookupTableDescriptor = lookupTableDescriptor;
-        this._lookupTableDataProvider = tableDataProvider;
-        return this;
+}
+EditorDescriptor.defaultGroupName = '_default';
+(function (EditorDescriptor) {
+    let TableviewEditorTypeEnum;
+    (function (TableviewEditorTypeEnum) {
+        TableviewEditorTypeEnum[TableviewEditorTypeEnum["None"] = 0] = "None";
+        TableviewEditorTypeEnum[TableviewEditorTypeEnum["View"] = 1] = "View";
+        TableviewEditorTypeEnum[TableviewEditorTypeEnum["Edit"] = 2] = "Edit";
+        TableviewEditorTypeEnum[TableviewEditorTypeEnum["Add"] = 3] = "Add";
+    })(TableviewEditorTypeEnum = EditorDescriptor.TableviewEditorTypeEnum || (EditorDescriptor.TableviewEditorTypeEnum = {}));
+})(EditorDescriptor || (EditorDescriptor = {}));
+
+class MngFormEditorSubmitEvent {
+    constructor(formItem) {
+        this.formItem = formItem;
+        this.success = true;
     }
-    copy() {
-        const field = new FieldLookupDescriptor(this._editor, this._property, this._modelType);
-        this.copyFieldsTo(field);
-        field._lookupType = this._lookupType;
-        field._itemsLabelProperty = this._itemsLabelProperty;
-        field._itemsLabelTranslate = this._itemsLabelTranslate;
-        field._itemsValueProperty = this._itemsValueProperty;
-        field._itemsDisabledProperty = this._itemsDisabledProperty;
-        field._dataKeyProperty = this._dataKeyProperty;
-        field._dataProvider = this._dataProvider;
-        field._lookupTableDescriptor = this._lookupTableDescriptor;
-        return field;
+}
+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;
     }
 }
-(function (FieldLookupDescriptor) {
-    let LookupTypeEnum;
-    (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 {
-    constructor(editor, property, enumType, options, nameAsValue = false, optionsTitlePath) {
-        super(editor, property, null);
-        this._nameAsValue = false;
-        this._enumType = enumType;
-        this._nameAsValue = nameAsValue;
-        if (typeof optionsTitlePath === 'undefined') {
-            optionsTitlePath = TypeUtil.findEnumName(enumType);
-        }
-        this._optionEnumValues = Array.isArray(options)
-            ? EnumUtil.fromValuesAsEnumValueArray(enumType, options, nameAsValue, optionsTitlePath !== null && optionsTitlePath !== void 0 ? optionsTitlePath : undefined)
-            : EnumUtil.fromConstantsAsEnumValueArray(enumType, nameAsValue, optionsTitlePath !== null && optionsTitlePath !== void 0 ? optionsTitlePath : undefined);
-        const dataProvider = new LookupDataProvider(null).withLookup(() => of(this._optionEnumValues));
-        this.withLookupDataProvider(dataProvider);
-        this.withItemsLabelProperty('title', optionsTitlePath !== null);
-        this.withItemsValueProperty('value');
-        this.withItemsDisabledProperty('disabled');
+
+class AGenericFieldDescriptor {
+    constructor(editor) {
+        this._config = {};
+        this._editor = editor;
+    }
+    get editor() {
+        return this._editor;
     }
-    get enumType() {
-        return this._enumType;
+    get config() {
+        return this._config;
     }
-    withDisabledOptions(...disabledOptions) {
-        for (const disabledOption of disabledOptions) {
-            const disabledOptionValue = this._nameAsValue ? EnumUtil.getConstantName(this._enumType, disabledOption) : disabledOption;
-            if (disabledOptionValue) {
-                const option = this._optionEnumValues.find(o => o.value === disabledOptionValue);
-                if (option) {
-                    option.disabled = true;
-                }
-            }
-        }
+    withConfig(config) {
+        this._config = config;
         return this;
     }
-    copy() {
-        const field = new FieldLookupEnumDescriptor(this._editor, this._property, this._enumType, []);
-        this.copyFieldsTo(field);
-        field._lookupType = this._lookupType;
-        field._itemsLabelProperty = this._itemsLabelProperty;
-        field._itemsValueProperty = this._itemsValueProperty;
-        field._itemsDisabledProperty = this._itemsDisabledProperty;
-        field._dataKeyProperty = this._dataKeyProperty;
-        field._dataProvider = this._dataProvider;
-        return field;
-    }
 }
-class FieldManyToManyEditorDescriptor extends AFieldDescriptor {
-    constructor(editor, property, mainTableDescriptor, lookupTableDescriptor) {
-        super(editor, property);
-        this._fieldType = FieldManyToManyEditorDescriptor.TypeEnum.DialogTableMultiselect;
-        this._lookupTableDataProvider = null;
-        this._actions = [];
-        this._hasLookupExcludeValues = false;
-        this._excludeFilterProperty = '';
-        this._excludeValueProperty = '';
-        this._mainTableDescriptor = mainTableDescriptor;
-        this._lookupTableDescriptor = lookupTableDescriptor;
-        this._actions.push(FieldManyToManyEditorDescriptor.ActionEnum.Add, FieldManyToManyEditorDescriptor.ActionEnum.Delete);
+class AFieldDescriptor extends AGenericFieldDescriptor {
+    constructor(editor, property) {
+        super(editor);
+        this._required = false;
+        this._disabled = false;
+        this._validators = [];
+        this._className = '';
+        this._labelClassName = '';
+        this._inputClassName = '';
+        this._size = FieldDescriptor.SizeEnum.Normal;
+        this._eventsSubject = new Subject();
+        this._property = property;
+        this._label = I18nUtil.getModelPropertyKey(this._editor.model, property);
     }
-    get fieldType() {
-        return this._fieldType;
+    get property() {
+        return this._property;
     }
-    get lookupTableDataProvider() {
-        return this._lookupTableDataProvider;
+    get group() {
+        return this._group;
     }
-    get actions() {
-        return this._actions;
+    get label() {
+        return this._label;
     }
-    get hasLookupExcludeValues() {
-        return this._hasLookupExcludeValues;
+    get placeholder() {
+        return this._placeholder;
     }
-    get excludeFilterProperty() {
-        return this._excludeFilterProperty;
+    get helpText() {
+        return this._helpText;
     }
-    get excludeValueProperty() {
-        return this._excludeValueProperty;
+    get required() {
+        return this._required;
     }
-    get mainTableDescriptor() {
-        return this._mainTableDescriptor;
+    get disabled() {
+        return this._disabled;
     }
-    get lookupTableDescriptor() {
-        return this._lookupTableDescriptor;
+    get defaultValue() {
+        return this._defaultValue;
     }
-    withLookup(getAll, serviceType) {
-        const dataProvider = new TableviewDataProvider(this._mainTableDescriptor.model.type);
-        if (serviceType) {
-            dataProvider.withServiceType(serviceType);
-        }
-        dataProvider.withGetAll(getAll);
-        this._lookupTableDataProvider = dataProvider;
-        return this;
+    get getter() {
+        return this._getter;
     }
-    withLookupDataProvider(dataProvider) {
-        this._lookupTableDataProvider = dataProvider;
-        return this;
+    get setter() {
+        return this._setter;
     }
-    withActions(actions = []) {
-        this.actions.push(...actions);
-        return this;
+    get validators() {
+        return this._validators;
     }
-    withLookupExclude(filterProperty, valueProperty, hasLookupExclude = true) {
-        this._hasLookupExcludeValues = hasLookupExclude;
-        this._excludeFilterProperty = filterProperty;
-        this._excludeValueProperty = valueProperty;
-        return this;
+    get requiredExpression() {
+        return this._requiredExpression;
     }
-    copy() {
-        const field = new FieldManyToManyEditorDescriptor(this._editor, this._property, this._mainTableDescriptor.copy(), this._lookupTableDescriptor.copy());
-        this.copyFieldsTo(field);
-        field._fieldType = this._fieldType;
-        field._actions = this._actions.map(a => a);
-        field._lookupTableDataProvider = this._lookupTableDataProvider;
-        field._hasLookupExcludeValues = this._hasLookupExcludeValues;
-        field._excludeFilterProperty = this._excludeFilterProperty;
-        field._excludeValueProperty = this._excludeValueProperty;
-        return field;
+    get disabledExpression() {
+        return this._disabledExpression;
     }
-}
-(function (FieldManyToManyEditorDescriptor) {
-    let TypeEnum;
-    (function (TypeEnum) {
-        TypeEnum[TypeEnum["DialogTableMultiselect"] = 0] = "DialogTableMultiselect";
-    })(TypeEnum = FieldManyToManyEditorDescriptor.TypeEnum || (FieldManyToManyEditorDescriptor.TypeEnum = {}));
-    let ActionEnum;
-    (function (ActionEnum) {
-        ActionEnum[ActionEnum["Add"] = 0] = "Add";
-        ActionEnum[ActionEnum["Delete"] = 1] = "Delete";
-    })(ActionEnum = FieldManyToManyEditorDescriptor.ActionEnum || (FieldManyToManyEditorDescriptor.ActionEnum = {}));
-})(FieldManyToManyEditorDescriptor || (FieldManyToManyEditorDescriptor = {}));
-class FieldManyEditorDescriptor extends AFieldDescriptor {
-    constructor(editor, property, tableviewDescriptor) {
-        super(editor, property);
-        this._fieldType = FieldManyEditorDescriptor.TypeEnum.DialogEditor;
-        this._fieldActions = [];
-        this._actions = [];
-        // this._modelType = modelType;
-        this._tableviewDescriptor = tableviewDescriptor;
-        this._fieldActions.push(FieldManyEditorDescriptor.ActionEnum.View, FieldManyEditorDescriptor.ActionEnum.Add, FieldManyEditorDescriptor.ActionEnum.Edit, FieldManyEditorDescriptor.ActionEnum.Delete);
+    get hiddenExpression() {
+        return this._hiddenExpression;
     }
-    get fieldType() {
-        return this._fieldType;
+    get className() {
+        return this._className;
     }
-    get fieldActions() {
-        return this._fieldActions;
+    get labelClassName() {
+        return this._labelClassName;
     }
-    get actions() {
-        return this._actions;
+    get inputClassName() {
+        return this._inputClassName;
     }
-    get tableviewDescriptor() {
-        return this._tableviewDescriptor;
+    get size() {
+        return this._size;
     }
-    get tableDescriptor() {
-        return this._tableviewDescriptor.table;
+    get isSizeSmall() {
+        return this._size === FieldDescriptor.SizeEnum.Small;
     }
-    get editorForCreate() {
-        return this._tableviewDescriptor.addEditor;
+    get isSizeLarge() {
+        return this._size === FieldDescriptor.SizeEnum.Large;
     }
-    get editorForRead() {
-        return this._tableviewDescriptor.viewEditor;
+    withLabel(label) {
+        this._label = label;
+        return this;
     }
-    get editorForUpdate() {
-        return this._tableviewDescriptor.editEditor;
+    withPlaceholder(placeholder) {
+        this._placeholder = placeholder;
+        return this;
     }
-    withFieldAction(action) {
-        this._fieldActions.push(action);
+    withHelpText(helpText) {
+        this._helpText = helpText;
         return this;
     }
-    withFieldActions(actions) {
-        this._fieldActions = actions;
+    withRequired(required = true, requiredExpression) {
+        this._required = required;
+        if (requiredExpression) {
+            this._requiredExpression = requiredExpression;
+        }
         return this;
     }
-    withAction(action) {
-        this._actions.push(action);
+    withDisabled(disabled = true, disabledExpression) {
+        this._disabled = disabled;
+        if (disabledExpression) {
+            this._disabledExpression = disabledExpression;
+        }
         return this;
     }
-    copy() {
-        const field = new FieldManyEditorDescriptor(this._editor, this._property, this._tableviewDescriptor.copy());
-        this.copyFieldsTo(field);
-        field._fieldType = this._fieldType;
-        field._fieldActions = this._fieldActions.map(a => a);
-        return field;
+    withHidden(hiddenExpression) {
+        this._hiddenExpression = hiddenExpression;
+        return this;
+    }
+    withDefaultValue(defaultValue) {
+        this._defaultValue = defaultValue;
+        return this;
+    }
+    withGetter(getter) {
+        this._getter = getter;
+        return this;
+    }
+    withSetter(setter) {
+        this._setter = setter;
+        return this;
+    }
+    withValidator(name, expression, message) {
+        this._validators.push(new FieldValidator(name, expression, message));
+        return this;
+    }
+    withClassName(className, labelClassName = '', inputClassName = '') {
+        this._className = className;
+        this._labelClassName = labelClassName;
+        this._inputClassName = inputClassName;
+        return this;
+    }
+    withSize(size = FieldDescriptor.SizeEnum.Normal) {
+        this._size = size;
+        return this;
+    }
+    nextEvent(type, cmpType, cmpInstance, data) {
+        this._eventsSubject.next(new MngFormFieldEvent(type, cmpType, cmpInstance, data));
+    }
+    get events$() {
+        return this._eventsSubject.asObservable();
+    }
+    copyFieldsTo(obj) {
+        obj._label = this._label;
+        obj._placeholder = this._placeholder;
+        obj._helpText = this._helpText;
+        obj._required = this._required;
+        obj._disabled = this._disabled;
+        obj._defaultValue = this._defaultValue;
+        obj._requiredExpression = this._requiredExpression;
+        obj._hiddenExpression = this._hiddenExpression;
+        obj._disabledExpression = this._disabledExpression;
+        obj._className = this._className;
+        obj._size = this.size;
+        obj._getter = this._getter;
+        obj._setter = this._setter;
+        obj._validators = this._validators;
     }
 }
-(function (FieldManyEditorDescriptor) {
-    let TypeEnum;
-    (function (TypeEnum) {
-        TypeEnum[TypeEnum["DialogEditor"] = 0] = "DialogEditor";
-    })(TypeEnum = FieldManyEditorDescriptor.TypeEnum || (FieldManyEditorDescriptor.TypeEnum = {}));
-    let ActionEnum;
-    (function (ActionEnum) {
-        ActionEnum[ActionEnum["View"] = 0] = "View";
-        ActionEnum[ActionEnum["Add"] = 1] = "Add";
-        ActionEnum[ActionEnum["Edit"] = 2] = "Edit";
-        ActionEnum[ActionEnum["Delete"] = 3] = "Delete";
-    })(ActionEnum = FieldManyEditorDescriptor.ActionEnum || (FieldManyEditorDescriptor.ActionEnum = {}));
-})(FieldManyEditorDescriptor || (FieldManyEditorDescriptor = {}));
-class AFieldGroupDescriptor extends AGenericFieldDescriptor {
-    constructor(editor, name) {
-        super(editor);
-        this._fields = [];
-        this._validators = [];
-        this._name = `${this.baseName}${name}`;
-        this._default = name === EditorDescriptor.defaultGroupName;
+var FieldDescriptor;
+(function (FieldDescriptor) {
+    let SizeEnum;
+    (function (SizeEnum) {
+        SizeEnum[SizeEnum["Small"] = 0] = "Small";
+        SizeEnum[SizeEnum["Normal"] = 1] = "Normal";
+        SizeEnum[SizeEnum["Large"] = 2] = "Large";
+    })(SizeEnum = FieldDescriptor.SizeEnum || (FieldDescriptor.SizeEnum = {}));
+})(FieldDescriptor || (FieldDescriptor = {}));
+class FieldInputDescriptor extends AFieldDescriptor {
+    constructor(editor, property) {
+        super(editor, property);
+        this._fieldType = FieldInputDescriptor.TypeEnum.Text;
+        this._numberUseGrouping = true;
+        // radio specific properties
+        this._radioOptions = [];
+        this._datePickerShowTime = false;
     }
-    get title() {
-        return this._title;
+    get fieldType() {
+        return this._fieldType;
     }
-    get validators() {
-        return this._validators;
+    get rows() {
+        return this._rows;
     }
-    get baseName() {
-        return `${this.groupName()}_`;
+    get numberMin() {
+        return this._numberMin;
     }
-    get name() {
-        return this._name;
+    get numberMax() {
+        return this._numberMax;
     }
-    get default() {
-        return this._default;
+    get numberStep() {
+        return this._numberStep;
     }
-    withTitle(title) {
-        this._title = title;
-        return this;
+    get numberMinFractionDigits() {
+        return this._numberMinFractionDigits;
     }
-    withValidator(name, expression) {
-        this._validators.push(new FieldValidator(name, expression, undefined));
-        return this;
+    get numberMaxFractionDigits() {
+        return this._numberMaxFractionDigits;
     }
-}
-class FieldTabGroupDescriptor extends AFieldGroupDescriptor {
-    constructor(editor, name) {
-        super(editor, name);
+    get numberUseGrouping() {
+        return this._numberUseGrouping;
     }
-    get fields() {
-        return this._fields;
+    get radioOptions() {
+        return this._radioOptions;
     }
-    groupName() {
-        return 'tab';
+    get datePickerFormat() {
+        return this._datePickerFormat;
     }
-    addField(field) {
-        this._fields.push(field);
-        return this;
+    get datePickerMin() {
+        return this._datePickerMin;
     }
-    copy() {
-        const tab = new FieldTabGroupDescriptor(this._editor, this.name.substring(this.baseName.length));
-        tab._title = this._title;
-        tab._fields = this.fields.map(f => f.copy());
-        return tab;
+    get datePickerMax() {
+        return this._datePickerMax;
     }
-}
-class FieldGroupDescriptor extends AFieldGroupDescriptor {
-    constructor(editor, name) {
-        super(editor, name);
+    get datePickerShowTime() {
+        return this._datePickerShowTime;
     }
-    get fields() {
-        return this._fields;
+    get maxLength() {
+        return this._maxLength;
     }
-    groupName() {
-        return 'group';
+    get minLength() {
+        return this._minLength;
     }
-    addField(field) {
-        this._fields.push(field);
-        return this;
+    get pattern() {
+        return this._pattern;
     }
-    copy() {
-        const group = new FieldGroupDescriptor(this._editor, this.name.substring(this.baseName.length));
-        group._title = this._title;
-        group._fields = this.fields.map(f => f.copy());
-        return group;
+    get mask() {
+        return this._mask;
     }
-}
-
-class FieldValidator {
-    constructor(name, expression, message, options) {
-        this._name = name;
-        this._expression = expression;
-        this._message = message;
-        this._options = options;
+    get slotChar() {
+        return this._slotChar;
     }
-    get name() {
-        return this._name;
+    get customComponentName() {
+        return this._customComponentName;
     }
-    get expression() {
-        return this._expression;
+    asHidden() {
+        this._fieldType = FieldInputDescriptor.TypeEnum.Hidden;
+        return this;
     }
-    get message() {
-        return this._message;
+    asText(minLength, maxLength, pattern, isEmail) {
+        this._fieldType = FieldInputDescriptor.TypeEnum.Text;
+        this._minLength = minLength;
+        this._maxLength = maxLength;
+        this._pattern = pattern;
+        if (isEmail) {
+            this.withValidator('email', control => !Validators.email(control));
+        }
+        return this;
     }
-    get options() {
-        return this._options;
+    asTextarea(rows = 3, minLength, maxLength, pattern) {
+        this._fieldType = FieldInputDescriptor.TypeEnum.Textarea;
+        this._rows = rows;
+        this._minLength = minLength;
+        this._maxLength = maxLength;
+        this._pattern = pattern;
+        return this;
     }
-}
-
-class ModelDescriptor {
-    constructor(modelType, idProperty, titleProperty) {
-        var _a, _b;
-        this._type = modelType;
-        this._idPropertyName = (_a = idProperty !== null && idProperty !== void 0 ? idProperty : ModelUtil.findIdAttribute(modelType)) !== null && _a !== void 0 ? _a : undefined;
-        this._titlePropertyName = (_b = titleProperty !== null && titleProperty !== void 0 ? titleProperty : ModelUtil.findTitleAttribute(modelType)) !== null && _b !== void 0 ? _b : undefined;
-        this._typeName = TypeUtil.findTypeName(this._type);
+    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;
     }
-    get type() {
-        return this._type;
+    asSwitch() {
+        this._fieldType = FieldInputDescriptor.TypeEnum.Switch;
+        return this;
     }
-    get typeName() {
-        return this._typeName;
+    asRadio(options, optionsTitlePath) {
+        this._fieldType = FieldInputDescriptor.TypeEnum.Radio;
+        this._radioOptions = options.map(o => ({ value: o, title: `${optionsTitlePath ? `${optionsTitlePath}.` : ''}${o}` }));
+        return this;
     }
-    get idPropertyName() {
-        return this._idPropertyName;
+    asRadioFromEnum(enumType, optionsTitlePath, values, nameAsValue = false) {
+        this._fieldType = FieldInputDescriptor.TypeEnum.Radio;
+        if (typeof optionsTitlePath === 'undefined') {
+            optionsTitlePath = TypeUtil.findEnumName(enumType);
+        }
+        this._radioOptions = Array.isArray(values)
+            ? EnumUtil.fromValuesAsEnumValueArray(enumType, values, nameAsValue, optionsTitlePath !== null && optionsTitlePath !== void 0 ? optionsTitlePath : undefined)
+            : EnumUtil.fromConstantsAsEnumValueArray(enumType, nameAsValue, optionsTitlePath !== null && optionsTitlePath !== void 0 ? optionsTitlePath : undefined);
+        return this;
     }
-    get titlePropertyName() {
-        return this._titlePropertyName;
+    asDatePicker(format, min, max, showTime) {
+        this._fieldType = FieldInputDescriptor.TypeEnum.Datepicker;
+        this._datePickerFormat = format ? format : 'dd.mm.yy';
+        this._datePickerMin = min;
+        this._datePickerMax = max;
+        this._datePickerShowTime = showTime !== null && showTime !== void 0 ? showTime : false;
+        return this;
     }
-    withIdPropertyName(idProperty) {
-        this._idPropertyName = idProperty;
+    asMask(mask, slotChar) {
+        this._fieldType = FieldInputDescriptor.TypeEnum.Mask;
+        this._mask = mask;
+        this._slotChar = slotChar;
         return this;
     }
-    withTitlePropertyName(titleProperty) {
-        this._titlePropertyName = titleProperty;
+    asCustomComponent(customComponentName) {
+        this._fieldType = FieldInputDescriptor.TypeEnum.Custom;
+        this._customComponentName = customComponentName;
         return this;
     }
     copy() {
-        const model = new ModelDescriptor(this._type, this._idPropertyName, this._titlePropertyName);
-        return model;
+        const field = new FieldInputDescriptor(this._editor, this._property);
+        this.copyFieldsTo(field);
+        field._fieldType = this._fieldType;
+        field._rows = this._rows;
+        field._numberMin = this._numberMin;
+        field._numberMax = this._numberMax;
+        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;
+        field._datePickerMax = this._datePickerMax;
+        field._datePickerShowTime = this._datePickerShowTime;
+        field._maxLength = this._maxLength;
+        field._minLength = this._minLength;
+        field._pattern = this._pattern;
+        field._mask = this._mask;
+        field._slotChar = this._slotChar;
+        field._customComponentName = this._customComponentName;
+        return field;
     }
 }
-
-class TableDescriptor {
-    constructor(modelType, idProperty, titleProperty) {
-        this._filterDisplay = TableDescriptor.FilterDisplayEnum.Menu;
-        this._paginationMode = TableDescriptor.PaginationModeEnum.Pagination;
-        this._columns = [];
-        this._hideHeader = false;
-        this._hasDefaultSort = false;
-        this._defaultSortProperty = [];
-        this._defaultSortAsc = [];
-        this._rowHeight = 45;
-        this._tableFullHeightOffset = 315;
-        this._model = new ModelDescriptor(modelType, idProperty, titleProperty);
+(function (FieldInputDescriptor) {
+    let TypeEnum;
+    (function (TypeEnum) {
+        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 {
+    constructor(editor, property, modelType) {
+        super(editor, property);
+        this._lookupType = FieldLookupDescriptor.LookupTypeEnum.Dropdown;
+        this._itemsLabelTranslate = false;
+        this._dropdownClassName = 'mng-filter-lookup-dropdown';
+        this._autocompleteOpenOnFocus = false;
+        this._autocompleteInlineSearch = false;
+        this._modelType = modelType;
+        ModelUtil.trySetLookupItemsProperties(this);
     }
-    get filterDisplay() {
-        return this._filterDisplay;
+    get lookupType() {
+        return this._lookupType;
     }
-    get paginationMode() {
-        return this._paginationMode;
+    get itemsLabelProperty() {
+        return this._itemsLabelProperty;
     }
-    get columns() {
-        return this._columns;
+    get itemsLabelTranslate() {
+        return this._itemsLabelTranslate;
     }
-    get title() {
-        return this._title;
+    get itemsValueProperty() {
+        return this._itemsValueProperty;
     }
-    get hideHeader() {
-        return this._hideHeader;
+    get itemsDisabledProperty() {
+        return this._itemsDisabledProperty;
     }
     get dataKeyProperty() {
         return this._dataKeyProperty;
     }
-    get hasDefaultSort() {
-        return this._hasDefaultSort;
-    }
-    get defaultSortProperty() {
-        return this._defaultSortProperty;
-    }
-    get defaultSortAsc() {
-        return this._defaultSortAsc;
-    }
-    get rowHeight() {
-        return this._rowHeight;
-    }
-    get tableFullHeightOffset() {
-        return this._tableFullHeightOffset;
-    }
-    get model() {
-        return this._model;
-    }
-    addColumnDescriptor(column) {
-        this._columns.push(column);
-        this.setDataKeyFromColumn();
-        return this;
-    }
-    addColumn(property) {
-        const column = new ColumnDescriptor(this, property);
-        this._columns.push(column);
-        this.setDataKeyFromColumn();
-        return column;
+    get dataProvider() {
+        return this._dataProvider;
     }
-    addColumnNumber(property, displayFormat) {
-        const column = new ColumnDescriptor(this, property);
-        column.asNumber(displayFormat);
-        this._columns.push(column);
-        this.setDataKeyFromColumn();
-        return column;
+    get autocompleteOpenOnFocus() {
+        return this._autocompleteOpenOnFocus;
     }
-    addColumnDate(property, displayFormat) {
-        const column = new ColumnDescriptor(this, property);
-        column.asDate(displayFormat);
-        this._columns.push(column);
-        this.setDataKeyFromColumn();
-        return column;
+    get autocompleteInlineSearch() {
+        return this._autocompleteInlineSearch;
     }
-    addColumnBoolean(property, yes, no, asIcon = false) {
-        const column = new ColumnDescriptor(this, property);
-        column.asBoolean(yes, no, asIcon);
-        this._columns.push(column);
-        this.setDataKeyFromColumn();
-        return column;
+    get dropdownClassName() {
+        return this._dropdownClassName;
     }
-    addColumnEnum(property, enumType, nameAsValue = false, titlePath) {
-        const column = new ColumnDescriptor(this, property);
-        column.asEnum(enumType, nameAsValue, titlePath);
-        this._columns.push(column);
-        this.setDataKeyFromColumn();
-        return column;
+    get modelType() {
+        return this._modelType;
     }
-    addColumnObject(property, modelType, displayProperty) {
-        const column = new ColumnDescriptor(this, property);
-        column.withModelType(modelType);
-        column.withDisplayPropertyPath(displayProperty);
-        this._columns.push(column);
-        this.setDataKeyFromColumn();
-        return column;
+    get dialogTableDescriptor() {
+        return this._dialogTableDescriptor;
     }
-    withFilterDisplay(filterDisplayType) {
-        this._filterDisplay = filterDisplayType;
-        return this;
+    get dialogTableDataProvider() {
+        return this._dialogTableDataProvider;
     }
-    withPaginationMode(paginationMode) {
-        this._paginationMode = paginationMode;
+    withItemsLabelProperty(itemsLabelProperty, translate = false) {
+        this._itemsLabelProperty = itemsLabelProperty;
+        this._itemsLabelTranslate = translate;
         return this;
     }
-    withTitle(title) {
-        this._title = title;
+    withItemsValueProperty(itemsValueProperty) {
+        this._itemsValueProperty = itemsValueProperty;
+        this._dataKeyProperty = undefined;
         return this;
     }
-    withHideHeader(hideHeader = true) {
-        this._hideHeader = hideHeader;
+    withItemsDisabledProperty(itemsDisabledProperty) {
+        this._itemsDisabledProperty = itemsDisabledProperty;
         return this;
     }
     withDataKeyProperty(property) {
         this._dataKeyProperty = property;
+        this._itemsValueProperty = undefined;
         return this;
     }
-    withDefaultSort(property, asc = true) {
-        this._hasDefaultSort = true;
-        this._defaultSortProperty.push(property);
-        this._defaultSortAsc.push(asc);
+    withLookup(lookup, serviceType) {
+        const dataProvider = new LookupDataProvider(this._modelType);
+        if (serviceType) {
+            dataProvider.withServiceType(serviceType);
+        }
+        dataProvider.withLookup(lookup);
+        this._dataProvider = dataProvider;
         return this;
     }
-    withRowHeight(rowHeight) {
-        this._rowHeight = rowHeight;
+    withLookupDataProvider(dataProvider) {
+        this._dataProvider = dataProvider;
         return this;
     }
-    withTableFullHeightOffset(tableFullHeightOffset) {
-        this._tableFullHeightOffset = tableFullHeightOffset;
+    withConfig(config) {
+        return super.withConfig(config);
+    }
+    asAutocomplete(openOnFocus = false, inlineSearch = false) {
+        this._lookupType = FilterLookupDescriptor.LookupTypeEnum.Autocomplete;
+        this._autocompleteOpenOnFocus = openOnFocus;
+        this._autocompleteInlineSearch = inlineSearch;
+        return this;
+    }
+    asDialog(lookupTableDescriptor, tableDataProvider) {
+        this._lookupType = FieldLookupDescriptor.LookupTypeEnum.Dialog;
+        this._dialogTableDescriptor = lookupTableDescriptor;
+        this._dialogTableDataProvider = tableDataProvider;
         return this;
     }
     copy() {
-        const descriptor = new TableDescriptor(this.model.type, this.model.idPropertyName, this.model.titlePropertyName);
-        descriptor._columns = this.columns.map(c => c.copy());
-        descriptor._title = this._title;
-        descriptor._hideHeader = this._hideHeader;
-        descriptor._dataKeyProperty = this._dataKeyProperty;
-        descriptor._defaultSortProperty = this._defaultSortProperty.map(p => p);
-        descriptor._defaultSortAsc = this._defaultSortAsc.map(p => p);
-        descriptor._filterDisplay = this._filterDisplay;
-        return descriptor;
+        const field = new FieldLookupDescriptor(this._editor, this._property, this._modelType);
+        this.copyFieldsTo(field);
+        field._lookupType = this._lookupType;
+        field._itemsLabelProperty = this._itemsLabelProperty;
+        field._itemsLabelTranslate = this._itemsLabelTranslate;
+        field._itemsValueProperty = this._itemsValueProperty;
+        field._itemsDisabledProperty = this._itemsDisabledProperty;
+        field._dataKeyProperty = this._dataKeyProperty;
+        field._dataProvider = this._dataProvider;
+        field._dropdownClassName = this._dropdownClassName;
+        field._autocompleteOpenOnFocus = this._autocompleteOpenOnFocus;
+        field._autocompleteInlineSearch = this._autocompleteInlineSearch;
+        field._dialogTableDescriptor = this._dialogTableDescriptor;
+        return field;
     }
-    setDataKeyFromColumn() {
-        if (!this._dataKeyProperty && this._columns.length === 1) {
-            this._dataKeyProperty = this._columns[0].property;
+}
+(function (FieldLookupDescriptor) {
+    let LookupTypeEnum;
+    (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 {
+    constructor(editor, property, enumType, options, nameAsValue = false, optionsTitlePath) {
+        super(editor, property, null);
+        this._nameAsValue = false;
+        this._enumType = enumType;
+        this._nameAsValue = nameAsValue;
+        if (typeof optionsTitlePath === 'undefined') {
+            optionsTitlePath = TypeUtil.findEnumName(enumType);
+        }
+        this._optionEnumValues = Array.isArray(options)
+            ? EnumUtil.fromValuesAsEnumValueArray(enumType, options, nameAsValue, optionsTitlePath !== null && optionsTitlePath !== void 0 ? optionsTitlePath : undefined)
+            : EnumUtil.fromConstantsAsEnumValueArray(enumType, nameAsValue, optionsTitlePath !== null && optionsTitlePath !== void 0 ? optionsTitlePath : undefined);
+        const dataProvider = new LookupDataProvider(null).withLookup(() => of(this._optionEnumValues));
+        this.withLookupDataProvider(dataProvider);
+        this.withItemsLabelProperty('title', optionsTitlePath !== null);
+        this.withItemsValueProperty('value');
+        this.withItemsDisabledProperty('disabled');
+    }
+    get enumType() {
+        return this._enumType;
+    }
+    withDisabledOptions(...disabledOptions) {
+        for (const disabledOption of disabledOptions) {
+            const disabledOptionValue = this._nameAsValue ? EnumUtil.getConstantName(this._enumType, disabledOption) : disabledOption;
+            if (disabledOptionValue) {
+                const option = this._optionEnumValues.find(o => o.value === disabledOptionValue);
+                if (option) {
+                    option.disabled = true;
+                }
+            }
         }
+        return this;
+    }
+    asAutocomplete(openOnFocus = true) {
+        super.asAutocomplete(openOnFocus, true);
+        return this;
+    }
+    copy() {
+        const field = new FieldLookupEnumDescriptor(this._editor, this._property, this._enumType, []);
+        this.copyFieldsTo(field);
+        field._lookupType = this._lookupType;
+        field._itemsLabelProperty = this._itemsLabelProperty;
+        field._itemsValueProperty = this._itemsValueProperty;
+        field._itemsDisabledProperty = this._itemsDisabledProperty;
+        field._dataKeyProperty = this._dataKeyProperty;
+        field._dataProvider = this._dataProvider;
+        return field;
     }
 }
-(function (TableDescriptor) {
-    let PaginationModeEnum;
-    (function (PaginationModeEnum) {
-        PaginationModeEnum[PaginationModeEnum["Pagination"] = 0] = "Pagination";
-        PaginationModeEnum[PaginationModeEnum["InfiniteScroll"] = 1] = "InfiniteScroll";
-    })(PaginationModeEnum = TableDescriptor.PaginationModeEnum || (TableDescriptor.PaginationModeEnum = {}));
-    let FilterDisplayEnum;
-    (function (FilterDisplayEnum) {
-        FilterDisplayEnum[FilterDisplayEnum["Row"] = 0] = "Row";
-        FilterDisplayEnum[FilterDisplayEnum["Menu"] = 1] = "Menu";
-    })(FilterDisplayEnum = TableDescriptor.FilterDisplayEnum || (TableDescriptor.FilterDisplayEnum = {}));
-})(TableDescriptor || (TableDescriptor = {}));
-class ColumnDescriptor {
-    constructor(table, property) {
-        this._modelType = null;
-        this._columnType = ColumnDescriptor.TypeEnum.String;
-        this._isSortEnabled = false;
-        this._enumNameAsValue = false;
-        // boolean specifics
-        this._booleanAsIcon = false;
-        this._table = table;
-        this._property = property;
+class FieldManyToManyEditorDescriptor extends AFieldDescriptor {
+    constructor(editor, property, mainTableDescriptor, lookupTableDescriptor) {
+        super(editor, property);
+        this._fieldType = FieldManyToManyEditorDescriptor.TypeEnum.DialogTableMultiselect;
+        this._lookupTableDataProvider = null;
+        this._actions = [];
+        this._hasLookupExcludeValues = false;
+        this._excludeFilterProperty = '';
+        this._excludeValueProperty = '';
+        this._mainTableDescriptor = mainTableDescriptor;
+        this._lookupTableDescriptor = lookupTableDescriptor;
+        this._actions.push(FieldManyToManyEditorDescriptor.ActionEnum.Add, FieldManyToManyEditorDescriptor.ActionEnum.Delete);
     }
-    get modelType() {
-        return this._modelType;
+    get fieldType() {
+        return this._fieldType;
     }
-    get columnType() {
-        return this._columnType;
+    get lookupTableDataProvider() {
+        return this._lookupTableDataProvider;
     }
-    get title() {
-        return this._title;
+    get actions() {
+        return this._actions;
     }
-    get displayPropertyPath() {
-        return this._displayPropertyPath;
+    get hasLookupExcludeValues() {
+        return this._hasLookupExcludeValues;
     }
-    get isSortEnabled() {
-        return this._isSortEnabled;
+    get excludeFilterProperty() {
+        return this._excludeFilterProperty;
     }
-    get filterDescriptor() {
-        return this._filterDescriptor;
+    get excludeValueProperty() {
+        return this._excludeValueProperty;
     }
-    get displayFormat() {
-        return this._displayFormat;
+    get mainTableDescriptor() {
+        return this._mainTableDescriptor;
     }
-    get table() {
-        return this._table;
+    get lookupTableDescriptor() {
+        return this._lookupTableDescriptor;
     }
-    get property() {
-        return this._property;
+    withLookup(getAll, serviceType) {
+        const dataProvider = new TableviewDataProvider(this._mainTableDescriptor.model.type);
+        if (serviceType) {
+            dataProvider.withServiceType(serviceType);
+        }
+        dataProvider.withGetAll(getAll);
+        this._lookupTableDataProvider = dataProvider;
+        return this;
     }
-    get enumType() {
-        return this._enumType;
+    withLookupDataProvider(dataProvider) {
+        this._lookupTableDataProvider = dataProvider;
+        return this;
     }
-    get enumTitlePath() {
-        return this._enumTitlePath;
+    withActions(actions = []) {
+        this.actions.push(...actions);
+        return this;
     }
-    get enumNameAsValue() {
-        return this._enumNameAsValue;
+    withLookupExclude(filterProperty, valueProperty, hasLookupExclude = true) {
+        this._hasLookupExcludeValues = hasLookupExclude;
+        this._excludeFilterProperty = filterProperty;
+        this._excludeValueProperty = valueProperty;
+        return this;
     }
-    get booleanAsIcon() {
-        return this._booleanAsIcon;
+    copy() {
+        const field = new FieldManyToManyEditorDescriptor(this._editor, this._property, this._mainTableDescriptor.copy(), this._lookupTableDescriptor.copy());
+        this.copyFieldsTo(field);
+        field._fieldType = this._fieldType;
+        field._actions = this._actions.map(a => a);
+        field._lookupTableDataProvider = this._lookupTableDataProvider;
+        field._hasLookupExcludeValues = this._hasLookupExcludeValues;
+        field._excludeFilterProperty = this._excludeFilterProperty;
+        field._excludeValueProperty = this._excludeValueProperty;
+        return field;
     }
-    get booleanYes() {
-        return this._booleanYes;
+}
+(function (FieldManyToManyEditorDescriptor) {
+    let TypeEnum;
+    (function (TypeEnum) {
+        TypeEnum[TypeEnum["DialogTableMultiselect"] = 0] = "DialogTableMultiselect";
+    })(TypeEnum = FieldManyToManyEditorDescriptor.TypeEnum || (FieldManyToManyEditorDescriptor.TypeEnum = {}));
+    let ActionEnum;
+    (function (ActionEnum) {
+        ActionEnum[ActionEnum["Add"] = 0] = "Add";
+        ActionEnum[ActionEnum["Delete"] = 1] = "Delete";
+    })(ActionEnum = FieldManyToManyEditorDescriptor.ActionEnum || (FieldManyToManyEditorDescriptor.ActionEnum = {}));
+})(FieldManyToManyEditorDescriptor || (FieldManyToManyEditorDescriptor = {}));
+class FieldManyEditorDescriptor extends AFieldDescriptor {
+    constructor(editor, property, tableviewDescriptor) {
+        super(editor, property);
+        this._fieldType = FieldManyEditorDescriptor.TypeEnum.DialogEditor;
+        this._fieldActions = [];
+        this._actions = [];
+        // this._modelType = modelType;
+        this._tableviewDescriptor = tableviewDescriptor;
+        this._fieldActions.push(FieldManyEditorDescriptor.ActionEnum.View, FieldManyEditorDescriptor.ActionEnum.Add, FieldManyEditorDescriptor.ActionEnum.Edit, FieldManyEditorDescriptor.ActionEnum.Delete);
     }
-    get booleanNo() {
-        return this._booleanNo;
+    get fieldType() {
+        return this._fieldType;
     }
-    asType(type = ColumnDescriptor.TypeEnum.String) {
-        this._columnType = type;
-        return this;
+    get fieldActions() {
+        return this._fieldActions;
     }
-    asNumber(displayFormat = '1.0-0') {
-        this._columnType = ColumnDescriptor.TypeEnum.Number;
-        this._displayFormat = displayFormat;
-        return this;
+    get actions() {
+        return this._actions;
     }
-    asDate(displayFormat = 'dd.MM.yyyy') {
-        this._columnType = ColumnDescriptor.TypeEnum.Date;
-        this._displayFormat = displayFormat;
-        return this;
+    get tableviewDescriptor() {
+        return this._tableviewDescriptor;
     }
-    asBoolean(yes, no, asIcon = false) {
-        this._columnType = ColumnDescriptor.TypeEnum.Boolean;
-        this._booleanAsIcon = asIcon;
-        this._booleanYes = yes;
-        this._booleanNo = no;
+    get tableDescriptor() {
+        return this._tableviewDescriptor.table;
+    }
+    get editorForCreate() {
+        return this._tableviewDescriptor.addEditor;
+    }
+    get editorForRead() {
+        return this._tableviewDescriptor.viewEditor;
+    }
+    get editorForUpdate() {
+        return this._tableviewDescriptor.editEditor;
+    }
+    withFieldAction(action) {
+        this._fieldActions.push(action);
         return this;
     }
-    asEnum(enumType, nameAsValue = false, titlePath) {
-        this._columnType = ColumnDescriptor.TypeEnum.Enum;
-        this._enumType = enumType;
-        this._enumNameAsValue = nameAsValue;
-        if (typeof titlePath === 'undefined') {
-            titlePath = TypeUtil.findEnumName(enumType);
-        }
-        this._enumTitlePath = titlePath;
+    withFieldActions(actions) {
+        this._fieldActions = actions;
         return this;
     }
-    withModelType(modelType) {
-        this._modelType = modelType;
+    withAction(action) {
+        this._actions.push(action);
         return this;
     }
+    copy() {
+        const field = new FieldManyEditorDescriptor(this._editor, this._property, this._tableviewDescriptor.copy());
+        this.copyFieldsTo(field);
+        field._fieldType = this._fieldType;
+        field._fieldActions = this._fieldActions.map(a => a);
+        return field;
+    }
+}
+(function (FieldManyEditorDescriptor) {
+    let TypeEnum;
+    (function (TypeEnum) {
+        TypeEnum[TypeEnum["DialogEditor"] = 0] = "DialogEditor";
+    })(TypeEnum = FieldManyEditorDescriptor.TypeEnum || (FieldManyEditorDescriptor.TypeEnum = {}));
+    let ActionEnum;
+    (function (ActionEnum) {
+        ActionEnum[ActionEnum["View"] = 0] = "View";
+        ActionEnum[ActionEnum["Add"] = 1] = "Add";
+        ActionEnum[ActionEnum["Edit"] = 2] = "Edit";
+        ActionEnum[ActionEnum["Delete"] = 3] = "Delete";
+    })(ActionEnum = FieldManyEditorDescriptor.ActionEnum || (FieldManyEditorDescriptor.ActionEnum = {}));
+})(FieldManyEditorDescriptor || (FieldManyEditorDescriptor = {}));
+class AFieldGroupDescriptor extends AGenericFieldDescriptor {
+    constructor(editor, name) {
+        super(editor);
+        this._fields = [];
+        this._validators = [];
+        this._name = `${this.baseName}${name}`;
+        this._default = name === EditorDescriptor.defaultGroupName;
+    }
+    get title() {
+        return this._title;
+    }
+    get validators() {
+        return this._validators;
+    }
+    get baseName() {
+        return `${this.groupName()}_`;
+    }
+    get name() {
+        return this._name;
+    }
+    get default() {
+        return this._default;
+    }
     withTitle(title) {
         this._title = title;
         return this;
     }
-    withDisplayPropertyPath(displayPropertyPath) {
-        this._displayPropertyPath = displayPropertyPath;
+    withValidator(name, expression) {
+        this._validators.push(new FieldValidator(name, expression, undefined));
         return this;
     }
-    withFilter() {
-        this._filterDescriptor = new FilterDescriptor(this._property);
-        let filterType;
-        switch (this._columnType) {
-            case ColumnDescriptor.TypeEnum.Number:
-                filterType = FilterDescriptor.TypeEnum.Number;
-                break;
-            case ColumnDescriptor.TypeEnum.Boolean:
-                filterType = FilterDescriptor.TypeEnum.Boolean;
-                break;
-            case ColumnDescriptor.TypeEnum.Date:
-                filterType = FilterDescriptor.TypeEnum.Date;
-                break;
-            case ColumnDescriptor.TypeEnum.String:
-            default:
-                filterType = FilterDescriptor.TypeEnum.String;
-                break;
-        }
-        this._filterDescriptor.asFilterType(filterType);
-        return this._filterDescriptor;
+}
+class FieldTabGroupDescriptor extends AFieldGroupDescriptor {
+    constructor(editor, name) {
+        super(editor, name);
     }
-    withFilterLookup() {
-        const filterDescriptor = new FilterLookupDescriptor(this._property, this._modelType);
-        this._filterDescriptor = filterDescriptor;
-        return filterDescriptor;
+    get fields() {
+        return this._fields;
     }
-    withFilterLookupEnum(options) {
-        if (this._columnType !== ColumnDescriptor.TypeEnum.Enum || !this._enumType) {
-            throw new Error(`Column ${this._property} is not of type enum or enum type is undefined.`);
-        }
-        const filterDescriptor = new FilterLookupEnumDescriptor(this._property, this._enumType, options, this._enumNameAsValue, this._enumTitlePath);
-        this._filterDescriptor = filterDescriptor;
-        return filterDescriptor;
+    groupName() {
+        return 'tab';
     }
-    withSort(isEnabled = true) {
-        this._isSortEnabled = isEnabled;
+    addField(field) {
+        this._fields.push(field);
         return this;
     }
     copy() {
-        var _a;
-        const descriptor = new ColumnDescriptor(this._table, this._property);
-        descriptor._displayPropertyPath = this._displayPropertyPath;
-        descriptor._title = this._title;
-        descriptor._isSortEnabled = this._isSortEnabled;
-        descriptor._columnType = this._columnType;
-        descriptor._filterDescriptor = (_a = this._filterDescriptor) === null || _a === void 0 ? void 0 : _a.copy();
-        descriptor._enumType = this._enumType;
-        descriptor._enumTitlePath = this._enumTitlePath;
-        descriptor._enumNameAsValue = this._enumNameAsValue;
-        descriptor._booleanAsIcon = this._booleanAsIcon;
-        descriptor._booleanYes = this._booleanYes;
-        descriptor._booleanNo = this._booleanNo;
-        return descriptor;
+        const tab = new FieldTabGroupDescriptor(this._editor, this.name.substring(this.baseName.length));
+        tab._title = this._title;
+        tab._fields = this.fields.map(f => f.copy());
+        return tab;
+    }
+}
+class FieldGroupDescriptor extends AFieldGroupDescriptor {
+    constructor(editor, name) {
+        super(editor, name);
+    }
+    get fields() {
+        return this._fields;
+    }
+    groupName() {
+        return 'group';
+    }
+    addField(field) {
+        this._fields.push(field);
+        return this;
+    }
+    copy() {
+        const group = new FieldGroupDescriptor(this._editor, this.name.substring(this.baseName.length));
+        group._title = this._title;
+        group._fields = this.fields.map(f => f.copy());
+        return group;
     }
 }
-(function (ColumnDescriptor) {
-    let TypeEnum;
-    (function (TypeEnum) {
-        TypeEnum[TypeEnum["String"] = 0] = "String";
-        TypeEnum[TypeEnum["Number"] = 1] = "Number";
-        TypeEnum[TypeEnum["Boolean"] = 2] = "Boolean";
-        TypeEnum[TypeEnum["Date"] = 3] = "Date";
-        TypeEnum[TypeEnum["Enum"] = 4] = "Enum";
-    })(TypeEnum = ColumnDescriptor.TypeEnum || (ColumnDescriptor.TypeEnum = {}));
-})(ColumnDescriptor || (ColumnDescriptor = {}));
-class FilterDescriptor {
-    constructor(property) {
-        this._filterType = FilterDescriptor.TypeEnum.String;
-        this._matchModes = null;
-        this._className = '';
-        this._property = property;
+
+class FieldValidator {
+    constructor(name, expression, message, options) {
+        this._name = name;
+        this._expression = expression;
+        this._message = message;
+        this._options = options;
     }
-    get filterType() {
-        return this._filterType;
+    get name() {
+        return this._name;
     }
-    get filterProperty() {
-        return this._filterProperty;
+    get expression() {
+        return this._expression;
     }
-    get matchModes() {
-        return this._matchModes;
+    get message() {
+        return this._message;
     }
-    get placeholder() {
-        return this._placeholder;
+    get options() {
+        return this._options;
     }
-    get className() {
-        return this._className;
+}
+
+class ModelDescriptor {
+    constructor(modelType, idProperty, titleProperty) {
+        var _a, _b;
+        this._type = modelType;
+        this._idPropertyName = (_a = idProperty !== null && idProperty !== void 0 ? idProperty : ModelUtil.findIdAttribute(modelType)) !== null && _a !== void 0 ? _a : undefined;
+        this._titlePropertyName = (_b = titleProperty !== null && titleProperty !== void 0 ? titleProperty : ModelUtil.findTitleAttribute(modelType)) !== null && _b !== void 0 ? _b : undefined;
+        this._typeName = TypeUtil.findTypeName(this._type);
     }
-    get property() {
-        return this._property;
+    get type() {
+        return this._type;
     }
-    asFilterType(filterType) {
-        this._filterType = filterType;
-        return this;
+    get typeName() {
+        return this._typeName;
     }
-    /**
-     * Sets different filter property name instead of default property. Use this if API requires different property provided to perform correct filter.
-     * @param filterProperty
-     */
-    withFilterProperty(filterProperty) {
-        this._filterProperty = filterProperty;
-        return this;
+    get idPropertyName() {
+        return this._idPropertyName;
     }
-    withPlaceholder(placeholder) {
-        this._placeholder = placeholder;
-        return this;
+    get titlePropertyName() {
+        return this._titlePropertyName;
     }
-    withClassName(className) {
-        this._className = className;
+    withIdPropertyName(idProperty) {
+        this._idPropertyName = idProperty;
         return this;
     }
-    withMatchModes(matchModes) {
-        this._matchModes = matchModes;
+    withTitlePropertyName(titleProperty) {
+        this._titlePropertyName = titleProperty;
         return this;
     }
     copy() {
-        const descriptor = new FilterDescriptor(this._property);
-        this.copyFieldsTo(descriptor);
-        return descriptor;
-    }
-    copyFieldsTo(descriptor) {
-        descriptor._filterType = this._filterType;
-        descriptor._filterProperty = this._filterProperty;
-        descriptor._placeholder = this._placeholder;
-        descriptor._className = this._className;
+        const model = new ModelDescriptor(this._type, this._idPropertyName, this._titlePropertyName);
+        return model;
     }
 }
-(function (FilterDescriptor) {
-    let TypeEnum;
-    (function (TypeEnum) {
-        TypeEnum[TypeEnum["String"] = 0] = "String";
-        TypeEnum[TypeEnum["Number"] = 1] = "Number";
-        TypeEnum[TypeEnum["Boolean"] = 2] = "Boolean";
-        TypeEnum[TypeEnum["Date"] = 3] = "Date";
-        TypeEnum[TypeEnum["Lookup"] = 4] = "Lookup";
-        TypeEnum[TypeEnum["LookupEnum"] = 5] = "LookupEnum";
-    })(TypeEnum = FilterDescriptor.TypeEnum || (FilterDescriptor.TypeEnum = {}));
-    let MatchModeEnum;
-    (function (MatchModeEnum) {
-        MatchModeEnum["StartsWith"] = "startsWith";
-        MatchModeEnum["Contains"] = "contains";
-        MatchModeEnum["EndsWith"] = "endsWith";
-        MatchModeEnum["Equals"] = "equals";
-        MatchModeEnum["NotEquals"] = "notEquals";
-        MatchModeEnum["In"] = "in";
-        MatchModeEnum["LessThan"] = "lt";
-        MatchModeEnum["LessThanOrEqualTo"] = "lte";
-        MatchModeEnum["GreaterThan"] = "gt";
-        MatchModeEnum["GreaterThanOrEqualTo"] = "gte";
-        MatchModeEnum["Between"] = "between";
-        MatchModeEnum["DateIs"] = "dateIs";
-        MatchModeEnum["DateIsNot"] = "dateIsNot";
-        MatchModeEnum["DateBefore"] = "dateBefore";
-        MatchModeEnum["DateAfter"] = "dateAfter";
-    })(MatchModeEnum = FilterDescriptor.MatchModeEnum || (FilterDescriptor.MatchModeEnum = {}));
-})(FilterDescriptor || (FilterDescriptor = {}));
-class FilterLookupDescriptor extends FilterDescriptor {
-    constructor(property, modelType) {
-        super(property);
-        this._modelType = null;
-        this._lookupType = FilterLookupDescriptor.LookupTypeEnum.Dropdown;
-        this._itemsLabelTranslate = false;
-        this._multiselect = false;
-        this._dropdownClassName = 'mng-filter-lookup-dropdown';
-        this._modelType = modelType;
-        this._filterType = FilterDescriptor.TypeEnum.Lookup;
-        ModelUtil.trySetLookupItemsProperties(this);
+
+class TableDescriptor {
+    constructor(modelType, idProperty, titleProperty) {
+        this._filterDisplay = TableDescriptor.FilterDisplayEnum.Menu;
+        this._paginationMode = TableDescriptor.PaginationModeEnum.Pagination;
+        this._columns = [];
+        this._hideHeader = false;
+        this._hasDefaultSort = false;
+        this._defaultSortProperty = [];
+        this._defaultSortAsc = [];
+        this._rowHeight = 45;
+        this._tableFullHeightOffset = 315;
+        this._model = new ModelDescriptor(modelType, idProperty, titleProperty);
     }
-    get lookupType() {
-        return this._lookupType;
+    get filterDisplay() {
+        return this._filterDisplay;
     }
-    get dataProvider() {
-        return this._dataProvider;
+    get paginationMode() {
+        return this._paginationMode;
     }
-    get itemsLabelProperty() {
-        return this._itemsLabelProperty;
+    get columns() {
+        return this._columns;
     }
-    get itemsLabelTranslate() {
-        return this._itemsLabelTranslate;
+    get title() {
+        return this._title;
     }
-    get itemsValueProperty() {
-        return this._itemsValueProperty;
+    get hideHeader() {
+        return this._hideHeader;
     }
     get dataKeyProperty() {
         return this._dataKeyProperty;
     }
-    get multiselect() {
-        return this._multiselect;
+    get hasDefaultSort() {
+        return this._hasDefaultSort;
     }
-    get dropdownClassName() {
-        return this._dropdownClassName;
+    get defaultSortProperty() {
+        return this._defaultSortProperty;
     }
-    get modelType() {
-        return this._modelType;
+    get defaultSortAsc() {
+        return this._defaultSortAsc;
     }
-    withItemsLabelProperty(itemsLabelProperty, translate = false) {
-        this._itemsLabelProperty = itemsLabelProperty;
-        this._itemsLabelTranslate = translate;
+    get rowHeight() {
+        return this._rowHeight;
+    }
+    get tableFullHeightOffset() {
+        return this._tableFullHeightOffset;
+    }
+    get model() {
+        return this._model;
+    }
+    addColumnDescriptor(column) {
+        this._columns.push(column);
+        this.setDataKeyFromColumn();
         return this;
     }
-    withItemsValueProperty(itemsValueProperty) {
-        this._itemsValueProperty = itemsValueProperty;
-        this._dataKeyProperty = itemsValueProperty;
+    addColumn(property) {
+        const column = new ColumnDescriptor(this, property);
+        this._columns.push(column);
+        this.setDataKeyFromColumn();
+        return column;
+    }
+    addColumnNumber(property, displayFormat) {
+        const column = new ColumnDescriptor(this, property);
+        column.asNumber(displayFormat);
+        this._columns.push(column);
+        this.setDataKeyFromColumn();
+        return column;
+    }
+    addColumnDate(property, displayFormat) {
+        const column = new ColumnDescriptor(this, property);
+        column.asDate(displayFormat);
+        this._columns.push(column);
+        this.setDataKeyFromColumn();
+        return column;
+    }
+    addColumnBoolean(property, yes, no, asIcon = false) {
+        const column = new ColumnDescriptor(this, property);
+        column.asBoolean(yes, no, asIcon);
+        this._columns.push(column);
+        this.setDataKeyFromColumn();
+        return column;
+    }
+    addColumnEnum(property, enumType, nameAsValue = false, titlePath) {
+        const column = new ColumnDescriptor(this, property);
+        column.asEnum(enumType, nameAsValue, titlePath);
+        this._columns.push(column);
+        this.setDataKeyFromColumn();
+        return column;
+    }
+    addColumnCustomComponent(property, customComponentType) {
+        const column = new ColumnDescriptor(this, property);
+        column.asCustomComponent(customComponentType);
+        this._columns.push(column);
+        this.setDataKeyFromColumn();
+        return column;
+    }
+    withFilterDisplay(filterDisplayType) {
+        this._filterDisplay = filterDisplayType;
         return this;
     }
-    withDataKeyProperty(dataKeyProperty) {
-        this._dataKeyProperty = dataKeyProperty;
-        this._itemsValueProperty = dataKeyProperty;
+    withPaginationMode(paginationMode) {
+        this._paginationMode = paginationMode;
+        return this;
+    }
+    withTitle(title) {
+        this._title = title;
         return this;
     }
-    withLookup(lookup, serviceType) {
-        const dataProvider = new LookupDataProvider(this._modelType);
-        if (serviceType) {
-            dataProvider.withServiceType(serviceType);
-        }
-        dataProvider.withLookup(lookup);
-        this._dataProvider = dataProvider;
+    withHideHeader(hideHeader = true) {
+        this._hideHeader = hideHeader;
         return this;
     }
-    withLookupDataProvider(dataProvider) {
-        this._dataProvider = dataProvider;
+    withDataKeyProperty(property) {
+        this._dataKeyProperty = property;
         return this;
     }
-    withMultiselect(multiselect = true) {
-        this._multiselect = multiselect;
+    withDefaultSort(property, asc = true) {
+        this._hasDefaultSort = true;
+        this._defaultSortProperty.push(property);
+        this._defaultSortAsc.push(asc);
         return this;
     }
-    withDropdownClassName(dropdownClassName) {
-        this._dropdownClassName = dropdownClassName;
+    withRowHeight(rowHeight) {
+        this._rowHeight = rowHeight;
         return this;
     }
-    asAutocomplete() {
-        this._lookupType = FilterLookupDescriptor.LookupTypeEnum.Autocomplete;
+    withTableFullHeightOffset(tableFullHeightOffset) {
+        this._tableFullHeightOffset = tableFullHeightOffset;
         return this;
     }
     copy() {
-        const descriptor = new FilterLookupDescriptor(this._property, this._modelType);
-        this.copyFieldsTo(descriptor);
-        return descriptor;
-    }
-    copyFieldsTo(descriptor) {
-        super.copyFieldsTo(descriptor);
-        descriptor._dataProvider = this._dataProvider;
-        descriptor._lookupType = this._lookupType;
-        descriptor._itemsLabelProperty = this._itemsLabelProperty;
-        descriptor._itemsLabelTranslate = this._itemsLabelTranslate;
-        descriptor._itemsValueProperty = this._itemsValueProperty;
+        const descriptor = new TableDescriptor(this.model.type, this.model.idPropertyName, this.model.titlePropertyName);
+        descriptor._columns = this.columns.map(c => c.copy());
+        descriptor._title = this._title;
+        descriptor._hideHeader = this._hideHeader;
         descriptor._dataKeyProperty = this._dataKeyProperty;
+        descriptor._defaultSortProperty = this._defaultSortProperty.map(p => p);
+        descriptor._defaultSortAsc = this._defaultSortAsc.map(p => p);
+        descriptor._filterDisplay = this._filterDisplay;
+        return descriptor;
     }
-}
-class FilterLookupEnumDescriptor extends FilterLookupDescriptor {
-    constructor(property, enumType, options, nameAsValue = false, optionsTitlePath) {
-        super(property, null);
-        this._enumType = enumType;
-        if (typeof optionsTitlePath === 'undefined') {
-            optionsTitlePath = TypeUtil.findEnumName(enumType);
+    setDataKeyFromColumn() {
+        if (!this._dataKeyProperty && this._columns.length === 1) {
+            this._dataKeyProperty = this._columns[0].property;
         }
-        const optionEnumValues = Array.isArray(options)
-            ? EnumUtil.fromValuesAsEnumValueArray(enumType, options, nameAsValue, optionsTitlePath !== null && optionsTitlePath !== void 0 ? optionsTitlePath : undefined)
-            : EnumUtil.fromConstantsAsEnumValueArray(enumType, nameAsValue, optionsTitlePath !== null && optionsTitlePath !== void 0 ? optionsTitlePath : undefined);
-        const dataProvider = new LookupDataProvider(null).withLookup(() => of(optionEnumValues));
-        this.withLookupDataProvider(dataProvider);
-        this.withItemsLabelProperty('title', optionsTitlePath !== null);
-        this.withItemsValueProperty('value');
-    }
-    get enumType() {
-        return this._enumType;
-    }
-    copy() {
-        const field = new FilterLookupEnumDescriptor(this._property, this._enumType, []);
-        this.copyFieldsTo(field);
-        return field;
     }
 }
-(function (FilterLookupDescriptor) {
-    let LookupTypeEnum;
-    (function (LookupTypeEnum) {
-        LookupTypeEnum[LookupTypeEnum["Dropdown"] = 0] = "Dropdown";
-        LookupTypeEnum[LookupTypeEnum["Autocomplete"] = 1] = "Autocomplete";
-    })(LookupTypeEnum = FilterLookupDescriptor.LookupTypeEnum || (FilterLookupDescriptor.LookupTypeEnum = {}));
-})(FilterLookupDescriptor || (FilterLookupDescriptor = {}));
+(function (TableDescriptor) {
+    let PaginationModeEnum;
+    (function (PaginationModeEnum) {
+        PaginationModeEnum[PaginationModeEnum["Pagination"] = 0] = "Pagination";
+        PaginationModeEnum[PaginationModeEnum["InfiniteScroll"] = 1] = "InfiniteScroll";
+    })(PaginationModeEnum = TableDescriptor.PaginationModeEnum || (TableDescriptor.PaginationModeEnum = {}));
+    let FilterDisplayEnum;
+    (function (FilterDisplayEnum) {
+        FilterDisplayEnum[FilterDisplayEnum["Row"] = 0] = "Row";
+        FilterDisplayEnum[FilterDisplayEnum["Menu"] = 1] = "Menu";
+    })(FilterDisplayEnum = TableDescriptor.FilterDisplayEnum || (TableDescriptor.FilterDisplayEnum = {}));
+})(TableDescriptor || (TableDescriptor = {}));
 
 var TableviewEditorTypeEnum = EditorDescriptor.TableviewEditorTypeEnum;
 class TableviewDescriptor {
@@ -2545,8 +2624,8 @@ class TableviewDescriptor {
     addColumnEnum(property, enumType, nameAsValue = false, titlePath) {
         return this._table.addColumnEnum(property, enumType, nameAsValue, titlePath);
     }
-    addColumnObject(property, modelType, displayProperty) {
-        return this._table.addColumnObject(property, modelType, displayProperty);
+    addColumnCustomComponent(property, customComponentType) {
+        return this._table.addColumnCustomComponent(property, customComponentType);
     }
     createTabGroup(name, title) {
         this._viewEditor.createTabGroup(name, title);
@@ -3043,14 +3122,10 @@ class ModelUtil {
         if (!attributes) {
             return null;
         }
-        let idAttribute = attributes.find(a => a.name === 'id');
+        let idAttribute = ModelUtil.findAttributeByTypeAndName(attributes, 'string', 'id', 'uuid', 'code', 'sifra');
         if (!idAttribute) {
-            // if no id, try with code
-            idAttribute = attributes.find(a => a.name === 'code');
-            if (!idAttribute) {
-                // if no id or code, take the first attribute
-                idAttribute = attributes[0];
-            }
+            // if no id or code, take the first attribute
+            idAttribute = attributes[0];
         }
         return (_a = idAttribute === null || idAttribute === void 0 ? void 0 : idAttribute.name) !== null && _a !== void 0 ? _a : null;
     }
@@ -3061,17 +3136,22 @@ class ModelUtil {
         if (!attributes) {
             return null;
         }
-        let titleAttribute = attributes.find(a => a.type === 'string' && a.name === 'name');
+        let titleAttribute = ModelUtil.findAttributeByTypeAndName(attributes, 'string', 'name', 'ime', 'title', 'naziv');
         if (!titleAttribute) {
-            // if no name, try with title
-            titleAttribute = attributes.find(a => a.type === 'string' && a.name === 'title');
-            if (!titleAttribute) {
-                // if no name or title, take the first attribute
-                titleAttribute = attributes[0];
-            }
+            // if no name or title, take the first attribute
+            titleAttribute = attributes[0];
         }
         return (_a = titleAttribute === null || titleAttribute === void 0 ? void 0 : titleAttribute.name) !== null && _a !== void 0 ? _a : null;
     }
+    static findAttributeByTypeAndName(attributes, type, ...names) {
+        for (const name of names) {
+            const attribute = attributes.find(a => a.type === type && a.name === name);
+            if (attribute) {
+                return attribute;
+            }
+        }
+        return null;
+    }
     static trySetLookupItemsProperties(lookup, idAsDataKey = true) {
         var _a;
         if (lookup.modelType) {
@@ -3368,6 +3448,9 @@ class ObjectSerializer {
     serializeClass(data, type) {
         return this.serialize(data, TypeUtil.findTypeName(type));
     }
+    serializeClassArray(data, type) {
+        return this.serialize(data, `Array<${TypeUtil.findTypeName(type)}>`);
+    }
     serialize(data, type) {
         if (data == undefined) {
             return data;
@@ -3419,6 +3502,9 @@ class ObjectSerializer {
     deserializeClass(data, type) {
         return this.deserialize(data, TypeUtil.findTypeName(type));
     }
+    deserializeClassArray(data, type) {
+        return this.deserialize(data, `Array<${TypeUtil.findTypeName(type)}>`);
+    }
     deserialize(data, type) {
         // polymorphism may change the actual type.
         type = this.findCorrectType(data, type);
@@ -3819,8 +3905,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
                 }]
         }] });
 
-class MngPropertyPathPipe {
+/**
+ * Imitation of JSONPath Syntax. Supports:
+ *  - Root object notation with '$'
+ *  - Dot notation (e.g.: $.foo.bar), no bracket notation for properties
+ *  - Array notation (e.g.: [0])
+ */
+class JsonPathPipe {
     transform(value, path = '') {
+        if (path === '$') {
+            // only return the root
+            return value;
+        }
+        // Check for leading root object notation
+        if (path.startsWith('$')) {
+            path = path.substring(1);
+        }
+        // Check for leading .
+        if (path.startsWith('.')) {
+            path = path.substring(1);
+        }
         if (path.indexOf('.') >= 0) {
             const pathSplit = path.split('.');
             let currValue = value;
@@ -3828,6 +3932,32 @@ class MngPropertyPathPipe {
                 if (typeof currValue === 'undefined' || currValue === null) {
                     return currValue;
                 }
+                if (!p.length) {
+                    // empty path, return current value
+                    return currValue;
+                }
+                const leftBracketIdx = p.indexOf('[');
+                if (leftBracketIdx >= 0 && p.endsWith(']')) {
+                    // should be reference to array
+                    const arrayPath = p.substring(0, leftBracketIdx);
+                    const arrayIdx = +p.substring(leftBracketIdx + 1, p.length - 1);
+                    const array = currValue[arrayPath];
+                    console.log(arrayPath, arrayIdx, array);
+                    if (Array.isArray(array)) {
+                        if (arrayIdx >= 0 && arrayIdx < array.length) {
+                            // valid index, continue on the path
+                            currValue = array[arrayIdx];
+                            continue;
+                        }
+                        else {
+                            console.warn(`Path ${path} array index at ${p} is not within valid array range`, value);
+                        }
+                    }
+                    else {
+                        console.warn(`Path ${path} array at ${p} is not a valid array`, value);
+                    }
+                    return undefined;
+                }
                 else if (typeof currValue === 'object') {
                     currValue = currValue[p];
                 }
@@ -3839,16 +3969,16 @@ class MngPropertyPathPipe {
             return currValue;
         }
         else {
-            return typeof value === 'object' ? value[path] : value;
+            return value[path];
         }
     }
 }
-MngPropertyPathPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngPropertyPathPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-MngPropertyPathPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngPropertyPathPipe, name: "propertyPath" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngPropertyPathPipe, decorators: [{
+JsonPathPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: JsonPathPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+JsonPathPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: JsonPathPipe, name: "jsonPath" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: JsonPathPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'propertyPath',
+                    name: 'jsonPath',
                     pure: true
                 }]
         }] });
@@ -4173,12 +4303,12 @@ class MngActionExecutorService {
         return this.errorMapper.toMngError(error, actionError);
     }
 }
-MngActionExecutorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionExecutorService, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i3.DialogService }, { token: i2.ConfirmationService }, { token: i3$1.TranslateService }, { token: MngNavigationService }, { token: MngErrorMapperService }, { token: MngLinkFormatterPipe }, { token: ACTION_EDITOR_DIALOG_COMPONENT_SETTING }], target: i0.ɵɵFactoryTarget.Injectable });
+MngActionExecutorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionExecutorService, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i3.DialogService }, { token: i2.ConfirmationService }, { token: i1$1.TranslateService }, { token: MngNavigationService }, { token: MngErrorMapperService }, { token: MngLinkFormatterPipe }, { token: ACTION_EDITOR_DIALOG_COMPONENT_SETTING }], target: i0.ɵɵFactoryTarget.Injectable });
 MngActionExecutorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionExecutorService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionExecutorService, decorators: [{
             type: Injectable
         }], ctorParameters: function () {
-        return [{ type: i0.Injector }, { type: i1.Router }, { type: i3.DialogService }, { type: i2.ConfirmationService }, { type: i3$1.TranslateService }, { type: MngNavigationService }, { type: MngErrorMapperService }, { type: MngLinkFormatterPipe }, { type: i0.Type, decorators: [{
+        return [{ type: i0.Injector }, { type: i1.Router }, { type: i3.DialogService }, { type: i2.ConfirmationService }, { type: i1$1.TranslateService }, { type: MngNavigationService }, { type: MngErrorMapperService }, { type: MngLinkFormatterPipe }, { type: i0.Type, decorators: [{
                         type: Inject,
                         args: [ACTION_EDITOR_DIALOG_COMPONENT_SETTING]
                     }] }];
@@ -4590,12 +4720,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.PrimeNGConfig }, { token: i3$1.TranslateService }, { token: i4$1.Title }, { token: MngConfigurationService }, { token: MNG_MODULE_CONFIG_IT }, { token: MNG_BROWSER_STORAGE_IT }], target: i0.ɵɵFactoryTarget.Injectable });
+MngCommonsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngCommonsService, deps: [{ token: i1.Router }, { token: i2.PrimeNGConfig }, { token: i1$1.TranslateService }, { token: i4$1.Title }, { token: MngConfigurationService }, { token: MNG_MODULE_CONFIG_IT }, { token: MNG_BROWSER_STORAGE_IT }], target: i0.ɵɵFactoryTarget.Injectable });
 MngCommonsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngCommonsService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngCommonsService, decorators: [{
             type: Injectable
         }], ctorParameters: function () {
-        return [{ type: i1.Router }, { type: i2.PrimeNGConfig }, { type: i3$1.TranslateService }, { type: i4$1.Title }, { type: MngConfigurationService }, { type: undefined, decorators: [{
+        return [{ type: i1.Router }, { type: i2.PrimeNGConfig }, { type: i1$1.TranslateService }, { type: i4$1.Title }, { type: MngConfigurationService }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [MNG_MODULE_CONFIG_IT]
                     }] }, { type: Storage, decorators: [{
@@ -4702,13 +4832,13 @@ class MngActionComponent {
         return `${action.actionName}_${this.cmpId}`;
     }
 }
-MngActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionComponent, deps: [{ token: i1.ActivatedRoute }, { token: i3$1.TranslateService }, { token: MngActionExecutorService }, { token: i2.ConfirmationService }, { token: MngViewContainerComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MngActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngActionComponent, selector: "mng-action", inputs: { action: "action", item: "item", itemId: "itemId", actionData: "actionData", dataProvider: "dataProvider", inputDisabled: ["disabled", "inputDisabled"], inputLoading: ["loading", "inputLoading"], viewContainerInit: ["viewContainer", "viewContainerInit"] }, outputs: { triggerEventEmitter: "trigger" }, host: { properties: { "class": "this.hostClass" } }, providers: [ConfirmationService], ngImport: i0, template: "<ng-container *ngIf=\"$isVisible | async\">\n    <a *ngIf=\"actionLink && actionLink.url !== ''; else routerLink\"\n        pButton\n        pRipple\n        [href]=\"actionLink.url\"\n        [target]=\"actionLink.target\"\n        [icon]=\"$any(action.icon)\"\n        [class.p-button-rounded]=\"hasNoTitle\"\n        [class.mng-action-button-icon]=\"hasNoTitle\"\n        [class.p-button-text]=\"action.isStyleText\"\n        [class.p-button-link]=\"actionLink.isStyleLink\"\n        [class.p-button-raised]=\"action.isStyleRaised\"\n        [class.p-button-outlined]=\"action.isStyleOutlined\"\n        [class.mng-button-xs]=\"action.isSizeExtraSmall\"\n        [class.mng-button-sm]=\"action.isSizeSmall\"\n        [class.mng-button-lg]=\"action.isSizeLarge\"\n        [class.mng-button-xl]=\"action.isSizeExtraLarge\"\n        [class.p-button-default]=\"action.level === levelDefault\"\n        [class.p-button-primary]=\"action.level === levelPrimary\"\n        [class.p-button-secondary]=\"action.level === levelSecondary\"\n        [class.p-button-info]=\"action.level === levelInfo\"\n        [class.p-button-help]=\"action.level === levelHelp\"\n        [class.p-button-success]=\"action.level === levelSuccess\"\n        [class.p-button-warning]=\"action.level === levelWarning\"\n        [class.p-button-danger]=\"action.level === levelDanger\">{{ ($label | async) ?? '' }}</a>\n    <ng-template #routerLink>\n        <a *ngIf=\"actionLink; else button\"\n            pButton\n            pRipple\n            [target]=\"actionLink.target\"\n            [replaceUrl]=\"actionLink.replaceUrl\"\n            [routerLink]=\"actionLink.pathSegments | linkFormatter:itemId:item:action.model:actionData\"\n            [queryParams]=\"actionLink.queryParams\"\n            [queryParamsHandling]=\"actionLink.queryParamsHandling\"\n            [icon]=\"$any(action.icon)\"\n            [class.p-button-rounded]=\"hasNoTitle\"\n            [class.mng-action-button-icon]=\"hasNoTitle\"\n            [class.p-button-text]=\"action.isStyleText\"\n            [class.p-button-link]=\"actionLink.isStyleLink\"\n            [class.p-button-raised]=\"action.isStyleRaised\"\n            [class.p-button-outlined]=\"action.isStyleOutlined\"\n            [class.mng-button-xs]=\"action.isSizeExtraSmall\"\n            [class.mng-button-sm]=\"action.isSizeSmall\"\n            [class.mng-button-lg]=\"action.isSizeLarge\"\n            [class.mng-button-xl]=\"action.isSizeExtraLarge\"\n            [class.p-button-default]=\"action.level === levelDefault\"\n            [class.p-button-primary]=\"action.level === levelPrimary\"\n            [class.p-button-secondary]=\"action.level === levelSecondary\"\n            [class.p-button-info]=\"action.level === levelInfo\"\n            [class.p-button-help]=\"action.level === levelHelp\"\n            [class.p-button-success]=\"action.level === levelSuccess\"\n            [class.p-button-warning]=\"action.level === levelWarning\"\n            [class.p-button-danger]=\"action.level === levelDanger\">{{ ($label | async) ?? '' }}</a>\n    </ng-template>\n    <ng-template #button>\n        <button\n            type=\"button\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.icon)\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"$any($tooltip | async)\"\n            [loading]=\"(($loading | async) ?? false) || ((inputLoading | async) ?? false)\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (click)=\"triggerAction($event)\"\n            [class.p-button-rounded]=\"hasNoTitle\"\n            [class.mng-action-button-icon]=\"hasNoTitle\"\n            [class.p-button-text]=\"action.isStyleText\"\n            [class.p-button-raised]=\"action.isStyleRaised\"\n            [class.p-button-outlined]=\"action.isStyleOutlined\"\n            [class.mng-button-xs]=\"action.isSizeExtraSmall\"\n            [class.mng-button-sm]=\"action.isSizeSmall\"\n            [class.mng-button-lg]=\"action.isSizeLarge\"\n            [class.mng-button-xl]=\"action.isSizeExtraLarge\"\n            [class.p-button-default]=\"action.level === levelDefault\"\n            [class.p-button-primary]=\"action.level === levelPrimary\"\n            [class.p-button-secondary]=\"action.level === levelSecondary\"\n            [class.p-button-info]=\"action.level === levelInfo\"\n            [class.p-button-help]=\"action.level === levelHelp\"\n            [class.p-button-success]=\"action.level === levelSuccess\"\n            [class.p-button-warning]=\"action.level === levelWarning\"\n            [class.p-button-danger]=\"action.level === levelDanger\"></button>\n    </ng-template>\n    <p-confirmDialog *ngIf=\"action.hasRunConfirmation\" [key]=\"action.actionName + '_' + cmpId\" [baseZIndex]=\"50\" appendTo=\"body\"></p-confirmDialog>\n</ng-container>\n", styles: [":host{display:inline-block}\n"], components: [{ type: i5.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i8.Ripple, selector: "[pRipple]" }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i9.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], pipes: { "async": i4.AsyncPipe, "linkFormatter": MngLinkFormatterPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1$1.TranslateService }, { token: MngActionExecutorService }, { token: i2.ConfirmationService }, { token: MngViewContainerComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MngActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngActionComponent, selector: "mng-action", inputs: { action: "action", item: "item", itemId: "itemId", actionData: "actionData", dataProvider: "dataProvider", inputDisabled: ["disabled", "inputDisabled"], inputLoading: ["loading", "inputLoading"], viewContainerInit: ["viewContainer", "viewContainerInit"] }, outputs: { triggerEventEmitter: "trigger" }, host: { properties: { "class": "this.hostClass" } }, providers: [ConfirmationService], ngImport: i0, template: "<ng-container *ngIf=\"$isVisible | async\">\n    <a\n        *ngIf=\"actionLink && actionLink.url !== ''; else routerLink\"\n        pButton\n        pRipple\n        [icon]=\"$any(action.icon)\"\n        [href]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : actionLink.url\"\n        [target]=\"actionLink.target\"\n        [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n        [class.p-button-rounded]=\"hasNoTitle\"\n        [class.mng-action-button-icon]=\"hasNoTitle\"\n        [class.p-button-text]=\"action.isStyleText\"\n        [class.p-button-link]=\"actionLink.isStyleLink\"\n        [class.p-button-raised]=\"action.isStyleRaised\"\n        [class.p-button-outlined]=\"action.isStyleOutlined\"\n        [class.mng-button-xs]=\"action.isSizeExtraSmall\"\n        [class.mng-button-sm]=\"action.isSizeSmall\"\n        [class.mng-button-lg]=\"action.isSizeLarge\"\n        [class.mng-button-xl]=\"action.isSizeExtraLarge\"\n        [class.p-button-default]=\"action.level === levelDefault\"\n        [class.p-button-primary]=\"action.level === levelPrimary\"\n        [class.p-button-secondary]=\"action.level === levelSecondary\"\n        [class.p-button-info]=\"action.level === levelInfo\"\n        [class.p-button-help]=\"action.level === levelHelp\"\n        [class.p-button-success]=\"action.level === levelSuccess\"\n        [class.p-button-warning]=\"action.level === levelWarning\"\n        [class.p-button-danger]=\"action.level === levelDanger\"\n        >{{ ($label | async) ?? '' }}</a\n    >\n    <ng-template #routerLink>\n        <a\n            *ngIf=\"actionLink; else button\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.icon)\"\n            [target]=\"actionLink.target\"\n            [replaceUrl]=\"actionLink.replaceUrl\"\n            [routerLink]=\"\n                ($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.pathSegments | linkFormatter: itemId:item:action.model:actionData)\n            \"\n            [queryParams]=\"actionLink.queryParams\"\n            [queryParamsHandling]=\"actionLink.queryParamsHandling\"\n            [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            [class.p-button-rounded]=\"hasNoTitle\"\n            [class.mng-action-button-icon]=\"hasNoTitle\"\n            [class.p-button-text]=\"action.isStyleText\"\n            [class.p-button-link]=\"actionLink.isStyleLink\"\n            [class.p-button-raised]=\"action.isStyleRaised\"\n            [class.p-button-outlined]=\"action.isStyleOutlined\"\n            [class.mng-button-xs]=\"action.isSizeExtraSmall\"\n            [class.mng-button-sm]=\"action.isSizeSmall\"\n            [class.mng-button-lg]=\"action.isSizeLarge\"\n            [class.mng-button-xl]=\"action.isSizeExtraLarge\"\n            [class.p-button-default]=\"action.level === levelDefault\"\n            [class.p-button-primary]=\"action.level === levelPrimary\"\n            [class.p-button-secondary]=\"action.level === levelSecondary\"\n            [class.p-button-info]=\"action.level === levelInfo\"\n            [class.p-button-help]=\"action.level === levelHelp\"\n            [class.p-button-success]=\"action.level === levelSuccess\"\n            [class.p-button-warning]=\"action.level === levelWarning\"\n            [class.p-button-danger]=\"action.level === levelDanger\"\n            >{{ ($label | async) ?? '' }}</a\n        >\n    </ng-template>\n    <ng-template #button>\n        <button\n            type=\"button\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.icon)\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"$any($tooltip | async)\"\n            [loading]=\"(($loading | async) ?? false) || ((inputLoading | async) ?? false)\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (click)=\"triggerAction($event)\"\n            [class.p-button-rounded]=\"hasNoTitle\"\n            [class.mng-action-button-icon]=\"hasNoTitle\"\n            [class.p-button-text]=\"action.isStyleText\"\n            [class.p-button-raised]=\"action.isStyleRaised\"\n            [class.p-button-outlined]=\"action.isStyleOutlined\"\n            [class.mng-button-xs]=\"action.isSizeExtraSmall\"\n            [class.mng-button-sm]=\"action.isSizeSmall\"\n            [class.mng-button-lg]=\"action.isSizeLarge\"\n            [class.mng-button-xl]=\"action.isSizeExtraLarge\"\n            [class.p-button-default]=\"action.level === levelDefault\"\n            [class.p-button-primary]=\"action.level === levelPrimary\"\n            [class.p-button-secondary]=\"action.level === levelSecondary\"\n            [class.p-button-info]=\"action.level === levelInfo\"\n            [class.p-button-help]=\"action.level === levelHelp\"\n            [class.p-button-success]=\"action.level === levelSuccess\"\n            [class.p-button-warning]=\"action.level === levelWarning\"\n            [class.p-button-danger]=\"action.level === levelDanger\"></button>\n    </ng-template>\n    <p-confirmDialog *ngIf=\"action.hasRunConfirmation\" [key]=\"action.actionName + '_' + cmpId\" [baseZIndex]=\"50\" appendTo=\"body\"></p-confirmDialog>\n</ng-container>\n", styles: [":host{display:inline-block}\n"], components: [{ type: i5.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i8.Ripple, selector: "[pRipple]" }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i9.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], pipes: { "async": i4.AsyncPipe, "linkFormatter": MngLinkFormatterPipe }, 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: [ConfirmationService], template: "<ng-container *ngIf=\"$isVisible | async\">\n    <a *ngIf=\"actionLink && actionLink.url !== ''; else routerLink\"\n        pButton\n        pRipple\n        [href]=\"actionLink.url\"\n        [target]=\"actionLink.target\"\n        [icon]=\"$any(action.icon)\"\n        [class.p-button-rounded]=\"hasNoTitle\"\n        [class.mng-action-button-icon]=\"hasNoTitle\"\n        [class.p-button-text]=\"action.isStyleText\"\n        [class.p-button-link]=\"actionLink.isStyleLink\"\n        [class.p-button-raised]=\"action.isStyleRaised\"\n        [class.p-button-outlined]=\"action.isStyleOutlined\"\n        [class.mng-button-xs]=\"action.isSizeExtraSmall\"\n        [class.mng-button-sm]=\"action.isSizeSmall\"\n        [class.mng-button-lg]=\"action.isSizeLarge\"\n        [class.mng-button-xl]=\"action.isSizeExtraLarge\"\n        [class.p-button-default]=\"action.level === levelDefault\"\n        [class.p-button-primary]=\"action.level === levelPrimary\"\n        [class.p-button-secondary]=\"action.level === levelSecondary\"\n        [class.p-button-info]=\"action.level === levelInfo\"\n        [class.p-button-help]=\"action.level === levelHelp\"\n        [class.p-button-success]=\"action.level === levelSuccess\"\n        [class.p-button-warning]=\"action.level === levelWarning\"\n        [class.p-button-danger]=\"action.level === levelDanger\">{{ ($label | async) ?? '' }}</a>\n    <ng-template #routerLink>\n        <a *ngIf=\"actionLink; else button\"\n            pButton\n            pRipple\n            [target]=\"actionLink.target\"\n            [replaceUrl]=\"actionLink.replaceUrl\"\n            [routerLink]=\"actionLink.pathSegments | linkFormatter:itemId:item:action.model:actionData\"\n            [queryParams]=\"actionLink.queryParams\"\n            [queryParamsHandling]=\"actionLink.queryParamsHandling\"\n            [icon]=\"$any(action.icon)\"\n            [class.p-button-rounded]=\"hasNoTitle\"\n            [class.mng-action-button-icon]=\"hasNoTitle\"\n            [class.p-button-text]=\"action.isStyleText\"\n            [class.p-button-link]=\"actionLink.isStyleLink\"\n            [class.p-button-raised]=\"action.isStyleRaised\"\n            [class.p-button-outlined]=\"action.isStyleOutlined\"\n            [class.mng-button-xs]=\"action.isSizeExtraSmall\"\n            [class.mng-button-sm]=\"action.isSizeSmall\"\n            [class.mng-button-lg]=\"action.isSizeLarge\"\n            [class.mng-button-xl]=\"action.isSizeExtraLarge\"\n            [class.p-button-default]=\"action.level === levelDefault\"\n            [class.p-button-primary]=\"action.level === levelPrimary\"\n            [class.p-button-secondary]=\"action.level === levelSecondary\"\n            [class.p-button-info]=\"action.level === levelInfo\"\n            [class.p-button-help]=\"action.level === levelHelp\"\n            [class.p-button-success]=\"action.level === levelSuccess\"\n            [class.p-button-warning]=\"action.level === levelWarning\"\n            [class.p-button-danger]=\"action.level === levelDanger\">{{ ($label | async) ?? '' }}</a>\n    </ng-template>\n    <ng-template #button>\n        <button\n            type=\"button\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.icon)\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"$any($tooltip | async)\"\n            [loading]=\"(($loading | async) ?? false) || ((inputLoading | async) ?? false)\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (click)=\"triggerAction($event)\"\n            [class.p-button-rounded]=\"hasNoTitle\"\n            [class.mng-action-button-icon]=\"hasNoTitle\"\n            [class.p-button-text]=\"action.isStyleText\"\n            [class.p-button-raised]=\"action.isStyleRaised\"\n            [class.p-button-outlined]=\"action.isStyleOutlined\"\n            [class.mng-button-xs]=\"action.isSizeExtraSmall\"\n            [class.mng-button-sm]=\"action.isSizeSmall\"\n            [class.mng-button-lg]=\"action.isSizeLarge\"\n            [class.mng-button-xl]=\"action.isSizeExtraLarge\"\n            [class.p-button-default]=\"action.level === levelDefault\"\n            [class.p-button-primary]=\"action.level === levelPrimary\"\n            [class.p-button-secondary]=\"action.level === levelSecondary\"\n            [class.p-button-info]=\"action.level === levelInfo\"\n            [class.p-button-help]=\"action.level === levelHelp\"\n            [class.p-button-success]=\"action.level === levelSuccess\"\n            [class.p-button-warning]=\"action.level === levelWarning\"\n            [class.p-button-danger]=\"action.level === levelDanger\"></button>\n    </ng-template>\n    <p-confirmDialog *ngIf=\"action.hasRunConfirmation\" [key]=\"action.actionName + '_' + cmpId\" [baseZIndex]=\"50\" appendTo=\"body\"></p-confirmDialog>\n</ng-container>\n", styles: [":host{display:inline-block}\n"] }]
+            args: [{ selector: 'mng-action', changeDetection: ChangeDetectionStrategy.OnPush, providers: [ConfirmationService], template: "<ng-container *ngIf=\"$isVisible | async\">\n    <a\n        *ngIf=\"actionLink && actionLink.url !== ''; else routerLink\"\n        pButton\n        pRipple\n        [icon]=\"$any(action.icon)\"\n        [href]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : actionLink.url\"\n        [target]=\"actionLink.target\"\n        [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n        [class.p-button-rounded]=\"hasNoTitle\"\n        [class.mng-action-button-icon]=\"hasNoTitle\"\n        [class.p-button-text]=\"action.isStyleText\"\n        [class.p-button-link]=\"actionLink.isStyleLink\"\n        [class.p-button-raised]=\"action.isStyleRaised\"\n        [class.p-button-outlined]=\"action.isStyleOutlined\"\n        [class.mng-button-xs]=\"action.isSizeExtraSmall\"\n        [class.mng-button-sm]=\"action.isSizeSmall\"\n        [class.mng-button-lg]=\"action.isSizeLarge\"\n        [class.mng-button-xl]=\"action.isSizeExtraLarge\"\n        [class.p-button-default]=\"action.level === levelDefault\"\n        [class.p-button-primary]=\"action.level === levelPrimary\"\n        [class.p-button-secondary]=\"action.level === levelSecondary\"\n        [class.p-button-info]=\"action.level === levelInfo\"\n        [class.p-button-help]=\"action.level === levelHelp\"\n        [class.p-button-success]=\"action.level === levelSuccess\"\n        [class.p-button-warning]=\"action.level === levelWarning\"\n        [class.p-button-danger]=\"action.level === levelDanger\"\n        >{{ ($label | async) ?? '' }}</a\n    >\n    <ng-template #routerLink>\n        <a\n            *ngIf=\"actionLink; else button\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.icon)\"\n            [target]=\"actionLink.target\"\n            [replaceUrl]=\"actionLink.replaceUrl\"\n            [routerLink]=\"\n                ($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.pathSegments | linkFormatter: itemId:item:action.model:actionData)\n            \"\n            [queryParams]=\"actionLink.queryParams\"\n            [queryParamsHandling]=\"actionLink.queryParamsHandling\"\n            [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            [class.p-button-rounded]=\"hasNoTitle\"\n            [class.mng-action-button-icon]=\"hasNoTitle\"\n            [class.p-button-text]=\"action.isStyleText\"\n            [class.p-button-link]=\"actionLink.isStyleLink\"\n            [class.p-button-raised]=\"action.isStyleRaised\"\n            [class.p-button-outlined]=\"action.isStyleOutlined\"\n            [class.mng-button-xs]=\"action.isSizeExtraSmall\"\n            [class.mng-button-sm]=\"action.isSizeSmall\"\n            [class.mng-button-lg]=\"action.isSizeLarge\"\n            [class.mng-button-xl]=\"action.isSizeExtraLarge\"\n            [class.p-button-default]=\"action.level === levelDefault\"\n            [class.p-button-primary]=\"action.level === levelPrimary\"\n            [class.p-button-secondary]=\"action.level === levelSecondary\"\n            [class.p-button-info]=\"action.level === levelInfo\"\n            [class.p-button-help]=\"action.level === levelHelp\"\n            [class.p-button-success]=\"action.level === levelSuccess\"\n            [class.p-button-warning]=\"action.level === levelWarning\"\n            [class.p-button-danger]=\"action.level === levelDanger\"\n            >{{ ($label | async) ?? '' }}</a\n        >\n    </ng-template>\n    <ng-template #button>\n        <button\n            type=\"button\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.icon)\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"$any($tooltip | async)\"\n            [loading]=\"(($loading | async) ?? false) || ((inputLoading | async) ?? false)\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (click)=\"triggerAction($event)\"\n            [class.p-button-rounded]=\"hasNoTitle\"\n            [class.mng-action-button-icon]=\"hasNoTitle\"\n            [class.p-button-text]=\"action.isStyleText\"\n            [class.p-button-raised]=\"action.isStyleRaised\"\n            [class.p-button-outlined]=\"action.isStyleOutlined\"\n            [class.mng-button-xs]=\"action.isSizeExtraSmall\"\n            [class.mng-button-sm]=\"action.isSizeSmall\"\n            [class.mng-button-lg]=\"action.isSizeLarge\"\n            [class.mng-button-xl]=\"action.isSizeExtraLarge\"\n            [class.p-button-default]=\"action.level === levelDefault\"\n            [class.p-button-primary]=\"action.level === levelPrimary\"\n            [class.p-button-secondary]=\"action.level === levelSecondary\"\n            [class.p-button-info]=\"action.level === levelInfo\"\n            [class.p-button-help]=\"action.level === levelHelp\"\n            [class.p-button-success]=\"action.level === levelSuccess\"\n            [class.p-button-warning]=\"action.level === levelWarning\"\n            [class.p-button-danger]=\"action.level === levelDanger\"></button>\n    </ng-template>\n    <p-confirmDialog *ngIf=\"action.hasRunConfirmation\" [key]=\"action.actionName + '_' + cmpId\" [baseZIndex]=\"50\" appendTo=\"body\"></p-confirmDialog>\n</ng-container>\n", styles: [":host{display:inline-block}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i1.ActivatedRoute }, { type: i3$1.TranslateService }, { type: MngActionExecutorService }, { type: i2.ConfirmationService }, { type: MngViewContainerComponentService, decorators: [{
+        return [{ type: i1.ActivatedRoute }, { type: i1$1.TranslateService }, { type: MngActionExecutorService }, { type: i2.ConfirmationService }, { type: MngViewContainerComponentService, decorators: [{
                         type: Optional
                     }] }];
     }, propDecorators: { hostClass: [{
@@ -4871,11 +5001,25 @@ class MngComponentDirective {
     ngOnInit() {
         this.viewContainerRef.clear();
         this.componentRef = this.viewContainerRef.createComponent(this.component);
+        if (this.inputs) {
+            if (this.isCmpInstanceOfColumnValue(this.componentRef.instance)) {
+                this.componentRef.instance.setColumnValue(this.inputs['value'], this.inputs['item'], this.inputs['descriptor']);
+            }
+            else {
+                const instanceAny = this.componentRef;
+                for (const input in this.inputs) {
+                    instanceAny[input] = this.inputs[input];
+                }
+            }
+        }
         this.componentInstanceEventEmitter.next(this.componentRef.instance);
     }
+    isCmpInstanceOfColumnValue(cmp) {
+        return typeof cmp.setColumnValue === 'function';
+    }
 }
 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"] }, outputs: { componentInstanceEventEmitter: "instanceCreated" }, ngImport: i0 });
+MngComponentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: MngComponentDirective, selector: "[mngComponent]", inputs: { component: ["mngComponent", "component"], inputs: "inputs" }, outputs: { componentInstanceEventEmitter: "instanceCreated" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngComponentDirective, decorators: [{
             type: Directive,
             args: [{
@@ -4884,6 +5028,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { component: [{
                 type: Input,
                 args: ['mngComponent']
+            }], inputs: [{
+                type: Input
             }], componentInstanceEventEmitter: [{
                 type: Output,
                 args: ['instanceCreated']
@@ -5069,12 +5215,12 @@ class MngFormEditorComponent {
         this.formOptions.formState.disabled = this.isFormDisabled !== null ? this.isFormDisabled === true : this.descriptor.disabled;
     }
 }
-MngFormEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormEditorComponent, deps: [{ token: i3$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-MngFormEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormEditorComponent, selector: "mng-form-editor", inputs: { descriptor: "descriptor", submitLoading: "submitLoading", item: "item", isSubmitButtonVisible: "isSubmitButtonVisible", isFormDisabled: "isFormDisabled" }, outputs: { formSubmitEventEmitter: "formSubmit" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "submitButtonElementRef", first: true, predicate: ["submitButton"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit($event)\">\n    <formly-form [form]=\"form\" [fields]=\"formFields\" [options]=\"formOptions\" [model]=\"formModel\"></formly-form>\n    <button #submitButton pButton type=\"submit\" [class.hidden]=\"!isSubmitButtonVisible\" [disabled]=\"form.disabled\" [loading]=\"(submitLoading$ | async) ?? false\"></button>\n</form>\n<p-messages [value]=\"formMessages\" [enableService]=\"false\"></p-messages>\n", components: [{ type: i3$2.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { type: i3$3.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }], directives: [{ type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormEditorComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+MngFormEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormEditorComponent, selector: "mng-form-editor", inputs: { descriptor: "descriptor", submitLoading: "submitLoading", item: "item", isSubmitButtonVisible: "isSubmitButtonVisible", isFormDisabled: "isFormDisabled" }, outputs: { formSubmitEventEmitter: "formSubmit" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "submitButtonElementRef", first: true, predicate: ["submitButton"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit($event)\">\n    <formly-form [form]=\"form\" [fields]=\"formFields\" [options]=\"formOptions\" [model]=\"formModel\"></formly-form>\n    <button #submitButton pButton type=\"submit\" [class.hidden]=\"!isSubmitButtonVisible\" [disabled]=\"form.disabled\" [loading]=\"(submitLoading$ | async) ?? false\"></button>\n</form>\n<p-messages [value]=\"formMessages\" [enableService]=\"false\"></p-messages>\n", components: [{ type: i3$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: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-form-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit($event)\">\n    <formly-form [form]=\"form\" [fields]=\"formFields\" [options]=\"formOptions\" [model]=\"formModel\"></formly-form>\n    <button #submitButton pButton type=\"submit\" [class.hidden]=\"!isSubmitButtonVisible\" [disabled]=\"form.disabled\" [loading]=\"(submitLoading$ | async) ?? false\"></button>\n</form>\n<p-messages [value]=\"formMessages\" [enableService]=\"false\"></p-messages>\n" }]
-        }], ctorParameters: function () { return [{ type: i3$1.TranslateService }]; }, propDecorators: { descriptor: [{
+        }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; }, propDecorators: { descriptor: [{
                 type: Input
             }], submitLoading: [{
                 type: Input
@@ -5101,13 +5247,18 @@ const MNG_AUTOCOMPLETE_VALUE_ACCESSOR = {
     multi: true
 };
 class MngAutocompleteComponent {
-    constructor(injector) {
+    constructor(injector, translate) {
         this.injector = injector;
+        this.translate = translate;
+        this.itemsLabelTranslate = false;
+        this.inlineSearch = false;
+        this.openOnFocus = false;
         this.multiselect = false;
         this.className = null;
         this.dropdownClassName = null;
         this.valueChangeEventEmitter = new EventEmitter();
-        this.suggestionsSubject = new Subject();
+        this.isInited = false;
+        this.suggestionsSubject = new BehaviorSubject([]);
         this.searchSubscription = null;
         this.dataProviderService = null;
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -5116,15 +5267,9 @@ class MngAutocompleteComponent {
         this.onTouchedFn = () => { };
         this.autocompleteFormControl = new FormControl();
         this.suggestions$ = this.suggestionsSubject.asObservable();
-        this.isLoading = false;
     }
     ngOnInit() {
-        if (this.dataProvider) {
-            this.dataProviderService = this.dataProvider.serviceType ? this.injector.get(this.dataProvider.serviceType) : null;
-        }
-        else {
-            console.warn(`Data provider should be provided for MngAutocompleteComponent.`);
-        }
+        this.setItemsAndDataProvider();
     }
     ngOnDestroy() {
         var _a;
@@ -5134,7 +5279,6 @@ class MngAutocompleteComponent {
         var _a;
         (_a = this.searchSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         if (this.dataProvider) {
-            this.isLoading = true;
             const queryParamBuilder = MediusQueryParamBuilder.create();
             if (this.itemsLabelProperty) {
                 queryParamBuilder.withSort(this.itemsLabelProperty);
@@ -5142,20 +5286,26 @@ 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).subscribe({
-                next: (res) => {
-                    this.suggestionsSubject.next(res);
-                    this.isLoading = false;
-                },
-                error: () => {
-                    this.isLoading = false;
+            this.searchSubscription = this.getLookup(queryParamBuilder.build(), event.query).subscribe({
+                next: items => {
+                    this.setSuggestionsFromItems(items, event.query);
                 }
             });
         }
     }
     onSelect(value) {
-        this.onChangeFn(value);
-        this.valueChangeEventEmitter.next(value);
+        let outputValue = value;
+        if (this.itemsValueProperty && typeof value === 'object') {
+            outputValue = value[this.itemsValueProperty];
+        }
+        this.onChangeFn(outputValue);
+        this.valueChangeEventEmitter.next(outputValue);
+    }
+    onFocus(event) {
+        var _a;
+        if (this.openOnFocus) {
+            (_a = this.primeAutocomplete) === null || _a === void 0 ? void 0 : _a.show();
+        }
     }
     registerOnChange(fn) {
         this.onChangeFn = fn;
@@ -5171,20 +5321,171 @@ class MngAutocompleteComponent {
             this.autocompleteFormControl.enable();
         }
     }
-    writeValue(obj) {
-        this.autocompleteFormControl.setValue(obj, { emitEvent: false });
+    writeValue(value) {
+        this.setItemsAndDataProvider();
+        if (this.itemsValuePropertyInit && value != null && typeof value !== 'object') {
+            const defaultItem = { [this.itemsValuePropertyInit]: value };
+            if (this.itemsLabelProperty) {
+                defaultItem[this.itemsLabelProperty] = value;
+            }
+            const matchedItem = this.suggestionsSubject.value.find(i => i[this.itemsValuePropertyInit] === value);
+            if (matchedItem) {
+                this.autocompleteFormControl.setValue(matchedItem, { emitEvent: false });
+            }
+            else if (this.dataProvider) {
+                const queryParamBuilder = MediusQueryParamBuilder.create();
+                queryParamBuilder.withFilter(this.itemsValuePropertyInit, value, undefined, MediusFilterMatchType.Equals);
+                this.getLookup(queryParamBuilder.build())
+                    .pipe(first())
+                    .subscribe({
+                    next: items => {
+                        let isMatch = false;
+                        if (items.length === 1) {
+                            this.autocompleteFormControl.setValue(items[0]);
+                            isMatch = true;
+                        }
+                        else if (items.length > 1) {
+                            // for lookup data providers not using query params
+                            const matchedItem = items.find(i => i[this.itemsValuePropertyInit] === value);
+                            if (matchedItem) {
+                                this.setAutocompleteValueFromWrite(matchedItem);
+                                isMatch = true;
+                            }
+                        }
+                        if (!isMatch) {
+                            this.setAutocompleteValueFromWrite(defaultItem);
+                        }
+                    },
+                    error: () => {
+                        this.setAutocompleteValueFromWrite(defaultItem);
+                    }
+                });
+            }
+            else {
+                this.setAutocompleteValueFromWrite(defaultItem);
+            }
+        }
+        else {
+            this.setAutocompleteValueFromWrite(value);
+        }
+    }
+    setItemsAndDataProvider() {
+        if (this.isInited) {
+            return;
+        }
+        this.itemsLabelProperty = this.itemsLabelPropertyInit;
+        this.itemsValueProperty = this.itemsValuePropertyInit;
+        if (this.dataProvider) {
+            this.dataProviderService = this.dataProvider.serviceType ? this.injector.get(this.dataProvider.serviceType) : null;
+            if (this.itemsLabelTranslate) {
+                // setup translation properties
+                if (this.itemsLabelPropertyInit) {
+                    this.itemsLabelProperty = `${this.itemsLabelPropertyInit}_i18n`;
+                }
+                else if (!this.itemsLabelProperty && !this.itemsValuePropertyInit) {
+                    this.itemsLabelProperty = 'title_i18n';
+                    this.itemsValueProperty = 'value';
+                }
+                else {
+                    throw new Error(`Invalid use with value (${this.itemsLabelPropertyInit}) and label (${this.itemsLabelPropertyInit}) property setup.`);
+                }
+            }
+        }
+        else {
+            console.warn(`Data provider should be provided for MngAutocompleteComponent.`);
+        }
+        if (this.openOnFocus) {
+            this.onSearch({ query: '' });
+        }
+        this.isInited = true;
+    }
+    setAutocompleteValueFromWrite(value) {
+        if (value && this.itemsLabelTranslate) {
+            value = this.i18nPopulateItems([value], this.translate.instant(this.i18nGetItemsKeys([value])))[0];
+        }
+        this.autocompleteFormControl.setValue(value, { emitEvent: false });
+    }
+    getLookup(qp, query) {
+        if (this.dataProvider) {
+            return this.dataProvider.lookup(qp, this.dataProviderService, query).pipe(switchMap(items => {
+                if (this.itemsLabelTranslate) {
+                    return this.translate.stream(this.i18nGetItemsKeys(items)).pipe(map(translations => this.i18nPopulateItems(items, translations)));
+                }
+                else {
+                    return of(items);
+                }
+            }));
+        }
+        else {
+            return of([]);
+        }
+    }
+    i18nGetItemsKeys(items) {
+        return items.map(item => (typeof item === 'object' && this.itemsLabelPropertyInit ? item[this.itemsLabelPropertyInit] : item));
+    }
+    i18nPopulateItems(items, i18nMap) {
+        return items.map(item => {
+            if (typeof item === 'object' && this.itemsLabelPropertyInit) {
+                const label = item[this.itemsLabelPropertyInit];
+                const translation = i18nMap[label];
+                if (translation) {
+                    return Object.assign(Object.assign({}, item), { [this.itemsLabelProperty]: translation });
+                }
+                return Object.assign({}, item);
+            }
+            else {
+                const translation = i18nMap[item];
+                return {
+                    [this.itemsLabelProperty]: translation !== null && translation !== void 0 ? translation : item,
+                    [this.itemsValueProperty]: item
+                };
+            }
+        });
+    }
+    setSuggestionsFromItems(items, query) {
+        var _a;
+        if (this.inlineSearch) {
+            const queryLowerCase = (_a = query === null || query === void 0 ? void 0 : query.toLowerCase()) !== null && _a !== void 0 ? _a : '';
+            const filteredItems = items.filter(i => {
+                let itemLabel = i;
+                if (this.itemsLabelProperty && typeof i === 'object') {
+                    itemLabel = i[this.itemsLabelProperty];
+                }
+                if (itemLabel == null) {
+                    return queryLowerCase == null || !queryLowerCase.length;
+                }
+                if (typeof itemLabel !== 'string') {
+                    itemLabel = itemLabel.toString();
+                }
+                return itemLabel.toLowerCase().startsWith(queryLowerCase);
+            });
+            this.suggestionsSubject.next([...filteredItems]);
+        }
+        else {
+            this.suggestionsSubject.next([...items]);
+        }
     }
 }
-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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i4.AsyncPipe, "translate": i3$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngAutocompleteComponent, deps: [{ token: i0.Injector }, { token: i1$1.TranslateService }], 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", itemsValuePropertyInit: ["itemsValueProperty", "itemsValuePropertyInit"], itemsLabelPropertyInit: ["itemsLabelProperty", "itemsLabelPropertyInit"], itemsLabelTranslate: "itemsLabelTranslate", inlineSearch: "inlineSearch", openOnFocus: "openOnFocus", 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    (onFocus)=\"onFocus($event)\"\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    [minLength]=\"openOnFocus ? 0 : 1\"\n    (completeMethod)=\"onSearch($event)\"\n    (onSelect)=\"onSelect($event)\"\n    appendTo=\"body\"\n    dropdownMode=\"current\">\n</p-autoComplete>\n", components: [{ type: i2$1.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "virtualScroll", "itemSize", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "field", "scrollHeight", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "suggestions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide"] }], directives: [{ type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i4.AsyncPipe, "translate": i1$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-autocomplete', providers: [MNG_AUTOCOMPLETE_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-autoComplete\n    [formControl]=\"autocompleteFormControl\"\n    [placeholder]=\"$any(placeholder)\"\n    [dropdown]=\"true\"\n    [dataKey]=\"$any(dataKeyProperty)\"\n    [field]=\"$any(itemsLabelProperty)\"\n    [suggestions]=\"(suggestions$ | async) ?? []\"\n    [multiple]=\"multiselect\"\n    [showEmptyMessage]=\"true\"\n    [emptyMessage]=\"'mngAutocomplete.noMatches' | translate\"\n    [styleClass]=\"$any(className)\"\n    [panelStyleClass]=\"$any(dropdownClassName)\"\n    (completeMethod)=\"onSearch($event)\"\n    (onSelect)=\"onSelect($event)\"\n    appendTo=\"body\"\n    dropdownMode=\"current\">\n</p-autoComplete>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { dataProvider: [{
+            args: [{ selector: 'mng-autocomplete', providers: [MNG_AUTOCOMPLETE_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-autoComplete\n    (onFocus)=\"onFocus($event)\"\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    [minLength]=\"openOnFocus ? 0 : 1\"\n    (completeMethod)=\"onSearch($event)\"\n    (onSelect)=\"onSelect($event)\"\n    appendTo=\"body\"\n    dropdownMode=\"current\">\n</p-autoComplete>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1$1.TranslateService }]; }, propDecorators: { dataProvider: [{
                 type: Input
             }], dataKeyProperty: [{
                 type: Input
-            }], itemsLabelProperty: [{
+            }], itemsValuePropertyInit: [{
+                type: Input,
+                args: ['itemsValueProperty']
+            }], itemsLabelPropertyInit: [{
+                type: Input,
+                args: ['itemsLabelProperty']
+            }], itemsLabelTranslate: [{
+                type: Input
+            }], inlineSearch: [{
+                type: Input
+            }], openOnFocus: [{
                 type: Input
             }], multiselect: [{
                 type: Input
@@ -5315,12 +5616,12 @@ class MngDropdownComponent {
         this.dropdownFormControl.setValue(obj, { emitEvent: false });
     }
 }
-MngDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngDropdownComponent, deps: [{ token: i0.Injector }, { token: i3$1.TranslateService }], 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", itemsLabelPropertyInit: ["itemsLabelProperty", "itemsLabelPropertyInit"], itemsLabelTranslate: "itemsLabelTranslate", itemsValuePropertyInit: ["itemsValueProperty", "itemsValuePropertyInit"], itemsDisabledProperty: "itemsDisabledProperty", multiselect: "multiselect", placeholder: "placeholder", showClear: "showClear", selectFirstItem: "selectFirstItem", className: "className", dropdownClassName: "dropdownClassName" }, outputs: { valueChangeEventEmitter: "valueChange" }, providers: [MNG_DROPDOWN_VALUE_ACCESSOR], viewQueries: [{ propertyName: "primeDropdown", first: true, predicate: Dropdown, descendants: true }], ngImport: i0, template: "<p-dropdown\n    *ngIf=\"!multiselect; else pMultiselect\"\n    [formControl]=\"dropdownFormControl\"\n    [placeholder]=\"$any(placeholder)\"\n    [dataKey]=\"$any(dataKeyProperty)\"\n    [optionLabel]=\"$any(itemsLabelProperty)\"\n    [optionValue]=\"$any(itemsValueProperty)\"\n    [optionDisabled]=\"$any(itemsDisabledProperty)\"\n    [options]=\"$any(items$ | async)\"\n    [showClear]=\"showClear\"\n    [autoDisplayFirst]=\"false\"\n    [styleClass]=\"$any(className)\"\n    [panelStyleClass]=\"$any(dropdownClassName)\"\n    appendTo=\"body\">\n</p-dropdown>\n<ng-template #pMultiselect>\n    <p-multiSelect\n        display=\"chip\"\n        [formControl]=\"dropdownFormControl\"\n        [defaultLabel]=\"$any(placeholder)\"\n        [dataKey]=\"$any(dataKeyProperty)\"\n        [optionLabel]=\"$any(itemsLabelProperty)\"\n        [optionValue]=\"$any(itemsValueProperty)\"\n        [optionDisabled]=\"$any(itemsDisabledProperty)\"\n        [options]=\"(items$ | async) ?? []\"\n        [styleClass]=\"$any(className)\"\n        [panelStyleClass]=\"$any(dropdownClassName)\"\n        [filter]=\"false\"\n        appendTo=\"body\">\n    </p-multiSelect>\n</ng-template>\n", components: [{ type: i2$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: i3$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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngDropdownComponent, deps: [{ token: i0.Injector }, { token: i1$1.TranslateService }], 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", itemsLabelPropertyInit: ["itemsLabelProperty", "itemsLabelPropertyInit"], itemsLabelTranslate: "itemsLabelTranslate", itemsValuePropertyInit: ["itemsValueProperty", "itemsValuePropertyInit"], itemsDisabledProperty: "itemsDisabledProperty", multiselect: "multiselect", placeholder: "placeholder", showClear: "showClear", selectFirstItem: "selectFirstItem", className: "className", dropdownClassName: "dropdownClassName" }, outputs: { valueChangeEventEmitter: "valueChange" }, providers: [MNG_DROPDOWN_VALUE_ACCESSOR], viewQueries: [{ propertyName: "primeDropdown", first: true, predicate: Dropdown, descendants: true }], ngImport: i0, template: "<p-dropdown\n    *ngIf=\"!multiselect; else pMultiselect\"\n    [formControl]=\"dropdownFormControl\"\n    [placeholder]=\"$any(placeholder)\"\n    [dataKey]=\"$any(dataKeyProperty)\"\n    [optionLabel]=\"$any(itemsLabelProperty)\"\n    [optionValue]=\"$any(itemsValueProperty)\"\n    [optionDisabled]=\"$any(itemsDisabledProperty)\"\n    [options]=\"$any(items$ | async)\"\n    [showClear]=\"showClear\"\n    [autoDisplayFirst]=\"false\"\n    [styleClass]=\"$any(className)\"\n    [panelStyleClass]=\"$any(dropdownClassName)\"\n    appendTo=\"body\">\n</p-dropdown>\n<ng-template #pMultiselect>\n    <p-multiSelect\n        display=\"chip\"\n        [formControl]=\"dropdownFormControl\"\n        [defaultLabel]=\"$any(placeholder)\"\n        [dataKey]=\"$any(dataKeyProperty)\"\n        [optionLabel]=\"$any(itemsLabelProperty)\"\n        [optionValue]=\"$any(itemsValueProperty)\"\n        [optionDisabled]=\"$any(itemsDisabledProperty)\"\n        [options]=\"(items$ | async) ?? []\"\n        [styleClass]=\"$any(className)\"\n        [panelStyleClass]=\"$any(dropdownClassName)\"\n        [filter]=\"false\"\n        appendTo=\"body\">\n    </p-multiSelect>\n</ng-template>\n", components: [{ type: i2$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: i3$3.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "autoZIndex", "baseZIndex", "filterBy", "virtualScroll", "itemSize", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "scrollHeight", "defaultLabel", "placeholder", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onPanelShow", "onPanelHide"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-dropdown', providers: [MNG_DROPDOWN_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-dropdown\n    *ngIf=\"!multiselect; else pMultiselect\"\n    [formControl]=\"dropdownFormControl\"\n    [placeholder]=\"$any(placeholder)\"\n    [dataKey]=\"$any(dataKeyProperty)\"\n    [optionLabel]=\"$any(itemsLabelProperty)\"\n    [optionValue]=\"$any(itemsValueProperty)\"\n    [optionDisabled]=\"$any(itemsDisabledProperty)\"\n    [options]=\"$any(items$ | async)\"\n    [showClear]=\"showClear\"\n    [autoDisplayFirst]=\"false\"\n    [styleClass]=\"$any(className)\"\n    [panelStyleClass]=\"$any(dropdownClassName)\"\n    appendTo=\"body\">\n</p-dropdown>\n<ng-template #pMultiselect>\n    <p-multiSelect\n        display=\"chip\"\n        [formControl]=\"dropdownFormControl\"\n        [defaultLabel]=\"$any(placeholder)\"\n        [dataKey]=\"$any(dataKeyProperty)\"\n        [optionLabel]=\"$any(itemsLabelProperty)\"\n        [optionValue]=\"$any(itemsValueProperty)\"\n        [optionDisabled]=\"$any(itemsDisabledProperty)\"\n        [options]=\"(items$ | async) ?? []\"\n        [styleClass]=\"$any(className)\"\n        [panelStyleClass]=\"$any(dropdownClassName)\"\n        [filter]=\"false\"\n        appendTo=\"body\">\n    </p-multiSelect>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i3$1.TranslateService }]; }, propDecorators: { dataProvider: [{
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1$1.TranslateService }]; }, propDecorators: { dataProvider: [{
                 type: Input
             }], dataKeyProperty: [{
                 type: Input
@@ -5540,13 +5841,13 @@ class MngActionEditorComponent {
         this.subscriptions.push(subscription);
     }
 }
-MngActionEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionEditorComponent, deps: [{ token: i0.Injector }, { token: i3$1.TranslateService }, { token: MngActionExecutorService }, { token: MngCommonsService }, { token: MngNavigationService }, { token: i3.DynamicDialogRef, optional: true }, { token: i3.DynamicDialogConfig, optional: true }, { token: MngViewContainerComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MngActionEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngActionEditorComponent, selector: "mng-action-editor", inputs: { action: "action", itemId: "itemId", item: "item", actionData: "actionData", dataProvider: "dataProvider", viewContainerInit: ["viewContainer", "viewContainerInit"] }, outputs: { actionRunEventEmitter: "actionSubmit" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "submitButtonElementRef", first: true, predicate: ["submitButton"], descendants: true }, { propertyName: "editorComponent", first: true, predicate: MngFormEditorComponent, descendants: true }], ngImport: i0, template: "<h2 *ngIf=\"!isDialog && title\">{{ title }}</h2>\n<div class=\"h-full flex flex-column\">\n    <div class=\"flex-grow-1\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n        <p-toolbar styleClass=\"mng-action-editor-toolbar\">\n            <ng-template pTemplate=\"left\">\n                <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n            </ng-template>\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n            </ng-template>\n        </p-toolbar>\n    </div>\n\n    <div class=\"flex-grow-1\">\n        <div class=\"text-center\" *ngIf=\"loading$ | async\">\n            <p-progressSpinner [style]=\"{width: '3rem', height: '3rem'}\" strokeWidth=\"3\"></p-progressSpinner>\n        </div>\n        <mng-form-editor *ngIf=\"action.editorDescriptor && (loading$ | async) === false\" [descriptor]=\"action.editorDescriptor\" [item]=\"item\" (formSubmit)=\"onSubmit($event)\">\n        </mng-form-editor>\n    </div>\n\n    <div class=\"flex flex-row justify-content-between\">\n        <div>\n            <mng-action *ngFor=\"let action of footerLeftActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n        </div>\n        <div>\n            <mng-action *ngFor=\"let action of footerRightActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n        </div>\n    </div>\n</div>\n", components: [{ type: i4$2.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass"] }, { type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "dataProvider", "disabled", "loading", "viewContainer"], outputs: ["trigger"] }, { type: i6.ProgressSpinner, selector: "p-progressSpinner", inputs: ["style", "styleClass", "strokeWidth", "fill", "animationDuration"] }, { type: MngFormEditorComponent, selector: "mng-form-editor", inputs: ["descriptor", "submitLoading", "item", "isSubmitButtonVisible", "isFormDisabled"], outputs: ["formSubmit"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngActionEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionEditorComponent, deps: [{ token: i0.Injector }, { token: i1$1.TranslateService }, { token: MngActionExecutorService }, { token: MngCommonsService }, { token: MngNavigationService }, { token: i3.DynamicDialogRef, optional: true }, { token: i3.DynamicDialogConfig, optional: true }, { token: MngViewContainerComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MngActionEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngActionEditorComponent, selector: "mng-action-editor", inputs: { action: "action", itemId: "itemId", item: "item", actionData: "actionData", dataProvider: "dataProvider", viewContainerInit: ["viewContainer", "viewContainerInit"] }, outputs: { actionRunEventEmitter: "actionSubmit" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "submitButtonElementRef", first: true, predicate: ["submitButton"], descendants: true }, { propertyName: "editorComponent", first: true, predicate: MngFormEditorComponent, descendants: true }], ngImport: i0, template: "<h5 *ngIf=\"!isDialog && title\">{{ title }}</h5>\n<div class=\"h-full flex flex-column\">\n    <div class=\"flex-grow-1\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n        <p-toolbar styleClass=\"mng-action-editor-toolbar\">\n            <ng-template pTemplate=\"left\">\n                <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n            </ng-template>\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n            </ng-template>\n        </p-toolbar>\n    </div>\n\n    <div class=\"flex-grow-1\">\n        <div class=\"text-center\" *ngIf=\"loading$ | async\">\n            <p-progressSpinner [style]=\"{width: '3rem', height: '3rem'}\" strokeWidth=\"3\"></p-progressSpinner>\n        </div>\n        <mng-form-editor *ngIf=\"action.editorDescriptor && (loading$ | async) === false\" [descriptor]=\"action.editorDescriptor\" [item]=\"item\" (formSubmit)=\"onSubmit($event)\">\n        </mng-form-editor>\n    </div>\n\n    <div class=\"flex flex-row justify-content-between\">\n        <div>\n            <mng-action *ngFor=\"let action of footerLeftActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n        </div>\n        <div>\n            <mng-action *ngFor=\"let action of footerRightActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n        </div>\n    </div>\n</div>\n", components: [{ type: i4$3.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass"] }, { type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "dataProvider", "disabled", "loading", "viewContainer"], outputs: ["trigger"] }, { type: i6.ProgressSpinner, selector: "p-progressSpinner", inputs: ["style", "styleClass", "strokeWidth", "fill", "animationDuration"] }, { type: MngFormEditorComponent, selector: "mng-form-editor", inputs: ["descriptor", "submitLoading", "item", "isSubmitButtonVisible", "isFormDisabled"], outputs: ["formSubmit"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngActionEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-action-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: "<h2 *ngIf=\"!isDialog && title\">{{ title }}</h2>\n<div class=\"h-full flex flex-column\">\n    <div class=\"flex-grow-1\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n        <p-toolbar styleClass=\"mng-action-editor-toolbar\">\n            <ng-template pTemplate=\"left\">\n                <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n            </ng-template>\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n            </ng-template>\n        </p-toolbar>\n    </div>\n\n    <div class=\"flex-grow-1\">\n        <div class=\"text-center\" *ngIf=\"loading$ | async\">\n            <p-progressSpinner [style]=\"{width: '3rem', height: '3rem'}\" strokeWidth=\"3\"></p-progressSpinner>\n        </div>\n        <mng-form-editor *ngIf=\"action.editorDescriptor && (loading$ | async) === false\" [descriptor]=\"action.editorDescriptor\" [item]=\"item\" (formSubmit)=\"onSubmit($event)\">\n        </mng-form-editor>\n    </div>\n\n    <div class=\"flex flex-row justify-content-between\">\n        <div>\n            <mng-action *ngFor=\"let action of footerLeftActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n        </div>\n        <div>\n            <mng-action *ngFor=\"let action of footerRightActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n        </div>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'mng-action-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: "<h5 *ngIf=\"!isDialog && title\">{{ title }}</h5>\n<div class=\"h-full flex flex-column\">\n    <div class=\"flex-grow-1\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n        <p-toolbar styleClass=\"mng-action-editor-toolbar\">\n            <ng-template pTemplate=\"left\">\n                <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n            </ng-template>\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n            </ng-template>\n        </p-toolbar>\n    </div>\n\n    <div class=\"flex-grow-1\">\n        <div class=\"text-center\" *ngIf=\"loading$ | async\">\n            <p-progressSpinner [style]=\"{width: '3rem', height: '3rem'}\" strokeWidth=\"3\"></p-progressSpinner>\n        </div>\n        <mng-form-editor *ngIf=\"action.editorDescriptor && (loading$ | async) === false\" [descriptor]=\"action.editorDescriptor\" [item]=\"item\" (formSubmit)=\"onSubmit($event)\">\n        </mng-form-editor>\n    </div>\n\n    <div class=\"flex flex-row justify-content-between\">\n        <div>\n            <mng-action *ngFor=\"let action of footerLeftActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n        </div>\n        <div>\n            <mng-action *ngFor=\"let action of footerRightActions\" [action]=\"action\" [disabled]=\"submitLoading$\" [viewContainer]=\"viewContainer\"></mng-action>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () {
-        return [{ type: i0.Injector }, { type: i3$1.TranslateService }, { type: MngActionExecutorService }, { type: MngCommonsService }, { type: MngNavigationService }, { type: i3.DynamicDialogRef, decorators: [{
+        return [{ type: i0.Injector }, { type: i1$1.TranslateService }, { type: MngActionExecutorService }, { type: MngCommonsService }, { type: MngNavigationService }, { type: i3.DynamicDialogRef, decorators: [{
                         type: Optional
                     }] }, { type: i3.DynamicDialogConfig, decorators: [{
                         type: Optional
@@ -5587,7 +5888,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    [className]=\"descriptor.inputClassName\">\n</mng-autocomplete>\n", components: [{ type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "multiselect", "placeholder", "className", "dropdownClassName"], outputs: ["valueChange"] }], directives: [{ type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$2.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldAutocompleteComponent, selector: "mng-formly-field-autocomplete", usesInheritance: true, ngImport: i0, template: "<mng-autocomplete\n    [id]=\"$any(key)\"\n    [formControl]=\"aFormControl\"\n    [formlyAttributes]=\"field\"\n    [dataProvider]=\"$any(descriptor.dataProvider)\"\n    [dataKeyProperty]=\"$any(descriptor.dataKeyProperty)\"\n    [itemsLabelProperty]=\"$any(descriptor.itemsLabelProperty)\"\n    [className]=\"descriptor.inputClassName\">\n</mng-autocomplete>\n", components: [{ type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "dataKeyProperty", "itemsValueProperty", "itemsLabelProperty", "itemsLabelTranslate", "inlineSearch", "openOnFocus", "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    [className]=\"descriptor.inputClassName\">\n</mng-autocomplete>\n" }]
@@ -5604,10 +5905,10 @@ class MngFormlyFieldInputComponent extends FieldType {
     }
 }
 MngFormlyFieldInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MngFormlyFieldInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldInputComponent, selector: "mng-formly-field-input", usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"to.type\">\n    <p-inputNumber\n        *ngSwitchCase=\"'number'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [min]=\"$any(descriptor.numberMin)\"\n        [max]=\"$any(descriptor.numberMax)\"\n        [step]=\"$any(descriptor.numberStep)\"\n        [useGrouping]=\"$any(descriptor.numberUseGrouping)\"\n        [minFractionDigits]=\"descriptor.numberMinFractionDigits || 0\"\n        [maxFractionDigits]=\"descriptor.numberMaxFractionDigits || 0\"\n        [inputStyleClass]=\"descriptor.inputClassName\">\n    </p-inputNumber>\n\n    <div *ngSwitchCase=\"'switch'\" class=\"flex flex-column\">\n        <label [for]=\"key\" [class]=\"descriptor.labelClassName\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n        <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [styleClass]=\"descriptor.inputClassName\"></p-inputSwitch>\n        <small *ngIf=\"showError\" class=\"p-error\">\n            <formly-validation-message [field]=\"field\"></formly-validation-message>\n        </small>\n    </div>\n\n    <ng-container *ngSwitchCase=\"'radio'\">\n        <div *ngFor=\"let option of descriptor.radioOptions\" [id]=\"$any(key)\" class=\"field-radiobutton\">\n            <p-radioButton\n                [name]=\"$any(key)\"\n                [value]=\"option.value\"\n                [formControl]=\"iFormControl\"\n                [formlyAttributes]=\"field\"\n                [styleClass]=\"descriptor.inputClassName\"></p-radioButton>\n            <label [for]=\"option.value\" [class]=\"'mng-radio-button-label ' + descriptor.labelClassName\">{{ option.title | translate }}</label>\n        </div>\n    </ng-container>\n\n    <textarea\n        *ngSwitchCase=\"'textarea'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [rows]=\"descriptor.rows ?? 3\"\n        pInputTextarea\n        [class]=\"descriptor.inputClassName\">\n    </textarea>\n\n    <p-calendar\n        *ngSwitchCase=\"'datepicker'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [dateFormat]=\"$any(descriptor.datePickerFormat)\"\n        [minDate]=\"$any(descriptor.datePickerMin)\"\n        [maxDate]=\"$any(descriptor.datePickerMax)\"\n        [showTime]=\"descriptor.datePickerShowTime\"\n        [showIcon]=\"true\"\n        [inputStyleClass]=\"descriptor.inputClassName\">\n    </p-calendar>\n\n    <p-inputMask\n        *ngSwitchCase=\"'mask'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [mask]=\"$any(descriptor.mask)\"\n        [placeholder]=\"$any(descriptor.placeholder)\"\n        [slotChar]=\"$any(descriptor.slotChar)\"\n        [styleClass]=\"descriptor.inputClassName\">\n    </p-inputMask>\n\n    <input *ngSwitchDefault pInputText [id]=\"$any(key)\" [type]=\"to.type || 'text'\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" />\n</ng-container>\n", components: [{ type: i1$2.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }, { type: i2$3.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabelledBy"], outputs: ["onChange"] }, { type: i3$2.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i4$3.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i5$1.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { type: i6$1.InputMask, selector: "p-inputMask", inputs: ["type", "slotChar", "autoClear", "style", "inputId", "styleClass", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "disabled", "readonly", "unmask", "name", "required", "characterPattern", "autoFocus", "autocomplete", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$2.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9$1.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i10.InputText, selector: "[pInputText]" }], pipes: { "translate": i3$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldInputComponent, selector: "mng-formly-field-input", usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"to.type\">\n    <p-inputNumber\n        *ngSwitchCase=\"'number'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [min]=\"$any(descriptor.numberMin)\"\n        [max]=\"$any(descriptor.numberMax)\"\n        [step]=\"$any(descriptor.numberStep)\"\n        [useGrouping]=\"$any(descriptor.numberUseGrouping)\"\n        [minFractionDigits]=\"descriptor.numberMinFractionDigits || 0\"\n        [maxFractionDigits]=\"descriptor.numberMaxFractionDigits || 0\"\n        [inputStyleClass]=\"descriptor.inputClassName\">\n    </p-inputNumber>\n\n    <div *ngSwitchCase=\"'switch'\" class=\"flex flex-column\">\n        <label [for]=\"key\" [class]=\"descriptor.labelClassName\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n        <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [styleClass]=\"descriptor.inputClassName\"></p-inputSwitch>\n        <small *ngIf=\"showError\" class=\"p-error\">\n            <formly-validation-message [field]=\"field\"></formly-validation-message>\n        </small>\n    </div>\n\n    <ng-container *ngSwitchCase=\"'radio'\">\n        <div *ngFor=\"let option of descriptor.radioOptions\" [id]=\"$any(key)\" class=\"field-radiobutton\">\n            <p-radioButton\n                [name]=\"$any(key)\"\n                [value]=\"option.value\"\n                [formControl]=\"iFormControl\"\n                [formlyAttributes]=\"field\"\n                [styleClass]=\"descriptor.inputClassName\"></p-radioButton>\n            <label [for]=\"option.value\" [class]=\"'mng-radio-button-label ' + descriptor.labelClassName\">{{ option.title | translate }}</label>\n        </div>\n    </ng-container>\n\n    <textarea\n        *ngSwitchCase=\"'textarea'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [rows]=\"descriptor.rows ?? 3\"\n        pInputTextarea\n        [class]=\"descriptor.inputClassName\">\n    </textarea>\n\n    <p-calendar\n        *ngSwitchCase=\"'datepicker'\"\n        appendTo=\"body\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [dateFormat]=\"$any(descriptor.datePickerFormat)\"\n        [minDate]=\"$any(descriptor.datePickerMin)\"\n        [maxDate]=\"$any(descriptor.datePickerMax)\"\n        [showTime]=\"descriptor.datePickerShowTime\"\n        [showIcon]=\"true\"\n        [inputStyleClass]=\"descriptor.inputClassName\">\n    </p-calendar>\n\n    <p-inputMask\n        *ngSwitchCase=\"'mask'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [mask]=\"$any(descriptor.mask)\"\n        [placeholder]=\"$any(descriptor.placeholder)\"\n        [slotChar]=\"$any(descriptor.slotChar)\"\n        [styleClass]=\"descriptor.inputClassName\">\n    </p-inputMask>\n\n    <input *ngSwitchDefault pInputText [id]=\"$any(key)\" [type]=\"to.type || 'text'\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" />\n</ng-container>\n", components: [{ type: i1$2.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }, { type: i2$3.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabelledBy"], outputs: ["onChange"] }, { type: i3$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i4$4.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i5$1.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { type: i6$1.InputMask, selector: "p-inputMask", inputs: ["type", "slotChar", "autoClear", "style", "inputId", "styleClass", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "disabled", "readonly", "unmask", "name", "required", "characterPattern", "autoFocus", "autocomplete", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9$1.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i10.InputText, selector: "[pInputText]" }], pipes: { "translate": i1$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-formly-field-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"to.type\">\n    <p-inputNumber\n        *ngSwitchCase=\"'number'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [min]=\"$any(descriptor.numberMin)\"\n        [max]=\"$any(descriptor.numberMax)\"\n        [step]=\"$any(descriptor.numberStep)\"\n        [useGrouping]=\"$any(descriptor.numberUseGrouping)\"\n        [minFractionDigits]=\"descriptor.numberMinFractionDigits || 0\"\n        [maxFractionDigits]=\"descriptor.numberMaxFractionDigits || 0\"\n        [inputStyleClass]=\"descriptor.inputClassName\">\n    </p-inputNumber>\n\n    <div *ngSwitchCase=\"'switch'\" class=\"flex flex-column\">\n        <label [for]=\"key\" [class]=\"descriptor.labelClassName\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n        <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [styleClass]=\"descriptor.inputClassName\"></p-inputSwitch>\n        <small *ngIf=\"showError\" class=\"p-error\">\n            <formly-validation-message [field]=\"field\"></formly-validation-message>\n        </small>\n    </div>\n\n    <ng-container *ngSwitchCase=\"'radio'\">\n        <div *ngFor=\"let option of descriptor.radioOptions\" [id]=\"$any(key)\" class=\"field-radiobutton\">\n            <p-radioButton\n                [name]=\"$any(key)\"\n                [value]=\"option.value\"\n                [formControl]=\"iFormControl\"\n                [formlyAttributes]=\"field\"\n                [styleClass]=\"descriptor.inputClassName\"></p-radioButton>\n            <label [for]=\"option.value\" [class]=\"'mng-radio-button-label ' + descriptor.labelClassName\">{{ option.title | translate }}</label>\n        </div>\n    </ng-container>\n\n    <textarea\n        *ngSwitchCase=\"'textarea'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [rows]=\"descriptor.rows ?? 3\"\n        pInputTextarea\n        [class]=\"descriptor.inputClassName\">\n    </textarea>\n\n    <p-calendar\n        *ngSwitchCase=\"'datepicker'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [dateFormat]=\"$any(descriptor.datePickerFormat)\"\n        [minDate]=\"$any(descriptor.datePickerMin)\"\n        [maxDate]=\"$any(descriptor.datePickerMax)\"\n        [showTime]=\"descriptor.datePickerShowTime\"\n        [showIcon]=\"true\"\n        [inputStyleClass]=\"descriptor.inputClassName\">\n    </p-calendar>\n\n    <p-inputMask\n        *ngSwitchCase=\"'mask'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [mask]=\"$any(descriptor.mask)\"\n        [placeholder]=\"$any(descriptor.placeholder)\"\n        [slotChar]=\"$any(descriptor.slotChar)\"\n        [styleClass]=\"descriptor.inputClassName\">\n    </p-inputMask>\n\n    <input *ngSwitchDefault pInputText [id]=\"$any(key)\" [type]=\"to.type || 'text'\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" />\n</ng-container>\n" }]
+            args: [{ selector: 'mng-formly-field-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"to.type\">\n    <p-inputNumber\n        *ngSwitchCase=\"'number'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [min]=\"$any(descriptor.numberMin)\"\n        [max]=\"$any(descriptor.numberMax)\"\n        [step]=\"$any(descriptor.numberStep)\"\n        [useGrouping]=\"$any(descriptor.numberUseGrouping)\"\n        [minFractionDigits]=\"descriptor.numberMinFractionDigits || 0\"\n        [maxFractionDigits]=\"descriptor.numberMaxFractionDigits || 0\"\n        [inputStyleClass]=\"descriptor.inputClassName\">\n    </p-inputNumber>\n\n    <div *ngSwitchCase=\"'switch'\" class=\"flex flex-column\">\n        <label [for]=\"key\" [class]=\"descriptor.labelClassName\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n        <p-inputSwitch [id]=\"$any(key)\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" [styleClass]=\"descriptor.inputClassName\"></p-inputSwitch>\n        <small *ngIf=\"showError\" class=\"p-error\">\n            <formly-validation-message [field]=\"field\"></formly-validation-message>\n        </small>\n    </div>\n\n    <ng-container *ngSwitchCase=\"'radio'\">\n        <div *ngFor=\"let option of descriptor.radioOptions\" [id]=\"$any(key)\" class=\"field-radiobutton\">\n            <p-radioButton\n                [name]=\"$any(key)\"\n                [value]=\"option.value\"\n                [formControl]=\"iFormControl\"\n                [formlyAttributes]=\"field\"\n                [styleClass]=\"descriptor.inputClassName\"></p-radioButton>\n            <label [for]=\"option.value\" [class]=\"'mng-radio-button-label ' + descriptor.labelClassName\">{{ option.title | translate }}</label>\n        </div>\n    </ng-container>\n\n    <textarea\n        *ngSwitchCase=\"'textarea'\"\n        [id]=\"$any(key)\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [rows]=\"descriptor.rows ?? 3\"\n        pInputTextarea\n        [class]=\"descriptor.inputClassName\">\n    </textarea>\n\n    <p-calendar\n        *ngSwitchCase=\"'datepicker'\"\n        appendTo=\"body\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [dateFormat]=\"$any(descriptor.datePickerFormat)\"\n        [minDate]=\"$any(descriptor.datePickerMin)\"\n        [maxDate]=\"$any(descriptor.datePickerMax)\"\n        [showTime]=\"descriptor.datePickerShowTime\"\n        [showIcon]=\"true\"\n        [inputStyleClass]=\"descriptor.inputClassName\">\n    </p-calendar>\n\n    <p-inputMask\n        *ngSwitchCase=\"'mask'\"\n        [formControl]=\"iFormControl\"\n        [formlyAttributes]=\"field\"\n        [mask]=\"$any(descriptor.mask)\"\n        [placeholder]=\"$any(descriptor.placeholder)\"\n        [slotChar]=\"$any(descriptor.slotChar)\"\n        [styleClass]=\"descriptor.inputClassName\">\n    </p-inputMask>\n\n    <input *ngSwitchDefault pInputText [id]=\"$any(key)\" [type]=\"to.type || 'text'\" [formControl]=\"iFormControl\" [formlyAttributes]=\"field\" />\n</ng-container>\n" }]
         }] });
 
 class MngFormlyFieldDropdownComponent extends FieldType {
@@ -5617,7 +5918,7 @@ 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]=\"descriptor.placeholder\"\n    [dataProvider]=\"descriptor.dataProvider\"\n    [itemsLabelProperty]=\"descriptor.itemsLabelProperty\"\n    [itemsLabelTranslate]=\"descriptor.itemsLabelTranslate\"\n    [itemsValueProperty]=\"descriptor.itemsValueProperty\"\n    [itemsDisabledProperty]=\"descriptor.itemsDisabledProperty\"\n    [dataKeyProperty]=\"descriptor.dataKeyProperty\"\n    [showClear]=\"!to.required\"\n    [className]=\"descriptor.inputClassName\">\n</mng-dropdown>\n", components: [{ type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsLabelTranslate", "itemsValueProperty", "itemsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName"], outputs: ["valueChange"] }], directives: [{ type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$2.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldDropdownComponent, selector: "mng-formly-field-dropdown", usesInheritance: true, ngImport: i0, template: "<mng-dropdown\n    [id]=\"$any(key)\"\n    [formControl]=\"dFormControl\"\n    [formlyAttributes]=\"field\"\n    [placeholder]=\"descriptor.placeholder\"\n    [dataProvider]=\"descriptor.dataProvider\"\n    [itemsLabelProperty]=\"descriptor.itemsLabelProperty\"\n    [itemsLabelTranslate]=\"descriptor.itemsLabelTranslate\"\n    [itemsValueProperty]=\"descriptor.itemsValueProperty\"\n    [itemsDisabledProperty]=\"descriptor.itemsDisabledProperty\"\n    [dataKeyProperty]=\"descriptor.dataKeyProperty\"\n    [showClear]=\"!to.required\"\n    [className]=\"descriptor.inputClassName\">\n</mng-dropdown>\n", components: [{ type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsLabelTranslate", "itemsValueProperty", "itemsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName"], outputs: ["valueChange"] }], directives: [{ type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$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]=\"descriptor.placeholder\"\n    [dataProvider]=\"descriptor.dataProvider\"\n    [itemsLabelProperty]=\"descriptor.itemsLabelProperty\"\n    [itemsLabelTranslate]=\"descriptor.itemsLabelTranslate\"\n    [itemsValueProperty]=\"descriptor.itemsValueProperty\"\n    [itemsDisabledProperty]=\"descriptor.itemsDisabledProperty\"\n    [dataKeyProperty]=\"descriptor.dataKeyProperty\"\n    [showClear]=\"!to.required\"\n    [className]=\"descriptor.inputClassName\">\n</mng-dropdown>\n" }]
@@ -5692,36 +5993,22 @@ class MngTableColumnFilterComponent {
     }
     // eslint-disable-next-line @typescript-eslint/ban-types
     autocompleteFilter(value, filterCallback) {
-        if (value) {
-            let filterValue = value;
-            if (this.lookupDescriptor.itemsValueProperty) {
-                filterValue = filterValue[this.lookupDescriptor.itemsValueProperty];
-            }
-            filterCallback(filterValue);
-        }
-        else {
-            filterCallback(value);
-        }
+        filterCallback(value);
     }
     // eslint-disable-next-line @typescript-eslint/ban-types
     dropdownFilter(value, filterCallback) {
-        if (value) {
-            let filterValue = value;
-            if (this.lookupDescriptor.itemsValueProperty) {
-                filterValue = filterValue[this.lookupDescriptor.itemsValueProperty];
-            }
-            filterCallback(filterValue);
-        }
-        else {
-            filterCallback(value);
-        }
+        filterCallback(value);
+    }
+    toLookupFilterValue(value) {
+        console.log(this.descriptor.property, value);
+        return this.lookupDescriptor.dataKeyProperty && value ? { [this.lookupDescriptor.dataKeyProperty]: value } : value;
     }
 }
 MngTableColumnFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableColumnFilterComponent, deps: [{ token: i2.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
-MngTableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: { descriptor: "descriptor", display: "display" }, ngImport: i0, template: "<p-columnFilter\n    class=\"ml-auto\"\n    [type]=\"primeType\"\n    matchMode=\"equals\"\n    [field]=\"descriptor.property\"\n    [display]=\"primeDisplay\"\n    [matchMode]=\"primeDefaultMatchMode\"\n    [matchModeOptions]=\"$any(primeMatchModes)\"\n    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n    [showMatchModes]=\"true\"\n    [showOperator]=\"false\"\n    [showAddButton]=\"false\"\n    [hideOnClear]=\"true\">\n    <ng-template *ngIf=\"lookupDescriptor\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <ng-container [ngSwitch]=\"lookupDescriptor.lookupType\">\n            <mng-autocomplete\n                *ngSwitchCase=\"lookupTypeAutocomplete\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                (valueChange)=\"autocompleteFilter($event, filterCallback)\">\n            </mng-autocomplete>\n            <mng-dropdown\n                *ngSwitchCase=\"lookupTypeDropdown\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                [showClear]=\"true\"\n                (valueChange)=\"dropdownFilter($event, filterCallback)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n", components: [{ type: i4$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", "itemsLabelTranslate", "itemsValueProperty", "itemsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName"], outputs: ["valueChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3$1.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                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [openOnFocus]=\"lookupDescriptor.autocompleteOpenOnFocus\"\n                [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                (valueChange)=\"autocompleteFilter($event, filterCallback)\">\n            </mng-autocomplete>\n            <mng-dropdown\n                *ngSwitchCase=\"lookupTypeDropdown\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                [showClear]=\"true\"\n                (valueChange)=\"dropdownFilter($event, filterCallback)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n", components: [{ type: i4$5.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping"] }, { type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "dataKeyProperty", "itemsValueProperty", "itemsLabelProperty", "itemsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName"], outputs: ["valueChange"] }, { type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsLabelTranslate", "itemsValueProperty", "itemsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName"], outputs: ["valueChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i1$1.TranslatePipe } });
 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                [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                [showClear]=\"true\"\n                (valueChange)=\"dropdownFilter($event, filterCallback)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n" }]
+            args: [{ selector: 'mng-table-column-filter', template: "<p-columnFilter\n    class=\"ml-auto\"\n    [type]=\"primeType\"\n    matchMode=\"equals\"\n    [field]=\"descriptor.property\"\n    [display]=\"primeDisplay\"\n    [matchMode]=\"primeDefaultMatchMode\"\n    [matchModeOptions]=\"$any(primeMatchModes)\"\n    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n    [showMatchModes]=\"true\"\n    [showOperator]=\"false\"\n    [showAddButton]=\"false\"\n    [hideOnClear]=\"true\">\n    <ng-template *ngIf=\"lookupDescriptor\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <ng-container [ngSwitch]=\"lookupDescriptor.lookupType\">\n            <mng-autocomplete\n                *ngSwitchCase=\"lookupTypeAutocomplete\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [openOnFocus]=\"lookupDescriptor.autocompleteOpenOnFocus\"\n                [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                (valueChange)=\"autocompleteFilter($event, filterCallback)\">\n            </mng-autocomplete>\n            <mng-dropdown\n                *ngSwitchCase=\"lookupTypeDropdown\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                [showClear]=\"true\"\n                (valueChange)=\"dropdownFilter($event, filterCallback)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n" }]
         }], ctorParameters: function () { return [{ type: i2.PrimeNGConfig }]; }, propDecorators: { descriptor: [{
                 type: Input
             }], display: [{
@@ -5735,13 +6022,26 @@ class MngTableColumnValueComponent {
         this.columnTypeBoolean = ColumnDescriptor.TypeEnum.Boolean;
         this.columnTypeDate = ColumnDescriptor.TypeEnum.Date;
         this.columnTypeEnum = ColumnDescriptor.TypeEnum.Enum;
+        this.columnTypeCustom = ColumnDescriptor.TypeEnum.Custom;
+        this.jsonPath = '$';
+    }
+    ngOnInit() {
+        if (this.descriptor.jsonPath) {
+            this.jsonPath = this.descriptor.jsonPath;
+        }
+        else {
+            this.jsonPath = `$.${this.descriptor.property}`;
+            if (this.descriptor.objectModelType) {
+                this.jsonPath = `$.${this.descriptor.property}.${this.descriptor.objectTitleProperty}`;
+            }
+        }
     }
 }
 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        <ng-container *ngIf=\"descriptor.booleanAsIcon; else booleanText\"></ng-container>\n        <i [class]=\"item[descriptor.property] | boolean: descriptor.booleanYes:descriptor.booleanNo:true\"></i>\n        <ng-template #booleanText>\n            {{\n                (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property])\n                    | boolean: descriptor.booleanYes:descriptor.booleanNo\n                    | translate\n            }}\n        </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeEnum\">\n        {{\n            (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property])\n                | enum: descriptor.enumType:descriptor.enumTitlePath:descriptor.enumNameAsValue\n                | translate\n        }}\n    </ng-container>\n</ng-container>\n", directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "propertyPath": MngPropertyPathPipe, "number": i4.DecimalPipe, "date": i4.DatePipe, "boolean": MngBooleanPipe, "translate": i3$1.TranslatePipe, "enum": MngEnumPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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        {{ item | jsonPath: jsonPath }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeNumber\">\n        {{ item | jsonPath: jsonPath | number: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeDate\">\n        {{ item | jsonPath: jsonPath | date: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeBoolean\">\n        <ng-container *ngIf=\"descriptor.booleanAsIcon; else booleanText\"></ng-container>\n        <i [class]=\"item | jsonPath: jsonPath | boolean: descriptor.booleanYes:descriptor.booleanNo:true\"></i>\n        <ng-template #booleanText>\n            {{ item | jsonPath: jsonPath | boolean: descriptor.booleanYes:descriptor.booleanNo | translate }}\n        </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeEnum\">\n        {{ item | jsonPath: jsonPath | enum: descriptor.enumType:descriptor.enumTitlePath:descriptor.enumNameAsValue | translate }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeCustom\">\n        <ng-container\n            [mngComponent]=\"descriptor.customComponentType!\"\n            [inputs]=\"{\n                value: item | jsonPath: jsonPath,\n                item: item,\n                descriptor: descriptor\n            }\"></ng-container>\n    </ng-container>\n</ng-container>\n", directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs"], outputs: ["instanceCreated"] }], pipes: { "jsonPath": JsonPathPipe, "number": i4.DecimalPipe, "date": i4.DatePipe, "boolean": MngBooleanPipe, "translate": i1$1.TranslatePipe, "enum": MngEnumPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableColumnValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-table-column-value', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"descriptor.columnType\">\n    <ng-container *ngSwitchCase=\"columnTypeString\">\n        {{ descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property] }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeNumber\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | number: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeDate\">\n        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | date: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeBoolean\">\n        <ng-container *ngIf=\"descriptor.booleanAsIcon; else booleanText\"></ng-container>\n        <i [class]=\"item[descriptor.property] | boolean: descriptor.booleanYes:descriptor.booleanNo:true\"></i>\n        <ng-template #booleanText>\n            {{\n                (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property])\n                    | boolean: descriptor.booleanYes:descriptor.booleanNo\n                    | translate\n            }}\n        </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeEnum\">\n        {{\n            (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property])\n                | enum: descriptor.enumType:descriptor.enumTitlePath:descriptor.enumNameAsValue\n                | translate\n        }}\n    </ng-container>\n</ng-container>\n" }]
+            args: [{ selector: 'mng-table-column-value', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"descriptor.columnType\">\n    <ng-container *ngSwitchCase=\"columnTypeString\">\n        {{ item | jsonPath: jsonPath }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeNumber\">\n        {{ item | jsonPath: jsonPath | number: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeDate\">\n        {{ item | jsonPath: jsonPath | date: descriptor.displayFormat }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeBoolean\">\n        <ng-container *ngIf=\"descriptor.booleanAsIcon; else booleanText\"></ng-container>\n        <i [class]=\"item | jsonPath: jsonPath | boolean: descriptor.booleanYes:descriptor.booleanNo:true\"></i>\n        <ng-template #booleanText>\n            {{ item | jsonPath: jsonPath | boolean: descriptor.booleanYes:descriptor.booleanNo | translate }}\n        </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeEnum\">\n        {{ item | jsonPath: jsonPath | enum: descriptor.enumType:descriptor.enumTitlePath:descriptor.enumNameAsValue | translate }}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeCustom\">\n        <ng-container\n            [mngComponent]=\"descriptor.customComponentType!\"\n            [inputs]=\"{\n                value: item | jsonPath: jsonPath,\n                item: item,\n                descriptor: descriptor\n            }\"></ng-container>\n    </ng-container>\n</ng-container>\n" }]
         }], propDecorators: { descriptor: [{
                 type: Input
             }], item: [{
@@ -6014,13 +6314,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: i3$1.TranslateService }, { token: MngViewContainerComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MngTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableComponent, selector: "mng-table", inputs: { descriptor: "descriptor", items: "items", queryResult: "queryResult", loading: "loading", dataProvider: "dataProvider", useQueryParams: "useQueryParams", selectionMode: "selectionMode", selectionEnabled: "selectionEnabled", isColumnClickable: "isColumnClickable", captionComponent: "captionComponent", columnActionComponent: "columnActionComponent" }, outputs: { loadEventEmitter: "tableLoad", cellClickEventEmitter: "cellClick", selectionChangeEventEmitter: "selectionChange", captionCmpInstEventEmitter: "captionComponentInstance", columnActionCmpInstEventEmitter: "columnActionComponentInstance" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "primeTable", first: true, predicate: Table, descendants: true }, { propertyName: "components", predicate: MngComponentDirective, descendants: true }], ngImport: i0, template: "<div [style.height]=\"scrollHeight === 'flex' ? 'calc(100vh - ' + descriptor.tableFullHeightOffset + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    <p-table\n        *ngIf=\"!useQueryParams || useQueryParamsInitialized\"\n        [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n        [dataKey]=\"$any(descriptor.dataKeyProperty)\"\n        [lazy]=\"useDataProvider\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"useDataProvider && !infiniteScroll\"\n        [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n        [first]=\"$any(infiniteScroll ? 0 : offset)\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"$any(multiSortMeta)\"\n        [filters]=\"filterMetadata\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [scrollable]=\"infiniteScroll\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualRowHeight]=\"$any(rowHeight)\"\n        [scrollHeight]=\"$any(scrollHeight)\"\n        [rowHover]=\"true\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\"\n        [selectionMode]=\"selectionMode\"\n        sortMode=\"multiple\"\n        responsiveLayout=\"scroll\">\n        <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor.title\" pTemplate=\"caption\">\n            <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #componentOrDefaultCaption>\n                <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n                <ng-template #defaultCaption>\n                    <h5 class=\"p-0 m-0\">{{ descriptor.title }}</h5>\n                </ng-template>\n            </ng-template>\n        </ng-template>\n\n        <ng-template pTemplate=\"header\">\n            <tr *ngIf=\"!descriptor.hideHeader\">\n                <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                </th>\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 2.25em\"></th>\n                <ng-container *ngFor=\"let col of descriptor.columns\">\n                    <th *ngIf=\"col.isSortEnabled\" [pSortableColumn]=\"col.property\">\n                        <div class=\"flex justify-content-between align-items-center\">\n                            {{ col.property | i18nProperty: descriptor.model | translate }}\n                            <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </div>\n                    </th>\n                    <th *ngIf=\"!col.isSortEnabled\">\n                        {{ col.property | i18nProperty: descriptor.model | translate }}\n                        <ng-container>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </ng-container>\n                    </th>\n                </ng-container>\n                <th *ngIf=\"columnActionTemplate || columnActionComponent\"></th>\n            </tr>\n            <tr *ngIf=\"descriptor.filterDisplay === filterDisplayRow\">\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 2.25em\"></th>\n                <th *ngFor=\"let col of descriptor.columns\">\n                    <div class=\"flex\" *ngIf=\"col.filterDescriptor\">\n                        <mng-table-column-filter [display]=\"descriptor.filterDisplay\" [descriptor]=\"col.filterDescriptor\"></mng-table-column-filter>\n                    </div>\n                </th>\n                <th *ngIf=\"columnActionTemplate || columnActionComponent\"></th>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n            <tr [style.height.px]=\"descriptor.rowHeight\">\n                <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\">\n                    <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                </td>\n                <td *ngFor=\"let col of descriptor.columns\" (click)=\"onCellClick(col, item, idx)\" [class.clickable]=\"isColumnClickable\">\n                    <mng-table-column-value [descriptor]=\"col\" [item]=\"item\"></mng-table-column-value>\n                </td>\n                <td *ngIf=\"columnActionTemplate || columnActionComponent\" class=\"text-right\">\n                    <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponent\">\n                        <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                    </ng-container>\n                    <ng-template #showColumnActionComponent>\n                        <span [mngComponent]=\"columnActionComponent!\" (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n                    </ng-template>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"loadingbody\">\n            <tr [style.height.px]=\"descriptor.rowHeight\">\n                <td [attr.colspan]=\"descriptor.columns.length + (columnActionTemplate || columnActionComponent ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    <div class=\"loading-text\"></div>\n                    <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"emptymessage\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"descriptor.columns.length + (columnActionTemplate || columnActionComponent ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    {{ 'mngTable.noItems' | translate }}\n                </td>\n            </tr>\n        </ng-template>\n    </p-table>\n</div>\n", components: [{ type: i4$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: i4$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { type: i7$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent"], outputs: ["instanceCreated"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i4.AsyncPipe, "translate": i3$1.TranslatePipe, "i18nProperty": MngI18nPropertyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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: i1$1.TranslateService }, { token: MngViewContainerComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MngTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableComponent, selector: "mng-table", inputs: { descriptor: "descriptor", items: "items", queryResult: "queryResult", loading: "loading", dataProvider: "dataProvider", useQueryParams: "useQueryParams", selectionMode: "selectionMode", selectionEnabled: "selectionEnabled", isColumnClickable: "isColumnClickable", captionComponent: "captionComponent", columnActionComponent: "columnActionComponent" }, outputs: { loadEventEmitter: "tableLoad", cellClickEventEmitter: "cellClick", selectionChangeEventEmitter: "selectionChange", captionCmpInstEventEmitter: "captionComponentInstance", columnActionCmpInstEventEmitter: "columnActionComponentInstance" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "primeTable", first: true, predicate: Table, descendants: true }, { propertyName: "components", predicate: MngComponentDirective, descendants: true }], ngImport: i0, template: "<div [style.height]=\"scrollHeight === 'flex' ? 'calc(100vh - ' + descriptor.tableFullHeightOffset + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    <p-table\n        *ngIf=\"!useQueryParams || useQueryParamsInitialized\"\n        [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n        [dataKey]=\"$any(descriptor.dataKeyProperty)\"\n        [lazy]=\"useDataProvider\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"useDataProvider && !infiniteScroll\"\n        [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n        [first]=\"$any(infiniteScroll ? 0 : offset)\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"$any(multiSortMeta)\"\n        [filters]=\"filterMetadata\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [scrollable]=\"infiniteScroll\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualRowHeight]=\"$any(rowHeight)\"\n        [scrollHeight]=\"$any(scrollHeight)\"\n        [rowHover]=\"true\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\"\n        [selectionMode]=\"selectionMode\"\n        sortMode=\"multiple\"\n        responsiveLayout=\"scroll\">\n        <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor.title\" pTemplate=\"caption\">\n            <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #componentOrDefaultCaption>\n                <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n                <ng-template #defaultCaption>\n                    <h5 class=\"p-0 m-0\">{{ descriptor.title }}</h5>\n                </ng-template>\n            </ng-template>\n        </ng-template>\n\n        <ng-template pTemplate=\"header\">\n            <tr *ngIf=\"!descriptor.hideHeader\">\n                <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                </th>\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 2.25em\"></th>\n                <ng-container *ngFor=\"let col of descriptor.columns\">\n                    <th *ngIf=\"col.isSortEnabled\" [pSortableColumn]=\"col.property\">\n                        <div class=\"flex justify-content-between align-items-center\">\n                            {{ col.title ?? (col.property | i18nProperty: descriptor.model) | translate }}\n                            <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </div>\n                    </th>\n                    <th *ngIf=\"!col.isSortEnabled\">\n                        {{ col.title ?? (col.property | i18nProperty: descriptor.model) | translate }}\n                        <ng-container>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </ng-container>\n                    </th>\n                </ng-container>\n                <th *ngIf=\"columnActionTemplate || columnActionComponent\"></th>\n            </tr>\n            <tr *ngIf=\"descriptor.filterDisplay === filterDisplayRow\">\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 2.25em\"></th>\n                <th *ngFor=\"let col of descriptor.columns\">\n                    <div class=\"flex\" *ngIf=\"col.filterDescriptor\">\n                        <mng-table-column-filter [display]=\"descriptor.filterDisplay\" [descriptor]=\"col.filterDescriptor\"></mng-table-column-filter>\n                    </div>\n                </th>\n                <th *ngIf=\"columnActionTemplate || columnActionComponent\"></th>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n            <tr [style.height.px]=\"descriptor.rowHeight\">\n                <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\">\n                    <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                </td>\n                <td *ngFor=\"let col of descriptor.columns\" (click)=\"onCellClick(col, item, idx)\" [class.clickable]=\"isColumnClickable\">\n                    <mng-table-column-value [descriptor]=\"col\" [item]=\"item\"></mng-table-column-value>\n                </td>\n                <td *ngIf=\"columnActionTemplate || columnActionComponent\" class=\"text-right\">\n                    <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponent\">\n                        <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                    </ng-container>\n                    <ng-template #showColumnActionComponent>\n                        <span [mngComponent]=\"columnActionComponent!\" (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n                    </ng-template>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"loadingbody\">\n            <tr [style.height.px]=\"descriptor.rowHeight\">\n                <td [attr.colspan]=\"descriptor.columns.length + (columnActionTemplate || columnActionComponent ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    <div class=\"loading-text\"></div>\n                    <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"emptymessage\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"descriptor.columns.length + (columnActionTemplate || columnActionComponent ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    {{ 'mngTable.noItems' | translate }}\n                </td>\n            </tr>\n        </ng-template>\n    </p-table>\n</div>\n", components: [{ type: i4$5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollDelay", "virtualRowHeight", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "minBufferPx", "maxBufferPx", "responsiveLayout", "breakpoint", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { type: i4$5.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { type: i4$5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: ["descriptor", "display"] }, { type: i4$5.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { type: i4$5.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { type: i7$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs"], outputs: ["instanceCreated"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i4.AsyncPipe, "translate": i1$1.TranslatePipe, "i18nProperty": MngI18nPropertyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.height]=\"scrollHeight === 'flex' ? 'calc(100vh - ' + descriptor.tableFullHeightOffset + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    <p-table\n        *ngIf=\"!useQueryParams || useQueryParamsInitialized\"\n        [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n        [dataKey]=\"$any(descriptor.dataKeyProperty)\"\n        [lazy]=\"useDataProvider\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"useDataProvider && !infiniteScroll\"\n        [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n        [first]=\"$any(infiniteScroll ? 0 : offset)\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"$any(multiSortMeta)\"\n        [filters]=\"filterMetadata\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [scrollable]=\"infiniteScroll\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualRowHeight]=\"$any(rowHeight)\"\n        [scrollHeight]=\"$any(scrollHeight)\"\n        [rowHover]=\"true\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\"\n        [selectionMode]=\"selectionMode\"\n        sortMode=\"multiple\"\n        responsiveLayout=\"scroll\">\n        <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor.title\" pTemplate=\"caption\">\n            <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #componentOrDefaultCaption>\n                <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n                <ng-template #defaultCaption>\n                    <h5 class=\"p-0 m-0\">{{ descriptor.title }}</h5>\n                </ng-template>\n            </ng-template>\n        </ng-template>\n\n        <ng-template pTemplate=\"header\">\n            <tr *ngIf=\"!descriptor.hideHeader\">\n                <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                </th>\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 2.25em\"></th>\n                <ng-container *ngFor=\"let col of descriptor.columns\">\n                    <th *ngIf=\"col.isSortEnabled\" [pSortableColumn]=\"col.property\">\n                        <div class=\"flex justify-content-between align-items-center\">\n                            {{ col.property | i18nProperty: descriptor.model | translate }}\n                            <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </div>\n                    </th>\n                    <th *ngIf=\"!col.isSortEnabled\">\n                        {{ col.property | i18nProperty: descriptor.model | translate }}\n                        <ng-container>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </ng-container>\n                    </th>\n                </ng-container>\n                <th *ngIf=\"columnActionTemplate || columnActionComponent\"></th>\n            </tr>\n            <tr *ngIf=\"descriptor.filterDisplay === filterDisplayRow\">\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 2.25em\"></th>\n                <th *ngFor=\"let col of descriptor.columns\">\n                    <div class=\"flex\" *ngIf=\"col.filterDescriptor\">\n                        <mng-table-column-filter [display]=\"descriptor.filterDisplay\" [descriptor]=\"col.filterDescriptor\"></mng-table-column-filter>\n                    </div>\n                </th>\n                <th *ngIf=\"columnActionTemplate || columnActionComponent\"></th>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n            <tr [style.height.px]=\"descriptor.rowHeight\">\n                <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\">\n                    <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                </td>\n                <td *ngFor=\"let col of descriptor.columns\" (click)=\"onCellClick(col, item, idx)\" [class.clickable]=\"isColumnClickable\">\n                    <mng-table-column-value [descriptor]=\"col\" [item]=\"item\"></mng-table-column-value>\n                </td>\n                <td *ngIf=\"columnActionTemplate || columnActionComponent\" class=\"text-right\">\n                    <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponent\">\n                        <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                    </ng-container>\n                    <ng-template #showColumnActionComponent>\n                        <span [mngComponent]=\"columnActionComponent!\" (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n                    </ng-template>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"loadingbody\">\n            <tr [style.height.px]=\"descriptor.rowHeight\">\n                <td [attr.colspan]=\"descriptor.columns.length + (columnActionTemplate || columnActionComponent ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    <div class=\"loading-text\"></div>\n                    <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"emptymessage\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"descriptor.columns.length + (columnActionTemplate || columnActionComponent ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    {{ 'mngTable.noItems' | translate }}\n                </td>\n            </tr>\n        </ng-template>\n    </p-table>\n</div>\n" }]
+            args: [{ selector: 'mng-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.height]=\"scrollHeight === 'flex' ? 'calc(100vh - ' + descriptor.tableFullHeightOffset + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    <p-table\n        *ngIf=\"!useQueryParams || useQueryParamsInitialized\"\n        [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n        [dataKey]=\"$any(descriptor.dataKeyProperty)\"\n        [lazy]=\"useDataProvider\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"useDataProvider && !infiniteScroll\"\n        [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n        [first]=\"$any(infiniteScroll ? 0 : offset)\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"$any(multiSortMeta)\"\n        [filters]=\"filterMetadata\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [scrollable]=\"infiniteScroll\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualRowHeight]=\"$any(rowHeight)\"\n        [scrollHeight]=\"$any(scrollHeight)\"\n        [rowHover]=\"true\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\"\n        [selectionMode]=\"selectionMode\"\n        sortMode=\"multiple\"\n        responsiveLayout=\"scroll\">\n        <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor.title\" pTemplate=\"caption\">\n            <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #componentOrDefaultCaption>\n                <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n                <ng-template #defaultCaption>\n                    <h5 class=\"p-0 m-0\">{{ descriptor.title }}</h5>\n                </ng-template>\n            </ng-template>\n        </ng-template>\n\n        <ng-template pTemplate=\"header\">\n            <tr *ngIf=\"!descriptor.hideHeader\">\n                <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                </th>\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 2.25em\"></th>\n                <ng-container *ngFor=\"let col of descriptor.columns\">\n                    <th *ngIf=\"col.isSortEnabled\" [pSortableColumn]=\"col.property\">\n                        <div class=\"flex justify-content-between align-items-center\">\n                            {{ col.title ?? (col.property | i18nProperty: descriptor.model) | translate }}\n                            <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </div>\n                    </th>\n                    <th *ngIf=\"!col.isSortEnabled\">\n                        {{ col.title ?? (col.property | i18nProperty: descriptor.model) | translate }}\n                        <ng-container>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </ng-container>\n                    </th>\n                </ng-container>\n                <th *ngIf=\"columnActionTemplate || columnActionComponent\"></th>\n            </tr>\n            <tr *ngIf=\"descriptor.filterDisplay === filterDisplayRow\">\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 2.25em\"></th>\n                <th *ngFor=\"let col of descriptor.columns\">\n                    <div class=\"flex\" *ngIf=\"col.filterDescriptor\">\n                        <mng-table-column-filter [display]=\"descriptor.filterDisplay\" [descriptor]=\"col.filterDescriptor\"></mng-table-column-filter>\n                    </div>\n                </th>\n                <th *ngIf=\"columnActionTemplate || columnActionComponent\"></th>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n            <tr [style.height.px]=\"descriptor.rowHeight\">\n                <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\">\n                    <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                </td>\n                <td *ngFor=\"let col of descriptor.columns\" (click)=\"onCellClick(col, item, idx)\" [class.clickable]=\"isColumnClickable\">\n                    <mng-table-column-value [descriptor]=\"col\" [item]=\"item\"></mng-table-column-value>\n                </td>\n                <td *ngIf=\"columnActionTemplate || columnActionComponent\" class=\"text-right\">\n                    <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponent\">\n                        <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                    </ng-container>\n                    <ng-template #showColumnActionComponent>\n                        <span [mngComponent]=\"columnActionComponent!\" (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n                    </ng-template>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"loadingbody\">\n            <tr [style.height.px]=\"descriptor.rowHeight\">\n                <td [attr.colspan]=\"descriptor.columns.length + (columnActionTemplate || columnActionComponent ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    <div class=\"loading-text\"></div>\n                    <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"emptymessage\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"descriptor.columns.length + (columnActionTemplate || columnActionComponent ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    {{ 'mngTable.noItems' | translate }}\n                </td>\n            </tr>\n        </ng-template>\n    </p-table>\n</div>\n" }]
         }], ctorParameters: function () {
-        return [{ type: i0.Injector }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i3$1.TranslateService }, { type: MngViewContainerComponentService, decorators: [{
+        return [{ type: i0.Injector }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i1$1.TranslateService }, { type: MngViewContainerComponentService, decorators: [{
                         type: Optional
                     }] }];
     }, propDecorators: { descriptor: [{
@@ -6136,12 +6436,12 @@ class MngTableviewComponent {
         }
     }
 }
-MngTableviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableviewComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.MessageService }, { token: i3$1.TranslateService }, { token: i3.DialogService }, { token: i2.ConfirmationService }, { token: MngActionExecutorService }, { token: MngViewContainerComponentService }], target: i0.ɵɵFactoryTarget.Component });
-MngTableviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableviewComponent, selector: "mng-tableview", inputs: { descriptor: "descriptor", dataProvider: "dataProvider", actions: "actions" }, providers: [MessageService, ConfirmationService, MngViewContainerComponentService], viewQueries: [{ propertyName: "tableComponent", first: true, predicate: MngTableComponent, descendants: true }], ngImport: i0, template: "<div class=\"mng-tableview\">\n    <p-toast></p-toast>\n\n    <div class=\"card\">\n        <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n            <ng-template pTemplate=\"left\">\n                <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\"> </mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\"> </mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table\n            [descriptor]=\"descriptor.table\"\n            [dataProvider]=\"dataProvider\"\n            [useQueryParams]=\"true\"\n            (cellClick)=\"onTableCellClick($event)\"\n            [isColumnClickable]=\"rowInlineActions.length > 0\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-0 m-0\">{{ descriptor.tableTitle | translate }}</h5>\n                </div>\n            </ng-template>\n            <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n                <mng-action\n                    *ngFor=\"let action of rowInlineActions\"\n                    [action]=\"action\"\n                    [item]=\"item\"\n                    [itemId]=\"descriptor.model.idPropertyName ? item[descriptor.model.idPropertyName] : null\">\n                </mng-action>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n", components: [{ type: i6$2.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { type: i4$2.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass"] }, { type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "dataProvider", "disabled", "loading", "viewContainer"], outputs: ["trigger"] }, { type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "isColumnClickable", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "translate": i3$1.TranslatePipe } });
+MngTableviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableviewComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.MessageService }, { token: i1$1.TranslateService }, { token: i3.DialogService }, { token: i2.ConfirmationService }, { token: MngActionExecutorService }, { token: MngViewContainerComponentService }], target: i0.ɵɵFactoryTarget.Component });
+MngTableviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngTableviewComponent, selector: "mng-tableview", inputs: { descriptor: "descriptor", dataProvider: "dataProvider", actions: "actions" }, providers: [MessageService, ConfirmationService, MngViewContainerComponentService], viewQueries: [{ propertyName: "tableComponent", first: true, predicate: MngTableComponent, descendants: true }], ngImport: i0, template: "<div class=\"mng-tableview\">\n    <p-toast></p-toast>\n\n    <div class=\"card\">\n        <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n            <ng-template pTemplate=\"left\">\n                <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\"> </mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\"> </mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table\n            [descriptor]=\"descriptor.table\"\n            [dataProvider]=\"dataProvider\"\n            [useQueryParams]=\"true\"\n            (cellClick)=\"onTableCellClick($event)\"\n            [isColumnClickable]=\"rowClickActions.length > 0\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-0 m-0\">{{ descriptor.tableTitle | translate }}</h5>\n                </div>\n            </ng-template>\n            <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n                <mng-action\n                    *ngFor=\"let action of rowInlineActions\"\n                    [action]=\"action\"\n                    [item]=\"item\"\n                    [itemId]=\"descriptor.model.idPropertyName ? item[descriptor.model.idPropertyName] : null\">\n                </mng-action>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n", components: [{ type: i6$2.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { type: i4$3.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass"] }, { type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "dataProvider", "disabled", "loading", "viewContainer"], outputs: ["trigger"] }, { type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "isColumnClickable", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "translate": i1$1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTableviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-tableview', providers: [MessageService, ConfirmationService, MngViewContainerComponentService], template: "<div class=\"mng-tableview\">\n    <p-toast></p-toast>\n\n    <div class=\"card\">\n        <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n            <ng-template pTemplate=\"left\">\n                <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\"> </mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\"> </mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table\n            [descriptor]=\"descriptor.table\"\n            [dataProvider]=\"dataProvider\"\n            [useQueryParams]=\"true\"\n            (cellClick)=\"onTableCellClick($event)\"\n            [isColumnClickable]=\"rowInlineActions.length > 0\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-0 m-0\">{{ descriptor.tableTitle | translate }}</h5>\n                </div>\n            </ng-template>\n            <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n                <mng-action\n                    *ngFor=\"let action of rowInlineActions\"\n                    [action]=\"action\"\n                    [item]=\"item\"\n                    [itemId]=\"descriptor.model.idPropertyName ? item[descriptor.model.idPropertyName] : null\">\n                </mng-action>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.MessageService }, { type: i3$1.TranslateService }, { type: i3.DialogService }, { type: i2.ConfirmationService }, { type: MngActionExecutorService }, { type: MngViewContainerComponentService }]; }, propDecorators: { descriptor: [{
+            args: [{ selector: 'mng-tableview', providers: [MessageService, ConfirmationService, MngViewContainerComponentService], template: "<div class=\"mng-tableview\">\n    <p-toast></p-toast>\n\n    <div class=\"card\">\n        <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n            <ng-template pTemplate=\"left\">\n                <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\"> </mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\"> </mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table\n            [descriptor]=\"descriptor.table\"\n            [dataProvider]=\"dataProvider\"\n            [useQueryParams]=\"true\"\n            (cellClick)=\"onTableCellClick($event)\"\n            [isColumnClickable]=\"rowClickActions.length > 0\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-0 m-0\">{{ descriptor.tableTitle | translate }}</h5>\n                </div>\n            </ng-template>\n            <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n                <mng-action\n                    *ngFor=\"let action of rowInlineActions\"\n                    [action]=\"action\"\n                    [item]=\"item\"\n                    [itemId]=\"descriptor.model.idPropertyName ? item[descriptor.model.idPropertyName] : null\">\n                </mng-action>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.MessageService }, { type: i1$1.TranslateService }, { type: i3.DialogService }, { type: i2.ConfirmationService }, { type: MngActionExecutorService }, { type: MngViewContainerComponentService }]; }, propDecorators: { descriptor: [{
                 type: Input
             }], dataProvider: [{
                 type: Input
@@ -6160,12 +6460,24 @@ class AMngTableviewRouteComponent {
     }
     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));
+        actions.push(this.createActionDescriptorForDetails());
+        actions.push(this.createActionDescriptorForAdd());
+        actions.push(this.createActionDescriptorForEdit());
+        actions.push(this.createActionDescriptorForDelete());
         return actions;
     }
+    createActionDescriptorForDetails(descriptor = this.descriptor.viewEditor) {
+        return new ActionEditorDetailsDescriptor(descriptor);
+    }
+    createActionDescriptorForAdd(descriptor = this.descriptor.addEditor) {
+        return new ActionEditorAddDescriptor(descriptor);
+    }
+    createActionDescriptorForEdit(descriptor = this.descriptor.editEditor) {
+        return new ActionEditorEditDescriptor(descriptor);
+    }
+    createActionDescriptorForDelete(descriptor = this.descriptor.model) {
+        return new ActionDeleteDescriptor(descriptor);
+    }
 }
 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 });
@@ -6252,7 +6564,7 @@ class MngFormlyFieldLookupDialogComponent extends FieldType {
             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)) {
+        if (!this.descriptor.dialogTableDataProvider && ((_a = this.descriptor.dataProvider) === null || _a === void 0 ? void 0 : _a.serviceType)) {
             this.dialogUseDataProvider = true;
             this.dialogDataProviderService = this.injector.get(this.descriptor.dataProvider.serviceType);
         }
@@ -6260,7 +6572,7 @@ class MngFormlyFieldLookupDialogComponent extends FieldType {
         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;
+            const compareProp = (_a = this.descriptor.dialogTableDescriptor.dataKeyProperty) !== null && _a !== void 0 ? _a : this.descriptor.dialogTableDescriptor.model.idPropertyName;
             if (compareProp && typeof prev === 'object' && typeof curr === 'object') {
                 return prev[compareProp] === curr[compareProp];
             }
@@ -6295,8 +6607,8 @@ class MngFormlyFieldLookupDialogComponent extends FieldType {
         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]));
+            if (this.descriptor.dialogTableDescriptor.hasDefaultSort) {
+                this.descriptor.dialogTableDescriptor.defaultSortProperty.forEach((p, idx) => queryParamBuilder.withSort(p, this.descriptor.dialogTableDescriptor.defaultSortAsc[idx]));
             }
             this.lookupDataProviderSubscription = (_a = this.descriptor.dataProvider) === null || _a === void 0 ? void 0 : _a.lookup(queryParamBuilder.build(), this.dialogDataProviderService).subscribe({
                 next: res => {
@@ -6368,7 +6680,7 @@ class MngFormlyFieldLookupDialogComponent extends FieldType {
             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;
+            const labelProperty = (_a = this.descriptor.itemsLabelProperty) !== null && _a !== void 0 ? _a : (_b = this.descriptor.dialogTableDescriptor) === null || _b === void 0 ? void 0 : _b.model.titlePropertyName;
             if (!labelProperty) {
                 throw new Error('Could not determine label property.');
             }
@@ -6380,10 +6692,10 @@ class MngFormlyFieldLookupDialogComponent extends FieldType {
     }
 }
 MngFormlyFieldLookupDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldLookupDialogComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-MngFormlyFieldLookupDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldLookupDialogComponent, selector: "mng-formly-field-lookup-dialog", viewQueries: [{ propertyName: "mngTable", first: true, predicate: MngTableComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"'p-inputgroup mng-dropdown-dialog' + descriptor.inputClassName\" [class.p-inputtext-sm]=\"descriptor.isSizeSmall\" [class.p-inputtext-lg]=\"descriptor.isSizeLarge\">\n    <input pInputText type=\"text\" [id]=\"$any(key)\" [readonly]=\"true\" [formlyAttributes]=\"field\" [formControl]=\"fieldLabelFormControl\" />\n    <i class=\"mng-dropdown-clear-icon pi pi-times\" (click)=\"clear()\" *ngIf=\"!to.required && formControl?.value\"></i>\n    <button pButton pRipple class=\"mng-dropdown-dialog-search-button\" type=\"button\" [label]=\"'general.search' | translate: {item: ''}\" (click)=\"openSelectDialog()\"></button>\n</div>\n\n<p-dialog\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.search' | translate: {item: to?.label!}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-formly-field-table-multiselect-dialog\">\n    <ng-template pTemplate=\"content\">\n        <mng-table\n            [descriptor]=\"descriptor.lookupTableDescriptor!\"\n            [dataProvider]=\"descriptor.lookupTableDataProvider\"\n            [queryResult]=\"addItemsAsync\"\n            [selectionEnabled]=\"true\"\n            [selectionMode]=\"'single'\"\n            [loading]=\"dialogIsLoading$\"\n            [captionComponent]=\"config?.table?.captionComponent\"\n            [columnActionComponent]=\"config?.table?.columnActionComponent\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            (captionComponentInstance)=\"onCaptionCmpInst($event)\"\n            (columnActionComponentInstance)=\"onColumnActionCmpInst($event)\">\n        </mng-table>\n        <p-messages [value]=\"dialogMessages\"></p-messages>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n        <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [label]=\"'general.select' | translate\"\n            icon=\"pi pi-check\"\n            class=\"p-button-text\"\n            (click)=\"addItem()\"\n            [loading]=\"(dialogIsLoading$ | async) ?? false\"\n            [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n", components: [{ type: i1$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "isColumnClickable", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { type: i3$3.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }], directives: [{ type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i10.InputText, selector: "[pInputText]" }, { type: i3$2.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i8.Ripple, selector: "[pRipple]" }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i3$1.TranslatePipe, "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldLookupDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldLookupDialogComponent, selector: "mng-formly-field-lookup-dialog", viewQueries: [{ propertyName: "mngTable", first: true, predicate: MngTableComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"'p-inputgroup mng-dropdown-dialog' + descriptor.inputClassName\" [class.p-inputtext-sm]=\"descriptor.isSizeSmall\" [class.p-inputtext-lg]=\"descriptor.isSizeLarge\">\n    <input pInputText type=\"text\" [id]=\"$any(key)\" [readonly]=\"true\" [formlyAttributes]=\"field\" [formControl]=\"fieldLabelFormControl\" />\n    <i class=\"mng-dropdown-clear-icon pi pi-times\" (click)=\"clear()\" *ngIf=\"!to.required && formControl?.value && !formControl?.disabled\"></i>\n    <button\n        pButton\n        pRipple\n        class=\"mng-dropdown-dialog-search-button\"\n        type=\"button\"\n        [label]=\"'general.search' | translate: {item: ''}\"\n        [disabled]=\"formControl?.disabled\"\n        (click)=\"openSelectDialog()\"></button>\n</div>\n\n<p-dialog\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.search' | translate: {item: to?.label!}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-formly-field-lookup-dialog\">\n    <ng-template pTemplate=\"content\">\n        <mng-table\n            [descriptor]=\"descriptor.dialogTableDescriptor!\"\n            [dataProvider]=\"descriptor.dialogTableDataProvider\"\n            [queryResult]=\"addItemsAsync\"\n            [selectionEnabled]=\"true\"\n            [selectionMode]=\"'single'\"\n            [loading]=\"dialogIsLoading$\"\n            [captionComponent]=\"config?.table?.captionComponent\"\n            [columnActionComponent]=\"config?.table?.columnActionComponent\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            (captionComponentInstance)=\"onCaptionCmpInst($event)\"\n            (columnActionComponentInstance)=\"onColumnActionCmpInst($event)\">\n        </mng-table>\n        <p-messages [value]=\"dialogMessages\"></p-messages>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n        <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [label]=\"'general.select' | translate\"\n            icon=\"pi pi-check\"\n            class=\"p-button-text\"\n            (click)=\"addItem()\"\n            [loading]=\"(dialogIsLoading$ | async) ?? false\"\n            [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n", components: [{ type: i1$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "isColumnClickable", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { type: i3$2.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }], directives: [{ type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i10.InputText, selector: "[pInputText]" }, { type: i3$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i8.Ripple, selector: "[pRipple]" }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i1$1.TranslatePipe, "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 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' + descriptor.inputClassName\" [class.p-inputtext-sm]=\"descriptor.isSizeSmall\" [class.p-inputtext-lg]=\"descriptor.isSizeLarge\">\n    <input pInputText type=\"text\" [id]=\"$any(key)\" [readonly]=\"true\" [formlyAttributes]=\"field\" [formControl]=\"fieldLabelFormControl\" />\n    <i class=\"mng-dropdown-clear-icon pi pi-times\" (click)=\"clear()\" *ngIf=\"!to.required && formControl?.value\"></i>\n    <button pButton pRipple class=\"mng-dropdown-dialog-search-button\" type=\"button\" [label]=\"'general.search' | translate: {item: ''}\" (click)=\"openSelectDialog()\"></button>\n</div>\n\n<p-dialog\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.search' | translate: {item: to?.label!}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-formly-field-table-multiselect-dialog\">\n    <ng-template pTemplate=\"content\">\n        <mng-table\n            [descriptor]=\"descriptor.lookupTableDescriptor!\"\n            [dataProvider]=\"descriptor.lookupTableDataProvider\"\n            [queryResult]=\"addItemsAsync\"\n            [selectionEnabled]=\"true\"\n            [selectionMode]=\"'single'\"\n            [loading]=\"dialogIsLoading$\"\n            [captionComponent]=\"config?.table?.captionComponent\"\n            [columnActionComponent]=\"config?.table?.columnActionComponent\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            (captionComponentInstance)=\"onCaptionCmpInst($event)\"\n            (columnActionComponentInstance)=\"onColumnActionCmpInst($event)\">\n        </mng-table>\n        <p-messages [value]=\"dialogMessages\"></p-messages>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n        <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [label]=\"'general.select' | translate\"\n            icon=\"pi pi-check\"\n            class=\"p-button-text\"\n            (click)=\"addItem()\"\n            [loading]=\"(dialogIsLoading$ | async) ?? false\"\n            [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n" }]
+            args: [{ selector: 'mng-formly-field-lookup-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'p-inputgroup mng-dropdown-dialog' + descriptor.inputClassName\" [class.p-inputtext-sm]=\"descriptor.isSizeSmall\" [class.p-inputtext-lg]=\"descriptor.isSizeLarge\">\n    <input pInputText type=\"text\" [id]=\"$any(key)\" [readonly]=\"true\" [formlyAttributes]=\"field\" [formControl]=\"fieldLabelFormControl\" />\n    <i class=\"mng-dropdown-clear-icon pi pi-times\" (click)=\"clear()\" *ngIf=\"!to.required && formControl?.value && !formControl?.disabled\"></i>\n    <button\n        pButton\n        pRipple\n        class=\"mng-dropdown-dialog-search-button\"\n        type=\"button\"\n        [label]=\"'general.search' | translate: {item: ''}\"\n        [disabled]=\"formControl?.disabled\"\n        (click)=\"openSelectDialog()\"></button>\n</div>\n\n<p-dialog\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.search' | translate: {item: to?.label!}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-formly-field-lookup-dialog\">\n    <ng-template pTemplate=\"content\">\n        <mng-table\n            [descriptor]=\"descriptor.dialogTableDescriptor!\"\n            [dataProvider]=\"descriptor.dialogTableDataProvider\"\n            [queryResult]=\"addItemsAsync\"\n            [selectionEnabled]=\"true\"\n            [selectionMode]=\"'single'\"\n            [loading]=\"dialogIsLoading$\"\n            [captionComponent]=\"config?.table?.captionComponent\"\n            [columnActionComponent]=\"config?.table?.columnActionComponent\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            (captionComponentInstance)=\"onCaptionCmpInst($event)\"\n            (columnActionComponentInstance)=\"onColumnActionCmpInst($event)\">\n        </mng-table>\n        <p-messages [value]=\"dialogMessages\"></p-messages>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n        <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [label]=\"'general.select' | translate\"\n            icon=\"pi pi-check\"\n            class=\"p-button-text\"\n            (click)=\"addItem()\"\n            [loading]=\"(dialogIsLoading$ | async) ?? false\"\n            [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { mngTable: [{
                 type: ViewChild,
                 args: [MngTableComponent]
@@ -6535,7 +6847,7 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
     }
 }
 MngFormlyFieldTableDialogFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldTableDialogFormComponent, deps: [{ token: MngActionExecutorService }], target: i0.ɵɵFactoryTarget.Component });
-MngFormlyFieldTableDialogFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldTableDialogFormComponent, selector: "mng-formly-table-dialog-form-field", usesInheritance: true, ngImport: i0, template: "<mng-table [descriptor]=\"descriptor.tableDescriptor\" [items]=\"items$\" (cellClick)=\"onTableCellClick($event)\" [isColumnClickable]=\"rowInlineActions.length > 0\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-column md:flex-row md:justify-content-end align-items-center table-header\">\n            <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n            <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\"></mng-action>\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\" let-idx=\"rowIndex\">\n        <mng-action\n            *ngFor=\"let action of rowInlineActions\"\n            [action]=\"action\"\n            [item]=\"item\"\n            [itemId]=\"descriptor.tableviewDescriptor.model.idPropertyName ? item[descriptor.tableviewDescriptor.model.idPropertyName] : undefined\"\n            [actionData]=\"{itemIndex: idx}\">\n        </mng-action>\n    </ng-template>\n</mng-table>\n", styles: [".submit-button{display:none!important;visibility:hidden}\n"], components: [{ type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "isColumnClickable", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "dataProvider", "disabled", "loading", "viewContainer"], outputs: ["trigger"] }], directives: [{ type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i3$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldTableDialogFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldTableDialogFormComponent, selector: "mng-formly-table-dialog-form-field", usesInheritance: true, ngImport: i0, template: "<mng-table [descriptor]=\"descriptor.tableDescriptor\" [items]=\"items$\" (cellClick)=\"onTableCellClick($event)\" [isColumnClickable]=\"rowInlineActions.length > 0\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-column md:flex-row md:justify-content-end align-items-center table-header\">\n            <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n            <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\"></mng-action>\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\" let-idx=\"rowIndex\">\n        <mng-action\n            *ngFor=\"let action of rowInlineActions\"\n            [action]=\"action\"\n            [item]=\"item\"\n            [itemId]=\"descriptor.tableviewDescriptor.model.idPropertyName ? item[descriptor.tableviewDescriptor.model.idPropertyName] : undefined\"\n            [actionData]=\"{itemIndex: idx}\">\n        </mng-action>\n    </ng-template>\n</mng-table>\n", styles: [".submit-button{display:none!important;visibility:hidden}\n"], components: [{ type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "isColumnClickable", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "dataProvider", "disabled", "loading", "viewContainer"], outputs: ["trigger"] }], directives: [{ type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldTableDialogFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-formly-table-dialog-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-table [descriptor]=\"descriptor.tableDescriptor\" [items]=\"items$\" (cellClick)=\"onTableCellClick($event)\" [isColumnClickable]=\"rowInlineActions.length > 0\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-column md:flex-row md:justify-content-end align-items-center table-header\">\n            <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n            <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\"></mng-action>\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\" let-idx=\"rowIndex\">\n        <mng-action\n            *ngFor=\"let action of rowInlineActions\"\n            [action]=\"action\"\n            [item]=\"item\"\n            [itemId]=\"descriptor.tableviewDescriptor.model.idPropertyName ? item[descriptor.tableviewDescriptor.model.idPropertyName] : undefined\"\n            [actionData]=\"{itemIndex: idx}\">\n        </mng-action>\n    </ng-template>\n</mng-table>\n", styles: [".submit-button{display:none!important;visibility:hidden}\n"] }]
@@ -6649,7 +6961,7 @@ 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 align-items-center table-header pt-0\">\n            <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n            <button\n                *ngIf=\"hasAddAction && !options?.formState?.disabled\"\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-plus\"\n                class=\"p-button-rounded p-button-success mng-button-xs\"\n                (click)=\"openAddDialog()\"\n                [disabled]=\"formControl!.disabled\"></button>\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n        <button\n            *ngIf=\"hasDeleteAction && !options?.formState?.disabled\"\n            pButton\n            pRipple\n            type=\"button\"\n            icon=\"pi pi-trash\"\n            class=\"p-button-rounded p-button-danger mng-button-xs\"\n            (click)=\"removeItem(item)\"\n            [disabled]=\"formControl!.disabled\"></button>\n    </ng-template>\n</mng-table>\n\n<p-dialog\n    *ngIf=\"hasAddAction\"\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.addItem' | translate: {item: to?.label!}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-formly-field-table-multiselect-dialog\">\n    <ng-template pTemplate=\"content\">\n        <mng-table\n            [descriptor]=\"descriptor.mainTableDescriptor\"\n            [queryResult]=\"addItemsAsync\"\n            [selectionEnabled]=\"true\"\n            [loading]=\"dialogIsLoading$\"\n            (selectionChange)=\"onSelectionChange($event)\">\n        </mng-table>\n        <p-messages [value]=\"dialogMessages\"></p-messages>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n        <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [label]=\"'general.add' | translate\"\n            icon=\"pi pi-check\"\n            class=\"p-button-text\"\n            (click)=\"addItems()\"\n            [loading]=\"(dialogIsLoading$ | async) ?? false\"\n            [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n", components: [{ type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "isColumnClickable", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { type: i1$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { type: i3$3.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }], directives: [{ type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i8.Ripple, selector: "[pRipple]" }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i3$1.TranslatePipe, "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldTableDialogMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldTableDialogMultiselectComponent, selector: "mng-formly-table-multiselect-add-field", usesInheritance: true, ngImport: i0, template: "<mng-table [descriptor]=\"descriptor.mainTableDescriptor\" [items]=\"itemsAsync\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-column md:flex-row md:justify-content-end align-items-center table-header pt-0\">\n            <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n            <button\n                *ngIf=\"hasAddAction && !options?.formState?.disabled\"\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-plus\"\n                class=\"p-button-rounded p-button-success mng-button-xs\"\n                (click)=\"openAddDialog()\"\n                [disabled]=\"formControl!.disabled\"></button>\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n        <button\n            *ngIf=\"hasDeleteAction && !options?.formState?.disabled\"\n            pButton\n            pRipple\n            type=\"button\"\n            icon=\"pi pi-trash\"\n            class=\"p-button-rounded p-button-danger mng-button-xs\"\n            (click)=\"removeItem(item)\"\n            [disabled]=\"formControl!.disabled\"></button>\n    </ng-template>\n</mng-table>\n\n<p-dialog\n    *ngIf=\"hasAddAction\"\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.addItem' | translate: {item: to?.label!}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-formly-field-table-multiselect-dialog\">\n    <ng-template pTemplate=\"content\">\n        <mng-table\n            [descriptor]=\"descriptor.mainTableDescriptor\"\n            [queryResult]=\"addItemsAsync\"\n            [selectionEnabled]=\"true\"\n            [loading]=\"dialogIsLoading$\"\n            (selectionChange)=\"onSelectionChange($event)\">\n        </mng-table>\n        <p-messages [value]=\"dialogMessages\"></p-messages>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n        <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [label]=\"'general.add' | translate\"\n            icon=\"pi pi-check\"\n            class=\"p-button-text\"\n            (click)=\"addItems()\"\n            [loading]=\"(dialogIsLoading$ | async) ?? false\"\n            [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n", components: [{ type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "isColumnClickable", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { type: i1$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { type: i3$2.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }], directives: [{ type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i8.Ripple, selector: "[pRipple]" }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i1$1.TranslatePipe, "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.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 align-items-center table-header pt-0\">\n            <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n            <button\n                *ngIf=\"hasAddAction && !options?.formState?.disabled\"\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-plus\"\n                class=\"p-button-rounded p-button-success mng-button-xs\"\n                (click)=\"openAddDialog()\"\n                [disabled]=\"formControl!.disabled\"></button>\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n        <button\n            *ngIf=\"hasDeleteAction && !options?.formState?.disabled\"\n            pButton\n            pRipple\n            type=\"button\"\n            icon=\"pi pi-trash\"\n            class=\"p-button-rounded p-button-danger mng-button-xs\"\n            (click)=\"removeItem(item)\"\n            [disabled]=\"formControl!.disabled\"></button>\n    </ng-template>\n</mng-table>\n\n<p-dialog\n    *ngIf=\"hasAddAction\"\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.addItem' | translate: {item: to?.label!}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-formly-field-table-multiselect-dialog\">\n    <ng-template pTemplate=\"content\">\n        <mng-table\n            [descriptor]=\"descriptor.mainTableDescriptor\"\n            [queryResult]=\"addItemsAsync\"\n            [selectionEnabled]=\"true\"\n            [loading]=\"dialogIsLoading$\"\n            (selectionChange)=\"onSelectionChange($event)\">\n        </mng-table>\n        <p-messages [value]=\"dialogMessages\"></p-messages>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n        <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [label]=\"'general.add' | translate\"\n            icon=\"pi pi-check\"\n            class=\"p-button-text\"\n            (click)=\"addItems()\"\n            [loading]=\"(dialogIsLoading$ | async) ?? false\"\n            [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n" }]
@@ -6658,7 +6970,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
 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$2.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i3$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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$1.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i1$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-formly-field-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-tabView>\n    <p-tabPanel\n        *ngFor=\"let tab of field.fieldGroup; let i = index; let last = last\"\n        [header]=\"tab.templateOptions?.label! | translate\"\n        [headerStyleClass]=\"$any(formControl!.valid ? 'p-tabview-title' : null)\">\n        <ng-template pTemplate=\"header\">\n            <span\n                class=\"p-tabview-title\"\n                [class.p-tabview-title-error]=\"formState.submittedOn && formState['tab_' + (tab.id ? tab.id : tab.templateOptions?.label!) + '_invalid']\"\n                >{{ tab.templateOptions?.label! | translate }}</span\n            >\n        </ng-template>\n        <formly-field [field]=\"tab\"></formly-field>\n    </p-tabPanel>\n</p-tabView>\n" }]
@@ -6667,7 +6979,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$2.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i3$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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$1.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldFieldsetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-formly-field-fieldset', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let group of field.fieldGroup; let i = index; let last = last\">\n    <p-fieldset *ngIf=\"!group.templateOptions?.['descriptor']?.default; else defaultSet\" [legend]=\"group.templateOptions?.label! | translate\">\n        <formly-field [field]=\"group\"></formly-field>\n    </p-fieldset>\n    <ng-template #defaultSet>\n        <formly-field [field]=\"group\"></formly-field>\n    </ng-template>\n</ng-container>\n" }]
@@ -6676,7 +6988,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\" [class]=\"to?.['descriptor']?.['labelClassName'] ?? ''\"\n        >{{ $any(to?.label) | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label\n    >\n    <ng-container #fieldComponent></ng-container>\n    <small *ngIf=\"to?.['descriptor']?.['helpText']\">{{ to?.['descriptor']?.['helpText'] | translate }}</small>\n    <small *ngIf=\"showError\" class=\"p-error\">\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </small>\n</div>\n", components: [{ type: i3$2.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i3$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldWrapperComponent, selector: "mng-formly-field-wrapper", usesInheritance: true, ngImport: i0, template: "<div class=\"field\">\n    <label [for]=\"key\" [class]=\"to?.['descriptor']?.['labelClassName'] ?? ''\"\n        >{{ $any(to?.label) | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label\n    >\n    <ng-container #fieldComponent></ng-container>\n    <small *ngIf=\"to?.['descriptor']?.['helpText']\">{{ to?.['descriptor']?.['helpText'] | translate }}</small>\n    <small *ngIf=\"showError\" class=\"p-error\">\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </small>\n</div>\n", components: [{ type: i3$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-formly-field-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"field\">\n    <label [for]=\"key\" [class]=\"to?.['descriptor']?.['labelClassName'] ?? ''\"\n        >{{ $any(to?.label) | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label\n    >\n    <ng-container #fieldComponent></ng-container>\n    <small *ngIf=\"to?.['descriptor']?.['helpText']\">{{ to?.['descriptor']?.['helpText'] | translate }}</small>\n    <small *ngIf=\"showError\" class=\"p-error\">\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </small>\n</div>\n" }]
@@ -6685,7 +6997,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=\"to?.['descriptor']?.['helpText']\">{{ to?.['descriptor']?.['helpText'] | translate }}</small>\n    <small *ngIf=\"showError\" class=\"p-error\">\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </small>\n</div>\n", components: [{ type: i3$2.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i3$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyTableWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyTableWrapperComponent, selector: "mng-formly-table-wrapper", usesInheritance: true, ngImport: i0, template: "<div class=\"field table\">\n    <ng-container #fieldComponent></ng-container>\n    <small *ngIf=\"to?.['descriptor']?.['helpText']\">{{ to?.['descriptor']?.['helpText'] | translate }}</small>\n    <small *ngIf=\"showError\" class=\"p-error\">\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </small>\n</div>\n", components: [{ type: i3$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyTableWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-formly-table-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"field table\">\n    <ng-container #fieldComponent></ng-container>\n    <small *ngIf=\"to?.['descriptor']?.['helpText']\">{{ to?.['descriptor']?.['helpText'] | translate }}</small>\n    <small *ngIf=\"showError\" class=\"p-error\">\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </small>\n</div>\n" }]
@@ -6710,7 +7022,7 @@ class MngFooterComponent {
     }
 }
 MngFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFooterComponent, deps: [{ token: MngCommonsService }], target: i0.ɵɵFactoryTarget.Component });
-MngFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFooterComponent, selector: "mng-footer", ngImport: i0, template: "<div class=\"layout-footer\">\n    <div class=\"footer-logo-container\">\n        <img id=\"footer-logo\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" alt=\"atlantis-layout\" />\n        <span class=\"app-name\">{{ mngCommons.appName | translate }}</span>\n    </div>\n    <span class=\"copyright\">&#169; {{ mngCommons.appOwner | translate }} - {{ currentYear }}</span>\n</div>\n", pipes: { "translate": i3$1.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": i1$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-footer\">\n    <div class=\"footer-logo-container\">\n        <img id=\"footer-logo\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" alt=\"atlantis-layout\" />\n        <span class=\"app-name\">{{ mngCommons.appName | translate }}</span>\n    </div>\n    <span class=\"copyright\">&#169; {{ mngCommons.appOwner | translate }} - {{ currentYear }}</span>\n</div>\n" }]
@@ -7048,7 +7360,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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i8.Ripple, selector: "[pRipple]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe, "translate": i3$1.TranslatePipe }, animations: [
+MngMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: { item: "item", index: "index", root: "root", parentKey: "parentKey" }, host: { properties: { "class.layout-root-menuitem": "root", "class.active-menuitem": "active" } }, ngImport: i0, template: "<ng-container>\n    <div *ngIf=\"root && item.visible !== false && (isAllowed$ | async) === true\" class=\"layout-menuitem-root-text\">{{ item.label! | translate }}</div>\n    <a\n        *ngIf=\"(!item.routerLink || item.items) && item.visible !== false && (isAllowed$ | async) === true\"\n        [attr.href]=\"item.href\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"onMouseEnter()\"\n        (keydown.enter)=\"itemClick($event)\"\n        [routerLink]=\"item.routerLink\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <a\n        *ngIf=\"item.routerLink && !item.items && item.visible !== false && (isAllowed$ | async) === true\"\n        (click)=\"itemClick($event)\"\n        (mouseenter)=\"hover = true\"\n        (mouseleave)=\"hover = false\"\n        [routerLink]=\"item.routerLink\"\n        routerLinkActive=\"active-menuitem-routerlink\"\n        [routerLinkActiveOptions]=\"{exact: true}\"\n        [attr.target]=\"item.target\"\n        [attr.tabindex]=\"0\"\n        [ngClass]=\"item.className ?? ''\"\n        pRipple>\n        <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n        <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n        <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n    </a>\n    <ul\n        *ngIf=\"((item.items && active) || (item.items && (mngCommons.menuModeIsStatic$ | async) && (root || active))) && item.visible !== false && (isAllowed$ | async) === true\"\n        [@children]=\"\n            (mngCommons.menuModeIsSlim$ | async) && (mainLayoutService.isMobile$ | async) === false && root\n                ? active\n                    ? 'visible'\n                    : 'hidden'\n                : (mngCommons.menuModeIsStatic$ | async) && root && (mainLayoutService.isMobile$ | async) === false\n                ? 'visible'\n                : active\n                ? 'visibleAnimated'\n                : 'hiddenAnimated'\n        \">\n        <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n            <li mng-menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeClassName\"></li>\n        </ng-template>\n    </ul>\n</ng-container>\n", components: [{ type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: ["item", "index", "root", "parentKey"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i8.Ripple, selector: "[pRipple]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe, "translate": i1$1.TranslatePipe }, animations: [
         trigger('children', [
             state('void', style({
                 height: '0px'
@@ -7160,7 +7472,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: i2$2.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "virtualScroll", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent"], outputs: ["instanceCreated"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i4.AsyncPipe, "translate": i3$1.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: i2$2.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "virtualScroll", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs"], outputs: ["instanceCreated"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i4.AsyncPipe, "translate": i1$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngTopbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-topbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-topbar\">\n    <div class=\"layout-topbar-left\">\n        <a\n            href=\"#\"\n            class=\"topbar-menu-button\"\n            (click)=\"mainLayoutService.onMenuButtonClick($event)\"\n            *ngIf=\"(mngCommons.menuModeIsOverlay$ | async) || (mainLayoutService.isMobile$ | async)\">\n            <i class=\"pi pi-bars\"></i>\n        </a>\n\n        <ng-container [mngComponent]=\"breadcrumbComponent\"></ng-container>\n    </div>\n\n    <ng-container [mngComponent]=\"menuComponent\"></ng-container>\n\n    <div class=\"layout-topbar-right\">\n        <ul class=\"layout-topbar-right-items\">\n            <li #profile class=\"profile-item\" [ngClass]=\"{'active-topmenuitem': (mainLayoutService.activeTopbarItem$ | async) === profile}\">\n                <a href=\"#\" (click)=\"mainLayoutService.onTopbarItemClick($event, profile)\">\n                    <i class=\"pi pi-fw pi-user\"></i>\n                </a>\n                <ul class=\"fadeInDown\" *ngIf=\"user\">\n                    <li role=\"menuitem\">\n                        <a>\n                            {{ user?.displayName ?? user?.username }}\n                        </a>\n                    </li>\n                    <li role=\"menuitem\" *ngIf=\"user?.logout || user?.logoutUrl\">\n                        <a [href]=\"user?.logoutUrl\" (click)=\"logout(user, $event)\">\n                            <i class=\"pi pi-fw pi-sign-out\"></i>\n                            <span>{{ 'mngTopbar.logout' | translate }}</span>\n                        </a>\n                    </li>\n                </ul>\n            </li>\n            <li *ngIf=\"languages.length > 1\" class=\"profile-item\" [ngClass]=\"{'active-topmenuitem': (mainLayoutService.activeTopbarItem$ | async) === profile}\">\n                <i class=\"pi pi-fw pi-globe\"></i>\n                <p-dropdown [ngModel]=\"selectedLanguage\" [options]=\"languages\" (onChange)=\"switchLanguage($event.value)\"></p-dropdown>\n            </li>\n        </ul>\n    </div>\n</div>\n" }]
@@ -7198,7 +7510,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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent"], outputs: ["instanceCreated"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngMainLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngMainLayoutComponent, selector: "mng-main-layout", host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [MngMainLayoutComponentService], viewQueries: [{ propertyName: "templates", predicate: MngTemplateDirective, descendants: true }], ngImport: i0, template: "<div\n    class=\"layout-wrapper\"\n    (click)=\"mainLayoutService.onLayoutClick()\"\n    [ngClass]=\"{\n        'layout-static': mngCommons.menuModeIsStatic$ | async,\n        'layout-overlay': mngCommons.menuModeIsOverlay$ | async,\n        'layout-slim': mngCommons.menuModeIsSlim$ | async,\n        'layout-sidebar': mngCommons.menuModeIsSidebar$ | async,\n        'layout-sidebar-static': (mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async),\n        'layout-overlay-active': mainLayoutService.overlayMenuActive$ | async,\n        'layout-mobile-active': mainLayoutService.staticMenuMobileActive$ | async,\n        'layout-static-inactive': (mainLayoutService.staticMenuDesktopInactive$ | async) && (mngCommons.menuModeIsStatic$ | async)\n    }\">\n    <div class=\"layout-main\">\n        <ng-container [mngComponent]=\"topbarComponent\"></ng-container>\n\n        <ng-container\n            *ngIf=\"\n                (mainLayoutService.isMobile$ | async) === false &&\n                ((mngCommons.menuModeIsStatic$ | async) || (mngCommons.menuModeIsSlim$ | async) || (mngCommons.menuModeIsSidebar$ | async))\n            \"\n            [mngComponent]=\"menuComponent\">\n        </ng-container>\n\n        <div class=\"layout-main-content\">\n            <router-outlet></router-outlet>\n        </div>\n\n        <ng-container [mngComponent]=\"footerComponent\"></ng-container>\n    </div>\n</div>\n", directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs"], outputs: ["instanceCreated"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngMainLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-main-layout', providers: [MngMainLayoutComponentService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"layout-wrapper\"\n    (click)=\"mainLayoutService.onLayoutClick()\"\n    [ngClass]=\"{\n        'layout-static': mngCommons.menuModeIsStatic$ | async,\n        'layout-overlay': mngCommons.menuModeIsOverlay$ | async,\n        'layout-slim': mngCommons.menuModeIsSlim$ | async,\n        'layout-sidebar': mngCommons.menuModeIsSidebar$ | async,\n        'layout-sidebar-static': (mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async),\n        'layout-overlay-active': mainLayoutService.overlayMenuActive$ | async,\n        'layout-mobile-active': mainLayoutService.staticMenuMobileActive$ | async,\n        'layout-static-inactive': (mainLayoutService.staticMenuDesktopInactive$ | async) && (mngCommons.menuModeIsStatic$ | async)\n    }\">\n    <div class=\"layout-main\">\n        <ng-container [mngComponent]=\"topbarComponent\"></ng-container>\n\n        <ng-container\n            *ngIf=\"\n                (mainLayoutService.isMobile$ | async) === false &&\n                ((mngCommons.menuModeIsStatic$ | async) || (mngCommons.menuModeIsSlim$ | async) || (mngCommons.menuModeIsSidebar$ | async))\n            \"\n            [mngComponent]=\"menuComponent\">\n        </ng-container>\n\n        <div class=\"layout-main-content\">\n            <router-outlet></router-outlet>\n        </div>\n\n        <ng-container [mngComponent]=\"footerComponent\"></ng-container>\n    </div>\n</div>\n" }]
@@ -7468,7 +7780,7 @@ const declarations = [
     MngComponentDirective,
     MngTemplateDirective,
     // pipes
-    MngPropertyPathPipe,
+    JsonPathPipe,
     MngEnumPipe,
     MngBooleanPipe,
     MngI18nPropertyPipe,
@@ -7572,7 +7884,7 @@ MngCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         MngComponentDirective,
         MngTemplateDirective,
         // pipes
-        MngPropertyPathPipe,
+        JsonPathPipe,
         MngEnumPipe,
         MngBooleanPipe,
         MngI18nPropertyPipe,
@@ -7615,7 +7927,7 @@ MngCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         CommonModule,
         RouterModule,
         HttpClientModule,
-        ReactiveFormsModule, i3$1.TranslateModule, i3$2.FormlyModule, AutoCompleteModule,
+        ReactiveFormsModule, i1$1.TranslateModule, i3$1.FormlyModule, AutoCompleteModule,
         BreadcrumbModule,
         ButtonModule,
         CalendarModule,
@@ -7687,7 +7999,7 @@ MngCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         MngComponentDirective,
         MngTemplateDirective,
         // pipes
-        MngPropertyPathPipe,
+        JsonPathPipe,
         MngEnumPipe,
         MngBooleanPipe,
         MngI18nPropertyPipe,
@@ -7792,9 +8104,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
                 }]
         }] });
 
-class AMngApiService {
-    constructor(type, http) {
-        this.type = type;
+class AMngBaseApiService {
+    constructor(http) {
         this.http = http;
         this.objectSerializer = ObjectSerializer.get();
     }
@@ -7805,12 +8116,6 @@ class AMngApiService {
         }
         return `${this.getBasePath()}${this.getServiceBasePath()}${path}`;
     }
-    deserialize(item) {
-        return this.deserializeClass(item, this.type);
-    }
-    serialize(item) {
-        return this.serializeClass(item, this.type);
-    }
     serializeQueryParam(queryParam, type = 'QueryParam') {
         return this.objectSerializer.serialize(queryParam, type);
     }
@@ -7820,9 +8125,27 @@ class AMngApiService {
     deserializeClass(item, type) {
         return this.objectSerializer.deserializeClass(item, type);
     }
+    deserializeClassArray(item, type) {
+        return this.objectSerializer.deserializeClassArray(item, type);
+    }
     serializeClass(item, type) {
         return this.objectSerializer.serializeClass(item, type);
     }
+    serializeClassArray(item, type) {
+        return this.objectSerializer.serializeClassArray(item, type);
+    }
+}
+class AMngApiService extends AMngBaseApiService {
+    constructor(type, http) {
+        super(http);
+        this.type = type;
+    }
+    deserialize(item) {
+        return this.deserializeClass(item, this.type);
+    }
+    serialize(item) {
+        return this.serializeClass(item, this.type);
+    }
 }
 
 class AMngGetAllApiService extends AMngApiService {
@@ -8373,5 +8696,5 @@ class RouteDataBuilder {
  * Generated bundle index. Do not edit.
  */
 
-export { AFieldDescriptor, AFieldGroupDescriptor, AGenericFieldDescriptor, AMngApiService, AMngCrudApiService, AMngGetAllApiService, AMngTableviewRouteComponent, ActionActivationResult, ActionActivationTriggerEnum, ActionDeleteDescriptor, ActionDescriptor, ActionEditorAddDescriptor, ActionEditorDescriptor, ActionEditorDetailsDescriptor, ActionEditorEditDescriptor, ActionEditorSubmitDescriptor, ActionError, ActionExecContext, ActionLevelEnum, ActionLinkDescriptor, ActionPositionEnum, ActionRunResult, ActionTriggerResult, ActionTypeEnum, ColumnDescriptor, DataProvider, DefaultMngErrorMapperService, EditorDataProvider, EditorDescriptor, EditorFormlyUtil, EnumName, EnumUtil, FieldDescriptor, FieldGroupDescriptor, FieldInputDescriptor, FieldLookupDescriptor, FieldLookupEnumDescriptor, FieldManyEditorDescriptor, FieldManyToManyEditorDescriptor, FieldTabGroupDescriptor, FieldValidator, FilterDescriptor, FilterLookupDescriptor, FilterLookupEnumDescriptor, I18nUtil, LookupDataProvider, MNG_AUTOCOMPLETE_VALUE_ACCESSOR, MNG_DROPDOWN_VALUE_ACCESSOR, MediusFilterMatchType, MediusFilterParam, MediusQueryMode, MediusQueryParam, MediusQueryParamBuilder, MediusQueryResult, MediusRestUtil, MngActionComponent, MngActionEditorComponent, MngActionExecutorService, MngActionRouteComponent, MngAutocompleteComponent, MngBooleanPipe, MngBreadcrumbComponent, MngCommonsModule, MngCommonsService, MngComponentDirective, MngConfigurationService, MngDropdownComponent, MngEnumPipe, MngErrorMapperService, MngFooterComponent, MngFormEditorComponent, MngFormEditorSubmitEvent, MngFormFieldEvent, MngFormFieldEventComponentSubtype, MngFormFieldEventDialogSubtype, MngFormFieldEventTypeEnum, MngFormlyFieldAutocompleteComponent, MngFormlyFieldDropdownComponent, MngFormlyFieldFieldsetComponent, MngFormlyFieldInputComponent, MngFormlyFieldLookupDialogComponent, MngFormlyFieldTableDialogFormComponent, MngFormlyFieldTableDialogMultiselectComponent, MngFormlyFieldTabsComponent, MngFormlyFieldWrapperComponent, MngFormlyTableWrapperComponent, MngI18nPropertyPipe, MngLinkFormatterPipe, MngMainLayoutComponent, MngMainLayoutComponentService, MngMenuComponent, MngMenuItemComponent, MngNavigationService, MngPropertyPathPipe, MngTableColumnFilterComponent, MngTableColumnValueComponent, MngTableComponent, MngTableviewComponent, MngTableviewRouteComponent, MngTemplateDirective, MngTopbarComponent, MngViewContainerComponentService, ModelDescriptor, ModelUtil, NotificationUtil, ObjectSerializer, RouteBuilder, RouteDataBuilder, RoutesBuilder, TableDataProvider, TableDescriptor, TableviewDataProvider, TableviewDescriptor, TypeName, TypeUtil, enumNameDecoratorPropertyName, enumsMapBase, formlyTypesConfig, formlyWrappersConfig, getEmailValidationMessage, getFormlyValidationMessages, getMaxLengthValidationMessage, getMinLengthValidationMessage, getRequiredValidationMessage, getTextPatternValidationMessage, mngCommonsInitializerProvider, mngConfigJsonAppInitializerProvider, mngConfigurationServiceProvider, mngFormlyConfigProvider, primeNgModules, typeMapBase, typeNameDecoratorPropertyName };
+export { AFieldDescriptor, AFieldGroupDescriptor, AGenericFieldDescriptor, AMngApiService, AMngBaseApiService, AMngCrudApiService, AMngGetAllApiService, AMngTableviewRouteComponent, ActionActivationResult, ActionActivationTriggerEnum, ActionDeleteDescriptor, ActionDescriptor, ActionEditorAddDescriptor, ActionEditorDescriptor, ActionEditorDetailsDescriptor, ActionEditorEditDescriptor, ActionEditorSubmitDescriptor, ActionError, ActionExecContext, ActionLevelEnum, ActionLinkDescriptor, ActionPositionEnum, ActionRunResult, ActionTriggerResult, ActionTypeEnum, ColumnDescriptor, DataProvider, DefaultMngErrorMapperService, EditorDataProvider, EditorDescriptor, EditorFormlyUtil, EnumName, EnumUtil, FieldDescriptor, FieldGroupDescriptor, FieldInputDescriptor, FieldLookupDescriptor, FieldLookupEnumDescriptor, FieldManyEditorDescriptor, FieldManyToManyEditorDescriptor, FieldTabGroupDescriptor, FieldValidator, FilterDescriptor, FilterLookupDescriptor, FilterLookupEnumDescriptor, I18nUtil, JsonPathPipe, LookupDataProvider, MNG_AUTOCOMPLETE_VALUE_ACCESSOR, MNG_DROPDOWN_VALUE_ACCESSOR, MediusFilterMatchType, MediusFilterParam, MediusQueryMode, MediusQueryParam, MediusQueryParamBuilder, MediusQueryResult, MediusRestUtil, MngActionComponent, MngActionEditorComponent, MngActionExecutorService, MngActionRouteComponent, MngAutocompleteComponent, MngBooleanPipe, MngBreadcrumbComponent, MngCommonsModule, MngCommonsService, MngComponentDirective, MngConfigurationService, MngDropdownComponent, MngEnumPipe, MngErrorMapperService, MngFooterComponent, MngFormEditorComponent, MngFormEditorSubmitEvent, MngFormFieldEvent, MngFormFieldEventComponentSubtype, MngFormFieldEventDialogSubtype, MngFormFieldEventTypeEnum, MngFormlyFieldAutocompleteComponent, MngFormlyFieldDropdownComponent, MngFormlyFieldFieldsetComponent, MngFormlyFieldInputComponent, MngFormlyFieldLookupDialogComponent, MngFormlyFieldTableDialogFormComponent, MngFormlyFieldTableDialogMultiselectComponent, MngFormlyFieldTabsComponent, MngFormlyFieldWrapperComponent, MngFormlyTableWrapperComponent, MngI18nPropertyPipe, MngLinkFormatterPipe, MngMainLayoutComponent, MngMainLayoutComponentService, MngMenuComponent, MngMenuItemComponent, MngNavigationService, MngTableCellClickEvent, MngTableColumnFilterComponent, MngTableColumnValueComponent, MngTableComponent, MngTableLoadEvent, MngTableReloadEvent, MngTableviewComponent, MngTableviewRouteComponent, MngTemplateDirective, MngTopbarComponent, MngViewContainerComponentService, ModelDescriptor, ModelUtil, NotificationUtil, ObjectSerializer, RouteBuilder, RouteDataBuilder, RoutesBuilder, TableDataProvider, TableDescriptor, TableviewDataProvider, TableviewDescriptor, TypeName, TypeUtil, enumNameDecoratorPropertyName, enumsMapBase, formlyTypesConfig, formlyWrappersConfig, getEmailValidationMessage, getFormlyValidationMessages, getMaxLengthValidationMessage, getMinLengthValidationMessage, getRequiredValidationMessage, getTextPatternValidationMessage, mngCommonsInitializerProvider, mngConfigJsonAppInitializerProvider, mngConfigurationServiceProvider, mngFormlyConfigProvider, primeNgModules, typeMapBase, typeNameDecoratorPropertyName };
 //# sourceMappingURL=mediusinc-mng-commons.mjs.map