@mediusinc/mng-commons 0.4.4 → 0.5.0

package/fesm2015/mediusinc-mng-commons.mjs

@@ -72,7 +72,7 @@ import * as i4$3 from 'primeng/toolbar';
 import { ToolbarModule } from 'primeng/toolbar';
 import * as i9 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import { throwError, of, Subject, Observable, from, BehaviorSubject, ReplaySubject, switchMap, distinctUntilChanged, combineLatest } from 'rxjs';
+import { throwError, of, Subject, Observable, from, combineLatest, tap, BehaviorSubject, ReplaySubject, distinctUntilChanged, switchMap, mergeMap as mergeMap$1 } from 'rxjs';
 import 'reflect-metadata';
 import { map, mergeMap, first, catchError, filter, finalize, startWith } from 'rxjs/operators';
 import * as i4$1 from '@angular/platform-browser';
@@ -526,6 +526,9 @@ class ActionDescriptor {
     get runConfirmationRejectTitle() {
         return this._runConfirmationRejectTitle;
     }
+    get runConfirmationConfigMapFn() {
+        return this._runConfirmationConfigMapFn;
+    }
     get hasRunNotificationSuccess() {
         return this._hasRunNotificationSuccess;
     }
@@ -617,13 +620,24 @@ class ActionDescriptor {
         this._position = position;
         return this;
     }
-    withRunConfirmation(icon = 'pi pi-exclamation-triangle', title, message, acceptTitle, rejectTitle) {
+    /**
+     * Add a confirmation dialogue to the action
+     * @param icon the icon to display on the confirmation dialogue
+     * @param title the title of the confirmation dialogue
+     * @param message the message on the confirmation dialogue
+     * @param acceptTitle the title of the accepting button
+     * @param rejectTitle the title of the rejecting button
+     * @param runConfirmationConfigMapFn function used to generate the confirmation dialogue. **WARNING** changing the *accept* and *reject* methods of the *confirmConfig* parameter
+     * may lead to unexpected behaviour
+     */
+    withRunConfirmation(icon = 'pi pi-exclamation-triangle', title, message, acceptTitle, rejectTitle, runConfirmationConfigMapFn) {
         this._hasRunConfirmation = true;
         this._runConfirmationIcon = icon;
         this._runConfirmationTitle = title;
         this._runConfirmationMessage = message;
         this._runConfirmationAcceptTitle = acceptTitle;
         this._runConfirmationRejectTitle = rejectTitle;
+        this._runConfirmationConfigMapFn = runConfirmationConfigMapFn;
         return this;
     }
     withRunNotificationSuccess(title, message, hasNotification = true) {
@@ -659,7 +673,7 @@ class ActionEditorDescriptor extends ActionDescriptor {
         this._editorActions = [];
         this._editorTitle = undefined;
         this._hasFetchNotificationSuccess = false;
-        this._dialogClassName = '';
+        this._dialogSize = ActionEditorDescriptor.DialogSizeEnum.Normal;
         this._type = ActionTypeEnum.Editor;
         this._editorDescriptor = editorDescriptor;
         this._editorActions.push(new ActionEditorSubmitDescriptor(this), new ActionEditorSubmitDescriptor(this, ActionEditorSubmitDescriptor.TypeEnum.Cancel));
@@ -670,6 +684,9 @@ class ActionEditorDescriptor extends ActionDescriptor {
     get editorDescriptor() {
         return this._editorDescriptor;
     }
+    get dialogSize() {
+        return this._dialogSize;
+    }
     get dialogClassName() {
         return this._dialogClassName;
     }
@@ -722,6 +739,10 @@ class ActionEditorDescriptor extends ActionDescriptor {
         this._dataProvider = new EditorDataProvider(this._model.type, serviceType);
         return this;
     }
+    withDialogSize(size = ActionEditorDescriptor.DialogSizeEnum.Normal) {
+        this._dialogSize = size;
+        return this;
+    }
     withDialogClassName(className) {
         this._dialogClassName = className;
         return this;
@@ -756,6 +777,16 @@ class ActionEditorDescriptor extends ActionDescriptor {
         return this;
     }
 }
+(function (ActionEditorDescriptor) {
+    let DialogSizeEnum;
+    (function (DialogSizeEnum) {
+        DialogSizeEnum[DialogSizeEnum["ExtraSmall"] = 0] = "ExtraSmall";
+        DialogSizeEnum[DialogSizeEnum["Small"] = 1] = "Small";
+        DialogSizeEnum[DialogSizeEnum["Normal"] = 2] = "Normal";
+        DialogSizeEnum[DialogSizeEnum["Large"] = 3] = "Large";
+        DialogSizeEnum[DialogSizeEnum["ExtraLarge"] = 4] = "ExtraLarge";
+    })(DialogSizeEnum = ActionEditorDescriptor.DialogSizeEnum || (ActionEditorDescriptor.DialogSizeEnum = {}));
+})(ActionEditorDescriptor || (ActionEditorDescriptor = {}));
 class ActionEditorSubmitDescriptor extends ActionDescriptor {
     constructor(editorAction, submitType = ActionEditorSubmitDescriptor.TypeEnum.Submit) {
         super(editorAction.model, submitType === ActionEditorSubmitDescriptor.TypeEnum.Submit ? 'submit' : 'cancel');
@@ -787,7 +818,6 @@ class ActionEditorDetailsDescriptor extends ActionEditorDescriptor {
                 : throwError(new Error(`Data provider fetch function or item id ${(_d = ctx.data) === null || _d === void 0 ? void 0 : _d.itemId} is missing.`));
         });
         this.withEditorActions([new ActionEditorSubmitDescriptor(this, ActionEditorSubmitDescriptor.TypeEnum.Cancel)]);
-        this.withDialogClassName('mng-details-dynamic-dialog');
     }
     withServiceType(serviceType) {
         return this.withServiceFetchFunction(serviceType);
@@ -810,7 +840,6 @@ class ActionEditorAddDescriptor extends ActionEditorDescriptor {
         this.withSubmitFunction(ctx => { var _a, _b; return ((_a = ctx.dataProvider) === null || _a === void 0 ? void 0 : _a.create) ? ctx.dataProvider.create((_b = ctx.data) === null || _b === void 0 ? void 0 : _b.item, ctx.serviceInstance) : throwError(new Error(`Data provider create function is missing.`)); });
         this.withLevel(ActionLevelEnum.Success);
         this.withIcon('pi pi-plus');
-        this.withDialogClassName('mng-details-dynamic-dialog');
     }
     withServiceType(serviceType) {
         return this.withServiceSubmitFunction(serviceType);
@@ -847,7 +876,6 @@ class ActionEditorEditDescriptor extends ActionEditorDescriptor {
                 : throwError(new Error(`Data provider update function or item id ${(_d = ctx.data) === null || _d === void 0 ? void 0 : _d.itemId} is missing.`));
         });
         this.withIcon('pi pi-pencil');
-        this.withDialogClassName('mng-details-dynamic-dialog');
     }
     withServiceType(serviceType) {
         return this.withServiceSubmitFunction(serviceType);
@@ -1681,6 +1709,9 @@ class AFieldDescriptor extends AGenericFieldDescriptor {
     get className() {
         return this._className;
     }
+    get fieldClassName() {
+        return this._fieldClassName;
+    }
     get labelClassName() {
         return this._labelClassName;
     }
@@ -1742,10 +1773,11 @@ class AFieldDescriptor extends AGenericFieldDescriptor {
         this._validators.push(new FieldValidator(name, expression, message));
         return this;
     }
-    withClassName(className, labelClassName = '', inputClassName = '') {
+    withClassName(className, labelClassName = '', inputClassName = '', fieldClassName) {
         this._className = className;
         this._labelClassName = labelClassName;
         this._inputClassName = inputClassName;
+        this._fieldClassName = fieldClassName;
         return this;
     }
     withSize(size = FieldDescriptor.SizeEnum.Normal) {
@@ -1854,6 +1886,10 @@ class FieldInputDescriptor extends AFieldDescriptor {
         this._fieldType = FieldInputDescriptor.TypeEnum.Hidden;
         return this;
     }
+    asLabel() {
+        this._fieldType = FieldInputDescriptor.TypeEnum.Label;
+        return this;
+    }
     asText(minLength, maxLength, pattern, isEmail) {
         this._fieldType = FieldInputDescriptor.TypeEnum.Text;
         this._minLength = minLength;
@@ -1949,14 +1985,15 @@ class FieldInputDescriptor extends AFieldDescriptor {
     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[TypeEnum["Label"] = 1] = "Label";
+        TypeEnum[TypeEnum["Text"] = 2] = "Text";
+        TypeEnum[TypeEnum["Textarea"] = 3] = "Textarea";
+        TypeEnum[TypeEnum["Number"] = 4] = "Number";
+        TypeEnum[TypeEnum["Switch"] = 5] = "Switch";
+        TypeEnum[TypeEnum["Radio"] = 6] = "Radio";
+        TypeEnum[TypeEnum["Datepicker"] = 7] = "Datepicker";
+        TypeEnum[TypeEnum["Mask"] = 8] = "Mask";
+        TypeEnum[TypeEnum["Custom"] = 9] = "Custom";
     })(TypeEnum = FieldInputDescriptor.TypeEnum || (FieldInputDescriptor.TypeEnum = {}));
 })(FieldInputDescriptor || (FieldInputDescriptor = {}));
 class FieldLookupDescriptor extends AFieldDescriptor {
@@ -2114,6 +2151,16 @@ class FieldLookupEnumDescriptor extends FieldLookupDescriptor {
         }
         return this;
     }
+    withDefaultValueEnum(defaultValue) {
+        const defaultOptionValue = this._nameAsValue ? EnumUtil.getConstantName(this._enumType, defaultValue) : defaultValue;
+        if (defaultOptionValue) {
+            const option = this._optionEnumValues.find(o => o.value === defaultOptionValue);
+            if (option) {
+                this.withDefaultValue(option);
+            }
+        }
+        return this;
+    }
     asAutocomplete(openOnFocus = true) {
         super.asAutocomplete(openOnFocus, true);
         return this;
@@ -2336,6 +2383,13 @@ class FieldTabGroupDescriptor extends AFieldGroupDescriptor {
 class FieldGroupDescriptor extends AFieldGroupDescriptor {
     constructor(editor, name) {
         super(editor, name);
+        this._type = FieldGroupDescriptor.TypeEnum.Fieldset;
+        if (this._default) {
+            this.asLogical();
+        }
+    }
+    get type() {
+        return this._type;
     }
     get fields() {
         return this._fields;
@@ -2347,13 +2401,25 @@ class FieldGroupDescriptor extends AFieldGroupDescriptor {
         this._fields.push(field);
         return this;
     }
+    asLogical() {
+        this._type = FieldGroupDescriptor.TypeEnum.Logical;
+        return this;
+    }
     copy() {
         const group = new FieldGroupDescriptor(this._editor, this.name.substring(this.baseName.length));
+        group._type = this._type;
         group._title = this._title;
         group._fields = this.fields.map(f => f.copy());
         return group;
     }
 }
+(function (FieldGroupDescriptor) {
+    let TypeEnum;
+    (function (TypeEnum) {
+        TypeEnum[TypeEnum["Fieldset"] = 0] = "Fieldset";
+        TypeEnum[TypeEnum["Logical"] = 1] = "Logical";
+    })(TypeEnum = FieldGroupDescriptor.TypeEnum || (FieldGroupDescriptor.TypeEnum = {}));
+})(FieldGroupDescriptor || (FieldGroupDescriptor = {}));
 
 class FieldValidator {
     constructor(name, expression, message, options) {
@@ -2412,6 +2478,7 @@ class ModelDescriptor {
 
 class TableDescriptor {
     constructor(modelType, idProperty, titleProperty) {
+        var _a;
         this._filterDisplay = TableDescriptor.FilterDisplayEnum.Menu;
         this._paginationMode = TableDescriptor.PaginationModeEnum.Pagination;
         this._columns = [];
@@ -2422,6 +2489,7 @@ class TableDescriptor {
         this._rowHeight = 45;
         this._tableFullHeightOffset = 315;
         this._model = new ModelDescriptor(modelType, idProperty, titleProperty);
+        this._dataKeyProperty = (_a = idProperty !== null && idProperty !== void 0 ? idProperty : ModelUtil.findIdAttribute(modelType)) !== null && _a !== void 0 ? _a : undefined;
     }
     get filterDisplay() {
         return this._filterDisplay;
@@ -2461,48 +2529,41 @@ class TableDescriptor {
     }
     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;
     }
     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) {
@@ -2550,11 +2611,6 @@ class TableDescriptor {
         descriptor._filterDisplay = this._filterDisplay;
         return descriptor;
     }
-    setDataKeyFromColumn() {
-        if (!this._dataKeyProperty && this._columns.length === 1) {
-            this._dataKeyProperty = this._columns[0].property;
-        }
-    }
 }
 (function (TableDescriptor) {
     let PaginationModeEnum;
@@ -2789,16 +2845,16 @@ class EditorFormlyUtil {
             // assign default field width through entire row
             className = 'col-12';
         }
-        if (className.indexOf('col-') < 0) {
-            // class was provided, but does not contain col- definition
-            className = `col-12 ${descriptor.className}`;
-        }
         field.className = className;
         field.templateOptions['descriptor'] = descriptor;
         if (descriptor instanceof FieldInputDescriptor) {
             switch (descriptor.fieldType) {
                 case FieldInputDescriptor.TypeEnum.Hidden:
                     break;
+                case FieldInputDescriptor.TypeEnum.Label:
+                    field.type = 'label';
+                    delete field.key;
+                    break;
                 case FieldInputDescriptor.TypeEnum.Textarea:
                     field.type = 'textarea';
                     break;
@@ -3829,6 +3885,8 @@ const MNG_BROWSER_STORAGE_IT = new InjectionToken('Browser storage', {
     factory: () => localStorage
 });
 
+const MNG_COMMONS_INITIALIZER_IT = new InjectionToken('MNG Commons Initializer');
+
 const ACTION_EDITOR_DIALOG_COMPONENT_SETTING = new InjectionToken('ACTION_EDITOR_DIALOG_COMPONENT_SETTING');
 
 const MNG_MODULE_CONFIG_IT = new InjectionToken('MngModuleConfig');
@@ -3918,7 +3976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
 
 class MngEnumPipe {
     transform(value, enumObj, i18nPath, nameAsValue = false) {
-        if (!value || !enumObj) {
+        if (!value || (typeof value !== 'number' && typeof value !== 'string') || !enumObj) {
             return value;
         }
         const enumConstantName = nameAsValue ? value : EnumUtil.getConstantNameFromEnumObject(enumObj, value);
@@ -4098,7 +4156,7 @@ class MngActionExecutorService {
                 throw Error(`Source component ${sourceComponent} should be implementing IConfirmationService interface to be able to provide confirmation functionality.`);
             }
             const srcConfirmComponent = sourceComponent;
-            const confirmParams = {
+            let confirmParams = {
                 key: srcConfirmComponent.getConfirmationServiceInstanceKey(action),
                 acceptVisible: false,
                 rejectVisible: false
@@ -4144,6 +4202,9 @@ class MngActionExecutorService {
                 confirmParams.reject = () => {
                     observer.error(new ActionRunResult(context, undefined, new ActionError(null, true)));
                 };
+                if (action.runConfirmationConfigMapFn) {
+                    confirmParams = action.runConfirmationConfigMapFn(context, confirmParams);
+                }
                 srcConfirmComponent.getConfirmationService().confirm(confirmParams);
             });
             return observable;
@@ -4261,17 +4322,38 @@ class MngActionExecutorService {
      * @param sourceComponent Source activation component.
      */
     activateAction(action, itemId, item, actionData, viewContainer, sourceComponent) {
+        var _a;
         if (action.type === ActionTypeEnum.Editor) {
             let dialogComponent = this.defaultEditorDialogComponent;
             let dialogClassName = '';
             if (action instanceof ActionEditorDescriptor) {
+                dialogClassName = (_a = action.dialogClassName) !== null && _a !== void 0 ? _a : 'mng-action-editor-dialog';
+                let dialogSizeClassName = '';
+                switch (action.dialogSize) {
+                    case ActionEditorDescriptor.DialogSizeEnum.ExtraSmall:
+                        dialogSizeClassName = 'mng-action-editor-dialog-xs';
+                        break;
+                    case ActionEditorDescriptor.DialogSizeEnum.Small:
+                        dialogSizeClassName = 'mng-action-editor-dialog-sm';
+                        break;
+                    case ActionEditorDescriptor.DialogSizeEnum.Large:
+                        dialogSizeClassName = 'mng-action-editor-dialog-lg';
+                        break;
+                    case ActionEditorDescriptor.DialogSizeEnum.ExtraLarge:
+                        dialogSizeClassName = 'mng-action-editor-dialog-xl';
+                        break;
+                    case ActionEditorDescriptor.DialogSizeEnum.Normal:
+                    default:
+                        break;
+                }
+                if (dialogSizeClassName.length) {
+                    dialogClassName += ` ${dialogSizeClassName}`;
+                }
                 if (action.editorComponent) {
                     dialogComponent = action.editorComponent;
                 }
-                if (action.dialogClassName) {
-                    dialogClassName = action.dialogClassName;
-                }
             }
+            console.log(dialogClassName);
             const dialogConfig = {
                 data: {
                     action
@@ -4403,7 +4485,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
 class MngConfigurationService {
     constructor(http) {
         this.http = http;
-        this.jsonEnvironments = [];
+        this.jsonSources = [];
         this.configuration = Object.assign({}, this.projectEnvironment);
     }
     static init(httpClient) {
@@ -4430,23 +4512,57 @@ class MngConfigurationService {
      * Adds new config source from JSON file.
      * @param url Url to JSON file.
      */
-    addJsonSource(url = this.projectEnvironment.configurationJsonSource) {
+    addJsonSource(url = this.projectEnvironment.configurationJsonSource, load = false) {
         if (!url) {
-            console.warn('No path to configuration file specified. Setting default.');
+            console.debug('No path to configuration file specified. Setting default.');
             url = 'assets/config/env{{environment}}.json';
         }
-        const envName = this.projectEnvironment.name || (this.projectEnvironment.production ? 'prod' : 'dev');
-        url = url.replace('{{environment}}', '.' + envName);
-        return this.http.get(url).pipe(catchError(err => {
-            console.warn('Error loading configuration file:' + err.message + '. Falling back to env.json');
-            const pathSegments = url.split('/');
-            pathSegments[pathSegments.length - 1] = 'env.json';
-            return this.http.get(pathSegments.join('/'));
-        }), map(res => {
-            this.jsonEnvironments.push(res);
-            this.mergeConfigs();
-            return true;
-        }));
+        const sourceInfo = {
+            url: url,
+            isEnvironment: false,
+            isLoaded: false
+        };
+        this.jsonSources.push(sourceInfo);
+        console.debug(`Added JSON source: ${url}`);
+        if (load) {
+            return this.loadJsonSources();
+        }
+        else {
+            return of(true);
+        }
+    }
+    loadJsonSources() {
+        return combineLatest(this.jsonSources
+            .filter(source => !source.isLoaded)
+            .map(sourceInfo => {
+            var _a;
+            let url = sourceInfo.url;
+            if (url.indexOf('{{environment}}') >= 0) {
+                sourceInfo.isEnvironment = true;
+                sourceInfo.environment = this.projectEnvironment.name || (this.projectEnvironment.production ? 'prod' : 'dev');
+                url = url.replace('{{environment}}', '.' + sourceInfo.environment);
+            }
+            console.debug(`Loading JSON source: ${sourceInfo.url} with env ${(_a = sourceInfo.environment) !== null && _a !== void 0 ? _a : '/'}`);
+            return this.http.get(url).pipe(catchError((err) => {
+                var _a;
+                if (sourceInfo.isEnvironment) {
+                    const noEnvUrl = sourceInfo.url.replace('{{environment}}', '');
+                    sourceInfo.environment = null;
+                    console.debug(`Reloading JSON source: ${sourceInfo.url} with env ${(_a = sourceInfo.environment) !== null && _a !== void 0 ? _a : '/'}`);
+                    return this.http.get(noEnvUrl);
+                }
+                else {
+                    const message = `Configuration file ${url} not loaded (${err.status}): ${err.message}.`;
+                    console.error(message);
+                    return throwError(() => new Error(message));
+                }
+            }), map(configuration => {
+                sourceInfo.configuration = configuration;
+                sourceInfo.isLoaded = true;
+                console.debug(`JSON source loaded: ${sourceInfo.url}`);
+                return true;
+            }));
+        })).pipe(map(sourceResults => sourceResults.every(sr => sr)), tap(sourceResults => this.mergeConfigs()));
     }
     /**
      * Get configuration.
@@ -4466,9 +4582,10 @@ class MngConfigurationService {
      */
     mergeConfigs() {
         let config = Object.assign({}, this.projectEnvironment);
-        if (this.jsonEnvironments.length) {
-            for (const je of this.jsonEnvironments) {
-                config = Object.assign(Object.assign({}, config), je);
+        const jsonConfigs = this.jsonSources.filter(source => source.isLoaded && typeof source.configuration === 'object').map(source => source.configuration);
+        if (jsonConfigs.length) {
+            for (const jsonConfig of jsonConfigs) {
+                config = Object.assign(Object.assign({}, config), jsonConfig);
             }
         }
         this.configuration = config;
@@ -4477,12 +4594,11 @@ class MngConfigurationService {
 MngConfigurationService._instance = null;
 
 class MngCommonsService {
-    constructor(router, primengConfig, translate, titleService, configurationService, moduleConfig, localStorage) {
+    constructor(router, primengConfig, translate, titleService, moduleConfig, localStorage) {
         this.router = router;
         this.primengConfig = primengConfig;
         this.translate = translate;
         this.titleService = titleService;
-        this.configurationService = configurationService;
         this.moduleConfig = moduleConfig;
         this.localStorage = localStorage;
         // menu
@@ -4619,9 +4735,8 @@ class MngCommonsService {
     get user$() {
         return this.userSubject.asObservable();
     }
-    initialize() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        // menu
+    reset() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         this._menuMode = (_c = (_b = (_a = this.moduleConfig) === null || _a === void 0 ? void 0 : _a.menu) === null || _b === void 0 ? void 0 : _b.mode) !== null && _c !== void 0 ? _c : 'sidebar';
         this._menuModeSubject.next(this._menuMode);
         this._menuItems = (_f = (_e = (_d = this.moduleConfig) === null || _d === void 0 ? void 0 : _d.menu) === null || _e === void 0 ? void 0 : _e.menuItems) !== null && _f !== void 0 ? _f : [];
@@ -4655,7 +4770,8 @@ class MngCommonsService {
         this.translate.langs = this.appLanguages;
         this.translate.use(this.appLanguage);
         this.translate.get('mngPrime').subscribe(value => this.primengConfig.setTranslation(value));
-        this.router.events
+        (_o = this.routerEventsSubscription) === null || _o === void 0 ? void 0 : _o.unsubscribe();
+        this.routerEventsSubscription = this.router.events
             .pipe(
         // Filter the NavigationEnd events as the breadcrumb is updated only when the route reaches its end
         filter(event => event instanceof NavigationEnd))
@@ -4663,7 +4779,8 @@ class MngCommonsService {
             this.updateBreadcrumbs();
             this.setPageTitle();
         });
-        this.translate.onLangChange.subscribe(() => {
+        (_p = this.translateLangChangeSubscription) === null || _p === void 0 ? void 0 : _p.unsubscribe();
+        this.translateLangChangeSubscription = this.translate.onLangChange.subscribe(() => {
             this.updateBreadcrumbs();
             this.setPageTitle();
         });
@@ -4806,12 +4923,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: i1$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: 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: i1$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: undefined, decorators: [{
                         type: Inject,
                         args: [MNG_MODULE_CONFIG_IT]
                     }] }, { type: Storage, decorators: [{
@@ -4873,18 +4990,26 @@ class MngActionComponent {
         this.loadingSubject = new ReplaySubject(1);
         this.$loading = this.loadingSubject.asObservable();
         this.cmpId = Math.random().toString(36).substring(2);
+        this.isVisibleSubject = new ReplaySubject(1);
+        this.$isVisible = this.isVisibleSubject.asObservable().pipe(distinctUntilChanged());
+        this.isEnabledSubject = new ReplaySubject(1);
+        this.$isEnabled = this.isEnabledSubject.asObservable().pipe(distinctUntilChanged());
+        this.labelSubject = new ReplaySubject(1);
+        this.$label = this.labelSubject.asObservable().pipe(distinctUntilChanged());
+        this.tooltipSubject = new ReplaySubject(1);
+        this.$tooltip = this.tooltipSubject.asObservable().pipe(distinctUntilChanged());
         this.hasNoTitle = false;
         this.loadingSubject.next(false);
     }
     ngOnInit() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b;
         this.viewContainer = (_b = (_a = this.viewContainerInit) !== null && _a !== void 0 ? _a : this.viewContainerService) !== null && _b !== void 0 ? _b : undefined;
         this.hasNoTitle = this.action.title === null;
-        const context = this.actionExecutor.prepareActionExecContext(this.action, this.itemId, this.item, this.dataProvider, (_c = this.viewContainer) !== null && _c !== void 0 ? _c : undefined, this, this.actionData);
-        this.$isVisible = typeof this.action.isVisibleFunction === 'function' ? this.action.isVisibleFunction(context) : of(true);
-        this.$isEnabled = typeof this.action.isEnabledFunction === 'function' ? this.action.isEnabledFunction(context) : of(true);
-        this.$label = this.hasNoTitle ? of(null) : I18nUtils.Action.getAsync(this.translate, this.action, 'title', (_e = (_d = this.action) === null || _d === void 0 ? void 0 : _d.title) !== null && _e !== void 0 ? _e : undefined, this.item);
-        this.$tooltip = I18nUtils.Action.getAsync(this.translate, this.action, 'tooltip', (_g = (_f = this.action) === null || _f === void 0 ? void 0 : _f.tooltip) !== null && _g !== void 0 ? _g : undefined, this.item);
+        this.isEnabledSubject.next(true);
+        this.isVisibleSubject.next(true);
+        this.labelSubject.next(null);
+        this.tooltipSubject.next(null);
+        this.processSubscriptions();
         if (this.action instanceof ActionLinkDescriptor) {
             this.actionLink = this.action;
         }
@@ -4892,6 +5017,19 @@ class MngActionComponent {
             this.hostClass = this.action.className;
         }
     }
+    ngOnChanges(changes) {
+        var _a, _b, _c, _d, _e, _f;
+        if (!((_b = (_a = changes['item']) === null || _a === void 0 ? void 0 : _a.firstChange) !== null && _b !== void 0 ? _b : true) || !((_d = (_c = changes['itemId']) === null || _c === void 0 ? void 0 : _c.firstChange) !== null && _d !== void 0 ? _d : true) || !((_f = (_e = changes['actionData']) === null || _e === void 0 ? void 0 : _e.firstChange) !== null && _f !== void 0 ? _f : true)) {
+            this.processSubscriptions();
+        }
+    }
+    ngOnDestroy() {
+        var _a, _b, _c, _d;
+        (_a = this.isVisibleSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        (_b = this.isEnabledSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+        (_c = this.labelSubscription) === null || _c === void 0 ? void 0 : _c.unsubscribe();
+        (_d = this.tooltipSubscription) === null || _d === void 0 ? void 0 : _d.unsubscribe();
+    }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     triggerAction(event) {
         this.loadingSubject.next(true);
@@ -4917,9 +5055,35 @@ class MngActionComponent {
     getConfirmationServiceInstanceKey(action) {
         return `${action.actionName}_${this.cmpId}`;
     }
+    processSubscriptions() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const context = this.actionExecutor.prepareActionExecContext(this.action, this.itemId, this.item, this.dataProvider, (_a = this.viewContainer) !== null && _a !== void 0 ? _a : undefined, this, this.actionData);
+        if (typeof this.action.isVisibleFunction === 'function') {
+            (_b = this.isVisibleSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+            this.isVisibleSubscription = this.action.isVisibleFunction(context).subscribe({
+                next: res => this.isVisibleSubject.next(res)
+            });
+        }
+        if (typeof this.action.isEnabledFunction === 'function') {
+            (_c = this.isEnabledSubscription) === null || _c === void 0 ? void 0 : _c.unsubscribe();
+            this.isEnabledSubscription = this.action.isEnabledFunction(context).subscribe({
+                next: res => this.isEnabledSubject.next(res)
+            });
+        }
+        if (!this.hasNoTitle) {
+            (_d = this.labelSubscription) === null || _d === void 0 ? void 0 : _d.unsubscribe();
+            this.labelSubscription = I18nUtils.Action.getAsync(this.translate, this.action, 'title', (_f = (_e = this.action) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : undefined, this.item).subscribe({
+                next: i18n => this.labelSubject.next(i18n)
+            });
+        }
+        (_g = this.tooltipSubscription) === null || _g === void 0 ? void 0 : _g.unsubscribe();
+        this.tooltipSubscription = I18nUtils.Action.getAsync(this.translate, this.action, 'tooltip', (_j = (_h = this.action) === null || _h === void 0 ? void 0 : _h.tooltip) !== null && _j !== void 0 ? _j : undefined, this.item).subscribe({
+            next: i18n => this.tooltipSubject.next(i18n)
+        });
+    }
 }
 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 });
+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], usesOnChanges: true, 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\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"] }]
@@ -5977,13 +6141,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
         }] });
 
 class MngFormlyFieldInputComponent extends FieldType {
+    constructor() {
+        super(...arguments);
+        this.subscriptions = [];
+    }
     ngOnInit() {
         this.iFormControl = this.formControl;
         this.descriptor = this.to['descriptor'];
+        // emit lifecycle event
+        this.descriptor.nextEvent(MngFormFieldEventTypeEnum.Component, MngFormlyFieldInputComponent, this, {
+            eventSubtype: MngFormFieldEventComponentSubtype.ON_INIT
+        });
+        // init values
         if (this.to.type === 'datepicker' && typeof this.iFormControl.value === 'string') {
             const dateObject = new Date(this.iFormControl.value);
             this.iFormControl.setValue(dateObject);
         }
+        const subscription = this.formControl.valueChanges.pipe(startWith(this.formControl.value), distinctUntilChanged()).subscribe(v => {
+            this.descriptor.nextEvent(MngFormFieldEventTypeEnum.ValueChange, MngFormlyFieldInputComponent, this, {
+                value: v
+            });
+        });
+        this.subscriptions.push(subscription);
+    }
+    ngOnDestroy() {
+        var _a;
+        this.subscriptions.forEach(s => s.unsubscribe());
+        // emit lifecycle event
+        (_a = this.descriptor) === null || _a === void 0 ? void 0 : _a.nextEvent(MngFormFieldEventTypeEnum.Component, MngFormlyFieldInputComponent, this, {
+            eventSubtype: MngFormFieldEventComponentSubtype.ON_DESTROY
+        });
     }
 }
 MngFormlyFieldInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -5993,10 +6180,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
             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 MngFormlyFieldLabelComponent {
+    constructor() {
+        this.className = 'hidden';
+    }
+}
+MngFormlyFieldLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MngFormlyFieldLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyFieldLabelComponent, selector: "mng-formly-field-label", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mng-formly-field-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "" }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 class MngFormlyFieldDropdownComponent extends FieldType {
+    constructor() {
+        super(...arguments);
+        this.subscriptions = [];
+    }
     ngOnInit() {
         this.dFormControl = this.formControl;
         this.descriptor = this.to['descriptor'];
+        // emit lifecycle event
+        this.descriptor.nextEvent(MngFormFieldEventTypeEnum.Component, MngFormlyFieldDropdownComponent, this, {
+            eventSubtype: MngFormFieldEventComponentSubtype.ON_INIT
+        });
+        const subscription = this.formControl.valueChanges.pipe(startWith(this.formControl.value), distinctUntilChanged()).subscribe(v => {
+            this.descriptor.nextEvent(MngFormFieldEventTypeEnum.ValueChange, MngFormlyFieldDropdownComponent, this, {
+                value: v
+            });
+        });
+        this.subscriptions.push(subscription);
+    }
+    ngOnDestroy() {
+        var _a;
+        this.subscriptions.forEach(s => s.unsubscribe());
+        // emit lifecycle event
+        (_a = this.descriptor) === null || _a === void 0 ? void 0 : _a.nextEvent(MngFormFieldEventTypeEnum.Component, MngFormlyFieldDropdownComponent, this, {
+            eventSubtype: MngFormFieldEventComponentSubtype.ON_DESTROY
+        });
     }
 }
 MngFormlyFieldDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyFieldDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -6788,6 +7012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
             }] } });
 
 var SizeEnum = ActionDescriptor.SizeEnum;
+var DialogSizeEnum = ActionEditorDescriptor.DialogSizeEnum;
 class MngFormlyFieldTableDialogFormComponent extends FieldType {
     constructor(actionExecutor) {
         super();
@@ -6811,7 +7036,8 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
             const viewAction = new ActionEditorDescriptor(this.descriptor.tableviewDescriptor.viewEditor, 'details', this.descriptor.editor.model.type, this.descriptor.property)
                 .withPosition(ActionPositionEnum.RowClick)
                 .withTitle(null)
-                .withDialogClassName('mng-formly-field-table-form-dialog');
+                .withDialogClassName('mng-field-dialog mng-action-editor-dialog')
+                .withDialogSize(DialogSizeEnum.Small);
             viewAction.withEditorActions([new ActionEditorSubmitDescriptor(viewAction, ActionEditorSubmitDescriptor.TypeEnum.Cancel)]);
             this.rowClickActions.push(viewAction);
         }
@@ -6820,7 +7046,8 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
                 .withPosition(ActionPositionEnum.ToolbarRight)
                 .withTitle(null)
                 .withIcon('pi pi-plus')
-                .withDialogClassName('mng-formly-field-table-form-dialog')
+                .withDialogClassName('mng-field-dialog mng-action-editor-dialog')
+                .withDialogSize(DialogSizeEnum.Small)
                 .withSize(SizeEnum.ExtraSmall)
                 .withSubmitFunction(ctx => {
                 var _a;
@@ -6841,7 +7068,8 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
             const editAction = new ActionEditorDescriptor(this.descriptor.tableviewDescriptor.editEditor, 'edit', this.descriptor.editor.model.type, this.descriptor.property)
                 .withTitle(null)
                 .withIcon('pi pi-pencil')
-                .withDialogClassName('mng-formly-field-table-form-dialog')
+                .withDialogClassName('mng-field-dialog mng-action-editor-dialog')
+                .withDialogSize(DialogSizeEnum.Small)
                 .withSize(SizeEnum.ExtraSmall)
                 .withSubmitFunction(ctx => {
                 var _a, _b;
@@ -7047,10 +7275,10 @@ 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", "viewContainer", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { type: i1$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { type: i3$2.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }], directives: [{ type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i8.Ripple, selector: "[pRipple]" }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i1$1.TranslatePipe, "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngFormlyFieldTableDialogMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.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-field-dialog mng-action-editor-dialog mng-action-editor-dialog-sm\">\n    <ng-template pTemplate=\"content\">\n        <mng-table\n            [descriptor]=\"descriptor.mainTableDescriptor\"\n            [queryResult]=\"addItemsAsync\"\n            [selectionEnabled]=\"true\"\n            [loading]=\"dialogIsLoading$\"\n            (selectionChange)=\"onSelectionChange($event)\">\n        </mng-table>\n        <p-messages [value]=\"dialogMessages\"></p-messages>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n        <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [label]=\"'general.add' | translate\"\n            icon=\"pi pi-check\"\n            class=\"p-button-text\"\n            (click)=\"addItems()\"\n            [loading]=\"(dialogIsLoading$ | async) ?? false\"\n            [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n", components: [{ type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "isColumnClickable", "viewContainer", "captionComponent", "columnActionComponent"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { type: i1$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { type: i3$2.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }], directives: [{ type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i8.Ripple, selector: "[pRipple]" }, { type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], pipes: { "translate": i1$1.TranslatePipe, "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 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" }]
+            args: [{ selector: 'mng-formly-table-multiselect-add-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-table [descriptor]=\"descriptor.mainTableDescriptor\" [items]=\"itemsAsync\">\n    <ng-template mngTemplate=\"caption\">\n        <div class=\"flex flex-column md:flex-row md:justify-content-end align-items-center table-header pt-0\">\n            <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n            <button\n                *ngIf=\"hasAddAction && !options?.formState?.disabled\"\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-plus\"\n                class=\"p-button-rounded p-button-success mng-button-xs\"\n                (click)=\"openAddDialog()\"\n                [disabled]=\"formControl!.disabled\"></button>\n        </div>\n    </ng-template>\n    <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n        <button\n            *ngIf=\"hasDeleteAction && !options?.formState?.disabled\"\n            pButton\n            pRipple\n            type=\"button\"\n            icon=\"pi pi-trash\"\n            class=\"p-button-rounded p-button-danger mng-button-xs\"\n            (click)=\"removeItem(item)\"\n            [disabled]=\"formControl!.disabled\"></button>\n    </ng-template>\n</mng-table>\n\n<p-dialog\n    *ngIf=\"hasAddAction\"\n    [(visible)]=\"isDialogVisible\"\n    [draggable]=\"false\"\n    [header]=\"'general.addItem' | translate: {item: to?.label!}\"\n    [modal]=\"true\"\n    appendTo=\"body\"\n    styleClass=\"p-fluid mng-field-dialog mng-action-editor-dialog mng-action-editor-dialog-sm\">\n    <ng-template pTemplate=\"content\">\n        <mng-table\n            [descriptor]=\"descriptor.mainTableDescriptor\"\n            [queryResult]=\"addItemsAsync\"\n            [selectionEnabled]=\"true\"\n            [loading]=\"dialogIsLoading$\"\n            (selectionChange)=\"onSelectionChange($event)\">\n        </mng-table>\n        <p-messages [value]=\"dialogMessages\"></p-messages>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n        <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [label]=\"'general.add' | translate\"\n            icon=\"pi pi-check\"\n            class=\"p-button-text\"\n            (click)=\"addItems()\"\n            [loading]=\"(dialogIsLoading$ | async) ?? false\"\n            [disabled]=\"form.disabled\"></button>\n    </ng-template>\n</p-dialog>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
 class MngFormlyFieldTabsComponent extends FieldType {
@@ -7063,30 +7291,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
         }] });
 
 class MngFormlyFieldFieldsetComponent extends FieldType {
+    constructor() {
+        super(...arguments);
+        this.typeFieldset = FieldGroupDescriptor.TypeEnum.Fieldset;
+        this.typeLogical = FieldGroupDescriptor.TypeEnum.Logical;
+    }
+    ngOnInit() {
+        this.descriptor = this.to['descriptor'];
+    }
 }
 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$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 });
+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    <ng-container [ngSwitch]=\"descriptor?.type\">\n        <p-fieldset *ngSwitchCase=\"typeFieldset\" [legend]=\"group.templateOptions?.label! | translate\">\n            <formly-field [field]=\"group\"></formly-field>\n        </p-fieldset>\n        <formly-field *ngSwitchDefault [field]=\"group\"></formly-field>\n    </ng-container>\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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }], 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" }]
+            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    <ng-container [ngSwitch]=\"descriptor?.type\">\n        <p-fieldset *ngSwitchCase=\"typeFieldset\" [legend]=\"group.templateOptions?.label! | translate\">\n            <formly-field [field]=\"group\"></formly-field>\n        </p-fieldset>\n        <formly-field *ngSwitchDefault [field]=\"group\"></formly-field>\n    </ng-container>\n</ng-container>\n" }]
         }] });
 
 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$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 });
+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]=\"to?.['descriptor']?.['fieldClassName'] ?? '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" }]
+            args: [{ selector: 'mng-formly-field-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"to?.['descriptor']?.['fieldClassName'] ?? 'field'\">\n    <label [for]=\"key\" [class]=\"to?.['descriptor']?.['labelClassName'] ?? ''\"\n        >{{ $any(to?.label) | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label\n    >\n    <ng-container #fieldComponent></ng-container>\n    <small *ngIf=\"to?.['descriptor']?.['helpText']\">{{ to?.['descriptor']?.['helpText'] | translate }}</small>\n    <small *ngIf=\"showError\" class=\"p-error\">\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </small>\n</div>\n" }]
         }] });
 
 class MngFormlyTableWrapperComponent extends FieldWrapper {
 }
 MngFormlyTableWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngFormlyTableWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MngFormlyTableWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MngFormlyTableWrapperComponent, selector: "mng-formly-table-wrapper", usesInheritance: true, ngImport: i0, template: "<div class=\"field table\">\n    <ng-container #fieldComponent></ng-container>\n    <small *ngIf=\"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 });
+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]=\"to?.['descriptor']?.['fieldClassName'] ?? '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" }]
+            args: [{ selector: 'mng-formly-table-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"to?.['descriptor']?.['fieldClassName'] ?? 'field table'\">\n    <ng-container #fieldComponent></ng-container>\n    <small *ngIf=\"to?.['descriptor']?.['helpText']\">{{ to?.['descriptor']?.['helpText'] | translate }}</small>\n    <small *ngIf=\"showError\" class=\"p-error\">\n        <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </small>\n</div>\n" }]
         }] });
 
 class MngBreadcrumbComponent {
@@ -7608,10 +7844,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
                 args: ['window:resize', ['$event']]
             }] } });
 
-function mngCommonsInitializerProvider(mngCommons) {
-    return () => mngCommons.initialize();
+function mngCommonsInitializerProvider(mngCommonsInit) {
+    return () => mngCommonsInit.initialize();
 }
 
+class MngCommonsInitService {
+    constructor(translate, configurationService, mngCommons, commonsInitializers) {
+        this.translate = translate;
+        this.configurationService = configurationService;
+        this.mngCommons = mngCommons;
+        this.commonsInitializers = commonsInitializers;
+        this.isInitialized = false;
+    }
+    initialize() {
+        if (this.isInitialized) {
+            return of(void 0);
+        }
+        console.debug(`Initializing @mediusinc/mng-commons.`);
+        return this.configurationService.loadJsonSources().pipe(mergeMap$1(() => {
+            if (this.commonsInitializers) {
+                console.debug(`Module initializers for @mediusinc/mng-commons.`);
+                return combineLatest(this.commonsInitializers.map(ci => ci())).pipe(map(res => res));
+            }
+            else {
+                return of(true);
+            }
+        }), map(() => this.mngCommons.reset()));
+        this.isInitialized = true;
+    }
+}
+MngCommonsInitService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngCommonsInitService, deps: [{ token: i1$1.TranslateService }, { token: MngConfigurationService }, { token: MngCommonsService }, { token: MNG_COMMONS_INITIALIZER_IT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+MngCommonsInitService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngCommonsInitService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MngCommonsInitService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: i1$1.TranslateService }, { type: MngConfigurationService }, { type: MngCommonsService }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MNG_COMMONS_INITIALIZER_IT]
+                    }, {
+                        type: Optional
+                    }] }];
+    } });
+
 const mngConfigurationServiceProvider = (httpClient, moduleConfig) => {
     var _a;
     const service = MngConfigurationService.init(httpClient);
@@ -7622,12 +7896,21 @@ const mngConfigurationServiceProvider = (httpClient, moduleConfig) => {
 };
 function mngConfigJsonAppInitializerProvider(configService, moduleConfig) {
     return () => {
-        var _a, _b, _c;
+        var _a, _b;
         if ((_a = moduleConfig === null || moduleConfig === void 0 ? void 0 : moduleConfig.configuration) === null || _a === void 0 ? void 0 : _a.skipJsonSourceInit) {
             return of(false);
         }
         else {
-            return configService.addJsonSource((_c = (_b = moduleConfig === null || moduleConfig === void 0 ? void 0 : moduleConfig.configuration) === null || _b === void 0 ? void 0 : _b.jsonSource) !== null && _c !== void 0 ? _c : undefined);
+            const jsonSource = (_b = moduleConfig === null || moduleConfig === void 0 ? void 0 : moduleConfig.configuration) === null || _b === void 0 ? void 0 : _b.jsonSource;
+            if (!jsonSource) {
+                return configService.addJsonSource();
+            }
+            else if (Array.isArray(jsonSource)) {
+                return combineLatest(jsonSource.map(source => configService.addJsonSource(source))).pipe(map(sourcesRes => sourcesRes.every(s => s)));
+            }
+            else {
+                return configService.addJsonSource(jsonSource);
+            }
         }
     };
 }
@@ -7637,6 +7920,11 @@ const formlyWrappersConfig = [
     { name: 'field-table', component: MngFormlyTableWrapperComponent }
 ];
 const formlyTypesConfig = [
+    {
+        name: 'label',
+        component: MngFormlyFieldLabelComponent,
+        wrappers: ['field']
+    },
     {
         name: 'input',
         component: MngFormlyFieldInputComponent,
@@ -7886,6 +8174,7 @@ const declarations = [
     MngFormlyTableWrapperComponent,
     // formly fields
     MngFormlyFieldInputComponent,
+    MngFormlyFieldLabelComponent,
     MngFormlyFieldDropdownComponent,
     MngFormlyFieldAutocompleteComponent,
     MngFormlyFieldLookupDialogComponent,
@@ -7914,6 +8203,7 @@ class MngCommonsModule {
                 DialogService,
                 MessageService,
                 ConfirmationService,
+                MngCommonsInitService,
                 MngActionExecutorService,
                 MngNavigationService,
                 MngCommonsService,
@@ -7943,7 +8233,7 @@ class MngCommonsModule {
                 {
                     provide: APP_INITIALIZER,
                     useFactory: mngCommonsInitializerProvider,
-                    deps: [MngCommonsService],
+                    deps: [MngCommonsInitService],
                     multi: true
                 },
                 {
@@ -7990,6 +8280,7 @@ MngCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         MngFormlyTableWrapperComponent,
         // formly fields
         MngFormlyFieldInputComponent,
+        MngFormlyFieldLabelComponent,
         MngFormlyFieldDropdownComponent,
         MngFormlyFieldAutocompleteComponent,
         MngFormlyFieldLookupDialogComponent,
@@ -8105,6 +8396,7 @@ MngCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         MngFormlyTableWrapperComponent,
         // formly fields
         MngFormlyFieldInputComponent,
+        MngFormlyFieldLabelComponent,
         MngFormlyFieldDropdownComponent,
         MngFormlyFieldAutocompleteComponent,
         MngFormlyFieldLookupDialogComponent,
@@ -8196,11 +8488,22 @@ class AMngBaseApiService {
         this.objectSerializer = ObjectSerializer.get();
     }
     getUrl(...pathSegments) {
-        let path = pathSegments.join('/');
-        if (!path.startsWith('/')) {
+        let baseUrl = this.getBasePath();
+        if (baseUrl.endsWith('/')) {
+            baseUrl = baseUrl.substring(0, baseUrl.length - 1);
+        }
+        const serviceBasePath = this.getServiceBasePath();
+        let path = [serviceBasePath, ...pathSegments].filter(s => s && s.length).join('/');
+        // omit first and last '/'
+        if (path.startsWith('/')) {
             path = path.substring(1);
         }
-        return `${this.getBasePath()}${this.getServiceBasePath()}${path}`;
+        if (path.endsWith('/')) {
+            path = path.substring(0, path.length - 1);
+        }
+        // replace any double '//' from path that could come from joining paths
+        path = path.replace('//', '/');
+        return `${baseUrl}/${path}`;
     }
     serializeQueryParam(queryParam, type = 'QueryParam') {
         return this.objectSerializer.serialize(queryParam, type);
@@ -8260,7 +8563,7 @@ class AMngCrudApiService extends AMngGetAllApiService {
         super(type, queryResultType, http);
     }
     createPost(item, params) {
-        const url = this.getUrl(this.getCreatePostPath());
+        const url = this.getUrl(this.getCreatePostPath(item));
         return this.http
             .post(url, this.serialize(item), {
             withCredentials: true,
@@ -8304,7 +8607,7 @@ class AMngCrudApiService extends AMngGetAllApiService {
         })
             .pipe(map(res => this.deserialize(res)));
     }
-    getCreatePostPath() {
+    getCreatePostPath(item) {
         return '';
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -8782,5 +9085,5 @@ class RouteDataBuilder {
  * Generated bundle index. Do not edit.
  */
 
-export { AFieldDescriptor, AFieldGroupDescriptor, AGenericFieldDescriptor, AMngApiService, AMngBaseApiService, AMngCrudApiService, AMngGetAllApiService, AMngTableviewRouteComponent, ActionActivationResult, ActionActivationTriggerEnum, ActionDeleteDescriptor, ActionDescriptor, ActionEditorAddDescriptor, ActionEditorDescriptor, ActionEditorDetailsDescriptor, ActionEditorEditDescriptor, ActionEditorSubmitDescriptor, ActionError, ActionExecContext, ActionLevelEnum, ActionLinkDescriptor, ActionPositionEnum, ActionRunResult, ActionSimpleDescriptor, ActionTriggerResult, ActionTypeEnum, ColumnDescriptor, DataProvider, DefaultMngErrorMapperService, EditorDataProvider, EditorDescriptor, EditorFormlyUtil, EnumName, EnumUtil, FieldDescriptor, FieldGroupDescriptor, FieldInputDescriptor, FieldLookupDescriptor, FieldLookupEnumDescriptor, FieldManyEditorDescriptor, FieldManyToManyEditorDescriptor, FieldTabGroupDescriptor, FieldValidator, FilterDescriptor, FilterLookupDescriptor, FilterLookupEnumDescriptor, I18nUtils, 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 };
+export { ACTION_EDITOR_DIALOG_COMPONENT_SETTING, AFieldDescriptor, AFieldGroupDescriptor, AGenericFieldDescriptor, AMngApiService, AMngBaseApiService, AMngCrudApiService, AMngGetAllApiService, AMngTableviewRouteComponent, ActionActivationResult, ActionActivationTriggerEnum, ActionDeleteDescriptor, ActionDescriptor, ActionEditorAddDescriptor, ActionEditorDescriptor, ActionEditorDetailsDescriptor, ActionEditorEditDescriptor, ActionEditorSubmitDescriptor, ActionError, ActionExecContext, ActionLevelEnum, ActionLinkDescriptor, ActionPositionEnum, ActionRunResult, ActionSimpleDescriptor, ActionTriggerResult, ActionTypeEnum, ColumnDescriptor, DataProvider, DefaultMngErrorMapperService, EditorDataProvider, EditorDescriptor, EditorFormlyUtil, EnumName, EnumUtil, FieldDescriptor, FieldGroupDescriptor, FieldInputDescriptor, FieldLookupDescriptor, FieldLookupEnumDescriptor, FieldManyEditorDescriptor, FieldManyToManyEditorDescriptor, FieldTabGroupDescriptor, FieldValidator, FilterDescriptor, FilterLookupDescriptor, FilterLookupEnumDescriptor, I18nUtils, JsonPathPipe, LookupDataProvider, MNG_AUTOCOMPLETE_VALUE_ACCESSOR, MNG_BROWSER_STORAGE_IT, MNG_COMMONS_INITIALIZER_IT, MNG_DROPDOWN_VALUE_ACCESSOR, MNG_MODULE_CONFIG_IT, MediusFilterMatchType, MediusFilterParam, MediusQueryMode, MediusQueryParam, MediusQueryParamBuilder, MediusQueryResult, MediusRestUtil, MngActionComponent, MngActionEditorComponent, MngActionExecutorService, MngActionRouteComponent, MngAutocompleteComponent, MngBooleanPipe, MngBreadcrumbComponent, MngCommonsModule, MngCommonsService, MngComponentDirective, MngConfigurationService, MngDropdownComponent, MngEnumPipe, MngErrorMapperService, MngFooterComponent, MngFormEditorComponent, MngFormEditorSubmitEvent, MngFormFieldEvent, MngFormFieldEventComponentSubtype, MngFormFieldEventDialogSubtype, MngFormFieldEventTypeEnum, MngFormlyFieldAutocompleteComponent, MngFormlyFieldDropdownComponent, MngFormlyFieldFieldsetComponent, MngFormlyFieldInputComponent, MngFormlyFieldLabelComponent, MngFormlyFieldLookupDialogComponent, MngFormlyFieldTableDialogFormComponent, MngFormlyFieldTableDialogMultiselectComponent, MngFormlyFieldTabsComponent, MngFormlyFieldWrapperComponent, MngFormlyTableWrapperComponent, MngI18nPropertyPipe, MngLinkFormatterPipe, MngMainLayoutComponent, MngMainLayoutComponentService, MngMenuComponent, MngMenuItemComponent, MngNavigationService, MngTableCellClickEvent, MngTableColumnFilterComponent, MngTableColumnValueComponent, MngTableComponent, MngTableLoadEvent, MngTableReloadEvent, MngTableviewComponent, MngTableviewRouteComponent, MngTemplateDirective, MngTopbarComponent, MngViewContainerComponentService, ModelDescriptor, ModelUtil, NotificationUtil, ObjectSerializer, RouteBuilder, RouteDataBuilder, RoutesBuilder, TableDataProvider, TableDescriptor, TableviewDataProvider, TableviewDescriptor, TypeName, TypeUtil, enumNameDecoratorPropertyName, enumsMapBase, formlyTypesConfig, formlyWrappersConfig, getEmailValidationMessage, getFormlyValidationMessages, getMaxLengthValidationMessage, getMinLengthValidationMessage, getRequiredValidationMessage, getTextPatternValidationMessage, mngConfigJsonAppInitializerProvider, mngConfigurationServiceProvider, mngFormlyConfigProvider, primeNgModules, typeMapBase, typeNameDecoratorPropertyName };
 //# sourceMappingURL=mediusinc-mng-commons.mjs.map