@mediusinc/mng-commons 0.14.1 → 0.15.0

package/fesm2020/mediusinc-mng-commons.mjs

@@ -226,6 +226,12 @@ MediusQueryParam.attributeTypeMap = [
 ];
 
 class MediusQueryResult {
+    static fromArray(pageData, allDataCount) {
+        const mqr = new MediusQueryResult();
+        mqr.allDataCount = allDataCount ?? pageData.length;
+        mqr.pageData = pageData;
+        return mqr;
+    }
     static getAttributeTypeMap() {
         return MediusQueryResult.attributeTypeMap;
     }
@@ -842,33 +848,6 @@ var ActionTypeEnum;
     ActionTypeEnum[ActionTypeEnum["Direct"] = 0] = "Direct";
     ActionTypeEnum[ActionTypeEnum["Editor"] = 1] = "Editor"; // editor providing middle step for activation
 })(ActionTypeEnum || (ActionTypeEnum = {}));
-var ActionLevelEnum;
-(function (ActionLevelEnum) {
-    ActionLevelEnum[ActionLevelEnum["Default"] = 0] = "Default";
-    ActionLevelEnum[ActionLevelEnum["Primary"] = 1] = "Primary";
-    ActionLevelEnum[ActionLevelEnum["Secondary"] = 2] = "Secondary";
-    ActionLevelEnum[ActionLevelEnum["Info"] = 3] = "Info";
-    ActionLevelEnum[ActionLevelEnum["Help"] = 4] = "Help";
-    ActionLevelEnum[ActionLevelEnum["Success"] = 5] = "Success";
-    ActionLevelEnum[ActionLevelEnum["Warning"] = 6] = "Warning";
-    ActionLevelEnum[ActionLevelEnum["Danger"] = 7] = "Danger";
-})(ActionLevelEnum || (ActionLevelEnum = {}));
-var ActionSizeEnum;
-(function (ActionSizeEnum) {
-    ActionSizeEnum[ActionSizeEnum["ExtraSmall"] = 0] = "ExtraSmall";
-    ActionSizeEnum[ActionSizeEnum["Small"] = 1] = "Small";
-    ActionSizeEnum[ActionSizeEnum["Normal"] = 2] = "Normal";
-    ActionSizeEnum[ActionSizeEnum["Large"] = 3] = "Large";
-    ActionSizeEnum[ActionSizeEnum["ExtraLarge"] = 4] = "ExtraLarge";
-})(ActionSizeEnum || (ActionSizeEnum = {}));
-var ActionEditorDialogSizeEnum;
-(function (ActionEditorDialogSizeEnum) {
-    ActionEditorDialogSizeEnum[ActionEditorDialogSizeEnum["ExtraSmall"] = 0] = "ExtraSmall";
-    ActionEditorDialogSizeEnum[ActionEditorDialogSizeEnum["Small"] = 1] = "Small";
-    ActionEditorDialogSizeEnum[ActionEditorDialogSizeEnum["Normal"] = 2] = "Normal";
-    ActionEditorDialogSizeEnum[ActionEditorDialogSizeEnum["Large"] = 3] = "Large";
-    ActionEditorDialogSizeEnum[ActionEditorDialogSizeEnum["ExtraLarge"] = 4] = "ExtraLarge";
-})(ActionEditorDialogSizeEnum || (ActionEditorDialogSizeEnum = {}));
 var ActionEditorSubmitTypeEnum;
 (function (ActionEditorSubmitTypeEnum) {
     ActionEditorSubmitTypeEnum[ActionEditorSubmitTypeEnum["Submit"] = 0] = "Submit";
@@ -1004,6 +983,27 @@ var TableDynamicColumnsModeEnum;
     TableDynamicColumnsModeEnum[TableDynamicColumnsModeEnum["INCLUDE_ONLY"] = 1] = "INCLUDE_ONLY";
 })(TableDynamicColumnsModeEnum || (TableDynamicColumnsModeEnum = {}));
 
+var StyleLevelEnum;
+(function (StyleLevelEnum) {
+    StyleLevelEnum[StyleLevelEnum["Default"] = 0] = "Default";
+    StyleLevelEnum[StyleLevelEnum["Primary"] = 1] = "Primary";
+    StyleLevelEnum[StyleLevelEnum["Secondary"] = 2] = "Secondary";
+    StyleLevelEnum[StyleLevelEnum["Info"] = 3] = "Info";
+    StyleLevelEnum[StyleLevelEnum["Help"] = 4] = "Help";
+    StyleLevelEnum[StyleLevelEnum["Success"] = 5] = "Success";
+    StyleLevelEnum[StyleLevelEnum["Warning"] = 6] = "Warning";
+    StyleLevelEnum[StyleLevelEnum["Danger"] = 7] = "Danger";
+})(StyleLevelEnum || (StyleLevelEnum = {}));
+
+var StyleSizeEnum;
+(function (StyleSizeEnum) {
+    StyleSizeEnum[StyleSizeEnum["ExtraSmall"] = 0] = "ExtraSmall";
+    StyleSizeEnum[StyleSizeEnum["Small"] = 1] = "Small";
+    StyleSizeEnum[StyleSizeEnum["Normal"] = 2] = "Normal";
+    StyleSizeEnum[StyleSizeEnum["Large"] = 3] = "Large";
+    StyleSizeEnum[StyleSizeEnum["ExtraLarge"] = 4] = "ExtraLarge";
+})(StyleSizeEnum || (StyleSizeEnum = {}));
+
 class StylesUtil {
     static calculateTableColumnActionWidth(table, actions) {
         const buttonsWidth = actions.reduce((acc, action) => acc + StylesUtil.getActionButtonRoundedWidth(action) + 2 * StylesUtil.ACTION_BUTTON_MARGIN_X, 0);
@@ -1021,15 +1021,15 @@ class StylesUtil {
         }
     }
     static getActionButtonRoundedWidth(action) {
-        switch (action.buttonDescriptor.styleClass.size) {
-            case ActionSizeEnum.ExtraSmall:
+        switch (action.button.styleClass.size) {
+            case StyleSizeEnum.ExtraSmall:
                 return StylesUtil.BUTTON_ROUNDED_WIDTH_XS;
-            case ActionSizeEnum.Small:
+            case StyleSizeEnum.Small:
                 return StylesUtil.BUTTON_ROUNDED_WIDTH_SM;
-            case ActionSizeEnum.Large:
-            case ActionSizeEnum.ExtraLarge:
+            case StyleSizeEnum.Large:
+            case StyleSizeEnum.ExtraLarge:
                 return StylesUtil.BUTTON_ROUNDED_WIDTH_LG;
-            case ActionSizeEnum.Normal:
+            case StyleSizeEnum.Normal:
             default:
                 return StylesUtil.BUTTON_ROUNDED_WIDTH;
         }
@@ -1045,8 +1045,8 @@ StylesUtil.TABLE_CELL_PADDING_X_SM = 4;
 StylesUtil.TABLE_CELL_PADDING_X_LG = 12;
 
 class ButtonStyleBuilder {
-    constructor(level = ActionLevelEnum.Default, customClass) {
-        this._size = ActionSizeEnum.Normal;
+    constructor(level = StyleLevelEnum.Default, customClass) {
+        this._size = StyleSizeEnum.Normal;
         this._textButton = false;
         this._outlineButton = false;
         this._raisedButton = false;
@@ -1054,7 +1054,7 @@ class ButtonStyleBuilder {
         this._actionLevel = level;
         this._customClass = customClass;
     }
-    getButtonClass(hasNoTitle = false) {
+    build(hasNoTitle = false) {
         const styles = [this.convertActionLevelToStyleClass(), this.convertSizeToStyleClass(), this._customClass];
         if (hasNoTitle && this._roundedStyle === ButtonStyleRoundedEnum.DEFAULT) {
             styles.push(`p-button-rounded mng-action-button-icon`);
@@ -1082,15 +1082,16 @@ class ButtonStyleBuilder {
      * @param raisedButton if true, raised button will be applied
      * @param customClass additional custom classes (will be added at generating)
      */
-    create(actionLevel, size, textButton, outlineButton, raisedButton, roundedButton, customClass) {
-        this._actionLevel = actionLevel ?? this._actionLevel;
-        this._size = size ?? this._size;
-        this._textButton = textButton ?? this._textButton;
-        this._outlineButton = outlineButton ?? this._outlineButton;
-        this._raisedButton = raisedButton ?? this._raisedButton;
-        this._roundedStyle = roundedButton ?? this._roundedStyle;
-        this._customClass = customClass;
-        return this;
+    static create(actionLevel, size, textButton, outlineButton, raisedButton, roundedButton, customClass) {
+        const descriptor = new ButtonStyleBuilder(actionLevel, customClass);
+        descriptor._actionLevel = actionLevel ?? descriptor._actionLevel;
+        descriptor._size = size ?? descriptor._size;
+        descriptor._textButton = textButton ?? descriptor._textButton;
+        descriptor._outlineButton = outlineButton ?? descriptor._outlineButton;
+        descriptor._raisedButton = raisedButton ?? descriptor._raisedButton;
+        descriptor._roundedStyle = roundedButton ?? descriptor._roundedStyle;
+        descriptor._customClass = customClass;
+        return descriptor;
     }
     /**
      * sets custom action level and returns this object
@@ -1146,35 +1147,36 @@ class ButtonStyleBuilder {
     }
     convertActionLevelToStyleClass() {
         switch (this._actionLevel) {
-            case ActionLevelEnum.Default:
-            case ActionLevelEnum.Primary:
+            case StyleLevelEnum.Default:
+            case StyleLevelEnum.Primary:
                 return 'p-button-primary';
-            case ActionLevelEnum.Secondary:
+            case StyleLevelEnum.Secondary:
                 return 'p-button-secondary';
-            case ActionLevelEnum.Info:
+            case StyleLevelEnum.Info:
                 return 'p-button-info';
-            case ActionLevelEnum.Help:
+            case StyleLevelEnum.Help:
                 return 'p-button-help';
-            case ActionLevelEnum.Success:
+            case StyleLevelEnum.Success:
                 return 'p-button-success';
-            case ActionLevelEnum.Warning:
+            case StyleLevelEnum.Warning:
                 return 'p-button-warning';
-            case ActionLevelEnum.Danger:
+            case StyleLevelEnum.Danger:
                 return 'p-button-danger';
         }
     }
     convertSizeToStyleClass() {
         switch (this._size) {
-            case ActionSizeEnum.ExtraSmall:
+            case StyleSizeEnum.ExtraSmall:
                 return 'p-button-sm mng-button-xs';
-            case ActionSizeEnum.Small:
+            case StyleSizeEnum.Small:
                 return 'p-button-sm mng-button-sm';
-            case ActionSizeEnum.Normal:
-                return '';
-            case ActionSizeEnum.Large:
+            case StyleSizeEnum.Large:
                 return 'p-button-lg mng-button-lg';
-            case ActionSizeEnum.ExtraLarge:
+            case StyleSizeEnum.ExtraLarge:
                 return 'p-button-lg mng-button-xl';
+            case StyleSizeEnum.Normal:
+            default:
+                return '';
         }
     }
     get actionLevel() {
@@ -1206,50 +1208,91 @@ var ButtonStyleRoundedEnum;
     ButtonStyleRoundedEnum[ButtonStyleRoundedEnum["SQUARE"] = 2] = "SQUARE";
 })(ButtonStyleRoundedEnum || (ButtonStyleRoundedEnum = {}));
 
-class ActionConfirmationDialogDescriptor {
+class ActionButtonDescriptor {
     constructor() {
-        this._closeOnEscape = true; // Defines if dialog closes when esc key is pressed.
-        this._closable = true; // Defines if dialog is closable.
-        this._acceptButtonStyle = new ButtonStyleBuilder(ActionLevelEnum.Default);
-        this._rejectButtonStyle = new ButtonStyleBuilder(ActionLevelEnum.Default).withTextButton();
-        this._icon = 'pi pi-exclamation-triangle';
-        this._acceptIcon = 'pi pi-check';
-        this._rejectIcon = 'pi pi-times';
+        this._iconPosition = 'left';
+        this._styleClass = new ButtonStyleBuilder();
+    }
+    withLabel(label) {
+        this._label = label;
+        return this;
     }
     withIcon(icon) {
         this._icon = icon;
         return this;
     }
-    withTitle(title) {
-        this._title = title;
+    withIconPosition(iconPosition) {
+        this._iconPosition = iconPosition;
         return this;
     }
-    withMessage(message) {
-        this._message = message;
+    withStyleClass(style) {
+        this._styleClass = style;
         return this;
     }
-    withAcceptLabel(acceptLabel) {
-        this._acceptLabel = acceptLabel;
+    withBadge(badge) {
+        this._badge = badge;
         return this;
     }
-    withAcceptIcon(acceptIcon) {
-        this._acceptIcon = acceptIcon;
+    withTooltip(tooltip) {
+        this._tooltip = tooltip;
         return this;
     }
-    withAcceptButtonStyle(buttonStyle) {
-        this._acceptButtonStyle = buttonStyle;
+    get label() {
+        return this._label;
+    }
+    get icon() {
+        return this._icon;
+    }
+    get iconPosition() {
+        return this._iconPosition;
+    }
+    get styleClass() {
+        return this._styleClass;
+    }
+    get badge() {
+        return this._badge;
+    }
+    get tooltip() {
+        return this._tooltip;
+    }
+    copy() {
+        const descriptor = new ActionButtonDescriptor();
+        descriptor._label = this._label;
+        descriptor._icon = this._icon;
+        descriptor._iconPosition = this._iconPosition;
+        descriptor._styleClass = this._styleClass;
+        descriptor._badge = this._badge;
+        descriptor._tooltip = this._tooltip;
+        return descriptor;
+    }
+}
+
+class ActionConfirmationDialogDescriptor {
+    constructor() {
+        this._closeOnEscape = true; // Defines if dialog closes when esc key is pressed.
+        this._closable = true; // Defines if dialog is closable.
+        this._acceptButton = new ActionButtonDescriptor().withIcon('pi pi-check').withStyleClass(new ButtonStyleBuilder(StyleLevelEnum.Default));
+        this._rejectButton = new ActionButtonDescriptor().withIcon('pi pi-times').withStyleClass(new ButtonStyleBuilder(StyleLevelEnum.Default).withTextButton());
+        this._icon = 'pi pi-exclamation-triangle';
+    }
+    withIcon(icon) {
+        this._icon = icon;
+        return this;
+    }
+    withTitle(title) {
+        this._title = title;
         return this;
     }
-    withRejectLabel(rejectLabel) {
-        this._rejectLabel = rejectLabel;
+    withMessage(message) {
+        this._message = message;
         return this;
     }
-    withRejectIcon(rejectIcon) {
-        this._rejectIcon = rejectIcon;
+    withAcceptButton(actionButtonDescriptor) {
+        this._acceptButton = actionButtonDescriptor;
         return this;
     }
-    withRejectButtonStyle(buttonStyle) {
-        this._rejectButtonStyle = buttonStyle;
+    withRejectButton(actionButtonDescriptor) {
+        this._rejectButton = actionButtonDescriptor;
         return this;
     }
     /**
@@ -1281,24 +1324,6 @@ class ActionConfirmationDialogDescriptor {
     get message() {
         return this._message;
     }
-    get acceptLabel() {
-        return this._acceptLabel;
-    }
-    get acceptIcon() {
-        return this._acceptIcon;
-    }
-    get acceptButtonStyle() {
-        return this._acceptButtonStyle;
-    }
-    get rejectLabel() {
-        return this._rejectLabel;
-    }
-    get rejectIcon() {
-        return this._rejectIcon;
-    }
-    get rejectButtonStyle() {
-        return this._rejectButtonStyle;
-    }
     get closeOnEscape() {
         return this._closeOnEscape;
     }
@@ -1308,6 +1333,12 @@ class ActionConfirmationDialogDescriptor {
     get runConfirmationConfigMapFn() {
         return this._runConfirmationConfigMapFn;
     }
+    get acceptButton() {
+        return this._acceptButton;
+    }
+    get rejectButton() {
+        return this._rejectButton;
+    }
 }
 
 class ActionDescriptor {
@@ -1315,12 +1346,12 @@ class ActionDescriptor {
         this._type = ActionTypeEnum.Direct;
         this._activationTrigger = ActionActivationTriggerEnum.OnClick;
         this._position = ActionPositionEnum.ToolbarRight;
-        this._level = ActionLevelEnum.Default;
+        this._level = StyleLevelEnum.Default;
         this._routeUrl = null;
         this._hasRunNotificationSuccess = true;
         this._hasRunNotificationError = true;
         //button
-        this._buttonDescriptor = new ButtonDescriptor();
+        this._button = new ActionButtonDescriptor();
         // multiple row selection
         this._hasItemsSelection = false;
         this._model = model;
@@ -1396,7 +1427,7 @@ class ActionDescriptor {
         return this._actionNameLong;
     }
     get className() {
-        return this.buttonDescriptor.styleClass.customClass;
+        return this.button.styleClass.customClass;
     }
     get runConfirmationDialogDescriptor() {
         return this._runConfirmationDialogDescriptor;
@@ -1437,8 +1468,8 @@ class ActionDescriptor {
     get hasItemsSelection() {
         return this._hasItemsSelection;
     }
-    get buttonDescriptor() {
-        return this._buttonDescriptor;
+    get button() {
+        return this._button;
     }
     withDataProvider(dataProvider) {
         this._dataProvider = dataProvider;
@@ -1477,8 +1508,8 @@ class ActionDescriptor {
      */
     withRunConfirmation() {
         this._runConfirmationDialogDescriptor = new ActionConfirmationDialogDescriptor();
-        this._runConfirmationDialogDescriptor.acceptButtonStyle.withActionLevel(this._level);
-        this._runConfirmationDialogDescriptor.rejectButtonStyle.withActionLevel(this._level);
+        this._runConfirmationDialogDescriptor.acceptButton.styleClass.withActionLevel(this._level);
+        this._runConfirmationDialogDescriptor.rejectButton?.styleClass.withActionLevel(this._level);
         return this._runConfirmationDialogDescriptor;
     }
     /**
@@ -1520,8 +1551,12 @@ class ActionDescriptor {
         this._permissionsRouteType = permissionsRouteType;
         return this;
     }
-    withButtonDescriptor(buttonDescriptor) {
-        this._buttonDescriptor = buttonDescriptor;
+    withButtonDescriptor(button) {
+        this._button = button;
+        return this;
+    }
+    withButton(label, icon = null, styleLevel = StyleLevelEnum.Default, styleText = false) {
+        this._button = new ActionButtonDescriptor().withLabel(label).withIcon(icon).withStyleClass(new ButtonStyleBuilder(styleLevel).withTextButton(styleText));
         return this;
     }
     withItemsSelection(hasSelection = true) {
@@ -1542,7 +1577,7 @@ class ActionEditorDescriptor extends ActionDescriptor {
         this._editorActions = [];
         this._editorTitle = undefined;
         this._hasFetchNotificationSuccess = false;
-        this._dialogSize = ActionEditorDialogSizeEnum.Normal;
+        this._dialogSize = StyleSizeEnum.Normal;
         this._type = ActionTypeEnum.Editor;
         this._editorDescriptor = editorDescriptor;
         this._editorActions.push(ActionEditorSubmitDescriptor.forPrimary(this), ActionEditorSubmitDescriptor.forSecondary(this));
@@ -1607,7 +1642,7 @@ class ActionEditorDescriptor extends ActionDescriptor {
         this._dataProvider = new EditorDataProvider(this._model.type, serviceType);
         return this;
     }
-    withDialogSize(size = ActionEditorDialogSizeEnum.Normal) {
+    withDialogSize(size = StyleSizeEnum.Normal) {
         this._dialogSize = size;
         return this;
     }
@@ -1651,7 +1686,7 @@ class ActionEditorSubmitDescriptor extends ActionDescriptor {
         this._editorAction = editorAction;
         this._submitType = submitType;
         this._position = ActionPositionEnum.FooterRight;
-        this.buttonDescriptor.styleClass.withActionLevel(editorAction.level).withTextButton();
+        this.button.styleClass.withActionLevel(editorAction.level).withTextButton();
     }
     /**
      * creates primary action with primary button style
@@ -1659,7 +1694,7 @@ class ActionEditorSubmitDescriptor extends ActionDescriptor {
      * @param submitType
      */
     static forPrimary(editorAction, submitType = ActionEditorSubmitTypeEnum.Submit) {
-        return new ActionEditorSubmitDescriptor(editorAction, submitType).withButtonDescriptor(new ButtonDescriptor().withStyleClass(new ButtonStyleBuilder()));
+        return new ActionEditorSubmitDescriptor(editorAction, submitType).withButtonDescriptor(new ActionButtonDescriptor().withStyleClass(new ButtonStyleBuilder()));
     }
     /**
      * creates secondary button with text button style
@@ -1667,7 +1702,7 @@ class ActionEditorSubmitDescriptor extends ActionDescriptor {
      * @param submitType
      */
     static forSecondary(editorAction, submitType = ActionEditorSubmitTypeEnum.Cancel) {
-        return new ActionEditorSubmitDescriptor(editorAction, submitType).withButtonDescriptor(new ButtonDescriptor().withStyleClass(new ButtonStyleBuilder().withTextButton()));
+        return new ActionEditorSubmitDescriptor(editorAction, submitType).withButtonDescriptor(new ActionButtonDescriptor().withStyleClass(new ButtonStyleBuilder().withTextButton()));
     }
     get submitType() {
         return this._submitType;
@@ -1701,8 +1736,8 @@ class ActionEditorAddDescriptor extends ActionEditorDescriptor {
         this.withPosition(ActionPositionEnum.ToolbarLeft);
         this.withRouteTrigger('add');
         this.withSubmitFunction(ActionDataProviderUtil.runCreateOrFail);
-        this.buttonDescriptor.styleClass.withActionLevel(ActionLevelEnum.Success);
-        this.buttonDescriptor.withIcon('pi pi-plus');
+        this.button.styleClass.withActionLevel(StyleLevelEnum.Success);
+        this.button.withIcon('pi pi-plus');
         this.withPermissionsRouteType(Permissions.ActionTypes.ADD);
     }
     withServiceType(serviceType) {
@@ -1729,7 +1764,7 @@ class ActionEditorEditDescriptor extends ActionEditorDescriptor {
         this.withFetchFunction(ActionDataProviderUtil.runFetchOrFail);
         this.withSubmitFunction(ActionDataProviderUtil.runUpdateOrFail);
         this.withPermissionsRouteType(Permissions.ActionTypes.EDIT);
-        this.buttonDescriptor.withLabel(null).withIcon('pi pi-pencil');
+        this.button.withLabel(null).withIcon('pi pi-pencil');
     }
     withServiceType(serviceType) {
         return this.withServiceSubmitFunction(serviceType);
@@ -1752,10 +1787,10 @@ class ActionDeleteDescriptor extends ActionDescriptor {
         super(model, ActionDeleteDescriptor.ACTION_NAME);
         this.withPosition(ActionPositionEnum.RowInline);
         this.withRunFunction(ActionDataProviderUtil.runDeleteOrFail);
-        this.buttonDescriptor.styleClass.withActionLevel(ActionLevelEnum.Danger);
+        this.button.styleClass.withActionLevel(StyleLevelEnum.Danger);
         this.withRunConfirmation();
         this.withPermissionsRouteType(Permissions.ActionTypes.DELETE);
-        this.buttonDescriptor.withLabel(null).withIcon('pi pi-trash');
+        this.button.withLabel(null).withIcon('pi pi-trash');
     }
     withServiceType(serviceType) {
         return this.withServiceDeleteFunction(serviceType);
@@ -2223,8 +2258,12 @@ class FilterLookupDescriptor extends FilterDescriptor {
         this._defaultValue = filterValue;
         this._defaultValueTo = filterValueTo;
         this._defaultFilterMatchMode = filterMatchMode;
-        if (Array.isArray(filterValue) && !this.multiselect) {
-            throw new Error('Array default filter can only be used with a multiselect filter.');
+        if (filterMatchMode && this._matchModes && this._matchModes.indexOf(filterMatchMode) < 0) {
+            this._defaultFilterMatchMode = undefined;
+            console.warn(`Default filter match mode '${filterMatchMode}' could not be assigned for property ${this._property}.`);
+        }
+        if ((Array.isArray(filterValue) && !this.multiselect) || (this.multiselect && !Array.isArray(filterValue))) {
+            throw new Error(`Default value not in correct format for property ${this._property}.`);
         }
         return this;
     }
@@ -4588,116 +4627,6 @@ class TableviewDynamicDescriptor extends TableviewDescriptor {
     }
 }
 
-class ButtonDescriptor {
-    constructor() {
-        this._disabled = false;
-        this._iconPosition = 'left';
-        this._styleClass = new ButtonStyleBuilder();
-        this._loading = false;
-        this._loadingIcon = 'pi pi-spinner pi-spin';
-    }
-    withLabel(label) {
-        this._label = label;
-        return this;
-    }
-    withDisabled(disabled = true) {
-        this._disabled = disabled;
-        return this;
-    }
-    withIcon(icon) {
-        this._icon = icon;
-        return this;
-    }
-    withIconPosition(iconPosition) {
-        this._iconPosition = iconPosition;
-        return this;
-    }
-    withStyleClass(style) {
-        this._styleClass = style;
-        return this;
-    }
-    withOnClick(onClick) {
-        this._onClick = onClick;
-        return this;
-    }
-    withOnFocus(onFocus) {
-        this._onFocus = onFocus;
-        return this;
-    }
-    withOnBlur(onBlur) {
-        this._onBlur = onBlur;
-        return this;
-    }
-    withLoading(loading = true) {
-        this._loading = loading;
-        return this;
-    }
-    withLoadingIcon(loadingIcon) {
-        this._loadingIcon = loadingIcon;
-        return this;
-    }
-    withBadge(badge) {
-        this._badge = badge;
-        return this;
-    }
-    withTooltip(tooltip) {
-        this._tooltip = tooltip;
-        return this;
-    }
-    get label() {
-        return this._label;
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    get icon() {
-        return this._icon;
-    }
-    get iconPosition() {
-        return this._iconPosition;
-    }
-    get styleClass() {
-        return this._styleClass;
-    }
-    get onClick() {
-        return this._onClick;
-    }
-    get onFocus() {
-        return this._onFocus;
-    }
-    get onBlur() {
-        return this._onBlur;
-    }
-    get loading() {
-        return this._loading;
-    }
-    get loadingIcon() {
-        return this._loadingIcon;
-    }
-    get badge() {
-        return this._badge;
-    }
-    get tooltip() {
-        return this._tooltip;
-    }
-    copy() {
-        const descriptor = new ButtonDescriptor();
-        descriptor._label = this._label;
-        descriptor._disabled = this._disabled;
-        descriptor._icon = this._icon;
-        descriptor._iconPosition = this._iconPosition;
-        descriptor._styleClass = this._styleClass;
-        descriptor._onClick = this._onClick;
-        descriptor._onFocus = this._onFocus;
-        descriptor._onBlur = this._onBlur;
-        descriptor._loading = this._loading;
-        descriptor._loadingIcon = this._loadingIcon;
-        descriptor._badge = this._badge;
-        descriptor._tooltip = this._tooltip;
-        return descriptor;
-    }
-}
-
 class EditorFormlyUtil {
     static createFormlyConfigFromDescriptor(descriptor) {
         const fields = [];
@@ -6923,11 +6852,11 @@ class MngActionExecutorService {
                 key: srcConfirmComponent.getConfirmationServiceInstanceKey(action),
                 icon: confirmationDescriptor.icon,
                 acceptVisible: true,
-                acceptIcon: confirmationDescriptor.acceptIcon ?? undefined,
-                acceptButtonStyleClass: confirmationDescriptor.acceptButtonStyle.getButtonClass(),
+                acceptIcon: confirmationDescriptor.acceptButton.icon ?? undefined,
+                acceptButtonStyleClass: confirmationDescriptor.acceptButton.styleClass.build(),
                 rejectVisible: true,
-                rejectIcon: confirmationDescriptor.rejectIcon ?? undefined,
-                rejectButtonStyleClass: confirmationDescriptor.rejectButtonStyle.getButtonClass(),
+                rejectIcon: confirmationDescriptor.rejectButton?.icon ?? undefined,
+                rejectButtonStyleClass: confirmationDescriptor.rejectButton?.styleClass.build(),
                 closeOnEscape: confirmationDescriptor.closeOnEscape
             };
             if (confirmationDescriptor.title !== null) {
@@ -6938,19 +6867,21 @@ class MngActionExecutorService {
                     I18nUtils.Action.get(this.translate, action, 'confirm.message', confirmationDescriptor.message, StringUtil.escapeHtmlAny(item), 'general.confirmation') ??
                         undefined;
             }
-            if (confirmationDescriptor.acceptLabel !== null) {
-                confirmParams.acceptLabel = I18nUtils.Action.get(this.translate, action, 'confirm.accept', confirmationDescriptor.acceptLabel, item, 'general.yes') ?? undefined;
+            if (confirmationDescriptor.acceptButton.label !== null) {
+                confirmParams.acceptLabel =
+                    I18nUtils.Action.get(this.translate, action, 'confirm.accept', confirmationDescriptor.acceptButton.label, item, 'general.yes') ?? undefined;
             }
-            if (confirmationDescriptor.acceptIcon !== null) {
-                confirmParams.acceptIcon = confirmationDescriptor.acceptIcon;
+            if (confirmationDescriptor.acceptButton.icon !== null) {
+                confirmParams.acceptIcon = confirmationDescriptor.acceptButton.icon;
             }
-            if (confirmationDescriptor.rejectIcon !== null) {
-                confirmParams.rejectIcon = confirmationDescriptor.rejectIcon;
+            if (confirmationDescriptor.rejectButton?.icon !== null) {
+                confirmParams.rejectIcon = confirmationDescriptor.rejectButton?.icon;
             }
-            if (confirmationDescriptor.rejectLabel !== null) {
-                confirmParams.rejectLabel = I18nUtils.Action.get(this.translate, action, 'confirm.reject', confirmationDescriptor.rejectLabel, item, 'general.no') ?? undefined;
+            if (confirmationDescriptor.rejectButton?.label !== null) {
+                confirmParams.rejectLabel =
+                    I18nUtils.Action.get(this.translate, action, 'confirm.reject', confirmationDescriptor.rejectButton?.label, item, 'general.no') ?? undefined;
             }
-            if (confirmationDescriptor.rejectLabel === null && confirmationDescriptor.rejectIcon === null) {
+            if (confirmationDescriptor.rejectButton == null || (confirmationDescriptor.rejectButton.label === null && confirmationDescriptor.rejectButton.icon === null)) {
                 confirmParams.rejectVisible = false;
             }
             confirmParams.accept = () => {
@@ -6998,19 +6929,19 @@ class MngActionExecutorService {
                 dialogClassName = action.dialogClassName ?? 'mng-action-editor-dialog';
                 let dialogSizeClassName = '';
                 switch (action.dialogSize) {
-                    case ActionEditorDialogSizeEnum.ExtraSmall:
+                    case StyleSizeEnum.ExtraSmall:
                         dialogSizeClassName = 'mng-action-editor-dialog-xs';
                         break;
-                    case ActionEditorDialogSizeEnum.Small:
+                    case StyleSizeEnum.Small:
                         dialogSizeClassName = 'mng-action-editor-dialog-sm';
                         break;
-                    case ActionEditorDialogSizeEnum.Large:
+                    case StyleSizeEnum.Large:
                         dialogSizeClassName = 'mng-action-editor-dialog-lg';
                         break;
-                    case ActionEditorDialogSizeEnum.ExtraLarge:
+                    case StyleSizeEnum.ExtraLarge:
                         dialogSizeClassName = 'mng-action-editor-dialog-xl';
                         break;
-                    case ActionEditorDialogSizeEnum.Normal:
+                    case StyleSizeEnum.Normal:
                     default:
                         break;
                 }
@@ -7645,7 +7576,7 @@ class MngActionComponent {
     }
     ngOnInit() {
         this.viewContainer = this.viewContainerInit ?? this.viewContainerService ?? undefined;
-        this.hasNoTitle = this.action.buttonDescriptor.label === null;
+        this.hasNoTitle = this.action.button.label === null;
         this.isEnabledSubject.next(true);
         this.isVisibleSubject.next(true);
         this.isPermittedSubject.next(true);
@@ -7668,7 +7599,7 @@ class MngActionComponent {
             this.isHostHidden = !isVisible || !isPermitted;
         });
         this.subscriptions.push(hostVisibilitySubscription);
-        this.buttonClass = this.action.buttonDescriptor.styleClass.getButtonClass(this.hasNoTitle);
+        this.buttonClass = this.action.button.styleClass.build(this.action.button.label == null || this.action.button.label.length == 0);
     }
     ngOnChanges(changes) {
         if (!(changes['item']?.firstChange ?? true) ||
@@ -7755,21 +7686,21 @@ class MngActionComponent {
         }
         if (!this.hasNoTitle) {
             this.labelSubscription?.unsubscribe();
-            this.labelSubscription = I18nUtils.Action.getAsync(this.translate, this.action, 'title', this.action.buttonDescriptor.label ?? undefined, this.item).subscribe({
+            this.labelSubscription = I18nUtils.Action.getAsync(this.translate, this.action, 'title', this.action.button.label ?? undefined, this.item).subscribe({
                 next: i18n => this.labelSubject.next(i18n)
             });
         }
         this.tooltipSubscription?.unsubscribe();
-        this.tooltipSubscription = I18nUtils.Action.getAsync(this.translate, this.action, 'tooltip', this.action.buttonDescriptor.tooltip, this.item).subscribe({
+        this.tooltipSubscription = I18nUtils.Action.getAsync(this.translate, this.action, 'tooltip', this.action.button.tooltip, this.item).subscribe({
             next: i18n => this.tooltipSubject.next(i18n)
         });
     }
 }
 MngActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngActionComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1$2.TranslateService }, { token: MngAuthorizationService }, { token: MngActionExecutorService }, { token: i2.ConfirmationService }, { token: MngViewContainerComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MngActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngActionComponent, selector: "mng-action", inputs: { action: "action", item: "item", itemId: "itemId", actionData: "actionData", queryParam: "queryParam", dataProvider: "dataProvider", inputDisabled: ["disabled", "inputDisabled"], inputLoading: ["loading", "inputLoading"], viewContainerInit: ["viewContainer", "viewContainerInit"], selectedItems: "selectedItems" }, outputs: { finishEventEmitter: "finish" }, host: { properties: { "class": "this.hostClass", "class.m-0": "this.isHostHidden" } }, providers: [ConfirmationService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"($isVisible | async) && ($isPermitted | async)\">\n    <a\n        *ngIf=\"actionLink && actionLink.url !== ''; else routerLink\"\n        pButton\n        pRipple\n        [icon]=\"$any(action.buttonDescriptor.icon)\"\n        [href]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.url | parametrize: itemId:item:actionData)\"\n        [target]=\"actionLink.target\"\n        [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n        [class]=\"buttonClass\"\n        >{{ ($label | async) ?? '' }}</a\n    >\n    <ng-template #routerLink>\n        <a\n            *ngIf=\"actionLink; else button\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.buttonDescriptor.icon)\"\n            [target]=\"actionLink.target\"\n            [replaceUrl]=\"actionLink.replaceUrl\"\n            [routerLink]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.pathSegments | parametrize: itemId:item:actionData)\"\n            [queryParams]=\"actionLink.queryParams | parametrize: itemId:item:actionData\"\n            [queryParamsHandling]=\"actionLink.queryParamsHandling\"\n            [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            [class]=\"buttonClass\"\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.buttonDescriptor.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]=\"buttonClass\"></button>\n    </ng-template>\n    <p-confirmDialog\n        *ngIf=\"action.runConfirmationDialogDescriptor\"\n        [key]=\"action.actionName + '_' + cmpId\"\n        [baseZIndex]=\"50\"\n        appendTo=\"body\"\n        [closable]=\"action.runConfirmationDialogDescriptor.closable\"></p-confirmDialog>\n</ng-container>\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i4$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i9.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"] }, { kind: "directive", type: i6.Ripple, selector: "[pRipple]" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: MngParametrizePipe, name: "parametrize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngActionComponent, selector: "mng-action", inputs: { action: "action", item: "item", itemId: "itemId", actionData: "actionData", queryParam: "queryParam", dataProvider: "dataProvider", inputDisabled: ["disabled", "inputDisabled"], inputLoading: ["loading", "inputLoading"], viewContainerInit: ["viewContainer", "viewContainerInit"], selectedItems: "selectedItems" }, outputs: { finishEventEmitter: "finish" }, host: { properties: { "class": "this.hostClass", "class.m-0": "this.isHostHidden" } }, providers: [ConfirmationService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"($isVisible | async) && ($isPermitted | async)\">\n    <a\n        *ngIf=\"actionLink && actionLink.url !== ''; else routerLink\"\n        pButton\n        pRipple\n        [icon]=\"$any(action.button.icon)\"\n        [href]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.url | parametrize: itemId:item:actionData)\"\n        [target]=\"actionLink.target\"\n        [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n        [class]=\"buttonClass\"\n        >{{ ($label | async) ?? '' }}</a\n    >\n    <ng-template #routerLink>\n        <a\n            *ngIf=\"actionLink; else button\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.button.icon)\"\n            [target]=\"actionLink.target\"\n            [replaceUrl]=\"actionLink.replaceUrl\"\n            [routerLink]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.pathSegments | parametrize: itemId:item:actionData)\"\n            [queryParams]=\"actionLink.queryParams | parametrize: itemId:item:actionData\"\n            [queryParamsHandling]=\"actionLink.queryParamsHandling\"\n            [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            [class]=\"buttonClass\"\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.button.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]=\"buttonClass\"></button>\n    </ng-template>\n    <p-confirmDialog\n        *ngIf=\"action.runConfirmationDialogDescriptor\"\n        [key]=\"action.actionName + '_' + cmpId\"\n        [baseZIndex]=\"50\"\n        appendTo=\"body\"\n        [closable]=\"action.runConfirmationDialogDescriptor.closable\"></p-confirmDialog>\n</ng-container>\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i4$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i9.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"] }, { kind: "directive", type: i6.Ripple, selector: "[pRipple]" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: MngParametrizePipe, name: "parametrize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-action', changeDetection: ChangeDetectionStrategy.OnPush, providers: [ConfirmationService], template: "<ng-container *ngIf=\"($isVisible | async) && ($isPermitted | async)\">\n    <a\n        *ngIf=\"actionLink && actionLink.url !== ''; else routerLink\"\n        pButton\n        pRipple\n        [icon]=\"$any(action.buttonDescriptor.icon)\"\n        [href]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.url | parametrize: itemId:item:actionData)\"\n        [target]=\"actionLink.target\"\n        [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n        [class]=\"buttonClass\"\n        >{{ ($label | async) ?? '' }}</a\n    >\n    <ng-template #routerLink>\n        <a\n            *ngIf=\"actionLink; else button\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.buttonDescriptor.icon)\"\n            [target]=\"actionLink.target\"\n            [replaceUrl]=\"actionLink.replaceUrl\"\n            [routerLink]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.pathSegments | parametrize: itemId:item:actionData)\"\n            [queryParams]=\"actionLink.queryParams | parametrize: itemId:item:actionData\"\n            [queryParamsHandling]=\"actionLink.queryParamsHandling\"\n            [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            [class]=\"buttonClass\"\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.buttonDescriptor.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]=\"buttonClass\"></button>\n    </ng-template>\n    <p-confirmDialog\n        *ngIf=\"action.runConfirmationDialogDescriptor\"\n        [key]=\"action.actionName + '_' + cmpId\"\n        [baseZIndex]=\"50\"\n        appendTo=\"body\"\n        [closable]=\"action.runConfirmationDialogDescriptor.closable\"></p-confirmDialog>\n</ng-container>\n", styles: [":host{display:inline-block}\n"] }]
+            args: [{ selector: 'mng-action', changeDetection: ChangeDetectionStrategy.OnPush, providers: [ConfirmationService], template: "<ng-container *ngIf=\"($isVisible | async) && ($isPermitted | async)\">\n    <a\n        *ngIf=\"actionLink && actionLink.url !== ''; else routerLink\"\n        pButton\n        pRipple\n        [icon]=\"$any(action.button.icon)\"\n        [href]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.url | parametrize: itemId:item:actionData)\"\n        [target]=\"actionLink.target\"\n        [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n        [class]=\"buttonClass\"\n        >{{ ($label | async) ?? '' }}</a\n    >\n    <ng-template #routerLink>\n        <a\n            *ngIf=\"actionLink; else button\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.button.icon)\"\n            [target]=\"actionLink.target\"\n            [replaceUrl]=\"actionLink.replaceUrl\"\n            [routerLink]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.pathSegments | parametrize: itemId:item:actionData)\"\n            [queryParams]=\"actionLink.queryParams | parametrize: itemId:item:actionData\"\n            [queryParamsHandling]=\"actionLink.queryParamsHandling\"\n            [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            [class]=\"buttonClass\"\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.button.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]=\"buttonClass\"></button>\n    </ng-template>\n    <p-confirmDialog\n        *ngIf=\"action.runConfirmationDialogDescriptor\"\n        [key]=\"action.actionName + '_' + cmpId\"\n        [baseZIndex]=\"50\"\n        appendTo=\"body\"\n        [closable]=\"action.runConfirmationDialogDescriptor.closable\"></p-confirmDialog>\n</ng-container>\n", styles: [":host{display:inline-block}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i1$2.TranslateService }, { type: MngAuthorizationService }, { type: MngActionExecutorService }, { type: i2.ConfirmationService }, { type: MngViewContainerComponentService, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { hostClass: [{
@@ -8727,9 +8658,12 @@ class MngDateRangeComponent {
             this.fromCtrl.setValue(startDate);
             this.toCtrl.setValue(endDate);
         }
-        else {
+        else if (startDate || endDate) {
             this.dateRangeCtrl.setValue([startDate, endDate]);
         }
+        else {
+            this.dateRangeCtrl.setValue(null);
+        }
     }
     onValueChange() {
         if (this.showTime) {
@@ -8816,11 +8750,11 @@ class MngActionEditorComponent {
         this.setTitle();
         for (const action of this.action.editorActions) {
             if (action instanceof ActionEditorSubmitDescriptor) {
-                if (typeof action.buttonDescriptor.icon === 'undefined') {
-                    action.buttonDescriptor.withIcon(action.submitType === ActionEditorSubmitTypeEnum.Submit ? 'pi pi-check' : 'pi pi-times');
+                if (typeof action.button.icon === 'undefined') {
+                    action.button.withIcon(action.submitType === ActionEditorSubmitTypeEnum.Submit ? 'pi pi-check' : 'pi pi-times');
                 }
-                if (typeof action.buttonDescriptor.label === 'undefined') {
-                    action.buttonDescriptor.withLabel(action.submitType === ActionEditorSubmitTypeEnum.Submit ? 'general.save' : this.isDialog ? 'general.close' : 'general.cancel');
+                if (typeof action.button.label === 'undefined') {
+                    action.button.withLabel(action.submitType === ActionEditorSubmitTypeEnum.Submit ? 'general.save' : this.isDialog ? 'general.close' : 'general.cancel');
                 }
                 // assign run operations
                 action.withRunNotificationSuccess(undefined, undefined, false);
@@ -8987,47 +8921,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                 args: [MngFormEditorComponent]
             }] } });
 
-class MngButtonComponent {
-    constructor() {
-        this.clickEmitter = new EventEmitter();
-        this.focusEmitter = new EventEmitter();
-        this.blurEmitter = new EventEmitter();
-        this.buttonClass = 'p-button';
-    }
-    ngOnInit() {
-        this.buttonClass = `${this.descriptor.styleClass.getButtonClass(this.descriptor.label == null)}`;
-    }
-    onClick(event) {
-        this.clickEmitter.next(event);
-        this.descriptor.onClick?.(event);
-    }
-    onFocus(event) {
-        this.focusEmitter.next(event);
-        this.descriptor.onFocus?.(event);
-    }
-    onBlur(event) {
-        this.blurEmitter.next(event);
-        this.descriptor.onBlur?.(event);
-    }
-}
-MngButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MngButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngButtonComponent, selector: "mng-button", inputs: { descriptor: "descriptor" }, outputs: { clickEmitter: "buttonClick", focusEmitter: "buttonFocus", blurEmitter: "buttonBlur" }, ngImport: i0, template: "<p-button\n    #button\n    type=\"button\"\n    [label]=\"$any(descriptor.label) | translate\"\n    [icon]=\"$any(descriptor.icon)\"\n    [iconPos]=\"$any(descriptor.iconPosition)\"\n    [loading]=\"$any(descriptor.loading)\"\n    [loadingIcon]=\"$any(descriptor.loadingIcon)\"\n    [disabled]=\"$any(descriptor.disabled)\"\n    [styleClass]=\"buttonClass\"\n    [pTooltip]=\"$any(descriptor.tooltip) | translate\"\n    [badge]=\"$any(descriptor.badge)\"\n    (onClick)=\"onClick($event)\"\n    (onBlur)=\"onBlur($event)\"\n    (onFocus)=\"onFocus($event)\"></p-button>\n", dependencies: [{ kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i4$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mng-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-button\n    #button\n    type=\"button\"\n    [label]=\"$any(descriptor.label) | translate\"\n    [icon]=\"$any(descriptor.icon)\"\n    [iconPos]=\"$any(descriptor.iconPosition)\"\n    [loading]=\"$any(descriptor.loading)\"\n    [loadingIcon]=\"$any(descriptor.loadingIcon)\"\n    [disabled]=\"$any(descriptor.disabled)\"\n    [styleClass]=\"buttonClass\"\n    [pTooltip]=\"$any(descriptor.tooltip) | translate\"\n    [badge]=\"$any(descriptor.badge)\"\n    (onClick)=\"onClick($event)\"\n    (onBlur)=\"onBlur($event)\"\n    (onFocus)=\"onFocus($event)\"></p-button>\n" }]
-        }], propDecorators: { descriptor: [{
-                type: Input
-            }], clickEmitter: [{
-                type: Output,
-                args: ['buttonClick']
-            }], focusEmitter: [{
-                type: Output,
-                args: ['buttonFocus']
-            }], blurEmitter: [{
-                type: Output,
-                args: ['buttonBlur']
-            }] } });
-
 class MngFormlyFieldAutocompleteComponent extends FieldType {
     constructor() {
         super(...arguments);
@@ -9564,6 +9457,7 @@ class MngTableComponent {
         else {
             this.initializeDataLoadingTriggers();
         }
+        this.queryResultSubscription = this.queryResult$.subscribe(e => (this.queryResult = e));
     }
     ngAfterContentInit() {
         this.templates.forEach(template => {
@@ -9577,6 +9471,9 @@ class MngTableComponent {
                         this.showInlineActionsColumn = true;
                     }
                     break;
+                case 'footer':
+                    this.footerTemplate = template.template;
+                    break;
             }
         });
     }
@@ -9587,6 +9484,7 @@ class MngTableComponent {
     }
     ngOnDestroy() {
         this.dataProviderSubscription?.unsubscribe();
+        this.queryResultSubscription?.unsubscribe();
         this.subscriptions.forEach(s => s.unsubscribe());
     }
     reload(emitEvent = false, resetParams = false) {
@@ -9757,8 +9655,17 @@ class MngTableComponent {
                         break;
                 }
             }
+            let value = null;
+            if (applyDefaultFilters) {
+                if (f.defaultValueTo && f.defaultValue) {
+                    value = [f.defaultValue, f.defaultValueTo];
+                }
+                else if (f.defaultValue) {
+                    value = f.defaultValue;
+                }
+            }
             primeFilterMeta[f.property] = {
-                value: applyDefaultFilters && f.defaultValue ? f.defaultValue : null,
+                value: value,
                 matchMode: matchMode
             };
         });
@@ -9840,10 +9747,10 @@ class MngTableComponent {
     }
 }
 MngTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngTableComponent, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: i1$2.TranslateService }, { token: MngActionExecutorService }, { token: MngViewContainerComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MngTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngTableComponent, selector: "mng-table", inputs: { initialDescriptor: ["descriptor", "initialDescriptor"], items: "items", queryResult: "queryResult", loading: "loading", dataProvider: "dataProvider", useQueryParams: "useQueryParams", selectionMode: "selectionMode", selectionEnabled: "selectionEnabled", actions: "actions", isColumnClickable: "isColumnClickable", viewContainerInit: ["viewContainer", "viewContainerInit"], captionComponent: "captionComponent", columnActionComponent: "columnActionComponent", columnActionMinWidth: "columnActionMinWidth" }, outputs: { loadEventEmitter: "tableLoad", cellClickEventEmitter: "cellClick", selectionChangeEventEmitter: "selectionChange", captionCmpInstEventEmitter: "captionComponentInstance", columnActionCmpInstEventEmitter: "columnActionComponentInstance" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "primeTable", first: true, predicate: Table, descendants: true }, { propertyName: "components", predicate: MngComponentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [style.height]=\"scrollHeight === 'flex' ? 'calc(100vh - ' + tableFullHeightOffset + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    <p-table\n        *ngIf=\"!useQueryParams || (useQueryParamsInitialized$ | async)\"\n        [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n        [dataKey]=\"$any(descriptor?.dataKeyProperty ?? null)\"\n        [lazy]=\"useDataProvider\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"useDataProvider && !infiniteScroll\"\n        [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n        [first]=\"$any(infiniteScroll ? 0 : offset)\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"$any(multiSortMeta)\"\n        [filters]=\"filterMetadata\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [scrollable]=\"infiniteScroll\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualRowHeight]=\"$any(rowHeight)\"\n        [scrollHeight]=\"$any(scrollHeight)\"\n        [selectionMode]=\"$any(selectionEnabled ? selectionMode : null)\"\n        [rowHover]=\"descriptor?.hasHover ?? true\"\n        [styleClass]=\"className\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\"\n        sortMode=\"multiple\"\n        responsiveLayout=\"scroll\"\n        [resizableColumns]=\"true\"\n        [autoLayout]=\"true\">\n        <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor?.title\" pTemplate=\"caption\">\n            <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #componentOrDefaultCaption>\n                <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n                <ng-template #defaultCaption>\n                    <h5 class=\"p-0 m-0\">{{ descriptor?.title }}</h5>\n                </ng-template>\n            </ng-template>\n        </ng-template>\n\n        <ng-template pTemplate=\"header\">\n            <tr *ngIf=\"!descriptor?.hideHeader\" class=\"mng-table-header\" [class]=\"descriptor?.headerClassName\">\n                <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                </th>\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\"></th>\n                <ng-container *ngFor=\"let col of descriptor?.columns\">\n                    <th *ngIf=\"col.isSortEnabled\" [pSortableColumn]=\"col.property\" [style.width.%]=\"col.width\" [style.min-width.px]=\"col.minWidth\" [class]=\"col.headerClassName\">\n                        <div class=\"flex justify-content-between align-items-center\">\n                            {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n                            <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor!.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </div>\n                    </th>\n                    <th *ngIf=\"!col.isSortEnabled\">\n                        {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n                        <ng-container>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor!.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </ng-container>\n                    </th>\n                </ng-container>\n                <th *ngIf=\"showInlineActionsColumn\"></th>\n            </tr>\n            <tr *ngIf=\"descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters\" class=\"mng-column-filter-row\">\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\"></th>\n                <th\n                    *ngFor=\"let col of descriptor?.columns\"\n                    [class]=\"(col.filterDescriptor ? 'mng-column-filter-' + col.filterDescriptor.filterType + ' ' : ' ') + col.filterDescriptor?.columnClassName\"\n                    [style.width.%]=\"col.filterDescriptor?.columnWidth ?? col.width\"\n                    [style.min-width.px]=\"col.filterDescriptor?.columnMinWidth ?? col.minWidth\">\n                    <div class=\"flex\" *ngIf=\"col.filterDescriptor\">\n                        <mng-table-column-filter [display]=\"descriptor!.filterDisplay\" [descriptor]=\"col.filterDescriptor\"></mng-table-column-filter>\n                    </div>\n                </th>\n                <th *ngIf=\"showInlineActionsColumn\"></th>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n            <tr [style.height.px]=\"rowHeight\" [class]=\"descriptor?.rowClassName | mngClassMapPipe: descriptor?.rowClassNameMapFn:item\">\n                <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"width: 3rem\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 3rem\">\n                    <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                </td>\n                <td\n                    *ngFor=\"let col of descriptor?.columns\"\n                    (click)=\"onCellClick($event, col, item, idx)\"\n                    [class]=\"col.className\"\n                    [class.clickable]=\"isColumnClickable\"\n                    [style.width.%]=\"col.width\"\n                    [style.min-width.px]=\"col.minWidth\">\n                    <mng-table-column-value [descriptor]=\"col\" [item]=\"item\"></mng-table-column-value>\n                </td>\n                <td *ngIf=\"showInlineActionsColumn\" class=\"column-action text-right\" [style.min-width.px]=\"columnActionMinWidth\">\n                    <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponentOrDefault\">\n                        <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                    </ng-container>\n                    <ng-template #showColumnActionComponentOrDefault>\n                        <span\n                            *ngIf=\"columnActionComponent; else defaultColumnActions\"\n                            [mngComponent]=\"columnActionComponent!\"\n                            (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n                    </ng-template>\n                    <ng-template #defaultColumnActions>\n                        <mng-action\n                            *ngFor=\"let action of rowInlineActions\"\n                            [action]=\"action\"\n                            [item]=\"item\"\n                            [itemId]=\"descriptor?.model?.idPropertyName ? item[descriptor!.model!.idPropertyName!] : null\"\n                            [actionData]=\"{itemIndex: idx}\"\n                            (finish)=\"onActionFinish($event)\">\n                        </mng-action>\n                    </ng-template>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"loadingbody\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    <div class=\"loading-text\"></div>\n                    <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"emptymessage\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    {{ 'mngTable.noItems' | translate }}\n                </td>\n            </tr>\n        </ng-template>\n    </p-table>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6$4.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i6$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i6$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i6$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i6$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i7$3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs"], outputs: ["instanceCreated"] }, { kind: "component", type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { kind: "component", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: ["descriptor", "display"] }, { kind: "component", type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "queryParam", "dataProvider", "disabled", "loading", "viewContainer", "selectedItems"], outputs: ["finish"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: MngI18nPropertyPipe, name: "i18nProperty" }, { kind: "pipe", type: MngClassMapPipe, name: "mngClassMapPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngTableComponent, selector: "mng-table", inputs: { initialDescriptor: ["descriptor", "initialDescriptor"], items: "items", queryResult: "queryResult", loading: "loading", dataProvider: "dataProvider", useQueryParams: "useQueryParams", selectionMode: "selectionMode", selectionEnabled: "selectionEnabled", actions: "actions", isColumnClickable: "isColumnClickable", viewContainerInit: ["viewContainer", "viewContainerInit"], captionComponent: "captionComponent", columnActionComponent: "columnActionComponent", columnActionMinWidth: "columnActionMinWidth" }, outputs: { loadEventEmitter: "tableLoad", cellClickEventEmitter: "cellClick", selectionChangeEventEmitter: "selectionChange", captionCmpInstEventEmitter: "captionComponentInstance", columnActionCmpInstEventEmitter: "columnActionComponentInstance" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "primeTable", first: true, predicate: Table, descendants: true }, { propertyName: "components", predicate: MngComponentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [style.height]=\"scrollHeight === 'flex' ? 'calc(100vh - ' + tableFullHeightOffset + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    <p-table\n        *ngIf=\"!useQueryParams || (useQueryParamsInitialized$ | async)\"\n        [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n        [dataKey]=\"$any(descriptor?.dataKeyProperty ?? null)\"\n        [lazy]=\"useDataProvider\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"useDataProvider && !infiniteScroll\"\n        [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n        [first]=\"$any(infiniteScroll ? 0 : offset)\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"$any(multiSortMeta)\"\n        [filters]=\"filterMetadata\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [scrollable]=\"infiniteScroll\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualRowHeight]=\"$any(rowHeight)\"\n        [scrollHeight]=\"$any(scrollHeight)\"\n        [selectionMode]=\"$any(selectionEnabled ? selectionMode : null)\"\n        [rowHover]=\"descriptor?.hasHover ?? true\"\n        [styleClass]=\"className\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\"\n        sortMode=\"multiple\"\n        responsiveLayout=\"scroll\"\n        [resizableColumns]=\"true\"\n        [autoLayout]=\"true\">\n        <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor?.title\" pTemplate=\"caption\">\n            <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #componentOrDefaultCaption>\n                <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n                <ng-template #defaultCaption>\n                    <h5 class=\"p-0 m-0\">{{ descriptor?.title }}</h5>\n                </ng-template>\n            </ng-template>\n        </ng-template>\n\n        <ng-template pTemplate=\"header\">\n            <tr *ngIf=\"!descriptor?.hideHeader\" class=\"mng-table-header\" [class]=\"descriptor?.headerClassName\">\n                <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                </th>\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\"></th>\n                <ng-container *ngFor=\"let col of descriptor?.columns\">\n                    <th *ngIf=\"col.isSortEnabled\" [pSortableColumn]=\"col.property\" [style.width.%]=\"col.width\" [style.min-width.px]=\"col.minWidth\" [class]=\"col.headerClassName\">\n                        <div class=\"flex justify-content-between align-items-center\">\n                            {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n                            <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor!.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </div>\n                    </th>\n                    <th *ngIf=\"!col.isSortEnabled\">\n                        {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n                        <ng-container>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor!.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </ng-container>\n                    </th>\n                </ng-container>\n                <th *ngIf=\"showInlineActionsColumn\"></th>\n            </tr>\n            <tr *ngIf=\"descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters\" class=\"mng-column-filter-row\">\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\"></th>\n                <th\n                    *ngFor=\"let col of descriptor?.columns\"\n                    [class]=\"(col.filterDescriptor ? 'mng-column-filter-' + col.filterDescriptor.filterType + ' ' : ' ') + col.filterDescriptor?.columnClassName\"\n                    [style.width.%]=\"col.filterDescriptor?.columnWidth ?? col.width\"\n                    [style.min-width.px]=\"col.filterDescriptor?.columnMinWidth ?? col.minWidth\">\n                    <div class=\"flex\" *ngIf=\"col.filterDescriptor\">\n                        <mng-table-column-filter [display]=\"descriptor!.filterDisplay\" [descriptor]=\"col.filterDescriptor\"></mng-table-column-filter>\n                    </div>\n                </th>\n                <th *ngIf=\"showInlineActionsColumn\"></th>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n            <tr [style.height.px]=\"rowHeight\" [class]=\"descriptor?.rowClassName | mngClassMapPipe: descriptor?.rowClassNameMapFn:item\">\n                <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"width: 3rem\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 3rem\">\n                    <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                </td>\n                <td\n                    *ngFor=\"let col of descriptor?.columns\"\n                    (click)=\"onCellClick($event, col, item, idx)\"\n                    [class]=\"col.className\"\n                    [class.clickable]=\"isColumnClickable\"\n                    [style.width.%]=\"col.width\"\n                    [style.min-width.px]=\"col.minWidth\">\n                    <mng-table-column-value [descriptor]=\"col\" [item]=\"item\"></mng-table-column-value>\n                </td>\n                <td *ngIf=\"showInlineActionsColumn\" class=\"column-action text-right\" [style.min-width.px]=\"columnActionMinWidth\">\n                    <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponentOrDefault\">\n                        <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                    </ng-container>\n                    <ng-template #showColumnActionComponentOrDefault>\n                        <span\n                            *ngIf=\"columnActionComponent; else defaultColumnActions\"\n                            [mngComponent]=\"columnActionComponent!\"\n                            (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n                    </ng-template>\n                    <ng-template #defaultColumnActions>\n                        <mng-action\n                            *ngFor=\"let action of rowInlineActions\"\n                            [action]=\"action\"\n                            [item]=\"item\"\n                            [itemId]=\"descriptor?.model?.idPropertyName ? item[descriptor!.model!.idPropertyName!] : null\"\n                            [actionData]=\"{itemIndex: idx}\"\n                            (finish)=\"onActionFinish($event)\">\n                        </mng-action>\n                    </ng-template>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"loadingbody\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    <div class=\"loading-text\"></div>\n                    <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"emptymessage\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    {{ 'mngTable.noItems' | translate }}\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template *ngIf=\"footerTemplate\" pTemplate=\"summary\">\n            <ng-container [ngTemplateOutlet]=\"footerTemplate\" [ngTemplateOutletContext]=\"{queryResult: queryResult}\"></ng-container>\n        </ng-template>\n    </p-table>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6$4.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i6$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i6$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i6$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i6$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i7$3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs"], outputs: ["instanceCreated"] }, { kind: "component", type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { kind: "component", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: ["descriptor", "display"] }, { kind: "component", type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "queryParam", "dataProvider", "disabled", "loading", "viewContainer", "selectedItems"], outputs: ["finish"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: MngI18nPropertyPipe, name: "i18nProperty" }, { kind: "pipe", type: MngClassMapPipe, name: "mngClassMapPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.height]=\"scrollHeight === 'flex' ? 'calc(100vh - ' + tableFullHeightOffset + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    <p-table\n        *ngIf=\"!useQueryParams || (useQueryParamsInitialized$ | async)\"\n        [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n        [dataKey]=\"$any(descriptor?.dataKeyProperty ?? null)\"\n        [lazy]=\"useDataProvider\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"useDataProvider && !infiniteScroll\"\n        [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n        [first]=\"$any(infiniteScroll ? 0 : offset)\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"$any(multiSortMeta)\"\n        [filters]=\"filterMetadata\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [scrollable]=\"infiniteScroll\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualRowHeight]=\"$any(rowHeight)\"\n        [scrollHeight]=\"$any(scrollHeight)\"\n        [selectionMode]=\"$any(selectionEnabled ? selectionMode : null)\"\n        [rowHover]=\"descriptor?.hasHover ?? true\"\n        [styleClass]=\"className\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\"\n        sortMode=\"multiple\"\n        responsiveLayout=\"scroll\"\n        [resizableColumns]=\"true\"\n        [autoLayout]=\"true\">\n        <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor?.title\" pTemplate=\"caption\">\n            <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #componentOrDefaultCaption>\n                <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n                <ng-template #defaultCaption>\n                    <h5 class=\"p-0 m-0\">{{ descriptor?.title }}</h5>\n                </ng-template>\n            </ng-template>\n        </ng-template>\n\n        <ng-template pTemplate=\"header\">\n            <tr *ngIf=\"!descriptor?.hideHeader\" class=\"mng-table-header\" [class]=\"descriptor?.headerClassName\">\n                <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                </th>\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\"></th>\n                <ng-container *ngFor=\"let col of descriptor?.columns\">\n                    <th *ngIf=\"col.isSortEnabled\" [pSortableColumn]=\"col.property\" [style.width.%]=\"col.width\" [style.min-width.px]=\"col.minWidth\" [class]=\"col.headerClassName\">\n                        <div class=\"flex justify-content-between align-items-center\">\n                            {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n                            <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor!.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </div>\n                    </th>\n                    <th *ngIf=\"!col.isSortEnabled\">\n                        {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n                        <ng-container>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor!.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </ng-container>\n                    </th>\n                </ng-container>\n                <th *ngIf=\"showInlineActionsColumn\"></th>\n            </tr>\n            <tr *ngIf=\"descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters\" class=\"mng-column-filter-row\">\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\"></th>\n                <th\n                    *ngFor=\"let col of descriptor?.columns\"\n                    [class]=\"(col.filterDescriptor ? 'mng-column-filter-' + col.filterDescriptor.filterType + ' ' : ' ') + col.filterDescriptor?.columnClassName\"\n                    [style.width.%]=\"col.filterDescriptor?.columnWidth ?? col.width\"\n                    [style.min-width.px]=\"col.filterDescriptor?.columnMinWidth ?? col.minWidth\">\n                    <div class=\"flex\" *ngIf=\"col.filterDescriptor\">\n                        <mng-table-column-filter [display]=\"descriptor!.filterDisplay\" [descriptor]=\"col.filterDescriptor\"></mng-table-column-filter>\n                    </div>\n                </th>\n                <th *ngIf=\"showInlineActionsColumn\"></th>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n            <tr [style.height.px]=\"rowHeight\" [class]=\"descriptor?.rowClassName | mngClassMapPipe: descriptor?.rowClassNameMapFn:item\">\n                <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"width: 3rem\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 3rem\">\n                    <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                </td>\n                <td\n                    *ngFor=\"let col of descriptor?.columns\"\n                    (click)=\"onCellClick($event, col, item, idx)\"\n                    [class]=\"col.className\"\n                    [class.clickable]=\"isColumnClickable\"\n                    [style.width.%]=\"col.width\"\n                    [style.min-width.px]=\"col.minWidth\">\n                    <mng-table-column-value [descriptor]=\"col\" [item]=\"item\"></mng-table-column-value>\n                </td>\n                <td *ngIf=\"showInlineActionsColumn\" class=\"column-action text-right\" [style.min-width.px]=\"columnActionMinWidth\">\n                    <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponentOrDefault\">\n                        <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                    </ng-container>\n                    <ng-template #showColumnActionComponentOrDefault>\n                        <span\n                            *ngIf=\"columnActionComponent; else defaultColumnActions\"\n                            [mngComponent]=\"columnActionComponent!\"\n                            (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n                    </ng-template>\n                    <ng-template #defaultColumnActions>\n                        <mng-action\n                            *ngFor=\"let action of rowInlineActions\"\n                            [action]=\"action\"\n                            [item]=\"item\"\n                            [itemId]=\"descriptor?.model?.idPropertyName ? item[descriptor!.model!.idPropertyName!] : null\"\n                            [actionData]=\"{itemIndex: idx}\"\n                            (finish)=\"onActionFinish($event)\">\n                        </mng-action>\n                    </ng-template>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"loadingbody\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    <div class=\"loading-text\"></div>\n                    <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"emptymessage\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    {{ 'mngTable.noItems' | translate }}\n                </td>\n            </tr>\n        </ng-template>\n    </p-table>\n</div>\n" }]
+            args: [{ selector: 'mng-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.height]=\"scrollHeight === 'flex' ? 'calc(100vh - ' + tableFullHeightOffset + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    <p-table\n        *ngIf=\"!useQueryParams || (useQueryParamsInitialized$ | async)\"\n        [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n        [dataKey]=\"$any(descriptor?.dataKeyProperty ?? null)\"\n        [lazy]=\"useDataProvider\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"useDataProvider && !infiniteScroll\"\n        [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n        [first]=\"$any(infiniteScroll ? 0 : offset)\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"$any(multiSortMeta)\"\n        [filters]=\"filterMetadata\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [scrollable]=\"infiniteScroll\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualRowHeight]=\"$any(rowHeight)\"\n        [scrollHeight]=\"$any(scrollHeight)\"\n        [selectionMode]=\"$any(selectionEnabled ? selectionMode : null)\"\n        [rowHover]=\"descriptor?.hasHover ?? true\"\n        [styleClass]=\"className\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\"\n        sortMode=\"multiple\"\n        responsiveLayout=\"scroll\"\n        [resizableColumns]=\"true\"\n        [autoLayout]=\"true\">\n        <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor?.title\" pTemplate=\"caption\">\n            <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #componentOrDefaultCaption>\n                <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n                <ng-template #defaultCaption>\n                    <h5 class=\"p-0 m-0\">{{ descriptor?.title }}</h5>\n                </ng-template>\n            </ng-template>\n        </ng-template>\n\n        <ng-template pTemplate=\"header\">\n            <tr *ngIf=\"!descriptor?.hideHeader\" class=\"mng-table-header\" [class]=\"descriptor?.headerClassName\">\n                <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                </th>\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\"></th>\n                <ng-container *ngFor=\"let col of descriptor?.columns\">\n                    <th *ngIf=\"col.isSortEnabled\" [pSortableColumn]=\"col.property\" [style.width.%]=\"col.width\" [style.min-width.px]=\"col.minWidth\" [class]=\"col.headerClassName\">\n                        <div class=\"flex justify-content-between align-items-center\">\n                            {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n                            <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor!.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </div>\n                    </th>\n                    <th *ngIf=\"!col.isSortEnabled\">\n                        {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n                        <ng-container>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor!.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </ng-container>\n                    </th>\n                </ng-container>\n                <th *ngIf=\"showInlineActionsColumn\"></th>\n            </tr>\n            <tr *ngIf=\"descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters\" class=\"mng-column-filter-row\">\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\"></th>\n                <th\n                    *ngFor=\"let col of descriptor?.columns\"\n                    [class]=\"(col.filterDescriptor ? 'mng-column-filter-' + col.filterDescriptor.filterType + ' ' : ' ') + col.filterDescriptor?.columnClassName\"\n                    [style.width.%]=\"col.filterDescriptor?.columnWidth ?? col.width\"\n                    [style.min-width.px]=\"col.filterDescriptor?.columnMinWidth ?? col.minWidth\">\n                    <div class=\"flex\" *ngIf=\"col.filterDescriptor\">\n                        <mng-table-column-filter [display]=\"descriptor!.filterDisplay\" [descriptor]=\"col.filterDescriptor\"></mng-table-column-filter>\n                    </div>\n                </th>\n                <th *ngIf=\"showInlineActionsColumn\"></th>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n            <tr [style.height.px]=\"rowHeight\" [class]=\"descriptor?.rowClassName | mngClassMapPipe: descriptor?.rowClassNameMapFn:item\">\n                <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"width: 3rem\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 3rem\">\n                    <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                </td>\n                <td\n                    *ngFor=\"let col of descriptor?.columns\"\n                    (click)=\"onCellClick($event, col, item, idx)\"\n                    [class]=\"col.className\"\n                    [class.clickable]=\"isColumnClickable\"\n                    [style.width.%]=\"col.width\"\n                    [style.min-width.px]=\"col.minWidth\">\n                    <mng-table-column-value [descriptor]=\"col\" [item]=\"item\"></mng-table-column-value>\n                </td>\n                <td *ngIf=\"showInlineActionsColumn\" class=\"column-action text-right\" [style.min-width.px]=\"columnActionMinWidth\">\n                    <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponentOrDefault\">\n                        <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                    </ng-container>\n                    <ng-template #showColumnActionComponentOrDefault>\n                        <span\n                            *ngIf=\"columnActionComponent; else defaultColumnActions\"\n                            [mngComponent]=\"columnActionComponent!\"\n                            (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n                    </ng-template>\n                    <ng-template #defaultColumnActions>\n                        <mng-action\n                            *ngFor=\"let action of rowInlineActions\"\n                            [action]=\"action\"\n                            [item]=\"item\"\n                            [itemId]=\"descriptor?.model?.idPropertyName ? item[descriptor!.model!.idPropertyName!] : null\"\n                            [actionData]=\"{itemIndex: idx}\"\n                            (finish)=\"onActionFinish($event)\">\n                        </mng-action>\n                    </ng-template>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"loadingbody\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    <div class=\"loading-text\"></div>\n                    <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"emptymessage\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    {{ 'mngTable.noItems' | translate }}\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template *ngIf=\"footerTemplate\" pTemplate=\"summary\">\n            <ng-container [ngTemplateOutlet]=\"footerTemplate\" [ngTemplateOutletContext]=\"{queryResult: queryResult}\"></ng-container>\n        </ng-template>\n    </p-table>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i1$2.TranslateService }, { type: MngActionExecutorService }, { type: MngViewContainerComponentService, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { initialDescriptor: [{
@@ -9948,6 +9855,15 @@ class MngTableviewComponent {
         this.toolbarRightActions = this.toolbarRightActions.reverse();
         this.hasItemSelectionAction = [...this.toolbarLeftActions, ...this.toolbarRightActions].some(e => e.hasItemsSelection);
     }
+    ngAfterContentInit() {
+        this.templates.forEach(template => {
+            switch (template.getType()) {
+                case 'footer':
+                    this.footerTemplate = template.template;
+                    break;
+            }
+        });
+    }
     ngOnDestroy() {
         this.subscriptions.forEach(s => s.unsubscribe());
     }
@@ -9968,10 +9884,10 @@ class MngTableviewComponent {
     }
 }
 MngTableviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngTableviewComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.MessageService }, { token: i1$2.TranslateService }, { token: i3.DialogService }, { token: i2.ConfirmationService }, { token: MngActionExecutorService }, { token: MngViewContainerComponentService }], target: i0.ɵɵFactoryTarget.Component });
-MngTableviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngTableviewComponent, selector: "mng-tableview", inputs: { descriptor: "descriptor", dataProvider: "dataProvider", actions: "actions" }, providers: [MessageService, ConfirmationService, MngViewContainerComponentService], viewQueries: [{ propertyName: "tableComponent", first: true, predicate: MngTableComponent, descendants: true }], ngImport: i0, template: "<div class=\"mng-tableview\">\n    <p-toast></p-toast>\n\n    <div class=\"card\">\n        <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n            <ng-template pTemplate=\"left\">\n                <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\" [queryParam]=\"tableQueryParam\" [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\" [queryParam]=\"tableQueryParam\" [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table\n            [descriptor]=\"descriptor.table\"\n            [dataProvider]=\"dataProvider\"\n            [useQueryParams]=\"true\"\n            [actions]=\"actions\"\n            [selectionEnabled]=\"hasItemSelectionAction\"\n            [selectionMode]=\"'multiple'\"\n            (tableLoad)=\"onTableLoad($event)\"\n            (selectionChange)=\"selectionChange($event)\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-0 m-0\">{{ descriptor.tableTitle ?? '' | translate }}</h5>\n                </div>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: i6$2.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass"] }, { kind: "directive", type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { kind: "component", type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "actions", "isColumnClickable", "viewContainer", "captionComponent", "columnActionComponent", "columnActionMinWidth"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { kind: "component", type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "queryParam", "dataProvider", "disabled", "loading", "viewContainer", "selectedItems"], outputs: ["finish"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
+MngTableviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngTableviewComponent, selector: "mng-tableview", inputs: { descriptor: "descriptor", dataProvider: "dataProvider", actions: "actions" }, providers: [MessageService, ConfirmationService, MngViewContainerComponentService], queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "tableComponent", first: true, predicate: MngTableComponent, descendants: true }], ngImport: i0, template: "<div class=\"mng-tableview\">\n    <p-toast></p-toast>\n\n    <div class=\"card\">\n        <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n            <ng-template pTemplate=\"left\">\n                <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\" [queryParam]=\"tableQueryParam\" [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\" [queryParam]=\"tableQueryParam\" [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table\n            [descriptor]=\"descriptor.table\"\n            [dataProvider]=\"dataProvider\"\n            [useQueryParams]=\"true\"\n            [actions]=\"actions\"\n            [selectionEnabled]=\"hasItemSelectionAction\"\n            [selectionMode]=\"'multiple'\"\n            (tableLoad)=\"onTableLoad($event)\"\n            (selectionChange)=\"selectionChange($event)\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-0 m-0\">{{ descriptor.tableTitle ?? '' | translate }}</h5>\n                </div>\n            </ng-template>\n\n            <ng-template let-queryResult=\"queryResult\" mngTemplate=\"footer\">\n                <ng-container *ngIf=\"footerTemplate\" [ngTemplateOutlet]=\"footerTemplate\" [ngTemplateOutletContext]=\"{queryResult: queryResult}\"></ng-container>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: i6$2.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass"] }, { kind: "directive", type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { kind: "component", type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "actions", "isColumnClickable", "viewContainer", "captionComponent", "columnActionComponent", "columnActionMinWidth"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { kind: "component", type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "queryParam", "dataProvider", "disabled", "loading", "viewContainer", "selectedItems"], outputs: ["finish"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngTableviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-tableview', providers: [MessageService, ConfirmationService, MngViewContainerComponentService], template: "<div class=\"mng-tableview\">\n    <p-toast></p-toast>\n\n    <div class=\"card\">\n        <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n            <ng-template pTemplate=\"left\">\n                <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\" [queryParam]=\"tableQueryParam\" [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\" [queryParam]=\"tableQueryParam\" [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table\n            [descriptor]=\"descriptor.table\"\n            [dataProvider]=\"dataProvider\"\n            [useQueryParams]=\"true\"\n            [actions]=\"actions\"\n            [selectionEnabled]=\"hasItemSelectionAction\"\n            [selectionMode]=\"'multiple'\"\n            (tableLoad)=\"onTableLoad($event)\"\n            (selectionChange)=\"selectionChange($event)\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-0 m-0\">{{ descriptor.tableTitle ?? '' | translate }}</h5>\n                </div>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n" }]
+            args: [{ selector: 'mng-tableview', providers: [MessageService, ConfirmationService, MngViewContainerComponentService], template: "<div class=\"mng-tableview\">\n    <p-toast></p-toast>\n\n    <div class=\"card\">\n        <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n            <ng-template pTemplate=\"left\">\n                <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\" [queryParam]=\"tableQueryParam\" [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\" [queryParam]=\"tableQueryParam\" [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table\n            [descriptor]=\"descriptor.table\"\n            [dataProvider]=\"dataProvider\"\n            [useQueryParams]=\"true\"\n            [actions]=\"actions\"\n            [selectionEnabled]=\"hasItemSelectionAction\"\n            [selectionMode]=\"'multiple'\"\n            (tableLoad)=\"onTableLoad($event)\"\n            (selectionChange)=\"selectionChange($event)\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-0 m-0\">{{ descriptor.tableTitle ?? '' | translate }}</h5>\n                </div>\n            </ng-template>\n\n            <ng-template let-queryResult=\"queryResult\" mngTemplate=\"footer\">\n                <ng-container *ngIf=\"footerTemplate\" [ngTemplateOutlet]=\"footerTemplate\" [ngTemplateOutletContext]=\"{queryResult: queryResult}\"></ng-container>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.MessageService }, { type: i1$2.TranslateService }, { type: i3.DialogService }, { type: i2.ConfirmationService }, { type: MngActionExecutorService }, { type: MngViewContainerComponentService }]; }, propDecorators: { descriptor: [{
                 type: Input
             }], dataProvider: [{
@@ -9981,6 +9897,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
             }], tableComponent: [{
                 type: ViewChild,
                 args: [MngTableComponent]
+            }], templates: [{
+                type: ContentChildren,
+                args: [MngTemplateDirective]
             }] } });
 
 class AMngTableviewRouteComponent {
@@ -10031,7 +9950,7 @@ class AMngTableviewRouteComponent {
             }));
         })
             .withPosition(ActionPositionEnum.ToolbarRight);
-        action.buttonDescriptor.withIcon('pi pi-upload');
+        action.button.withIcon('pi pi-upload');
         return action;
     }
     createActionDescriptorForRefresh(descriptor = this.descriptor.model) {
@@ -10043,7 +9962,7 @@ class AMngTableviewRouteComponent {
             ctx.parameters.viewContainer.triggerTableReload({});
             return of(null);
         });
-        action.buttonDescriptor.withIcon('pi pi-refresh').styleClass.withActionLevel(ActionLevelEnum.Secondary);
+        action.button.withIcon('pi pi-refresh').styleClass.withActionLevel(StyleLevelEnum.Secondary);
         return action;
     }
 }
@@ -10083,10 +10002,10 @@ class MngTableviewRouteComponent extends AMngTableviewRouteComponent {
     }
 }
 MngTableviewRouteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngTableviewRouteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MngTableviewRouteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngTableviewRouteComponent, selector: "mng-tableview-route", inputs: { descriptorInit: ["descriptor", "descriptorInit"], dataProviderInit: ["dataProvider", "dataProviderInit"], actionsInit: ["actions", "actionsInit"] }, viewQueries: [{ propertyName: "tableviewComponent", first: true, predicate: MngTableviewComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"grid\">\n    <div class=\"col-12\">\n        <mng-tableview [descriptor]=\"descriptor\" [dataProvider]=\"dataProvider\" [actions]=\"actions\"></mng-tableview>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: MngTableviewComponent, selector: "mng-tableview", inputs: ["descriptor", "dataProvider", "actions"] }] });
+MngTableviewRouteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngTableviewRouteComponent, selector: "mng-tableview-route", inputs: { descriptorInit: ["descriptor", "descriptorInit"], dataProviderInit: ["dataProvider", "dataProviderInit"], actionsInit: ["actions", "actionsInit"] }, viewQueries: [{ propertyName: "tableviewComponent", first: true, predicate: MngTableviewComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"grid\">\n    <div class=\"col-12\">\n        <mng-tableview [descriptor]=\"descriptor\" [dataProvider]=\"dataProvider\" [actions]=\"actions\"> </mng-tableview>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: MngTableviewComponent, selector: "mng-tableview", inputs: ["descriptor", "dataProvider", "actions"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngTableviewRouteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-tableview-route', template: "<div class=\"grid\">\n    <div class=\"col-12\">\n        <mng-tableview [descriptor]=\"descriptor\" [dataProvider]=\"dataProvider\" [actions]=\"actions\"></mng-tableview>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'mng-tableview-route', template: "<div class=\"grid\">\n    <div class=\"col-12\">\n        <mng-tableview [descriptor]=\"descriptor\" [dataProvider]=\"dataProvider\" [actions]=\"actions\"> </mng-tableview>\n    </div>\n</div>\n" }]
         }], propDecorators: { descriptorInit: [{
                 type: Input,
                 args: ['descriptor']
@@ -10283,17 +10202,17 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
             const viewAction = new ActionEditorDescriptor(this.descriptor.tableviewDescriptor.viewEditor, 'details', this.descriptor.editor.model.type, this.descriptor.property)
                 .withPosition(ActionPositionEnum.RowClick)
                 .withDialogClassName('mng-field-dialog mng-action-editor-dialog')
-                .withDialogSize(ActionEditorDialogSizeEnum.Small);
+                .withDialogSize(StyleSizeEnum.Small);
             viewAction.withEditorActions([new ActionEditorSubmitDescriptor(viewAction, ActionEditorSubmitTypeEnum.Cancel)]);
-            viewAction.buttonDescriptor.withLabel(null);
+            viewAction.button.withLabel(null);
             this.actions.push(viewAction);
         }
         if (hasAddAction) {
             const addAction = new ActionEditorDescriptor(this.descriptor.tableviewDescriptor.addEditor, 'add', this.descriptor.editor.model.type, this.descriptor.property)
                 .withPosition(ActionPositionEnum.ToolbarRight)
                 .withDialogClassName('mng-field-dialog mng-action-editor-dialog')
-                .withDialogSize(ActionEditorDialogSizeEnum.Small)
-                .withButtonDescriptor(new ButtonDescriptor().withStyleClass(new ButtonStyleBuilder().withSize(ActionSizeEnum.ExtraSmall)))
+                .withDialogSize(StyleSizeEnum.Small)
+                .withButtonDescriptor(new ActionButtonDescriptor().withStyleClass(new ButtonStyleBuilder().withSize(StyleSizeEnum.ExtraSmall)))
                 .withSubmitFunction(ctx => {
                 if (!ctx.parameters.item) {
                     return throwError(() => new Error(`No item was provided in context, edit cannot be done.`));
@@ -10306,15 +10225,15 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
             })
                 .withIsVisibleFunction(() => of(!this.options?.formState.disabled))
                 .withIsEnabledFunction(() => this.isEnabled$);
-            addAction.buttonDescriptor.withLabel(null).withIcon('pi pi-plus');
+            addAction.button.withLabel(null).withIcon('pi pi-plus');
             this.actions.push(addAction);
         }
         if (hasEditAction) {
             const editAction = new ActionEditorDescriptor(this.descriptor.tableviewDescriptor.editEditor, 'edit', this.descriptor.editor.model.type, this.descriptor.property)
                 .withPosition(ActionPositionEnum.RowInline)
                 .withDialogClassName('mng-field-dialog mng-action-editor-dialog')
-                .withDialogSize(ActionEditorDialogSizeEnum.Small)
-                .withButtonDescriptor(new ButtonDescriptor().withStyleClass(new ButtonStyleBuilder().withSize(ActionSizeEnum.ExtraSmall)))
+                .withDialogSize(StyleSizeEnum.Small)
+                .withButtonDescriptor(new ActionButtonDescriptor().withStyleClass(new ButtonStyleBuilder().withSize(StyleSizeEnum.ExtraSmall)))
                 .withSubmitFunction(ctx => {
                 if (!ctx.parameters.item) {
                     return throwError(() => new Error(`No item was provided in context, edit cannot be done.`));
@@ -10327,13 +10246,13 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
             })
                 .withIsVisibleFunction(() => of(!this.formControl?.disabled))
                 .withIsEnabledFunction(() => this.isEnabled$);
-            editAction.buttonDescriptor.withLabel(null).withIcon('pi pi-pencil');
+            editAction.button.withLabel(null).withIcon('pi pi-pencil');
             this.actions.push(editAction);
         }
         if (hasDeleteAction) {
             const deleteAction = new ActionDescriptor(this.descriptor.tableviewDescriptor.model, 'delete', this.descriptor.editor.model.type, this.descriptor.property)
                 .withPosition(ActionPositionEnum.RowInline)
-                .withButtonDescriptor(new ButtonDescriptor().withStyleClass(new ButtonStyleBuilder(ActionLevelEnum.Danger).withSize(ActionSizeEnum.ExtraSmall)))
+                .withButtonDescriptor(new ActionButtonDescriptor().withStyleClass(new ButtonStyleBuilder(StyleLevelEnum.Danger).withSize(StyleSizeEnum.ExtraSmall)))
                 .withRunFunction(ctx => {
                 if (!ctx.parameters.item) {
                     return throwError(() => new Error(`No item was provided in context, delete cannot be done.`));
@@ -10358,7 +10277,7 @@ class MngFormlyFieldTableDialogFormComponent extends FieldType {
             })
                 .withIsVisibleFunction(() => of(!this.options?.formState.disabled))
                 .withIsEnabledFunction(() => this.isEnabled$);
-            deleteAction.buttonDescriptor.withLabel(null).withIcon('pi pi-trash');
+            deleteAction.button.withLabel(null).withIcon('pi pi-trash');
             this.actions.push(deleteAction);
         }
         this.actions.push(...this.descriptor.actions);
@@ -11560,9 +11479,7 @@ const declarations = [
     MngFormEditorComponent,
     MngActionComponent,
     MngActionEditorComponent,
-    MngActionRouteComponent,
-    //button
-    MngButtonComponent
+    MngActionRouteComponent
 ];
 class MngCommonsModule {
     static forRoot(config) {
@@ -11685,9 +11602,7 @@ MngCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         MngFormEditorComponent,
         MngActionComponent,
         MngActionEditorComponent,
-        MngActionRouteComponent,
-        //button
-        MngButtonComponent], imports: [
+        MngActionRouteComponent], imports: [
         // angular modules
         CommonModule,
         RouterModule,
@@ -11806,9 +11721,7 @@ MngCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         MngFormEditorComponent,
         MngActionComponent,
         MngActionEditorComponent,
-        MngActionRouteComponent,
-        //button
-        MngButtonComponent] });
+        MngActionRouteComponent] });
 MngCommonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngCommonsModule, imports: [
         // angular modules
         CommonModule,
@@ -12648,5 +12561,5 @@ class TableviewRouteBuilder {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_EDITOR_DIALOG_COMPONENT_SETTING, AFieldDescriptor, AFieldGroupDescriptor, AGenericFieldDescriptor, AMngApiService, AMngBaseApiService, AMngCrudApiService, AMngGetAllApiService, AMngTableviewRouteComponent, APermissions, ActionActivationTriggerEnum, ActionConfirmationDialogDescriptor, ActionContext, ActionContextValidation, ActionDataProviderUtil, ActionDeleteDescriptor, ActionDescriptor, ActionEditorAddDescriptor, ActionEditorDescriptor, ActionEditorDetailsDescriptor, ActionEditorDialogSizeEnum, ActionEditorEditDescriptor, ActionEditorSubmitDescriptor, ActionEditorSubmitTypeEnum, ActionError, ActionInstance, ActionInstanceStateEnum, ActionLevelEnum, ActionLinkDescriptor, ActionParameters, ActionPositionEnum, ActionSimpleDescriptor, ActionSizeEnum, ActionTypeEnum, AuthorizationTypeEnum, AuthorizationUtil, ButtonDescriptor, ButtonStyleBuilder, ButtonStyleRoundedEnum, ColumnDescriptor, ColumnDynamicDescriptor, ColumnTypeEnum, DataProvider, DateUtil, DefaultMngErrorMapperService, DynamicTableviewDataProvider, EditorDataProvider, EditorDescriptor, EditorFormlyUtil, EnumName, EnumUtil, FieldGroupDescriptor, FieldGroupTypeEnum, FieldInputDescriptor, FieldInputTypeEnum, FieldLookupDescriptor, FieldLookupEnumDescriptor, FieldLookupTypeEnum, FieldManyEditorActionEnum, FieldManyEditorDescriptor, FieldManyEditorTypeEnum, FieldManyToManyEditorActionEnum, FieldManyToManyEditorDescriptor, FieldManyToManyEditorTypeEnum, FieldSizeEnum, FieldTabGroupDescriptor, FieldValidationDescriptor, FilterDescriptor, FilterLookupDescriptor, FilterLookupEnumDescriptor, FilterLookupTypeEnum, FilterMatchModeEnum, FilterTypeEnum, I18nUtils, JsonPathPipe, LookupDataProvider, MNG_AUTOCOMPLETE_VALUE_ACCESSOR, MNG_BROWSER_STORAGE_IT, MNG_COMMONS_INITIALIZER_IT, MNG_DATE_RANGE_VALUE_ACCESSOR, MNG_DROPDOWN_VALUE_ACCESSOR, MNG_MODULE_CONFIG_IT, MediusFilterMatchType, MediusFilterParam, MediusQueryMode, MediusQueryParam, MediusQueryParamBuilder, MediusQueryResult, MediusRestUtil, MngActionComponent, MngActionEditorComponent, MngActionExecutorService, MngActionRouteComponent, MngAuthorizationGuard, MngAuthorizationService, MngAutocompleteComponent, MngBooleanPipe, MngBreadcrumbComponent, MngButtonComponent, MngClassMapPipe, MngCommonsModule, MngCommonsService, MngComponentDirective, MngConfigurationService, MngDateRangeComponent, MngDropdownComponent, MngEnumPipe, MngErrorMapperService, MngFooterComponent, MngFormEditorComponent, MngFormEditorSubmitEvent, MngFormFieldEvent, MngFormFieldEventComponentSubtype, MngFormFieldEventDialogSubtype, MngFormFieldEventTypeEnum, MngFormlyFieldAutocompleteComponent, MngFormlyFieldDropdownComponent, MngFormlyFieldFieldsetComponent, MngFormlyFieldInputComponent, MngFormlyFieldLabelComponent, MngFormlyFieldLookupDialogComponent, MngFormlyFieldTableDialogFormComponent, MngFormlyFieldTableDialogMultiselectComponent, MngFormlyFieldTabsComponent, MngFormlyFieldWrapperComponent, MngFormlyTableWrapperComponent, MngGetterPipe, MngI18nPropertyPipe, MngMainLayoutComponent, MngMainLayoutComponentService, MngMenuComponent, MngMenuItemComponent, MngNavigationService, MngParametrizePipe, MngTableCellClickEvent, MngTableColumnFilterComponent, MngTableColumnValueComponent, MngTableComponent, MngTableLoadEvent, MngTableReloadEvent, MngTableviewComponent, MngTableviewRouteComponent, MngTemplateDirective, MngTemplatePipe, MngTopbarComponent, MngVersionComponent, MngViewContainerComponentService, ModelDescriptor, ModelUtil, NotificationUtil, ObjectSerializer, Permissions, RouteBuilder, RoutesBuilder, StringUtil, StylesUtil, TableDataProvider, TableDescriptor, TableDynamicColumnsModeEnum, TableDynamicDescriptor, TableFilterDisplayEnum, TablePaginationModeEnum, TableSizeEnum, TableviewActionDefaultCategories, TableviewCrudDataProvider, TableviewDataProvider, TableviewDescriptor, TableviewDynamicDescriptor, TableviewRouteBuilder, TableviewTypeEnum, TypeName, TypeUtil, enumNameDecoratorPropertyName, enumsMapBase, formlyTypesConfig, formlyWrappersConfig, getEmailValidationMessage, getFormlyValidationMessages, getMaxLengthValidationMessage, getMinLengthValidationMessage, getRequiredValidationMessage, getTextPatternValidationMessage, mngConfigJsonAppInitializerProvider, mngConfigurationServiceProvider, mngFormlyConfigProvider, primeNgModules, typeMapBase, typeNameDecoratorPropertyName };
+export { ACTION_EDITOR_DIALOG_COMPONENT_SETTING, AFieldDescriptor, AFieldGroupDescriptor, AGenericFieldDescriptor, AMngApiService, AMngBaseApiService, AMngCrudApiService, AMngGetAllApiService, AMngTableviewRouteComponent, APermissions, ActionActivationTriggerEnum, ActionButtonDescriptor, ActionConfirmationDialogDescriptor, ActionContext, ActionContextValidation, ActionDataProviderUtil, ActionDeleteDescriptor, ActionDescriptor, ActionEditorAddDescriptor, ActionEditorDescriptor, ActionEditorDetailsDescriptor, ActionEditorEditDescriptor, ActionEditorSubmitDescriptor, ActionEditorSubmitTypeEnum, ActionError, ActionInstance, ActionInstanceStateEnum, ActionLinkDescriptor, ActionParameters, ActionPositionEnum, ActionSimpleDescriptor, ActionTypeEnum, AuthorizationTypeEnum, AuthorizationUtil, ButtonStyleBuilder, ButtonStyleRoundedEnum, ColumnDescriptor, ColumnDynamicDescriptor, ColumnTypeEnum, DataProvider, DateUtil, DefaultMngErrorMapperService, DynamicTableviewDataProvider, EditorDataProvider, EditorDescriptor, EditorFormlyUtil, EnumName, EnumUtil, FieldGroupDescriptor, FieldGroupTypeEnum, FieldInputDescriptor, FieldInputTypeEnum, FieldLookupDescriptor, FieldLookupEnumDescriptor, FieldLookupTypeEnum, FieldManyEditorActionEnum, FieldManyEditorDescriptor, FieldManyEditorTypeEnum, FieldManyToManyEditorActionEnum, FieldManyToManyEditorDescriptor, FieldManyToManyEditorTypeEnum, FieldSizeEnum, FieldTabGroupDescriptor, FieldValidationDescriptor, FilterDescriptor, FilterLookupDescriptor, FilterLookupEnumDescriptor, FilterLookupTypeEnum, FilterMatchModeEnum, FilterTypeEnum, I18nUtils, JsonPathPipe, LookupDataProvider, MNG_AUTOCOMPLETE_VALUE_ACCESSOR, MNG_BROWSER_STORAGE_IT, MNG_COMMONS_INITIALIZER_IT, MNG_DATE_RANGE_VALUE_ACCESSOR, MNG_DROPDOWN_VALUE_ACCESSOR, MNG_MODULE_CONFIG_IT, MediusFilterMatchType, MediusFilterParam, MediusQueryMode, MediusQueryParam, MediusQueryParamBuilder, MediusQueryResult, MediusRestUtil, MngActionComponent, MngActionEditorComponent, MngActionExecutorService, MngActionRouteComponent, MngAuthorizationGuard, MngAuthorizationService, MngAutocompleteComponent, MngBooleanPipe, MngBreadcrumbComponent, MngClassMapPipe, MngCommonsModule, MngCommonsService, MngComponentDirective, MngConfigurationService, MngDateRangeComponent, MngDropdownComponent, MngEnumPipe, MngErrorMapperService, MngFooterComponent, MngFormEditorComponent, MngFormEditorSubmitEvent, MngFormFieldEvent, MngFormFieldEventComponentSubtype, MngFormFieldEventDialogSubtype, MngFormFieldEventTypeEnum, MngFormlyFieldAutocompleteComponent, MngFormlyFieldDropdownComponent, MngFormlyFieldFieldsetComponent, MngFormlyFieldInputComponent, MngFormlyFieldLabelComponent, MngFormlyFieldLookupDialogComponent, MngFormlyFieldTableDialogFormComponent, MngFormlyFieldTableDialogMultiselectComponent, MngFormlyFieldTabsComponent, MngFormlyFieldWrapperComponent, MngFormlyTableWrapperComponent, MngGetterPipe, MngI18nPropertyPipe, MngMainLayoutComponent, MngMainLayoutComponentService, MngMenuComponent, MngMenuItemComponent, MngNavigationService, MngParametrizePipe, MngTableCellClickEvent, MngTableColumnFilterComponent, MngTableColumnValueComponent, MngTableComponent, MngTableLoadEvent, MngTableReloadEvent, MngTableviewComponent, MngTableviewRouteComponent, MngTemplateDirective, MngTemplatePipe, MngTopbarComponent, MngVersionComponent, MngViewContainerComponentService, ModelDescriptor, ModelUtil, NotificationUtil, ObjectSerializer, Permissions, RouteBuilder, RoutesBuilder, StringUtil, StyleLevelEnum, StyleSizeEnum, StylesUtil, TableDataProvider, TableDescriptor, TableDynamicColumnsModeEnum, TableDynamicDescriptor, TableFilterDisplayEnum, TablePaginationModeEnum, TableSizeEnum, TableviewActionDefaultCategories, TableviewCrudDataProvider, TableviewDataProvider, TableviewDescriptor, TableviewDynamicDescriptor, TableviewRouteBuilder, TableviewTypeEnum, TypeName, TypeUtil, enumNameDecoratorPropertyName, enumsMapBase, formlyTypesConfig, formlyWrappersConfig, getEmailValidationMessage, getFormlyValidationMessages, getMaxLengthValidationMessage, getMinLengthValidationMessage, getRequiredValidationMessage, getTextPatternValidationMessage, mngConfigJsonAppInitializerProvider, mngConfigurationServiceProvider, mngFormlyConfigProvider, primeNgModules, typeMapBase, typeNameDecoratorPropertyName };
 //# sourceMappingURL=mediusinc-mng-commons.mjs.map