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

package/fesm2022/mediusinc-mng-commons.mjs

@@ -3095,6 +3095,7 @@ class MngRouterService {
         this.router = router;
         this.logger = inject(MngLoggerService).create('MngRouterService');
         this.routesLoadedPropKey = '_loadedRoutes';
+        this.currentNavigationModuleKeys = [];
         this.lazyLoadedRoutesConfig = {};
     }
     getRouteLoadedChildren(path) {
@@ -3121,59 +3122,53 @@ class MngRouterService {
     }
     startNavigation(url) {
         this.currentNavigationPath = url.split('?')[0].split('#')[0];
-        this.currentNavigationConfigModule = undefined;
-        this.currentNavigationConfigLoaded = undefined;
+        this.currentNavigationModuleKeys = [];
     }
     finishNavigation() {
-        if (this.currentNavigationConfigLoaded && this.currentNavigationConfigModule) {
-            this.getLoadedRoutesFromRoute(true);
+        if (this.currentNavigationModuleKeys.length) {
+            this.currentNavigationModuleKeys.forEach(k => this.getLoadedRoutesFromRoute(k, true));
         }
         this.currentNavigationPath = undefined;
     }
     markNavigationConfigLoad(route, isEnd = false) {
-        this.currentNavigationConfigLoaded = isEnd;
         let routePath = route.path ?? '';
         if (!routePath.startsWith('/'))
             routePath = `/${routePath}`;
-        if (!this.currentNavigationConfigModule) {
-            let moduleKey = routePath;
-            const currentNavigationPathRoutePathIdx = this.currentNavigationPath?.indexOf(routePath) ?? -1;
-            if (this.currentNavigationPath && currentNavigationPathRoutePathIdx >= 0) {
-                moduleKey = this.currentNavigationPath.substring(0, currentNavigationPathRoutePathIdx + routePath.length);
-            }
-            this.currentNavigationConfigModule = moduleKey;
+        const currentNavigationPathRoutePathIdx = this.currentNavigationPath?.indexOf(routePath) ?? -1;
+        const moduleKey = this.currentNavigationPath?.substring(0, currentNavigationPathRoutePathIdx + routePath.length) ?? routePath;
+        if (!isEnd && this.currentNavigationModuleKeys.indexOf(moduleKey) < 0) {
+            this.currentNavigationModuleKeys.push(moduleKey);
         }
-        this.logger.trace(`Config load ${isEnd ? 'end' : 'start'} for ${this.currentNavigationConfigModule}`);
-        const config = this.getOrCreateRouteForModule(this.currentNavigationConfigModule);
+        this.logger.trace(`Config load ${isEnd ? 'end' : 'start'} for ${moduleKey} (routePath: ${routePath}; navigationUrl: ${this.currentNavigationPath})`);
+        const config = this.getOrCreateRouteForModule(moduleKey);
         config.route = route;
         config.isLoadEnd = isEnd;
-        this.getLoadedRoutesFromRoute();
+        if (isEnd) {
+            this.getLoadedRoutesFromRoute(moduleKey);
+        }
     }
-    getLoadedRoutesFromRoute(isFinish = false) {
-        if (!this.currentNavigationConfigModule ||
-            !this.lazyLoadedRoutesConfig[this.currentNavigationConfigModule]?.route ||
-            Array.isArray(this.lazyLoadedRoutesConfig[this.currentNavigationConfigModule].loadedRoutes)) {
+    getLoadedRoutesFromRoute(moduleKey, isFinish = false) {
+        const moduleConfig = this.lazyLoadedRoutesConfig[moduleKey];
+        if (!moduleConfig?.route || Array.isArray(moduleConfig.loadedRoutes)) {
             return;
         }
-        this.lazyLoadedRoutesConfig[this.currentNavigationConfigModule].loadedRoutes =
-            this.lazyLoadedRoutesConfig[this.currentNavigationConfigModule].route[this.routesLoadedPropKey];
-        if (!Array.isArray(this.lazyLoadedRoutesConfig[this.currentNavigationConfigModule].loadedRoutes) && isFinish) {
+        moduleConfig.loadedRoutes = moduleConfig.route[this.routesLoadedPropKey];
+        if (!Array.isArray(moduleConfig.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);
+            this.logger.trace(`Route loadedRoutes for ${moduleKey} not found, searching in router config now`);
+            const route = this.findRouteInRouteConfig(moduleKey);
             if (route) {
-                this.lazyLoadedRoutesConfig[this.currentNavigationConfigModule].route = route;
-                this.lazyLoadedRoutesConfig[this.currentNavigationConfigModule].loadedRoutes =
-                    this.lazyLoadedRoutesConfig[this.currentNavigationConfigModule].route[this.routesLoadedPropKey];
+                moduleConfig.route = route;
+                moduleConfig.loadedRoutes = moduleConfig.route[this.routesLoadedPropKey];
             }
             else {
-                this.logger.warn(`Route loadedRoutes for ${this.currentNavigationConfigModule} were not found in router config`);
+                this.logger.warn(`Route loadedRoutes for ${moduleKey} 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]);
+        if (typeof moduleConfig.loadedRoutes !== 'undefined') {
+            moduleConfig.loadedRoutesSubject.next(moduleConfig.loadedRoutes);
+            moduleConfig.loadedRoutesSubject.complete();
+            this.logger.trace(`Config load for ${moduleKey} is complete`, moduleConfig);
         }
     }
     /**
@@ -5492,6 +5487,9 @@ class TableDescriptor {
     get rowClassNameMapFn() {
         return this._rowClassNameMapFn;
     }
+    get selectionColumnFrozen() {
+        return this._selectionColumnFrozen;
+    }
     get actionColumnFrozen() {
         return this._actionColumnFrozen;
     }
@@ -5648,16 +5646,22 @@ class TableDescriptor {
     }
     /**
      * Method that enables/disabled column resize feature with columnResizeMode on all columns.
-     * @param resizableColumns: boolean
-     * @param columnResizeMode: 'fit' | 'expand' = 'fit'
+     * @param resizableColumns True if enabled
+     * @param columnResizeMode 'fit' or 'expand' mode
      */
     withColumnsResizable(resizableColumns = true, columnResizeMode = 'fit') {
         this._hasResizableColumns = resizableColumns;
         this._columnResizeMode = columnResizeMode;
         return this;
     }
-    withActionColumnFrozen(frozen) {
-        this._actionColumnFrozen = frozen;
+    /**
+     * Sets column to (un)frozen.
+     * @param selectionColumnFrozen True to freeze selection column, false to unfreeze it.
+     * @param actionColumnFrozen True to freeze action column, false to unfreeze it.
+     */
+    withColumnFrozen(selectionColumnFrozen, actionColumnFrozen) {
+        this._selectionColumnFrozen = selectionColumnFrozen;
+        this._actionColumnFrozen = actionColumnFrozen;
         return this;
     }
     withRowClassName(rowClassName, classNameMapFn) {
@@ -5695,6 +5699,7 @@ class TableDescriptor {
         obj._hasResizableColumns = this._hasResizableColumns;
         obj._columnResizeMode = this._columnResizeMode;
         obj._actionColumnFrozen = this._actionColumnFrozen;
+        obj._selectionColumnFrozen = this._selectionColumnFrozen;
         obj._isLocalized = this._isLocalized;
         obj._localizationLocaleProperty = this._localizationLocaleProperty;
         obj._paginationMode = this._paginationMode;
@@ -12714,7 +12719,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                    [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 }); }
+    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 [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\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 [frozen]=\"descriptor?.selectionColumnFrozen ?? true\"></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 [frozen]=\"descriptor?.selectionColumnFrozen ?? true\"></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 [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\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,
@@ -12739,7 +12744,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                    [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" }]
+                    ], 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 [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\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 [frozen]=\"descriptor?.selectionColumnFrozen ?? true\"></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 [frozen]=\"descriptor?.selectionColumnFrozen ?? true\"></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 [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\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: [{