@mediusinc/mng-commons 3.0.0-rc.0 → 3.0.0-rc.3

package/fesm2022/mediusinc-mng-commons.mjs

@@ -5347,13 +5347,21 @@ class TableDescriptor {
         this._loadingIcon = icon === undefined ? 'pi pi-spinner' : icon;
         return this;
     }
-    withColumnsReorderable(columnsReorderable = true) {
+    /**
+     * Helper method that enables/disables reorderable property on all columns currently in the descriptor.
+     * @param columnsReorderable: boolean
+     */
+    withCurrentColumnsReorderable(columnsReorderable = true) {
         for (const col of this.columns) {
             col.withReorderable(columnsReorderable);
         }
         return this;
     }
-    withColumnsToggleable(columnsToggleable = true) {
+    /**
+     * Helper method that enables/disables toggleable property on all columns currently in the descriptor.
+     * @param columnsToggleable: boolean
+     */
+    withCurrentColumnsToggleable(columnsToggleable = true) {
         for (const col of this.columns) {
             col.withToggleable(columnsToggleable);
         }
@@ -5389,7 +5397,12 @@ class TableDescriptor {
         this._hasGridlines = gridlines;
         return this;
     }
-    withResizableColumns(resizableColumns = true, columnResizeMode = 'fit') {
+    /**
+     * Method that enables/disabled column resize feature with columnResizeMode on all columns.
+     * @param resizableColumns: boolean
+     * @param columnResizeMode: 'fit' | 'expand' = 'fit'
+     */
+    withColumnsResizable(resizableColumns = true, columnResizeMode = 'fit') {
         this._hasResizableColumns = resizableColumns;
         this._columnResizeMode = columnResizeMode;
         return this;
@@ -6451,6 +6464,9 @@ class FieldInputDescriptor extends AFieldDescriptor {
     get customComponentType() {
         return this._customComponentType;
     }
+    get customComponentInputs() {
+        return this._customComponentInputs;
+    }
     get customComponentWrappers() {
         return this._customComponentWrappers;
     }
@@ -6553,13 +6569,14 @@ class FieldInputDescriptor extends AFieldDescriptor {
         this._imageUrlInputHiddenOnDisabled = inputVisibleOnDisabled;
         return this;
     }
-    asCustomComponent(customComponent, useWrappers) {
+    asCustomComponent(customComponent, useWrappers, componentInputs) {
         this._fieldType = FieldInputTypeEnum.Custom;
         if (typeof customComponent === 'string') {
             this._customComponentName = customComponent;
         }
         else {
             this._customComponentType = customComponent;
+            this._customComponentInputs = componentInputs;
         }
         if (useWrappers) {
             this._customComponentWrappers = useWrappers;
@@ -6632,6 +6649,7 @@ class FieldInputDescriptor extends AFieldDescriptor {
         field._imageUrlInputHiddenOnDisabled = this._imageUrlInputHiddenOnDisabled;
         field._customComponentName = this._customComponentName;
         field._customComponentType = this._customComponentType;
+        field._customComponentInputs = this._customComponentInputs;
         field._customComponentWrappers = this._customComponentWrappers;
         field._locale = this._locale;
         field._currency = this._currency;
@@ -8454,8 +8472,13 @@ class ActionButtonDescriptor {
         this._badge = badge;
         return this;
     }
-    withTooltip(tooltip) {
+    withTooltip(tooltip, position) {
         this._tooltip = tooltip;
+        this._tooltipPosition = position ?? 'top';
+        return this;
+    }
+    withTooltipPosition(position) {
+        this._tooltipPosition = position;
         return this;
     }
     get label() {
@@ -8476,6 +8499,9 @@ class ActionButtonDescriptor {
     get tooltip() {
         return this._tooltip;
     }
+    get tooltipPosition() {
+        return this._tooltipPosition;
+    }
     copy() {
         const descriptor = new ActionButtonDescriptor();
         descriptor._label = this._label;
@@ -9655,11 +9681,11 @@ class MngActionComponent {
         this.viewContainer = this.viewContainerInit ?? this.viewContainerService ?? undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MngActionComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.TranslateService }, { token: MngAuthorizationService }, { token: MngActionExecutorService }, { token: i1$1.ConfirmationService }, { token: MngViewContainerComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MngActionComponent, isStandalone: true, selector: "mng-action", inputs: { action: "action", item: "item", itemId: "itemId", actionData: "actionData", queryParam: "queryParam", dataProvider: "dataProvider", hostComponent: "hostComponent", routeInit: ["route", "routeInit"], 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], viewQueries: [{ propertyName: "subactionsMenu", first: true, predicate: ["subactionsMenu"], descendants: true }], 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        [label]=\"($label | async) ?? ''\"\n        [icon]=\"$any(action.button.icon)\"\n        [iconPos]=\"action.button.iconPosition\"\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        [pTooltip]=\"($tooltip | async) ?? undefined\"\n        [class]=\"buttonClass\"></a>\n    <ng-template #routerLink>\n        <a\n            *ngIf=\"actionLink; else customComponent\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.button.icon)\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [target]=\"actionLink.target\"\n            [replaceUrl]=\"actionLink.replaceUrl\"\n            [routerLink]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.pathSegments | parametrize : itemId : item : actionData)\"\n            [relativeTo]=\"route\"\n            [queryParams]=\"actionLink.queryParams | parametrize : itemId : item : actionData\"\n            [queryParamsHandling]=\"actionLink.queryParamsHandling\"\n            [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [class]=\"buttonClass\"></a>\n    </ng-template>\n    <ng-template #customComponent>\n        <ng-container\n            *ngIf=\"action.component; else splitButton\"\n            [mngComponent]=\"action.component\"\n            [inputs]=\"{\n                action: action,\n                item: item,\n                itemId: itemId,\n                actionData: actionData,\n                enabled: $isEnabled,\n                loading: $loading,\n                viewContainer: viewContainer\n            }\"\n            (instanceCreated)=\"onCustomActionCmpInst($event)\">\n        </ng-container>\n    </ng-template>\n    <ng-template #splitButton>\n        <p-splitButton\n            *ngIf=\"action.subactions.length > 0 && !action.subactionsAsMenu; else button\"\n            [icon]=\"action.button.icon ?? undefined\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (onClick)=\"triggerAction(action)\"\n            [class]=\"buttonClass\"\n            [model]=\"subactions\">\n        </p-splitButton>\n    </ng-template>\n    <ng-template #button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [icon]=\"$any(action.button.icon)\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [loading]=\"(($loading | async) ?? false) || ((inputLoading | async) ?? false)\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (click)=\"triggerAction(action, undefined, $event)\"\n            [class]=\"buttonClass\"></button>\n        <p-menu #subactionsMenu [model]=\"subactions\" [popup]=\"true\" styleClass=\"mng-action-menu\"></p-menu>\n    </ng-template>\n    <p-confirmDialog\n        *ngIf=\"actionOrSubactionHasRunConfirmation\"\n        [key]=\"action.actionName + '_' + cmpId\"\n        [baseZIndex]=\"50\"\n        appendTo=\"body\"\n        [closable]=\"action.runConfirmationDialogDescriptor?.closable ?? true\"></p-confirmDialog>\n</ng-container>\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i6$1.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: MngParametrizePipe, name: "parametrize" }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs", "attachToHost"], outputs: ["instanceCreated"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { 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: "ngmodule", type: SplitButtonModule }, { kind: "component", type: i10.SplitButton, selector: "p-splitButton", inputs: ["model", "icon", "iconPos", "label", "style", "styleClass", "menuStyle", "menuStyleClass", "disabled", "tabindex", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onClick", "onDropdownClick"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i11.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MngActionComponent, isStandalone: true, selector: "mng-action", inputs: { action: "action", item: "item", itemId: "itemId", actionData: "actionData", queryParam: "queryParam", dataProvider: "dataProvider", hostComponent: "hostComponent", routeInit: ["route", "routeInit"], 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], viewQueries: [{ propertyName: "subactionsMenu", first: true, predicate: ["subactionsMenu"], descendants: true }], 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        [label]=\"($label | async) ?? ''\"\n        [icon]=\"$any(action.button.icon)\"\n        [iconPos]=\"action.button.iconPosition\"\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        [pTooltip]=\"($tooltip | async) ?? undefined\"\n        [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n        [class]=\"buttonClass\"></a>\n    <ng-template #routerLink>\n        <a\n            *ngIf=\"actionLink; else customComponent\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.button.icon)\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [target]=\"actionLink.target\"\n            [replaceUrl]=\"actionLink.replaceUrl\"\n            [routerLink]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.pathSegments | parametrize : itemId : item : actionData)\"\n            [relativeTo]=\"route\"\n            [queryParams]=\"actionLink.queryParams | parametrize : itemId : item : actionData\"\n            [queryParamsHandling]=\"actionLink.queryParamsHandling\"\n            [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [class]=\"buttonClass\"></a>\n    </ng-template>\n    <ng-template #customComponent>\n        <ng-container\n            *ngIf=\"action.component; else splitButton\"\n            [mngComponent]=\"action.component\"\n            [inputs]=\"{\n                action: action,\n                item: item,\n                itemId: itemId,\n                actionData: actionData,\n                enabled: $isEnabled,\n                loading: $loading,\n                viewContainer: viewContainer\n            }\"\n            (instanceCreated)=\"onCustomActionCmpInst($event)\">\n        </ng-container>\n    </ng-template>\n    <ng-template #splitButton>\n        <p-splitButton\n            *ngIf=\"action.subactions.length > 0 && !action.subactionsAsMenu; else button\"\n            [icon]=\"action.button.icon ?? undefined\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (onClick)=\"triggerAction(action)\"\n            [class]=\"buttonClass\"\n            [model]=\"subactions\">\n        </p-splitButton>\n    </ng-template>\n    <ng-template #button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [icon]=\"$any(action.button.icon)\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [loading]=\"(($loading | async) ?? false) || ((inputLoading | async) ?? false)\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (click)=\"triggerAction(action, undefined, $event)\"\n            [class]=\"buttonClass\"></button>\n        <p-menu #subactionsMenu [model]=\"subactions\" [popup]=\"true\" styleClass=\"mng-action-menu\"></p-menu>\n    </ng-template>\n    <p-confirmDialog\n        *ngIf=\"actionOrSubactionHasRunConfirmation\"\n        [key]=\"action.actionName + '_' + cmpId\"\n        [baseZIndex]=\"50\"\n        appendTo=\"body\"\n        [closable]=\"action.runConfirmationDialogDescriptor?.closable ?? true\"></p-confirmDialog>\n</ng-container>\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i6$1.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: MngParametrizePipe, name: "parametrize" }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs", "attachToHost"], outputs: ["instanceCreated"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { 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: "ngmodule", type: SplitButtonModule }, { kind: "component", type: i10.SplitButton, selector: "p-splitButton", inputs: ["model", "icon", "iconPos", "label", "style", "styleClass", "menuStyle", "menuStyleClass", "disabled", "tabindex", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onClick", "onDropdownClick"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i11.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MngActionComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-action', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, NgIf, ButtonModule, RippleModule, TooltipModule, MngParametrizePipe, MngComponentDirective, ConfirmDialogModule, SplitButtonModule, MenuModule], providers: [ConfirmationService], template: "<ng-container *ngIf=\"($isVisible | async) && ($isPermitted | async)\">\n    <a\n        *ngIf=\"actionLink && actionLink.url !== ''; else routerLink\"\n        pButton\n        pRipple\n        [label]=\"($label | async) ?? ''\"\n        [icon]=\"$any(action.button.icon)\"\n        [iconPos]=\"action.button.iconPosition\"\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        [pTooltip]=\"($tooltip | async) ?? undefined\"\n        [class]=\"buttonClass\"></a>\n    <ng-template #routerLink>\n        <a\n            *ngIf=\"actionLink; else customComponent\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.button.icon)\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [target]=\"actionLink.target\"\n            [replaceUrl]=\"actionLink.replaceUrl\"\n            [routerLink]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.pathSegments | parametrize : itemId : item : actionData)\"\n            [relativeTo]=\"route\"\n            [queryParams]=\"actionLink.queryParams | parametrize : itemId : item : actionData\"\n            [queryParamsHandling]=\"actionLink.queryParamsHandling\"\n            [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [class]=\"buttonClass\"></a>\n    </ng-template>\n    <ng-template #customComponent>\n        <ng-container\n            *ngIf=\"action.component; else splitButton\"\n            [mngComponent]=\"action.component\"\n            [inputs]=\"{\n                action: action,\n                item: item,\n                itemId: itemId,\n                actionData: actionData,\n                enabled: $isEnabled,\n                loading: $loading,\n                viewContainer: viewContainer\n            }\"\n            (instanceCreated)=\"onCustomActionCmpInst($event)\">\n        </ng-container>\n    </ng-template>\n    <ng-template #splitButton>\n        <p-splitButton\n            *ngIf=\"action.subactions.length > 0 && !action.subactionsAsMenu; else button\"\n            [icon]=\"action.button.icon ?? undefined\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (onClick)=\"triggerAction(action)\"\n            [class]=\"buttonClass\"\n            [model]=\"subactions\">\n        </p-splitButton>\n    </ng-template>\n    <ng-template #button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [icon]=\"$any(action.button.icon)\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [loading]=\"(($loading | async) ?? false) || ((inputLoading | async) ?? false)\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (click)=\"triggerAction(action, undefined, $event)\"\n            [class]=\"buttonClass\"></button>\n        <p-menu #subactionsMenu [model]=\"subactions\" [popup]=\"true\" styleClass=\"mng-action-menu\"></p-menu>\n    </ng-template>\n    <p-confirmDialog\n        *ngIf=\"actionOrSubactionHasRunConfirmation\"\n        [key]=\"action.actionName + '_' + cmpId\"\n        [baseZIndex]=\"50\"\n        appendTo=\"body\"\n        [closable]=\"action.runConfirmationDialogDescriptor?.closable ?? true\"></p-confirmDialog>\n</ng-container>\n", styles: [":host{display:inline-block}\n"] }]
+            args: [{ standalone: true, selector: 'mng-action', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, NgIf, ButtonModule, RippleModule, TooltipModule, MngParametrizePipe, MngComponentDirective, ConfirmDialogModule, SplitButtonModule, MenuModule], providers: [ConfirmationService], template: "<ng-container *ngIf=\"($isVisible | async) && ($isPermitted | async)\">\n    <a\n        *ngIf=\"actionLink && actionLink.url !== ''; else routerLink\"\n        pButton\n        pRipple\n        [label]=\"($label | async) ?? ''\"\n        [icon]=\"$any(action.button.icon)\"\n        [iconPos]=\"action.button.iconPosition\"\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        [pTooltip]=\"($tooltip | async) ?? undefined\"\n        [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n        [class]=\"buttonClass\"></a>\n    <ng-template #routerLink>\n        <a\n            *ngIf=\"actionLink; else customComponent\"\n            pButton\n            pRipple\n            [icon]=\"$any(action.button.icon)\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [target]=\"actionLink.target\"\n            [replaceUrl]=\"actionLink.replaceUrl\"\n            [routerLink]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false) ? null : (actionLink.pathSegments | parametrize : itemId : item : actionData)\"\n            [relativeTo]=\"route\"\n            [queryParams]=\"actionLink.queryParams | parametrize : itemId : item : actionData\"\n            [queryParamsHandling]=\"actionLink.queryParamsHandling\"\n            [class.disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [class]=\"buttonClass\"></a>\n    </ng-template>\n    <ng-template #customComponent>\n        <ng-container\n            *ngIf=\"action.component; else splitButton\"\n            [mngComponent]=\"action.component\"\n            [inputs]=\"{\n                action: action,\n                item: item,\n                itemId: itemId,\n                actionData: actionData,\n                enabled: $isEnabled,\n                loading: $loading,\n                viewContainer: viewContainer\n            }\"\n            (instanceCreated)=\"onCustomActionCmpInst($event)\">\n        </ng-container>\n    </ng-template>\n    <ng-template #splitButton>\n        <p-splitButton\n            *ngIf=\"action.subactions.length > 0 && !action.subactionsAsMenu; else button\"\n            [icon]=\"action.button.icon ?? undefined\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (onClick)=\"triggerAction(action)\"\n            [class]=\"buttonClass\"\n            [model]=\"subactions\">\n        </p-splitButton>\n    </ng-template>\n    <ng-template #button>\n        <button\n            pButton\n            pRipple\n            type=\"button\"\n            [icon]=\"$any(action.button.icon)\"\n            [iconPos]=\"action.button.iconPosition\"\n            [label]=\"($label | async) ?? ''\"\n            [pTooltip]=\"($tooltip | async) ?? undefined\"\n            [tooltipPosition]=\"action.button.tooltipPosition ?? undefined\"\n            [loading]=\"(($loading | async) ?? false) || ((inputLoading | async) ?? false)\"\n            [disabled]=\"($isEnabled | async) === false || ((inputDisabled | async) ?? false)\"\n            (click)=\"triggerAction(action, undefined, $event)\"\n            [class]=\"buttonClass\"></button>\n        <p-menu #subactionsMenu [model]=\"subactions\" [popup]=\"true\" styleClass=\"mng-action-menu\"></p-menu>\n    </ng-template>\n    <p-confirmDialog\n        *ngIf=\"actionOrSubactionHasRunConfirmation\"\n        [key]=\"action.actionName + '_' + cmpId\"\n        [baseZIndex]=\"50\"\n        appendTo=\"body\"\n        [closable]=\"action.runConfirmationDialogDescriptor?.closable ?? true\"></p-confirmDialog>\n</ng-container>\n", styles: [":host{display:inline-block}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.TranslateService }, { type: MngAuthorizationService }, { type: MngActionExecutorService }, { type: i1$1.ConfirmationService }, { type: MngViewContainerComponentService, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { hostClass: [{
@@ -12292,7 +12318,7 @@ class MngTableComponent {
         this.layoutPreferences = {};
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MngTableComponent, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.TranslateService }, { token: MngCommonsService }, { token: MngActionExecutorService }, { token: MngViewContainerComponentService, optional: true }, { token: MngLocalStorageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MngTableComponent, isStandalone: true, 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", globalFilterFieldsInit: ["globalFilterFields", "globalFilterFieldsInit"] }, 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]=\"tableFullHeightOffset ? '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]=\"descriptor?.dataKeyProperty\"\n        [lazy]=\"isLazy\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"isPagination && !infiniteScroll\"\n        [rows]=\"infiniteScroll ? 20 : rows\"\n        [first]=\"infiniteScroll ? 0 : offset\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"infiniteScroll ? undefined : rowsPerPageOptions\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"multiSortMeta\"\n        [filters]=\"filterMetadata\"\n        [globalFilterFields]=\"globalFilterFields\"\n        sortMode=\"multiple\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [selectionMode]=\"selectionEnabled ? selectionMode : null\"\n        [scrollable]=\"true\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualScrollItemSize]=\"rowHeight\"\n        scrollHeight=\"flex\"\n        [rowHover]=\"descriptor?.hasHover ?? true\"\n        [styleClass]=\"className\"\n        [resizableColumns]=\"descriptor?.hasResizableColumns ?? false\"\n        [columnResizeMode]=\"descriptor?.columnResizeMode ?? 'fit'\"\n        [reorderableColumns]=\"areColumnsReorderable\"\n        [columns]=\"visibleColumns\"\n        (onColResize)=\"onTableColumnResize($event)\"\n        (onColReorder)=\"onColumnReorder($event)\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\">\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'\" style=\"min-width: 36px\" pFrozenColumn>\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\" pFrozenColumn></th>\n                <ng-container *ngFor=\"let col of columns\">\n                    <ng-container *ngIf=\"col.isVisible\">\n                        <ng-template #sortableColumnTHTemplate>\n                            <div class=\"flex justify-content-between align-items-center\">\n                                {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                                <p-sortIcon [field]=\"col.descriptor.property\"></p-sortIcon>\n                            </div>\n                        </ng-template>\n                        <ng-template #nonSortableColumnTHTemplate>\n                            {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                        </ng-template>\n                        <th\n                            *ngIf=\"col.descriptor.isReorderable\"\n                            pResizableColumn\n                            pReorderableColumn\n                            [id]=\"col.descriptor.property\"\n                            [pSortableColumn]=\"col.descriptor.property\"\n                            [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                            [class]=\"\n                                col.descriptor.headerClassName +\n                                (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.descriptor.filterDescriptor\n                                    ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType\n                                    : '')\n                            \">\n                            <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                        </th>\n                        <th\n                            *ngIf=\"!col.descriptor.isReorderable\"\n                            pResizableColumn\n                            [id]=\"col.descriptor.property\"\n                            [pSortableColumn]=\"col.descriptor.property\"\n                            [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                            [class]=\"\n                                col.descriptor.headerClassName +\n                                (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.descriptor.filterDescriptor\n                                    ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType\n                                    : '')\n                            \">\n                            <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                        </th>\n                    </ng-container>\n                </ng-container>\n                <th\n                    *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    alignFrozen=\"right\"\n                    class=\"text-right\">\n                    <p-multiSelect\n                        #columnToggleMultiselect\n                        *ngIf=\"areColumnsToggleable || areColumnsReorderable || descriptor?.hasResizableColumns\"\n                        class=\"col-8 adjustTableDropdown p-button-primary\"\n                        appendTo=\"body\"\n                        optionDisabled=\"disabled\"\n                        [filter]=\"false\"\n                        [options]=\"columns\"\n                        [(ngModel)]=\"visibleColumns\"\n                        [pTooltip]=\"'mngTable.adjustTable' | translate\"\n                        tooltipPosition=\"left\"\n                        defaultLabel=\"\"\n                        dropdownIcon=\"pi pi-sliders-h\"\n                        [displaySelectedLabel]=\"false\"\n                        (onChange)=\"onColumnToggle($event)\">\n                        <ng-template pTemplate=\"filter\">\n                            <div class=\"p-checkbox p-component ml-1\" [ngClass]=\"{'p-checkbox-disabled': !areColumnsToggleable}\">\n                                <div class=\"p-hidden-accessible\">\n                                    <input\n                                        type=\"checkbox\"\n                                        readonly=\"readonly\"\n                                        [checked]=\"columnToggleMultiselect.allChecked\"\n                                        (focus)=\"columnToggleMultiselect.onHeaderCheckboxFocus()\"\n                                        (blur)=\"columnToggleMultiselect.onHeaderCheckboxBlur()\"\n                                        (keydown.space)=\"columnToggleMultiselect.toggleAll($event)\"\n                                        [disabled]=\"!areColumnsToggleable\" />\n                                </div>\n                                <div\n                                    class=\"p-checkbox-box\"\n                                    role=\"checkbox\"\n                                    [attr.aria-checked]=\"columnToggleMultiselect.allChecked\"\n                                    [ngClass]=\"{\n                                        'p-highlight': columnToggleMultiselect.allChecked,\n                                        'p-focus': columnToggleMultiselect.headerCheckboxFocus,\n                                        'p-disabled': !areColumnsToggleable\n                                    }\"\n                                    (click)=\"columnToggleMultiselect.toggleAll($event)\">\n                                    <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': columnToggleMultiselect.allChecked}\"></span>\n                                </div>\n                            </div>\n                            <p-button\n                                icon=\"pi pi-replay\"\n                                styleClass=\"p-button-secondary\"\n                                [pTooltip]=\"'mngTable.resetLayout' | translate\"\n                                tooltipPosition=\"left\"\n                                (click)=\"resetDefaultLayout()\"></p-button>\n                        </ng-template>\n                        <ng-template let-item pTemplate=\"item\">\n                            {{ item.descriptor.title ?? (item.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                        </ng-template>\n                    </p-multiSelect>\n                </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\" pFrozenColumn></th>\n                <ng-container *ngFor=\"let col of columns\">\n                    <th\n                        *ngIf=\"col.isVisible\"\n                        [class]=\"\n                            (col.descriptor.filterDescriptor ? 'mng-column-filter-' + col.descriptor.filterDescriptor.filterType + ' ' : ' ') +\n                            col.descriptor.filterDescriptor?.columnClassName\n                        \"\n                        [style.width.%]=\"col.descriptor.filterDescriptor?.columnWidth ?? col.descriptor.width\"\n                        [style.min-width.px]=\"col.descriptor.filterDescriptor?.columnMinWidth ?? col.descriptor.minWidth\"\n                        [style.max-width.px]=\"col.descriptor.maxWidth\">\n                        <div class=\"flex\" *ngIf=\"col.descriptor.filterDescriptor\">\n                            <mng-table-column-filter [display]=\"descriptor!.filterDisplay\" [descriptor]=\"col.descriptor.filterDescriptor\"></mng-table-column-filter>\n                        </div>\n                    </th>\n                </ng-container>\n                <th\n                    *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    alignFrozen=\"right\"></th>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n            <tr\n                [style.height.px]=\"rowHeight\"\n                [ngClass]=\"descriptor?.rowClassName | mngClassMapPipe : descriptor?.rowClassNameMapFn : item | mngLocaleDefaultRowClass : descriptor : item\">\n                <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"min-width: 36px\" pFrozenColumn>\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn>\n                    <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                </td>\n                <ng-container *ngFor=\"let col of columns\">\n                    <td\n                        *ngIf=\"col.isVisible\"\n                        (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                        [class]=\"\n                            col.descriptor.className +\n                            (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.descriptor.filterDescriptor\n                                ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType\n                                : '')\n                        \"\n                        [class.clickable]=\"isColumnClickable\"\n                        [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                        [style.min-width.px]=\"col.descriptor.minWidth\"\n                        [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                        <span class=\"p-column-title\">{{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}</span>\n                        <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                    </td>\n                </ng-container>\n                <td\n                    *ngIf=\"showInlineActionsColumn\"\n                    class=\"column-action justify-content-end text-right\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    alignFrozen=\"right\">\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                            [viewContainer]=\"viewContainer\"\n                            [hostComponent]=\"this\"\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=\"loadingicon\">\n            <div class=\"flex flex-column align-items-center\">\n                <i [class]=\"'text-white text-4xl pi-spin ' + descriptor?.loadingIcon\" *ngIf=\"descriptor?.loadingIcon\"></i>\n                <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': descriptor?.loadingIcon}\" *ngIf=\"descriptor?.loadingText\">\n                    {{ descriptor?.loadingText ?? '' | translate }}\n                </div>\n            </div>\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", styles: ["::ng-deep .adjustTableDropdown .p-multiselect-label-container{width:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i4$4.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "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", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i4$4.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i4$4.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i4$4.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i4$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i4$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i4$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i4$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs", "attachToHost"], outputs: ["instanceCreated"] }, { kind: "pipe", type: MngI18nPropertyPipe, name: "i18nProperty" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: ["descriptor", "display"] }, { kind: "pipe", type: MngClassMapPipe, name: "mngClassMapPipe" }, { kind: "pipe", type: MngLocaleDefaultRowClassPipe, name: "mngLocaleDefaultRowClass" }, { kind: "component", type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { kind: "component", type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "queryParam", "dataProvider", "hostComponent", "route", "disabled", "loading", "viewContainer", "selectedItems"], outputs: ["finish"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i6$3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$2.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MngTableComponent, isStandalone: true, 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", globalFilterFieldsInit: ["globalFilterFields", "globalFilterFieldsInit"] }, 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]=\"tableFullHeightOffset ? '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]=\"descriptor?.dataKeyProperty\"\n        [lazy]=\"isLazy\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"isPagination && !infiniteScroll\"\n        [rows]=\"infiniteScroll ? 20 : rows\"\n        [first]=\"infiniteScroll ? 0 : offset\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"infiniteScroll ? undefined : rowsPerPageOptions\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"multiSortMeta\"\n        [filters]=\"filterMetadata\"\n        [globalFilterFields]=\"globalFilterFields\"\n        sortMode=\"multiple\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [selectionMode]=\"selectionEnabled ? selectionMode : null\"\n        [scrollable]=\"true\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualScrollItemSize]=\"rowHeight\"\n        scrollHeight=\"flex\"\n        [rowHover]=\"descriptor?.hasHover ?? true\"\n        [styleClass]=\"className\"\n        [resizableColumns]=\"descriptor?.hasResizableColumns ?? false\"\n        [columnResizeMode]=\"descriptor?.columnResizeMode ?? 'fit'\"\n        [reorderableColumns]=\"areColumnsReorderable\"\n        [columns]=\"visibleColumns\"\n        (onColResize)=\"onTableColumnResize($event)\"\n        (onColReorder)=\"onColumnReorder($event)\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\">\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'\" style=\"min-width: 36px\" pFrozenColumn>\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\" pFrozenColumn></th>\n                <ng-container *ngFor=\"let col of columns\">\n                    <ng-container *ngIf=\"col.isVisible\">\n                        <ng-template #sortableColumnTHTemplate>\n                            <div class=\"flex justify-content-between align-items-center\">\n                                {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                                <p-sortIcon [field]=\"col.descriptor.property\"></p-sortIcon>\n                            </div>\n                        </ng-template>\n                        <ng-template #nonSortableColumnTHTemplate>\n                            {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                        </ng-template>\n                        <th\n                            *ngIf=\"col.descriptor.isReorderable\"\n                            pResizableColumn\n                            pReorderableColumn\n                            [id]=\"col.descriptor.property\"\n                            [pSortableColumn]=\"col.descriptor.property\"\n                            [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                            [class]=\"\n                                col.descriptor.headerClassName +\n                                (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.descriptor.filterDescriptor\n                                    ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType\n                                    : '')\n                            \">\n                            <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                        </th>\n                        <th\n                            *ngIf=\"!col.descriptor.isReorderable\"\n                            pResizableColumn\n                            [id]=\"col.descriptor.property\"\n                            [pSortableColumn]=\"col.descriptor.property\"\n                            [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                            [class]=\"\n                                col.descriptor.headerClassName +\n                                (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.descriptor.filterDescriptor\n                                    ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType\n                                    : '')\n                            \">\n                            <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                        </th>\n                    </ng-container>\n                </ng-container>\n                <th\n                    *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    alignFrozen=\"right\"\n                    class=\"text-right\">\n                    <p-multiSelect\n                        #columnToggleMultiselect\n                        *ngIf=\"areColumnsToggleable || areColumnsReorderable || descriptor?.hasResizableColumns\"\n                        styleClass=\"p-button-primary mng-table-columns-multiselect\"\n                        appendTo=\"body\"\n                        optionDisabled=\"disabled\"\n                        [filter]=\"false\"\n                        [options]=\"columns\"\n                        [(ngModel)]=\"visibleColumns\"\n                        [pTooltip]=\"'mngTable.adjustTable' | translate\"\n                        tooltipPosition=\"left\"\n                        defaultLabel=\"\"\n                        dropdownIcon=\"pi pi-sliders-h\"\n                        [displaySelectedLabel]=\"false\"\n                        (onChange)=\"onColumnToggle($event)\">\n                        <ng-template pTemplate=\"filter\">\n                            <div class=\"p-checkbox p-component ml-1\" [ngClass]=\"{'p-checkbox-disabled': !areColumnsToggleable}\">\n                                <div class=\"p-hidden-accessible\">\n                                    <input\n                                        type=\"checkbox\"\n                                        readonly=\"readonly\"\n                                        [checked]=\"columnToggleMultiselect.allChecked\"\n                                        (focus)=\"columnToggleMultiselect.onHeaderCheckboxFocus()\"\n                                        (blur)=\"columnToggleMultiselect.onHeaderCheckboxBlur()\"\n                                        (keydown.space)=\"columnToggleMultiselect.toggleAll($event)\"\n                                        [disabled]=\"!areColumnsToggleable\" />\n                                </div>\n                                <div\n                                    class=\"p-checkbox-box\"\n                                    role=\"checkbox\"\n                                    [attr.aria-checked]=\"columnToggleMultiselect.allChecked\"\n                                    [ngClass]=\"{\n                                        'p-highlight': columnToggleMultiselect.allChecked,\n                                        'p-focus': columnToggleMultiselect.headerCheckboxFocus,\n                                        'p-disabled': !areColumnsToggleable\n                                    }\"\n                                    (click)=\"columnToggleMultiselect.toggleAll($event)\">\n                                    <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': columnToggleMultiselect.allChecked}\"></span>\n                                </div>\n                            </div>\n                            <p-button\n                                icon=\"pi pi-replay\"\n                                styleClass=\"p-button-secondary\"\n                                [pTooltip]=\"'mngTable.resetLayout' | translate\"\n                                tooltipPosition=\"left\"\n                                (click)=\"resetDefaultLayout()\"></p-button>\n                        </ng-template>\n                        <ng-template let-item pTemplate=\"item\">\n                            {{ item.descriptor.title ?? (item.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                        </ng-template>\n                    </p-multiSelect>\n                </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\" pFrozenColumn></th>\n                <ng-container *ngFor=\"let col of columns\">\n                    <th\n                        *ngIf=\"col.isVisible\"\n                        [class]=\"\n                            (col.descriptor.filterDescriptor ? 'mng-column-filter-' + col.descriptor.filterDescriptor.filterType + ' ' : ' ') +\n                            col.descriptor.filterDescriptor?.columnClassName\n                        \"\n                        [style.width.%]=\"col.descriptor.filterDescriptor?.columnWidth ?? col.descriptor.width\"\n                        [style.min-width.px]=\"col.descriptor.filterDescriptor?.columnMinWidth ?? col.descriptor.minWidth\"\n                        [style.max-width.px]=\"col.descriptor.maxWidth\">\n                        <div class=\"flex\" *ngIf=\"col.descriptor.filterDescriptor\">\n                            <mng-table-column-filter [display]=\"descriptor!.filterDisplay\" [descriptor]=\"col.descriptor.filterDescriptor\"></mng-table-column-filter>\n                        </div>\n                    </th>\n                </ng-container>\n                <th\n                    *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    alignFrozen=\"right\"></th>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n            <tr\n                [style.height.px]=\"rowHeight\"\n                [ngClass]=\"descriptor?.rowClassName | mngClassMapPipe : descriptor?.rowClassNameMapFn : item | mngLocaleDefaultRowClass : descriptor : item\">\n                <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"min-width: 36px\" pFrozenColumn>\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn>\n                    <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                </td>\n                <ng-container *ngFor=\"let col of columns\">\n                    <td\n                        *ngIf=\"col.isVisible\"\n                        (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                        [class]=\"\n                            col.descriptor.className +\n                            (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.descriptor.filterDescriptor\n                                ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType\n                                : '')\n                        \"\n                        [class.clickable]=\"isColumnClickable\"\n                        [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                        [style.min-width.px]=\"col.descriptor.minWidth\"\n                        [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                        <span class=\"p-column-title\">{{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}</span>\n                        <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                    </td>\n                </ng-container>\n                <td\n                    *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n                    class=\"column-action justify-content-end text-right\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    alignFrozen=\"right\">\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                            [viewContainer]=\"viewContainer\"\n                            [hostComponent]=\"this\"\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=\"loadingicon\">\n            <div class=\"flex flex-column align-items-center\">\n                <i [class]=\"'text-white text-4xl pi-spin ' + descriptor?.loadingIcon\" *ngIf=\"descriptor?.loadingIcon\"></i>\n                <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': descriptor?.loadingIcon}\" *ngIf=\"descriptor?.loadingText\">\n                    {{ descriptor?.loadingText ?? '' | translate }}\n                </div>\n            </div>\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i4$4.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "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", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i4$4.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i4$4.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i4$4.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i4$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i4$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i4$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i4$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs", "attachToHost"], outputs: ["instanceCreated"] }, { kind: "pipe", type: MngI18nPropertyPipe, name: "i18nProperty" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: ["descriptor", "display"] }, { kind: "pipe", type: MngClassMapPipe, name: "mngClassMapPipe" }, { kind: "pipe", type: MngLocaleDefaultRowClassPipe, name: "mngLocaleDefaultRowClass" }, { kind: "component", type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { kind: "component", type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "queryParam", "dataProvider", "hostComponent", "route", "disabled", "loading", "viewContainer", "selectedItems"], outputs: ["finish"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i6$3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$2.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MngTableComponent, decorators: [{
             type: Component,
@@ -12317,7 +12343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         ButtonModule,
                         TooltipModule,
                         FormsModule
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.height]=\"tableFullHeightOffset ? '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]=\"descriptor?.dataKeyProperty\"\n        [lazy]=\"isLazy\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"isPagination && !infiniteScroll\"\n        [rows]=\"infiniteScroll ? 20 : rows\"\n        [first]=\"infiniteScroll ? 0 : offset\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"infiniteScroll ? undefined : rowsPerPageOptions\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"multiSortMeta\"\n        [filters]=\"filterMetadata\"\n        [globalFilterFields]=\"globalFilterFields\"\n        sortMode=\"multiple\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [selectionMode]=\"selectionEnabled ? selectionMode : null\"\n        [scrollable]=\"true\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualScrollItemSize]=\"rowHeight\"\n        scrollHeight=\"flex\"\n        [rowHover]=\"descriptor?.hasHover ?? true\"\n        [styleClass]=\"className\"\n        [resizableColumns]=\"descriptor?.hasResizableColumns ?? false\"\n        [columnResizeMode]=\"descriptor?.columnResizeMode ?? 'fit'\"\n        [reorderableColumns]=\"areColumnsReorderable\"\n        [columns]=\"visibleColumns\"\n        (onColResize)=\"onTableColumnResize($event)\"\n        (onColReorder)=\"onColumnReorder($event)\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\">\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'\" style=\"min-width: 36px\" pFrozenColumn>\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\" pFrozenColumn></th>\n                <ng-container *ngFor=\"let col of columns\">\n                    <ng-container *ngIf=\"col.isVisible\">\n                        <ng-template #sortableColumnTHTemplate>\n                            <div class=\"flex justify-content-between align-items-center\">\n                                {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                                <p-sortIcon [field]=\"col.descriptor.property\"></p-sortIcon>\n                            </div>\n                        </ng-template>\n                        <ng-template #nonSortableColumnTHTemplate>\n                            {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                        </ng-template>\n                        <th\n                            *ngIf=\"col.descriptor.isReorderable\"\n                            pResizableColumn\n                            pReorderableColumn\n                            [id]=\"col.descriptor.property\"\n                            [pSortableColumn]=\"col.descriptor.property\"\n                            [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                            [class]=\"\n                                col.descriptor.headerClassName +\n                                (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.descriptor.filterDescriptor\n                                    ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType\n                                    : '')\n                            \">\n                            <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                        </th>\n                        <th\n                            *ngIf=\"!col.descriptor.isReorderable\"\n                            pResizableColumn\n                            [id]=\"col.descriptor.property\"\n                            [pSortableColumn]=\"col.descriptor.property\"\n                            [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                            [class]=\"\n                                col.descriptor.headerClassName +\n                                (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.descriptor.filterDescriptor\n                                    ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType\n                                    : '')\n                            \">\n                            <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                        </th>\n                    </ng-container>\n                </ng-container>\n                <th\n                    *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    alignFrozen=\"right\"\n                    class=\"text-right\">\n                    <p-multiSelect\n                        #columnToggleMultiselect\n                        *ngIf=\"areColumnsToggleable || areColumnsReorderable || descriptor?.hasResizableColumns\"\n                        class=\"col-8 adjustTableDropdown p-button-primary\"\n                        appendTo=\"body\"\n                        optionDisabled=\"disabled\"\n                        [filter]=\"false\"\n                        [options]=\"columns\"\n                        [(ngModel)]=\"visibleColumns\"\n                        [pTooltip]=\"'mngTable.adjustTable' | translate\"\n                        tooltipPosition=\"left\"\n                        defaultLabel=\"\"\n                        dropdownIcon=\"pi pi-sliders-h\"\n                        [displaySelectedLabel]=\"false\"\n                        (onChange)=\"onColumnToggle($event)\">\n                        <ng-template pTemplate=\"filter\">\n                            <div class=\"p-checkbox p-component ml-1\" [ngClass]=\"{'p-checkbox-disabled': !areColumnsToggleable}\">\n                                <div class=\"p-hidden-accessible\">\n                                    <input\n                                        type=\"checkbox\"\n                                        readonly=\"readonly\"\n                                        [checked]=\"columnToggleMultiselect.allChecked\"\n                                        (focus)=\"columnToggleMultiselect.onHeaderCheckboxFocus()\"\n                                        (blur)=\"columnToggleMultiselect.onHeaderCheckboxBlur()\"\n                                        (keydown.space)=\"columnToggleMultiselect.toggleAll($event)\"\n                                        [disabled]=\"!areColumnsToggleable\" />\n                                </div>\n                                <div\n                                    class=\"p-checkbox-box\"\n                                    role=\"checkbox\"\n                                    [attr.aria-checked]=\"columnToggleMultiselect.allChecked\"\n                                    [ngClass]=\"{\n                                        'p-highlight': columnToggleMultiselect.allChecked,\n                                        'p-focus': columnToggleMultiselect.headerCheckboxFocus,\n                                        'p-disabled': !areColumnsToggleable\n                                    }\"\n                                    (click)=\"columnToggleMultiselect.toggleAll($event)\">\n                                    <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': columnToggleMultiselect.allChecked}\"></span>\n                                </div>\n                            </div>\n                            <p-button\n                                icon=\"pi pi-replay\"\n                                styleClass=\"p-button-secondary\"\n                                [pTooltip]=\"'mngTable.resetLayout' | translate\"\n                                tooltipPosition=\"left\"\n                                (click)=\"resetDefaultLayout()\"></p-button>\n                        </ng-template>\n                        <ng-template let-item pTemplate=\"item\">\n                            {{ item.descriptor.title ?? (item.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                        </ng-template>\n                    </p-multiSelect>\n                </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\" pFrozenColumn></th>\n                <ng-container *ngFor=\"let col of columns\">\n                    <th\n                        *ngIf=\"col.isVisible\"\n                        [class]=\"\n                            (col.descriptor.filterDescriptor ? 'mng-column-filter-' + col.descriptor.filterDescriptor.filterType + ' ' : ' ') +\n                            col.descriptor.filterDescriptor?.columnClassName\n                        \"\n                        [style.width.%]=\"col.descriptor.filterDescriptor?.columnWidth ?? col.descriptor.width\"\n                        [style.min-width.px]=\"col.descriptor.filterDescriptor?.columnMinWidth ?? col.descriptor.minWidth\"\n                        [style.max-width.px]=\"col.descriptor.maxWidth\">\n                        <div class=\"flex\" *ngIf=\"col.descriptor.filterDescriptor\">\n                            <mng-table-column-filter [display]=\"descriptor!.filterDisplay\" [descriptor]=\"col.descriptor.filterDescriptor\"></mng-table-column-filter>\n                        </div>\n                    </th>\n                </ng-container>\n                <th\n                    *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    alignFrozen=\"right\"></th>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n            <tr\n                [style.height.px]=\"rowHeight\"\n                [ngClass]=\"descriptor?.rowClassName | mngClassMapPipe : descriptor?.rowClassNameMapFn : item | mngLocaleDefaultRowClass : descriptor : item\">\n                <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"min-width: 36px\" pFrozenColumn>\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn>\n                    <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                </td>\n                <ng-container *ngFor=\"let col of columns\">\n                    <td\n                        *ngIf=\"col.isVisible\"\n                        (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                        [class]=\"\n                            col.descriptor.className +\n                            (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.descriptor.filterDescriptor\n                                ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType\n                                : '')\n                        \"\n                        [class.clickable]=\"isColumnClickable\"\n                        [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                        [style.min-width.px]=\"col.descriptor.minWidth\"\n                        [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                        <span class=\"p-column-title\">{{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}</span>\n                        <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                    </td>\n                </ng-container>\n                <td\n                    *ngIf=\"showInlineActionsColumn\"\n                    class=\"column-action justify-content-end text-right\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    alignFrozen=\"right\">\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                            [viewContainer]=\"viewContainer\"\n                            [hostComponent]=\"this\"\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=\"loadingicon\">\n            <div class=\"flex flex-column align-items-center\">\n                <i [class]=\"'text-white text-4xl pi-spin ' + descriptor?.loadingIcon\" *ngIf=\"descriptor?.loadingIcon\"></i>\n                <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': descriptor?.loadingIcon}\" *ngIf=\"descriptor?.loadingText\">\n                    {{ descriptor?.loadingText ?? '' | translate }}\n                </div>\n            </div>\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", styles: ["::ng-deep .adjustTableDropdown .p-multiselect-label-container{width:0}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.height]=\"tableFullHeightOffset ? '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]=\"descriptor?.dataKeyProperty\"\n        [lazy]=\"isLazy\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"isPagination && !infiniteScroll\"\n        [rows]=\"infiniteScroll ? 20 : rows\"\n        [first]=\"infiniteScroll ? 0 : offset\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"infiniteScroll ? undefined : rowsPerPageOptions\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"multiSortMeta\"\n        [filters]=\"filterMetadata\"\n        [globalFilterFields]=\"globalFilterFields\"\n        sortMode=\"multiple\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [selectionMode]=\"selectionEnabled ? selectionMode : null\"\n        [scrollable]=\"true\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualScrollItemSize]=\"rowHeight\"\n        scrollHeight=\"flex\"\n        [rowHover]=\"descriptor?.hasHover ?? true\"\n        [styleClass]=\"className\"\n        [resizableColumns]=\"descriptor?.hasResizableColumns ?? false\"\n        [columnResizeMode]=\"descriptor?.columnResizeMode ?? 'fit'\"\n        [reorderableColumns]=\"areColumnsReorderable\"\n        [columns]=\"visibleColumns\"\n        (onColResize)=\"onTableColumnResize($event)\"\n        (onColReorder)=\"onColumnReorder($event)\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\">\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'\" style=\"min-width: 36px\" pFrozenColumn>\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\" pFrozenColumn></th>\n                <ng-container *ngFor=\"let col of columns\">\n                    <ng-container *ngIf=\"col.isVisible\">\n                        <ng-template #sortableColumnTHTemplate>\n                            <div class=\"flex justify-content-between align-items-center\">\n                                {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                                <p-sortIcon [field]=\"col.descriptor.property\"></p-sortIcon>\n                            </div>\n                        </ng-template>\n                        <ng-template #nonSortableColumnTHTemplate>\n                            {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                        </ng-template>\n                        <th\n                            *ngIf=\"col.descriptor.isReorderable\"\n                            pResizableColumn\n                            pReorderableColumn\n                            [id]=\"col.descriptor.property\"\n                            [pSortableColumn]=\"col.descriptor.property\"\n                            [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                            [class]=\"\n                                col.descriptor.headerClassName +\n                                (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.descriptor.filterDescriptor\n                                    ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType\n                                    : '')\n                            \">\n                            <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                        </th>\n                        <th\n                            *ngIf=\"!col.descriptor.isReorderable\"\n                            pResizableColumn\n                            [id]=\"col.descriptor.property\"\n                            [pSortableColumn]=\"col.descriptor.property\"\n                            [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                            [class]=\"\n                                col.descriptor.headerClassName +\n                                (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.descriptor.filterDescriptor\n                                    ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType\n                                    : '')\n                            \">\n                            <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                        </th>\n                    </ng-container>\n                </ng-container>\n                <th\n                    *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    alignFrozen=\"right\"\n                    class=\"text-right\">\n                    <p-multiSelect\n                        #columnToggleMultiselect\n                        *ngIf=\"areColumnsToggleable || areColumnsReorderable || descriptor?.hasResizableColumns\"\n                        styleClass=\"p-button-primary mng-table-columns-multiselect\"\n                        appendTo=\"body\"\n                        optionDisabled=\"disabled\"\n                        [filter]=\"false\"\n                        [options]=\"columns\"\n                        [(ngModel)]=\"visibleColumns\"\n                        [pTooltip]=\"'mngTable.adjustTable' | translate\"\n                        tooltipPosition=\"left\"\n                        defaultLabel=\"\"\n                        dropdownIcon=\"pi pi-sliders-h\"\n                        [displaySelectedLabel]=\"false\"\n                        (onChange)=\"onColumnToggle($event)\">\n                        <ng-template pTemplate=\"filter\">\n                            <div class=\"p-checkbox p-component ml-1\" [ngClass]=\"{'p-checkbox-disabled': !areColumnsToggleable}\">\n                                <div class=\"p-hidden-accessible\">\n                                    <input\n                                        type=\"checkbox\"\n                                        readonly=\"readonly\"\n                                        [checked]=\"columnToggleMultiselect.allChecked\"\n                                        (focus)=\"columnToggleMultiselect.onHeaderCheckboxFocus()\"\n                                        (blur)=\"columnToggleMultiselect.onHeaderCheckboxBlur()\"\n                                        (keydown.space)=\"columnToggleMultiselect.toggleAll($event)\"\n                                        [disabled]=\"!areColumnsToggleable\" />\n                                </div>\n                                <div\n                                    class=\"p-checkbox-box\"\n                                    role=\"checkbox\"\n                                    [attr.aria-checked]=\"columnToggleMultiselect.allChecked\"\n                                    [ngClass]=\"{\n                                        'p-highlight': columnToggleMultiselect.allChecked,\n                                        'p-focus': columnToggleMultiselect.headerCheckboxFocus,\n                                        'p-disabled': !areColumnsToggleable\n                                    }\"\n                                    (click)=\"columnToggleMultiselect.toggleAll($event)\">\n                                    <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': columnToggleMultiselect.allChecked}\"></span>\n                                </div>\n                            </div>\n                            <p-button\n                                icon=\"pi pi-replay\"\n                                styleClass=\"p-button-secondary\"\n                                [pTooltip]=\"'mngTable.resetLayout' | translate\"\n                                tooltipPosition=\"left\"\n                                (click)=\"resetDefaultLayout()\"></p-button>\n                        </ng-template>\n                        <ng-template let-item pTemplate=\"item\">\n                            {{ item.descriptor.title ?? (item.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n                        </ng-template>\n                    </p-multiSelect>\n                </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\" pFrozenColumn></th>\n                <ng-container *ngFor=\"let col of columns\">\n                    <th\n                        *ngIf=\"col.isVisible\"\n                        [class]=\"\n                            (col.descriptor.filterDescriptor ? 'mng-column-filter-' + col.descriptor.filterDescriptor.filterType + ' ' : ' ') +\n                            col.descriptor.filterDescriptor?.columnClassName\n                        \"\n                        [style.width.%]=\"col.descriptor.filterDescriptor?.columnWidth ?? col.descriptor.width\"\n                        [style.min-width.px]=\"col.descriptor.filterDescriptor?.columnMinWidth ?? col.descriptor.minWidth\"\n                        [style.max-width.px]=\"col.descriptor.maxWidth\">\n                        <div class=\"flex\" *ngIf=\"col.descriptor.filterDescriptor\">\n                            <mng-table-column-filter [display]=\"descriptor!.filterDisplay\" [descriptor]=\"col.descriptor.filterDescriptor\"></mng-table-column-filter>\n                        </div>\n                    </th>\n                </ng-container>\n                <th\n                    *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    alignFrozen=\"right\"></th>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n            <tr\n                [style.height.px]=\"rowHeight\"\n                [ngClass]=\"descriptor?.rowClassName | mngClassMapPipe : descriptor?.rowClassNameMapFn : item | mngLocaleDefaultRowClass : descriptor : item\">\n                <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"min-width: 36px\" pFrozenColumn>\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn>\n                    <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                </td>\n                <ng-container *ngFor=\"let col of columns\">\n                    <td\n                        *ngIf=\"col.isVisible\"\n                        (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                        [class]=\"\n                            col.descriptor.className +\n                            (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.descriptor.filterDescriptor\n                                ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType\n                                : '')\n                        \"\n                        [class.clickable]=\"isColumnClickable\"\n                        [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                        [style.min-width.px]=\"col.descriptor.minWidth\"\n                        [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                        <span class=\"p-column-title\">{{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}</span>\n                        <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                    </td>\n                </ng-container>\n                <td\n                    *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n                    class=\"column-action justify-content-end text-right\"\n                    [style.min-width.px]=\"columnActionMinWidth\"\n                    pFrozenColumn\n                    alignFrozen=\"right\">\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                            [viewContainer]=\"viewContainer\"\n                            [hostComponent]=\"this\"\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=\"loadingicon\">\n            <div class=\"flex flex-column align-items-center\">\n                <i [class]=\"'text-white text-4xl pi-spin ' + descriptor?.loadingIcon\" *ngIf=\"descriptor?.loadingIcon\"></i>\n                <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': descriptor?.loadingIcon}\" *ngIf=\"descriptor?.loadingText\">\n                    {{ descriptor?.loadingText ?? '' | translate }}\n                </div>\n            </div>\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: i2.TranslateService }, { type: MngCommonsService }, { type: MngActionExecutorService }, { type: MngViewContainerComponentService, decorators: [{
                     type: Optional
                 }] }, { type: MngLocalStorageService }]; }, propDecorators: { initialDescriptor: [{
@@ -13274,50 +13300,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
         }] });
 
 class MngFormlyFieldCustomComponent extends FieldType {
+    constructor() {
+        super(...arguments);
+        this.inputs = {};
+    }
     ngOnInit() {
         this.descriptor = this.props.descriptor;
+        this.inputs = {
+            field: this.field,
+            model: this.model,
+            form: this.form,
+            options: this.options,
+            key: this.key,
+            formControl: this.formControl,
+            props: this.props,
+            showError: this.showError,
+            id: this.id,
+            formState: this.formState,
+            ...this.descriptor.customComponentInputs
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MngFormlyFieldCustomComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MngFormlyFieldCustomComponent, isStandalone: true, selector: "mng-formly-field-custom", usesInheritance: true, ngImport: i0, template: `
-        <ng-container
-            [mngComponent]="descriptor.customComponentType!"
-            [inputs]="{
-                field: field,
-                model: model,
-                form: form,
-                options: options,
-                key: key,
-                formControl: formControl,
-                props: props,
-                showError: showError,
-                id: id,
-                formState: formState,
-            }">
-        </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs", "attachToHost"], outputs: ["instanceCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MngFormlyFieldCustomComponent, isStandalone: true, selector: "mng-formly-field-custom", usesInheritance: true, ngImport: i0, template: ` <ng-container [mngComponent]="descriptor.customComponentType!" [inputs]="inputs"></ng-container> `, isInline: true, dependencies: [{ kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs", "attachToHost"], outputs: ["instanceCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MngFormlyFieldCustomComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: 'mng-formly-field-custom',
-                    template: `
-        <ng-container
-            [mngComponent]="descriptor.customComponentType!"
-            [inputs]="{
-                field: field,
-                model: model,
-                form: form,
-                options: options,
-                key: key,
-                formControl: formControl,
-                props: props,
-                showError: showError,
-                id: id,
-                formState: formState,
-            }">
-        </ng-container>
-    `,
+                    template: ` <ng-container [mngComponent]="descriptor.customComponentType!" [inputs]="inputs"></ng-container> `,
                     imports: [MngComponentDirective],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]