@mediusinc/mng-commons 3.0.0-rc.6 → 3.0.0-rc.7

package/fesm2022/mediusinc-mng-commons.mjs

@@ -1651,7 +1651,7 @@ class MngLoggerService {
     }
     _log(log) {
         const logConfig = (MngLoggerService._configurationService?.getConfigValue)?.('log');
-        if ((this.category && log.level < (logConfig?.category?.[this.category]?.level ?? this.defaultLogLevel)) ||
+        if ((this.category && log.level < (logConfig?.category?.[this.category]?.level ?? logConfig?.level ?? this.defaultLogLevel)) ||
             (!this.category && log.level < (logConfig?.level ?? this.defaultLogLevel))) {
             return;
         }
@@ -3093,6 +3093,8 @@ class MngConfigurationService {
 class MngRouterService {
     constructor(router) {
         this.router = router;
+        this.logger = inject(MngLoggerService).create('MngRouterService');
+        this.routesLoadedPropKey = '_loadedRoutes';
         this.lazyLoadedRoutesConfig = {};
     }
     getRouteLoadedChildren(path) {
@@ -3124,7 +3126,7 @@ class MngRouterService {
     }
     finishNavigation() {
         if (this.currentNavigationConfigLoaded && this.currentNavigationConfigModule) {
-            this.getLoadedRoutesFromRoute();
+            this.getLoadedRoutesFromRoute(true);
         }
         this.currentNavigationPath = undefined;
     }
@@ -3141,23 +3143,106 @@ class MngRouterService {
             }
             this.currentNavigationConfigModule = moduleKey;
         }
+        this.logger.trace(`Config load ${isEnd ? 'end' : 'start'} for ${this.currentNavigationConfigModule}`);
         const config = this.getOrCreateRouteForModule(this.currentNavigationConfigModule);
         config.route = route;
         config.isLoadEnd = isEnd;
         this.getLoadedRoutesFromRoute();
     }
-    getLoadedRoutesFromRoute() {
+    getLoadedRoutesFromRoute(isFinish = false) {
         if (!this.currentNavigationConfigModule ||
             !this.lazyLoadedRoutesConfig[this.currentNavigationConfigModule]?.route ||
             Array.isArray(this.lazyLoadedRoutesConfig[this.currentNavigationConfigModule].loadedRoutes)) {
             return;
         }
         this.lazyLoadedRoutesConfig[this.currentNavigationConfigModule].loadedRoutes =
-            this.lazyLoadedRoutesConfig[this.currentNavigationConfigModule].route['_loadedRoutes'];
+            this.lazyLoadedRoutesConfig[this.currentNavigationConfigModule].route[this.routesLoadedPropKey];
+        if (!Array.isArray(this.lazyLoadedRoutesConfig[this.currentNavigationConfigModule].loadedRoutes) && isFinish) {
+            // if is called from finish and no lazy loaded routes are matched from router events, try finding in route config, it should be there!
+            this.logger.trace(`Route loadedRoutes for ${this.currentNavigationConfigModule} not found, searching in router config now`);
+            const route = this.findRouteInRouteConfig(this.currentNavigationConfigModule);
+            if (route) {
+                this.lazyLoadedRoutesConfig[this.currentNavigationConfigModule].route = route;
+                this.lazyLoadedRoutesConfig[this.currentNavigationConfigModule].loadedRoutes =
+                    this.lazyLoadedRoutesConfig[this.currentNavigationConfigModule].route[this.routesLoadedPropKey];
+            }
+            else {
+                this.logger.warn(`Route loadedRoutes for ${this.currentNavigationConfigModule} were not found in router config`);
+            }
+        }
         if (typeof this.lazyLoadedRoutesConfig[this.currentNavigationConfigModule].loadedRoutes !== 'undefined') {
             this.lazyLoadedRoutesConfig[this.currentNavigationConfigModule].loadedRoutesSubject.next(this.lazyLoadedRoutesConfig[this.currentNavigationConfigModule].loadedRoutes);
             this.lazyLoadedRoutesConfig[this.currentNavigationConfigModule].loadedRoutesSubject.complete();
+            this.logger.trace(`Config load for ${this.currentNavigationConfigModule} is complete`, this.lazyLoadedRoutesConfig[this.currentNavigationConfigModule]);
+        }
+    }
+    /**
+     * Search for route config by module path by recursive scanning of router config tree.
+     * @param modulePath Path of module that is searched.
+     * @param routes Routes to be scanned. If not provided, it starts on root router config.
+     * @private
+     */
+    findRouteInRouteConfig(modulePath, routes = this.router.config) {
+        if (modulePath.startsWith('/')) {
+            modulePath = modulePath.substring(1);
+        }
+        for (const route of routes) {
+            if (typeof route.path === 'undefined') {
+                continue;
+            }
+            let routePath = route.path;
+            if (routePath.startsWith('/')) {
+                routePath = routePath.substring(1);
+            }
+            const longestPathMatch = this.findLongestPathMatch(modulePath, routePath);
+            if (longestPathMatch === null) {
+                continue;
+            }
+            // there is a partial or full match
+            if (route.loadChildren && modulePath === longestPathMatch) {
+                // it's a hit!
+                return route;
+            }
+            else if (route.loadChildren && Array.isArray(route[this.routesLoadedPropKey])) {
+                const result = this.findRouteInRouteConfig(modulePath.substring(longestPathMatch.length, modulePath.length), route[this.routesLoadedPropKey]);
+                if (result) {
+                    return result;
+                }
+            }
+            else if (route.children) {
+                const result = this.findRouteInRouteConfig(modulePath.substring(longestPathMatch.length, modulePath.length), route.children);
+                if (result) {
+                    return result;
+                }
+            }
         }
+        return null;
+    }
+    /**
+     * Finds longest path match of source to match string. If match is '', it is considered as a match in Angular routing.
+     * @param source Source string from on which comparison is based.
+     * @param match Match string to which the source is matched to.
+     * @private
+     */
+    findLongestPathMatch(source, match) {
+        const sourceSegments = source.split('/');
+        const matchSegments = match.split('/');
+        if (matchSegments.length === 1 && matchSegments[0] === '') {
+            // it's a hit, because empty route must always be processed (kind of a "abstract" route)
+            return '';
+        }
+        if (sourceSegments[0] === matchSegments[0]) {
+            // there is a match, find how long it is
+            for (let i = 1; i < sourceSegments.length; i++) {
+                if (sourceSegments[i] !== matchSegments[i]) {
+                    // end of match
+                    return sourceSegments.slice(0, i).join('/');
+                }
+            }
+            // there is full match
+            return sourceSegments.join('/');
+        }
+        return null;
     }
     getOrCreateRouteForModule(moduleKey) {
         if (!this.lazyLoadedRoutesConfig[moduleKey]) {
@@ -5407,6 +5492,9 @@ class TableDescriptor {
     get rowClassNameMapFn() {
         return this._rowClassNameMapFn;
     }
+    get actionColumnFrozen() {
+        return this._actionColumnFrozen;
+    }
     get headerClassName() {
         return this._headerClassName;
     }
@@ -5568,6 +5656,10 @@ class TableDescriptor {
         this._columnResizeMode = columnResizeMode;
         return this;
     }
+    withActionColumnFrozen(frozen) {
+        this._actionColumnFrozen = frozen;
+        return this;
+    }
     withRowClassName(rowClassName, classNameMapFn) {
         this._rowClassName = rowClassName;
         this._rowClassNameMapFn = classNameMapFn;
@@ -5602,6 +5694,7 @@ class TableDescriptor {
         obj._hasGridlines = this._hasGridlines;
         obj._hasResizableColumns = this._hasResizableColumns;
         obj._columnResizeMode = this._columnResizeMode;
+        obj._actionColumnFrozen = this._actionColumnFrozen;
         obj._isLocalized = this._isLocalized;
         obj._localizationLocaleProperty = this._localizationLocaleProperty;
         obj._paginationMode = this._paginationMode;
@@ -12621,7 +12714,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                        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$3.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$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i4$3.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i4$3.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i4$3.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i4$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i4$3.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i4$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i4$3.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$4.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                    [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\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\" 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                    [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\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                    [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\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$3.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$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i4$3.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i4$3.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i4$3.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i4$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i4$3.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i4$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i4$3.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$4.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,
@@ -12646,7 +12739,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                        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" }]
+                    ], 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                    [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\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\" 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                    [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\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                    [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\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: [{