@mediusinc/mng-commons 5.5.0-rc.4 → 6.0.0-rc.2

package/fesm2022/mediusinc-mng-commons-table.mjs

@@ -24,7 +24,7 @@ import * as i1$3 from 'primeng/table';
 import { Table, TableModule } from 'primeng/table';
 import { ZIndexUtils } from 'primeng/utils';
 import { combineLatest, switchMap, of, Subject, debounceTime, distinctUntilChanged, ReplaySubject, NEVER, BehaviorSubject, skip, filter } from 'rxjs';
-import { FilterMatchMode, dateToIsoString, angularDateFormatHasTime, fromAngularDateFormatToPrime, angularDateFormatHasSeconds, fromAngularNumberFormatToFractions, COMMONS_MODULE_CONFIG_IT, effectWithDeps, toObservable as toObservable$1, CommonsService, RerenderDirective, GetterPipe, TemplatePipe, BooleanPipe, EnumPipe, ComponentDirective, getI18nTypePropertyKey, TemplateDirective, findTemplateByName, toastMessage, CommonsStorageService, LoggerService, booleanOrUndefinedAttribute, mergeDataListParamsWithDefaults, fromTableLoadToDataListParams, dataListParamsToUrlQuery, fromSubscribeError, getErrorLogLevel, fromUrlQueryToDataListParams, I18nPropertyPipe, ClassMapPipe, CommonsFeatureTypeEnum } from '@mediusinc/mng-commons/core';
+import { FilterMatchMode, dateToIsoString, angularDateFormatHasTime, fromAngularDateFormatToPrime, angularDateFormatHasSeconds, fromAngularNumberFormatToFractions, COMMONS_MODULE_CONFIG_IT, effectWithDeps, toObservable as toObservable$1, CommonsService, RerenderDirective, GetterPipe, TemplatePipe, JsonPathPipe, BooleanPipe, EnumPipe, ComponentDirective, getI18nTypePropertyKey, TemplateDirective, findTemplateByName, toastMessage, CommonsStorageService, LoggerService, booleanOrUndefinedAttribute, mergeDataListParamsWithDefaults, fromTableLoadToDataListParams, dataListParamsToUrlQuery, fromSubscribeError, getErrorLogLevel, fromUrlQueryToDataListParams, I18nPropertyPipe, ClassMapPipe, CommonsFeatureTypeEnum } from '@mediusinc/mng-commons/core';
 import { FilterTypeEnum, FilterDescriptor, FilterDisplayTypeEnum, FilterLookupTypeEnum, FilterLookupDescriptor } from '@mediusinc/mng-commons/filter';
 import { DateRangeComponent, AutocompleteComponent, DropdownComponent, InputTrimDirective, NumberRangeComponent } from '@mediusinc/mng-commons/form';
 import { tableDescriptor, TableDynamicDescriptorInst, TablePaginationModeEnum, ColumnDisplayTypeEnum, TableSizeEnum } from '@mediusinc/mng-commons/table/api';
@@ -41,7 +41,7 @@ import * as i7 from 'primeng/messages';
 import { MessagesModule } from 'primeng/messages';
 import * as i9 from 'primeng/togglebutton';
 import { ToggleButtonModule } from 'primeng/togglebutton';
-import { lookupDataProviderWithService } from '@mediusinc/mng-commons/form/api';
+import { lookupDataProvider } from '@mediusinc/mng-commons/form/api';
 import { InputGroupModule } from 'primeng/inputgroup';
 import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
 import * as i1$2 from 'primeng/overlaypanel';
@@ -1076,6 +1076,7 @@ class TableColumnValueComponent {
         this.translate = inject(TranslateService);
         this.getterPipe = new GetterPipe();
         this.templatePipe = new TemplatePipe();
+        this.jsonPathPipe = new JsonPathPipe();
         this.descriptor = input.required();
         this.item = input.required();
         this.styleMaxWidth = computed(() => this.descriptor().maxWidth ?? null);
@@ -1087,7 +1088,7 @@ class TableColumnValueComponent {
             return className;
         });
         this.value = computed(() => {
-            let value = this.item()?.[this.descriptor().property];
+            let value = this.jsonPathPipe.transform(this.item(), `$.${this.descriptor().property}`);
             if (typeof this.descriptor().getter === 'function') {
                 value = this.getterPipe.transform(value, this.descriptor().getter, this.item());
             }
@@ -1223,11 +1224,11 @@ class TableFilterActiveTagComponent {
             return filterDescriptor.property;
         }
         let labelKey;
-        if (filterDescriptor.title !== undefined) {
+        if (filterDescriptor.title !== undefined && !filterDescriptor.titleUseModelBase) {
             labelKey = filterDescriptor.title;
         }
         else {
-            labelKey = getI18nTypePropertyKey(this.model().i18nBaseKey, filterDescriptor.property);
+            labelKey = getI18nTypePropertyKey(this.model().i18nBaseKey, filterDescriptor.title ?? filterDescriptor.property);
         }
         return labelKey;
     }
@@ -1277,7 +1278,7 @@ class TableFilterFormComponent {
             const genericValueProvider = this.genericDescriptor()?.valueLookup;
             if (genericValueProvider && genericValueProvider.serviceType) {
                 const lookupFn = genericValueProvider.lookup;
-                return lookupDataProviderWithService(genericValueProvider.serviceType).withLookup((params, service, search) => {
+                return lookupDataProvider({ service: genericValueProvider.serviceType }).withLookup((params, service, search) => {
                     params = {
                         ...params,
                         filters: {
@@ -1402,11 +1403,11 @@ class TableFilterFormComponent {
     }
     getPropertyLabelKey(filterDescriptor) {
         let labelKey;
-        if (filterDescriptor.title !== undefined) {
+        if (filterDescriptor.title !== undefined && !filterDescriptor.titleUseModelBase) {
             labelKey = filterDescriptor.title;
         }
         else {
-            labelKey = getI18nTypePropertyKey(this.model().i18nBaseKey, filterDescriptor.property);
+            labelKey = getI18nTypePropertyKey(this.model().i18nBaseKey, filterDescriptor.title ?? filterDescriptor.property);
         }
         return labelKey;
     }
@@ -1995,12 +1996,10 @@ class TableComponent {
         this.metadata.setSignalSources(this.descriptorInput, this.globalFilterFieldsInput);
         this.data.setDataSources(this.items, this.result, this.dataProvider, this.loadingInput);
     }
-    reload(emitEventOrEvent = false, resetParamsParam = false) {
-        const emitEvent = typeof emitEventOrEvent === 'boolean' ? emitEventOrEvent : (emitEventOrEvent?.emitEvent ?? false);
-        const resetParams = typeof emitEventOrEvent === 'object' ? emitEventOrEvent?.resetParams : resetParamsParam;
-        const params = typeof emitEventOrEvent === 'object' && emitEventOrEvent?.params ? emitEventOrEvent?.params : resetParams ? undefined : this.lastParamsWithDefaults;
+    reload(emitEvent) {
+        const params = emitEvent?.params ? emitEvent?.params : emitEvent?.resetParams ? undefined : this.lastParamsWithDefaults;
         const reloadParams = mergeDataListParamsWithDefaults(params ?? {}, this.metadata.defaultParams());
-        this.loadTableWithDataProvider(reloadParams, emitEvent);
+        this.loadTableWithDataProvider(reloadParams, emitEvent?.emitEvent ?? false);
     }
     onTableLazyLoad(event) {
         this.lastLazyLoadEvent = event;
@@ -2095,7 +2094,7 @@ class TableComponent {
         this.loadTableWithDataProvider(paramsWithDefaults);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: TableComponent, isStandalone: true, selector: "mng-table", inputs: { descriptorInput: { classPropertyName: "descriptorInput", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, dataProvider: { classPropertyName: "dataProvider", publicName: "dataProvider", isSignal: true, isRequired: false, transformFunction: null }, useQueryParams: { classPropertyName: "useQueryParams", publicName: "useQueryParams", isSignal: true, isRequired: false, transformFunction: null }, cellClickEnabled: { classPropertyName: "cellClickEnabled", publicName: "cellClickEnabled", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionEnabled: { classPropertyName: "selectionEnabled", publicName: "selectionEnabled", isSignal: true, isRequired: false, transformFunction: null }, rowReorderEnabledInput: { classPropertyName: "rowReorderEnabledInput", publicName: "rowReorderEnabled", isSignal: true, isRequired: false, transformFunction: null }, columnLastMinWidth: { classPropertyName: "columnLastMinWidth", publicName: "columnLastMinWidth", isSignal: true, isRequired: false, transformFunction: null }, captionComponent: { classPropertyName: "captionComponent", publicName: "captionComponent", isSignal: true, isRequired: false, transformFunction: null }, columnCustomLastComponent: { classPropertyName: "columnCustomLastComponent", publicName: "columnCustomLastComponent", isSignal: true, isRequired: false, transformFunction: null }, globalFilterFieldsInput: { classPropertyName: "globalFilterFieldsInput", publicName: "globalFilterFields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableLoad: "tableLoad", cellClick: "cellClick", selectionChange: "selectionChange", captionComponentInstance: "captionComponentInstance", columnCustomLastComponentInstance: "columnCustomLastComponentInstance", rowReorder: "rowReorder" }, providers: [TableMetadataService, TableDataService, TablePreferencesService], queries: [{ propertyName: "templates", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "components", predicate: (ComponentDirective), descendants: true, isSignal: true }, { propertyName: "primeTable", first: true, predicate: Table, descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    @if (data.isAllPaginationMetaInitialized()) {\n        <p-table\n            [value]=\"data.data()\"\n            [dataKey]=\"metadata.descriptor().trackProperty\"\n            [lazy]=\"isLazy()\"\n            [loading]=\"data.loading()\"\n            [paginator]=\"isPagination()\"\n            [rows]=\"data.rows()\"\n            [first]=\"data.offset()\"\n            [totalRecords]=\"data.count()\"\n            [rowsPerPageOptions]=\"metadata.rowsPerPageOptions()\"\n            [showCurrentPageReport]=\"true\"\n            [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n            [multiSortMeta]=\"data.sortMeta()\"\n            [filters]=\"data.filterMeta()\"\n            [globalFilterFields]=\"metadata.searchFields()\"\n            sortMode=\"multiple\"\n            [selection]=\"[]\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n            [scrollable]=\"true\"\n            scrollHeight=\"flex\"\n            [rowHover]=\"metadata.descriptor().hasHover\"\n            [styleClass]=\"className()\"\n            [resizableColumns]=\"metadata.descriptor().hasResizableColumns\"\n            [columnResizeMode]=\"metadata.descriptor().columnResizeMode ?? 'expand'\"\n            [reorderableColumns]=\"areColumnsReorderable()\"\n            paginatorDropdownAppendTo=\"body\"\n            [columns]=\"visibleColumns()\"\n            [expandedRowKeys]=\"expandedRowKeys()\"\n            (onColResize)=\"prefs.onColumnResize($event)\"\n            (onColReorder)=\"prefs.onColumnReorder($event)\"\n            (onLazyLoad)=\"onTableLazyLoad($event)\"\n            (onFilter)=\"onTableFilter($event)\"\n            (onRowReorder)=\"onRowReorder($event)\">\n            <ng-template pTemplate=\"caption\">\n                @if (isCaptionVisible()) {\n                    <div class=\"table-header\">\n                        @if (overlayWithTagFilters().length > 0 || metadata.descriptor().search) {\n                            <mng-table-filter-overlay-with-tag\n                                [title]=\"metadata.descriptor().title\"\n                                [metadata]=\"overlayWithTagFilters()\"\n                                [genericFilterDescriptor]=\"metadata.genericFilterDescriptor()\"\n                                [model]=\"metadata.descriptor().model\"\n                                [enableSearch]=\"metadata.descriptor().search\"\n                                [search]=\"data.searchMeta()\"\n                                [searchLimitWordMax]=\"metadata.descriptor().searchLimitMaxWords\"\n                                [enableCaseSensitive]=\"isLazy()\">\n                                @if (hasTitleDisplay()) {\n                                    <ng-template mngTemplate=\"title\">\n                                        <ng-container *ngTemplateOutlet=\"captionTemplateOrComponentOrTitle\"></ng-container>\n                                    </ng-template>\n                                }\n                            </mng-table-filter-overlay-with-tag>\n                        } @else {\n                            <ng-container *ngTemplateOutlet=\"captionTemplateOrComponentOrTitle\"></ng-container>\n                        }\n                        <ng-template #captionTemplateOrComponentOrTitle>\n                            @if (captionTemplate()) {\n                                <ng-container *ngTemplateOutlet=\"captionTemplate()\"></ng-container>\n                            } @else if (captionComponent()) {\n                                <ng-container [mngComponent]=\"captionComponent()\" (instanceCreated)=\"captionComponentInstance.emit($event)\"></ng-container>\n                            } @else if (metadata.descriptor().title) {\n                                <h5 class=\"p-0 m-0\">{{ metadata.descriptor().title! | translate }}</h5>\n                            }\n                        </ng-template>\n                    </div>\n                }\n            </ng-template>\n            <ng-template pTemplate=\"header\">\n                @if (!metadata.descriptor().hideHeader) {\n                    <tr class=\"mng-table-header\" [class]=\"metadata.descriptor().headerClassName\">\n                        @if (selectionEnabled()) {\n                            @if (selectionMode() === 'multiple') {\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                                </th>\n                            } @else {\n                                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                            }\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\" pFrozenColumn [frozen]=\"true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <ng-template #sortableColumnTHTemplate>\n                                <div class=\"flex justify-content-between align-items-center\">\n                                    {{ col.descriptor.title ?? (col.descriptor.property | mngI18nProperty: metadata.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 | mngI18nProperty: metadata.descriptor().model) | translate }}\n                            </ng-template>\n                            @if (col.descriptor.isReorderable) {\n                                <th\n                                    pResizableColumn\n                                    pReorderableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            } @else {\n                                <th\n                                    pResizableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            }\n                        }\n                        @if (hasLastColumn()) {\n                            <th\n                                [style.min-width.px]=\"columnLastMinWidth()\"\n                                pFrozenColumn\n                                [frozen]=\"metadata.descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n                                alignFrozen=\"right\"\n                                class=\"column-custom-last text-right\">\n                                @if (areColumnsToggleable()) {\n                                    <p-multiSelect\n                                        #columnToggleMultiselect\n                                        styleClass=\"p-button-primary mng-table-columns-multiselect\"\n                                        appendTo=\"body\"\n                                        dataKey=\"id\"\n                                        tooltipPosition=\"left\"\n                                        placeholder=\"\"\n                                        dropdownIcon=\"pi pi-sliders-h\"\n                                        [filter]=\"false\"\n                                        [options]=\"prefs.columnsWithPrefs()\"\n                                        [ngModel]=\"visibleColumns()\"\n                                        [pTooltip]=\"'mngTable.adjustTable' | translate\"\n                                        [displaySelectedLabel]=\"false\"\n                                        (onChange)=\"prefs.onColumnToggle($event)\">\n                                        <ng-template pTemplate=\"filter\">\n                                            <div class=\"p-checkbox p-component ml-1\">\n                                                <div class=\"p-hidden-accessible\">\n                                                    <input\n                                                        type=\"checkbox\"\n                                                        readonly=\"readonly\"\n                                                        [checked]=\"columnToggleMultiselect.allSelected\"\n                                                        (focus)=\"columnToggleMultiselect.onHeaderCheckboxFocus()\"\n                                                        (blur)=\"columnToggleMultiselect.onHeaderCheckboxBlur()\"\n                                                        (keydown.space)=\"columnToggleMultiselect.onToggleAll($event)\" />\n                                                </div>\n                                                <div\n                                                    class=\"p-checkbox-box\"\n                                                    role=\"checkbox\"\n                                                    [attr.aria-checked]=\"columnToggleMultiselect.allSelected\"\n                                                    [ngClass]=\"{\n                                                        'p-highlight': anyColumnVisible()\n                                                    }\"\n                                                    (click)=\"prefs.onColumnToggleAll()\">\n                                                    <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': anyColumnVisible()}\"></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)=\"prefs.clearLayoutPreferences()\"></p-button>\n                                        </ng-template>\n                                        <ng-template let-item pTemplate=\"item\">\n                                            {{ item.descriptor.title ?? (item.descriptor.property | mngI18nProperty: metadata.descriptor().model) | translate }}\n                                        </ng-template>\n                                    </p-multiSelect>\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n                @if (hasColumnFilters()) {\n                    <tr class=\"mng-column-filter-row\">\n                        <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                        @if (selectionEnabled()) {\n                            <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <th\n                                [class]=\"col.filter?.descriptor?.columnClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\"\n                                [style.width.px]=\"col.width\"\n                                [style.width.%]=\"col.width ? null : (col.filter?.descriptor?.columnWidth ?? col.descriptor.width ?? null)\"\n                                [style.min-width.px]=\"col.width ? null : (col.filter?.descriptor?.columnMinWidth ?? col.descriptor.minWidth)\"\n                                [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                                @if (col.filter) {\n                                    <mng-table-column-filter [metadata]=\"col.filter\"></mng-table-column-filter>\n                                }\n                            </th>\n                        }\n                        @if (hasLastColumn()) {\n                            <th class=\"column-custom-last\" [style.min-width.px]=\"columnLastMinWidth()\"></th>\n                        }\n                    </tr>\n                }\n            </ng-template>\n            <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n                <tr\n                    [pReorderableRow]=\"idx\"\n                    [ngClass]=\"\n                        metadata.descriptor().rowClassName | mngClassMap: metadata.descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: metadata.descriptor() : item\n                    \">\n                    @if (selectionEnabled()) {\n                        @if (selectionMode() === 'multiple') {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                            </td>\n                        } @else {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                            </td>\n                        }\n                    }\n                    @if (metadata.descriptor().rowExpandable) {\n                        <td>\n                            @if (!metadata.descriptor().rowExpandableProperty || item[metadata.descriptor().rowExpandableProperty!]) {\n                                <button\n                                    pButton\n                                    type=\"button\"\n                                    [pRowToggler]=\"item\"\n                                    class=\"p-button-text p-button-rounded p-button-plain mng-table-row-expand-button\"\n                                    [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n                            }\n                        </td>\n                    }\n                    @if (rowReorderEnabled()) {\n                        <td>\n                            <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n                        </td>\n                    }\n                    @for (col of visibleColumns(); track col.id) {\n                        <td\n                            (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                            [class]=\"\n                                col.descriptor.className\n                                    | mngClassMap: col.descriptor.classNameMapFn : item\n                                    | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\n                            \"\n                            [class.clickable]=\"isCellClickEnabled()\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.width ? null : 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 | mngI18nProperty: metadata.descriptor().model) | translate }}</span>\n                            <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                        </td>\n                    }\n                    @if (hasLastColumn()) {\n                        <td\n                            class=\"column-custom-last justify-content-end text-right\"\n                            [style.min-width.px]=\"columnLastMinWidth()\"\n                            pFrozenColumn\n                            [frozen]=\"metadata.descriptor().actionColumnFrozen ?? true\"\n                            alignFrozen=\"right\">\n                            @if (columnCustomLastTemplate()) {\n                                <ng-container *ngTemplateOutlet=\"columnCustomLastTemplate(); context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                            } @else if (columnCustomLastComponent()) {\n                                <div [mngComponent]=\"columnCustomLastComponent()\" (instanceCreated)=\"columnCustomLastComponentInstance.emit($event)\"></div>\n                            }\n                        </td>\n                    }\n                </tr>\n            </ng-template>\n            <ng-template pTemplate=\"rowexpansion\" let-item>\n                @if (metadata.descriptor().rowExpandable) {\n                    <tr>\n                        <td></td>\n                        <td [colSpan]=\"metadata.descriptor().rowExpandableColSpan\">\n                            @if (metadata.descriptor().rowExpandableComponentType !== undefined) {\n                                <ng-container [mngComponent]=\"metadata.descriptor().rowExpandableComponentType\" [inputs]=\"{item}\"> </ng-container>\n                            } @else {\n                                <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n                            }\n                        </td>\n                    </tr>\n                }\n            </ng-template>\n            <ng-template pTemplate=\"loadingicon\">\n                <div class=\"flex flex-column align-items-center\">\n                    @if (metadata.descriptor().loadingIcon) {\n                        <i [class]=\"'text-white text-4xl pi-spin ' + metadata.descriptor().loadingIcon\"></i>\n                    }\n                    @if (metadata.descriptor().loadingText) {\n                        <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': metadata.descriptor().loadingIcon}\">\n                            {{ metadata.descriptor().loadingText ?? '' | translate }}\n                        </div>\n                    }\n                </div>\n            </ng-template>\n            <ng-template pTemplate=\"loadingbody\">\n                <tr>\n                    <td [attr.colspan]=\"columnsColspan()\">\n                        <div class=\"loading-text\"></div>\n                        <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                    </td>\n                </tr>\n            </ng-template>\n            <ng-template pTemplate=\"emptymessage\">\n                <tr>\n                    <td [attr.colspan]=\"columnsColspan()\">\n                        {{ 'mngTable.noItems' | translate }}\n                    </td>\n                </tr>\n            </ng-template>\n            @if (footerTemplate()) {\n                <ng-template pTemplate=\"summary\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: data.data(), totalCount: data.count()}\"></ng-container>\n                </ng-template>\n            }\n        </p-table>\n    }\n</div>\n", dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "pipe", type: I18nPropertyPipe, name: "mngI18nProperty" }, { 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: TableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { kind: "pipe", type: ClassMapPipe, name: "mngClassMap" }, { kind: "pipe", type: LocaleDefaultRowClassPipe, name: "mngLocaleDefaultRowClass" }, { kind: "component", type: TableColumnFilterComponent, selector: "mng-table-column-filter", inputs: ["metadata"] }, { kind: "pipe", type: TableColumnFilterClassPipe, name: "mngTableColumnFilterClass" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "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", "paginatorLocale", "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: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1$3.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i1$3.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i1$3.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i1$3.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i1$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i1$3.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i1$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$3.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$3.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i4$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$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: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: TableFilterOverlayWithTagComponent, selector: "mng-table-filter-overlay-with-tag", inputs: ["metadata", "genericFilterDescriptor", "model", "enableSearch", "search", "searchLimitWordMax", "enableCaseSensitive"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: TableComponent, isStandalone: true, selector: "mng-table", inputs: { descriptorInput: { classPropertyName: "descriptorInput", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, dataProvider: { classPropertyName: "dataProvider", publicName: "dataProvider", isSignal: true, isRequired: false, transformFunction: null }, useQueryParams: { classPropertyName: "useQueryParams", publicName: "useQueryParams", isSignal: true, isRequired: false, transformFunction: null }, cellClickEnabled: { classPropertyName: "cellClickEnabled", publicName: "cellClickEnabled", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionEnabled: { classPropertyName: "selectionEnabled", publicName: "selectionEnabled", isSignal: true, isRequired: false, transformFunction: null }, rowReorderEnabledInput: { classPropertyName: "rowReorderEnabledInput", publicName: "rowReorderEnabled", isSignal: true, isRequired: false, transformFunction: null }, columnLastMinWidth: { classPropertyName: "columnLastMinWidth", publicName: "columnLastMinWidth", isSignal: true, isRequired: false, transformFunction: null }, captionComponent: { classPropertyName: "captionComponent", publicName: "captionComponent", isSignal: true, isRequired: false, transformFunction: null }, columnCustomLastComponent: { classPropertyName: "columnCustomLastComponent", publicName: "columnCustomLastComponent", isSignal: true, isRequired: false, transformFunction: null }, globalFilterFieldsInput: { classPropertyName: "globalFilterFieldsInput", publicName: "globalFilterFields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableLoad: "tableLoad", cellClick: "cellClick", selectionChange: "selectionChange", captionComponentInstance: "captionComponentInstance", columnCustomLastComponentInstance: "columnCustomLastComponentInstance", rowReorder: "rowReorder" }, providers: [TableMetadataService, TableDataService, TablePreferencesService], queries: [{ propertyName: "templates", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "components", predicate: (ComponentDirective), descendants: true, isSignal: true }, { propertyName: "primeTable", first: true, predicate: Table, descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    @if (data.isAllPaginationMetaInitialized()) {\n        <p-table\n            [value]=\"data.data()\"\n            [dataKey]=\"metadata.descriptor().trackProperty\"\n            [lazy]=\"isLazy()\"\n            [loading]=\"data.loading()\"\n            [paginator]=\"isPagination()\"\n            [rows]=\"data.rows()\"\n            [first]=\"data.offset()\"\n            [totalRecords]=\"data.count()\"\n            [rowsPerPageOptions]=\"metadata.rowsPerPageOptions()\"\n            [showCurrentPageReport]=\"true\"\n            [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n            [multiSortMeta]=\"data.sortMeta()\"\n            [filters]=\"data.filterMeta()\"\n            [globalFilterFields]=\"metadata.searchFields()\"\n            sortMode=\"multiple\"\n            [selection]=\"[]\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n            [scrollable]=\"true\"\n            scrollHeight=\"flex\"\n            [rowHover]=\"metadata.descriptor().hasHover\"\n            [styleClass]=\"className()\"\n            [resizableColumns]=\"metadata.descriptor().hasResizableColumns\"\n            [columnResizeMode]=\"metadata.descriptor().columnResizeMode ?? 'expand'\"\n            [reorderableColumns]=\"areColumnsReorderable()\"\n            paginatorDropdownAppendTo=\"body\"\n            [columns]=\"visibleColumns()\"\n            [expandedRowKeys]=\"expandedRowKeys()\"\n            (onColResize)=\"prefs.onColumnResize($event)\"\n            (onColReorder)=\"prefs.onColumnReorder($event)\"\n            (onLazyLoad)=\"onTableLazyLoad($event)\"\n            (onFilter)=\"onTableFilter($event)\"\n            (onRowReorder)=\"onRowReorder($event)\">\n            <ng-template pTemplate=\"caption\">\n                @if (isCaptionVisible()) {\n                    <div class=\"table-header\">\n                        @if (overlayWithTagFilters().length > 0 || metadata.descriptor().search) {\n                            <mng-table-filter-overlay-with-tag\n                                [title]=\"metadata.descriptor().title\"\n                                [metadata]=\"overlayWithTagFilters()\"\n                                [genericFilterDescriptor]=\"metadata.genericFilterDescriptor()\"\n                                [model]=\"metadata.descriptor().model\"\n                                [enableSearch]=\"metadata.descriptor().search\"\n                                [search]=\"data.searchMeta()\"\n                                [searchLimitWordMax]=\"metadata.descriptor().searchLimitMaxWords\"\n                                [enableCaseSensitive]=\"isLazy()\">\n                                @if (hasTitleDisplay()) {\n                                    <ng-template mngTemplate=\"title\">\n                                        <ng-container *ngTemplateOutlet=\"captionTemplateOrComponentOrTitle\"></ng-container>\n                                    </ng-template>\n                                }\n                            </mng-table-filter-overlay-with-tag>\n                        } @else {\n                            <ng-container *ngTemplateOutlet=\"captionTemplateOrComponentOrTitle\"></ng-container>\n                        }\n                        <ng-template #captionTemplateOrComponentOrTitle>\n                            @if (captionTemplate()) {\n                                <ng-container *ngTemplateOutlet=\"captionTemplate()\"></ng-container>\n                            } @else if (captionComponent()) {\n                                <ng-container [mngComponent]=\"captionComponent()\" (instanceCreated)=\"captionComponentInstance.emit($event)\"></ng-container>\n                            } @else if (metadata.descriptor().title) {\n                                <h5 class=\"p-0 m-0\">{{ metadata.descriptor().title! | translate }}</h5>\n                            }\n                        </ng-template>\n                    </div>\n                }\n            </ng-template>\n            <ng-template pTemplate=\"header\">\n                @if (!metadata.descriptor().hideHeader) {\n                    <tr class=\"mng-table-header\" [class]=\"metadata.descriptor().headerClassName\">\n                        @if (selectionEnabled()) {\n                            @if (selectionMode() === 'multiple') {\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                                </th>\n                            } @else {\n                                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                            }\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\" pFrozenColumn [frozen]=\"true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <ng-template #sortableColumnTHTemplate>\n                                <div class=\"flex justify-content-between align-items-center\">\n                                    {{\n                                        (col.descriptor.title && !col.descriptor.titleUseModelBase\n                                            ? col.descriptor.title\n                                            : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                        ) | translate\n                                    }}\n                                    <p-sortIcon [field]=\"col.sort?.property\"></p-sortIcon>\n                                </div>\n                            </ng-template>\n                            <ng-template #nonSortableColumnTHTemplate>\n                                {{\n                                    (col.descriptor.title && !col.descriptor.titleUseModelBase\n                                        ? col.descriptor.title\n                                        : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                    ) | translate\n                                }}\n                            </ng-template>\n                            @if (col.descriptor.isReorderable) {\n                                <th\n                                    pResizableColumn\n                                    pReorderableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            } @else {\n                                <th\n                                    pResizableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            }\n                        }\n                        @if (hasLastColumn()) {\n                            <th\n                                [style.min-width.px]=\"columnLastMinWidth()\"\n                                pFrozenColumn\n                                [frozen]=\"metadata.descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n                                alignFrozen=\"right\"\n                                class=\"column-custom-last text-right\">\n                                @if (areColumnsToggleable()) {\n                                    <p-multiSelect\n                                        #columnToggleMultiselect\n                                        styleClass=\"p-button-primary mng-table-columns-multiselect\"\n                                        appendTo=\"body\"\n                                        dataKey=\"id\"\n                                        tooltipPosition=\"left\"\n                                        placeholder=\"\"\n                                        dropdownIcon=\"pi pi-sliders-h\"\n                                        [filter]=\"false\"\n                                        [options]=\"prefs.columnsWithPrefs()\"\n                                        [ngModel]=\"visibleColumns()\"\n                                        [pTooltip]=\"'mngTable.adjustTable' | translate\"\n                                        [displaySelectedLabel]=\"false\"\n                                        (onChange)=\"prefs.onColumnToggle($event)\">\n                                        <ng-template pTemplate=\"filter\">\n                                            <div class=\"p-checkbox p-component ml-1\">\n                                                <div class=\"p-hidden-accessible\">\n                                                    <input\n                                                        type=\"checkbox\"\n                                                        readonly=\"readonly\"\n                                                        [checked]=\"columnToggleMultiselect.allSelected\"\n                                                        (focus)=\"columnToggleMultiselect.onHeaderCheckboxFocus()\"\n                                                        (blur)=\"columnToggleMultiselect.onHeaderCheckboxBlur()\"\n                                                        (keydown.space)=\"columnToggleMultiselect.onToggleAll($event)\" />\n                                                </div>\n                                                <div\n                                                    class=\"p-checkbox-box\"\n                                                    role=\"checkbox\"\n                                                    [attr.aria-checked]=\"columnToggleMultiselect.allSelected\"\n                                                    [ngClass]=\"{\n                                                        'p-highlight': anyColumnVisible()\n                                                    }\"\n                                                    (click)=\"prefs.onColumnToggleAll()\">\n                                                    <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': anyColumnVisible()}\"></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)=\"prefs.clearLayoutPreferences()\"></p-button>\n                                        </ng-template>\n                                        <ng-template let-item pTemplate=\"item\">\n                                            {{\n                                                (item.descriptor.title && !item.descriptor.titleUseModelBase\n                                                    ? item.descriptor.title\n                                                    : (item.descriptor.title ?? item.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                                ) | translate\n                                            }}\n                                        </ng-template>\n                                    </p-multiSelect>\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n                @if (hasColumnFilters()) {\n                    <tr class=\"mng-column-filter-row\">\n                        <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                        @if (selectionEnabled()) {\n                            <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <th\n                                [class]=\"col.filter?.descriptor?.columnClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\"\n                                [style.width.px]=\"col.width\"\n                                [style.width.%]=\"col.width ? null : (col.filter?.descriptor?.columnWidth ?? col.descriptor.width ?? null)\"\n                                [style.min-width.px]=\"col.width ? null : (col.filter?.descriptor?.columnMinWidth ?? col.descriptor.minWidth)\"\n                                [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                                @if (col.filter) {\n                                    <mng-table-column-filter [metadata]=\"col.filter\"></mng-table-column-filter>\n                                }\n                            </th>\n                        }\n                        @if (hasLastColumn()) {\n                            <th class=\"column-custom-last\" [style.min-width.px]=\"columnLastMinWidth()\"></th>\n                        }\n                    </tr>\n                }\n            </ng-template>\n            <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n                <tr\n                    [pReorderableRow]=\"idx\"\n                    [ngClass]=\"\n                        metadata.descriptor().rowClassName | mngClassMap: metadata.descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: metadata.descriptor() : item\n                    \">\n                    @if (selectionEnabled()) {\n                        @if (selectionMode() === 'multiple') {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                            </td>\n                        } @else {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                            </td>\n                        }\n                    }\n                    @if (metadata.descriptor().rowExpandable) {\n                        <td>\n                            @if (!metadata.descriptor().rowExpandableProperty || item[metadata.descriptor().rowExpandableProperty!]) {\n                                <button\n                                    pButton\n                                    type=\"button\"\n                                    [pRowToggler]=\"item\"\n                                    class=\"p-button-text p-button-rounded p-button-plain mng-table-row-expand-button\"\n                                    [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n                            }\n                        </td>\n                    }\n                    @if (rowReorderEnabled()) {\n                        <td>\n                            <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n                        </td>\n                    }\n                    @for (col of visibleColumns(); track col.id) {\n                        <td\n                            (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                            [class]=\"\n                                col.descriptor.className\n                                    | mngClassMap: col.descriptor.classNameMapFn : item\n                                    | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\n                            \"\n                            [class.clickable]=\"isCellClickEnabled()\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                            <span class=\"p-column-title\">\n                                {{\n                                    (col.descriptor.title && !col.descriptor.titleUseModelBase\n                                        ? col.descriptor.title\n                                        : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                    ) | translate\n                                }}\n                            </span>\n                            <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                        </td>\n                    }\n                    @if (hasLastColumn()) {\n                        <td\n                            class=\"column-custom-last justify-content-end text-right\"\n                            [style.min-width.px]=\"columnLastMinWidth()\"\n                            pFrozenColumn\n                            [frozen]=\"metadata.descriptor().actionColumnFrozen ?? true\"\n                            alignFrozen=\"right\">\n                            @if (columnCustomLastTemplate()) {\n                                <ng-container *ngTemplateOutlet=\"columnCustomLastTemplate(); context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                            } @else if (columnCustomLastComponent()) {\n                                <div [mngComponent]=\"columnCustomLastComponent()\" (instanceCreated)=\"columnCustomLastComponentInstance.emit($event)\"></div>\n                            }\n                        </td>\n                    }\n                </tr>\n            </ng-template>\n            <ng-template pTemplate=\"rowexpansion\" let-item>\n                @if (metadata.descriptor().rowExpandable) {\n                    <tr>\n                        <td></td>\n                        <td [colSpan]=\"metadata.descriptor().rowExpandableColSpan\">\n                            @if (metadata.descriptor().rowExpandableComponentType !== undefined) {\n                                <ng-container [mngComponent]=\"metadata.descriptor().rowExpandableComponentType\" [inputs]=\"{item}\"> </ng-container>\n                            } @else {\n                                <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n                            }\n                        </td>\n                    </tr>\n                }\n            </ng-template>\n            <ng-template pTemplate=\"loadingicon\">\n                <div class=\"flex flex-column align-items-center\">\n                    @if (metadata.descriptor().loadingIcon) {\n                        <i [class]=\"'text-white text-4xl pi-spin ' + metadata.descriptor().loadingIcon\"></i>\n                    }\n                    @if (metadata.descriptor().loadingText) {\n                        <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': metadata.descriptor().loadingIcon}\">\n                            {{ metadata.descriptor().loadingText ?? '' | translate }}\n                        </div>\n                    }\n                </div>\n            </ng-template>\n            <ng-template pTemplate=\"loadingbody\">\n                <tr>\n                    <td [attr.colspan]=\"columnsColspan()\">\n                        <div class=\"loading-text\"></div>\n                        <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                    </td>\n                </tr>\n            </ng-template>\n            <ng-template pTemplate=\"emptymessage\">\n                <tr>\n                    <td [attr.colspan]=\"columnsColspan()\">\n                        {{ 'mngTable.noItems' | translate }}\n                    </td>\n                </tr>\n            </ng-template>\n            @if (footerTemplate()) {\n                <ng-template pTemplate=\"summary\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: data.data(), totalCount: data.count()}\"></ng-container>\n                </ng-template>\n            }\n        </p-table>\n    }\n</div>\n", dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "pipe", type: I18nPropertyPipe, name: "mngI18nProperty" }, { 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: TableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { kind: "pipe", type: ClassMapPipe, name: "mngClassMap" }, { kind: "pipe", type: LocaleDefaultRowClassPipe, name: "mngLocaleDefaultRowClass" }, { kind: "component", type: TableColumnFilterComponent, selector: "mng-table-column-filter", inputs: ["metadata"] }, { kind: "pipe", type: TableColumnFilterClassPipe, name: "mngTableColumnFilterClass" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "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", "paginatorLocale", "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: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1$3.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i1$3.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i1$3.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i1$3.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i1$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i1$3.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i1$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$3.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$3.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i4$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$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: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: TableFilterOverlayWithTagComponent, selector: "mng-table-filter-overlay-with-tag", inputs: ["metadata", "genericFilterDescriptor", "model", "enableSearch", "search", "searchLimitWordMax", "enableCaseSensitive"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -2118,7 +2117,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                         TableFilterOverlayWithTagComponent,
                         FormsModule,
                         TemplateDirective
-                    ], providers: [TableMetadataService, TableDataService, TablePreferencesService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    @if (data.isAllPaginationMetaInitialized()) {\n        <p-table\n            [value]=\"data.data()\"\n            [dataKey]=\"metadata.descriptor().trackProperty\"\n            [lazy]=\"isLazy()\"\n            [loading]=\"data.loading()\"\n            [paginator]=\"isPagination()\"\n            [rows]=\"data.rows()\"\n            [first]=\"data.offset()\"\n            [totalRecords]=\"data.count()\"\n            [rowsPerPageOptions]=\"metadata.rowsPerPageOptions()\"\n            [showCurrentPageReport]=\"true\"\n            [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n            [multiSortMeta]=\"data.sortMeta()\"\n            [filters]=\"data.filterMeta()\"\n            [globalFilterFields]=\"metadata.searchFields()\"\n            sortMode=\"multiple\"\n            [selection]=\"[]\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n            [scrollable]=\"true\"\n            scrollHeight=\"flex\"\n            [rowHover]=\"metadata.descriptor().hasHover\"\n            [styleClass]=\"className()\"\n            [resizableColumns]=\"metadata.descriptor().hasResizableColumns\"\n            [columnResizeMode]=\"metadata.descriptor().columnResizeMode ?? 'expand'\"\n            [reorderableColumns]=\"areColumnsReorderable()\"\n            paginatorDropdownAppendTo=\"body\"\n            [columns]=\"visibleColumns()\"\n            [expandedRowKeys]=\"expandedRowKeys()\"\n            (onColResize)=\"prefs.onColumnResize($event)\"\n            (onColReorder)=\"prefs.onColumnReorder($event)\"\n            (onLazyLoad)=\"onTableLazyLoad($event)\"\n            (onFilter)=\"onTableFilter($event)\"\n            (onRowReorder)=\"onRowReorder($event)\">\n            <ng-template pTemplate=\"caption\">\n                @if (isCaptionVisible()) {\n                    <div class=\"table-header\">\n                        @if (overlayWithTagFilters().length > 0 || metadata.descriptor().search) {\n                            <mng-table-filter-overlay-with-tag\n                                [title]=\"metadata.descriptor().title\"\n                                [metadata]=\"overlayWithTagFilters()\"\n                                [genericFilterDescriptor]=\"metadata.genericFilterDescriptor()\"\n                                [model]=\"metadata.descriptor().model\"\n                                [enableSearch]=\"metadata.descriptor().search\"\n                                [search]=\"data.searchMeta()\"\n                                [searchLimitWordMax]=\"metadata.descriptor().searchLimitMaxWords\"\n                                [enableCaseSensitive]=\"isLazy()\">\n                                @if (hasTitleDisplay()) {\n                                    <ng-template mngTemplate=\"title\">\n                                        <ng-container *ngTemplateOutlet=\"captionTemplateOrComponentOrTitle\"></ng-container>\n                                    </ng-template>\n                                }\n                            </mng-table-filter-overlay-with-tag>\n                        } @else {\n                            <ng-container *ngTemplateOutlet=\"captionTemplateOrComponentOrTitle\"></ng-container>\n                        }\n                        <ng-template #captionTemplateOrComponentOrTitle>\n                            @if (captionTemplate()) {\n                                <ng-container *ngTemplateOutlet=\"captionTemplate()\"></ng-container>\n                            } @else if (captionComponent()) {\n                                <ng-container [mngComponent]=\"captionComponent()\" (instanceCreated)=\"captionComponentInstance.emit($event)\"></ng-container>\n                            } @else if (metadata.descriptor().title) {\n                                <h5 class=\"p-0 m-0\">{{ metadata.descriptor().title! | translate }}</h5>\n                            }\n                        </ng-template>\n                    </div>\n                }\n            </ng-template>\n            <ng-template pTemplate=\"header\">\n                @if (!metadata.descriptor().hideHeader) {\n                    <tr class=\"mng-table-header\" [class]=\"metadata.descriptor().headerClassName\">\n                        @if (selectionEnabled()) {\n                            @if (selectionMode() === 'multiple') {\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                                </th>\n                            } @else {\n                                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                            }\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\" pFrozenColumn [frozen]=\"true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <ng-template #sortableColumnTHTemplate>\n                                <div class=\"flex justify-content-between align-items-center\">\n                                    {{ col.descriptor.title ?? (col.descriptor.property | mngI18nProperty: metadata.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 | mngI18nProperty: metadata.descriptor().model) | translate }}\n                            </ng-template>\n                            @if (col.descriptor.isReorderable) {\n                                <th\n                                    pResizableColumn\n                                    pReorderableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            } @else {\n                                <th\n                                    pResizableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            }\n                        }\n                        @if (hasLastColumn()) {\n                            <th\n                                [style.min-width.px]=\"columnLastMinWidth()\"\n                                pFrozenColumn\n                                [frozen]=\"metadata.descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n                                alignFrozen=\"right\"\n                                class=\"column-custom-last text-right\">\n                                @if (areColumnsToggleable()) {\n                                    <p-multiSelect\n                                        #columnToggleMultiselect\n                                        styleClass=\"p-button-primary mng-table-columns-multiselect\"\n                                        appendTo=\"body\"\n                                        dataKey=\"id\"\n                                        tooltipPosition=\"left\"\n                                        placeholder=\"\"\n                                        dropdownIcon=\"pi pi-sliders-h\"\n                                        [filter]=\"false\"\n                                        [options]=\"prefs.columnsWithPrefs()\"\n                                        [ngModel]=\"visibleColumns()\"\n                                        [pTooltip]=\"'mngTable.adjustTable' | translate\"\n                                        [displaySelectedLabel]=\"false\"\n                                        (onChange)=\"prefs.onColumnToggle($event)\">\n                                        <ng-template pTemplate=\"filter\">\n                                            <div class=\"p-checkbox p-component ml-1\">\n                                                <div class=\"p-hidden-accessible\">\n                                                    <input\n                                                        type=\"checkbox\"\n                                                        readonly=\"readonly\"\n                                                        [checked]=\"columnToggleMultiselect.allSelected\"\n                                                        (focus)=\"columnToggleMultiselect.onHeaderCheckboxFocus()\"\n                                                        (blur)=\"columnToggleMultiselect.onHeaderCheckboxBlur()\"\n                                                        (keydown.space)=\"columnToggleMultiselect.onToggleAll($event)\" />\n                                                </div>\n                                                <div\n                                                    class=\"p-checkbox-box\"\n                                                    role=\"checkbox\"\n                                                    [attr.aria-checked]=\"columnToggleMultiselect.allSelected\"\n                                                    [ngClass]=\"{\n                                                        'p-highlight': anyColumnVisible()\n                                                    }\"\n                                                    (click)=\"prefs.onColumnToggleAll()\">\n                                                    <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': anyColumnVisible()}\"></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)=\"prefs.clearLayoutPreferences()\"></p-button>\n                                        </ng-template>\n                                        <ng-template let-item pTemplate=\"item\">\n                                            {{ item.descriptor.title ?? (item.descriptor.property | mngI18nProperty: metadata.descriptor().model) | translate }}\n                                        </ng-template>\n                                    </p-multiSelect>\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n                @if (hasColumnFilters()) {\n                    <tr class=\"mng-column-filter-row\">\n                        <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                        @if (selectionEnabled()) {\n                            <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <th\n                                [class]=\"col.filter?.descriptor?.columnClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\"\n                                [style.width.px]=\"col.width\"\n                                [style.width.%]=\"col.width ? null : (col.filter?.descriptor?.columnWidth ?? col.descriptor.width ?? null)\"\n                                [style.min-width.px]=\"col.width ? null : (col.filter?.descriptor?.columnMinWidth ?? col.descriptor.minWidth)\"\n                                [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                                @if (col.filter) {\n                                    <mng-table-column-filter [metadata]=\"col.filter\"></mng-table-column-filter>\n                                }\n                            </th>\n                        }\n                        @if (hasLastColumn()) {\n                            <th class=\"column-custom-last\" [style.min-width.px]=\"columnLastMinWidth()\"></th>\n                        }\n                    </tr>\n                }\n            </ng-template>\n            <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n                <tr\n                    [pReorderableRow]=\"idx\"\n                    [ngClass]=\"\n                        metadata.descriptor().rowClassName | mngClassMap: metadata.descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: metadata.descriptor() : item\n                    \">\n                    @if (selectionEnabled()) {\n                        @if (selectionMode() === 'multiple') {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                            </td>\n                        } @else {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                            </td>\n                        }\n                    }\n                    @if (metadata.descriptor().rowExpandable) {\n                        <td>\n                            @if (!metadata.descriptor().rowExpandableProperty || item[metadata.descriptor().rowExpandableProperty!]) {\n                                <button\n                                    pButton\n                                    type=\"button\"\n                                    [pRowToggler]=\"item\"\n                                    class=\"p-button-text p-button-rounded p-button-plain mng-table-row-expand-button\"\n                                    [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n                            }\n                        </td>\n                    }\n                    @if (rowReorderEnabled()) {\n                        <td>\n                            <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n                        </td>\n                    }\n                    @for (col of visibleColumns(); track col.id) {\n                        <td\n                            (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                            [class]=\"\n                                col.descriptor.className\n                                    | mngClassMap: col.descriptor.classNameMapFn : item\n                                    | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\n                            \"\n                            [class.clickable]=\"isCellClickEnabled()\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.width ? null : 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 | mngI18nProperty: metadata.descriptor().model) | translate }}</span>\n                            <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                        </td>\n                    }\n                    @if (hasLastColumn()) {\n                        <td\n                            class=\"column-custom-last justify-content-end text-right\"\n                            [style.min-width.px]=\"columnLastMinWidth()\"\n                            pFrozenColumn\n                            [frozen]=\"metadata.descriptor().actionColumnFrozen ?? true\"\n                            alignFrozen=\"right\">\n                            @if (columnCustomLastTemplate()) {\n                                <ng-container *ngTemplateOutlet=\"columnCustomLastTemplate(); context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                            } @else if (columnCustomLastComponent()) {\n                                <div [mngComponent]=\"columnCustomLastComponent()\" (instanceCreated)=\"columnCustomLastComponentInstance.emit($event)\"></div>\n                            }\n                        </td>\n                    }\n                </tr>\n            </ng-template>\n            <ng-template pTemplate=\"rowexpansion\" let-item>\n                @if (metadata.descriptor().rowExpandable) {\n                    <tr>\n                        <td></td>\n                        <td [colSpan]=\"metadata.descriptor().rowExpandableColSpan\">\n                            @if (metadata.descriptor().rowExpandableComponentType !== undefined) {\n                                <ng-container [mngComponent]=\"metadata.descriptor().rowExpandableComponentType\" [inputs]=\"{item}\"> </ng-container>\n                            } @else {\n                                <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n                            }\n                        </td>\n                    </tr>\n                }\n            </ng-template>\n            <ng-template pTemplate=\"loadingicon\">\n                <div class=\"flex flex-column align-items-center\">\n                    @if (metadata.descriptor().loadingIcon) {\n                        <i [class]=\"'text-white text-4xl pi-spin ' + metadata.descriptor().loadingIcon\"></i>\n                    }\n                    @if (metadata.descriptor().loadingText) {\n                        <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': metadata.descriptor().loadingIcon}\">\n                            {{ metadata.descriptor().loadingText ?? '' | translate }}\n                        </div>\n                    }\n                </div>\n            </ng-template>\n            <ng-template pTemplate=\"loadingbody\">\n                <tr>\n                    <td [attr.colspan]=\"columnsColspan()\">\n                        <div class=\"loading-text\"></div>\n                        <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                    </td>\n                </tr>\n            </ng-template>\n            <ng-template pTemplate=\"emptymessage\">\n                <tr>\n                    <td [attr.colspan]=\"columnsColspan()\">\n                        {{ 'mngTable.noItems' | translate }}\n                    </td>\n                </tr>\n            </ng-template>\n            @if (footerTemplate()) {\n                <ng-template pTemplate=\"summary\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: data.data(), totalCount: data.count()}\"></ng-container>\n                </ng-template>\n            }\n        </p-table>\n    }\n</div>\n" }]
+                    ], providers: [TableMetadataService, TableDataService, TablePreferencesService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    @if (data.isAllPaginationMetaInitialized()) {\n        <p-table\n            [value]=\"data.data()\"\n            [dataKey]=\"metadata.descriptor().trackProperty\"\n            [lazy]=\"isLazy()\"\n            [loading]=\"data.loading()\"\n            [paginator]=\"isPagination()\"\n            [rows]=\"data.rows()\"\n            [first]=\"data.offset()\"\n            [totalRecords]=\"data.count()\"\n            [rowsPerPageOptions]=\"metadata.rowsPerPageOptions()\"\n            [showCurrentPageReport]=\"true\"\n            [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n            [multiSortMeta]=\"data.sortMeta()\"\n            [filters]=\"data.filterMeta()\"\n            [globalFilterFields]=\"metadata.searchFields()\"\n            sortMode=\"multiple\"\n            [selection]=\"[]\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n            [scrollable]=\"true\"\n            scrollHeight=\"flex\"\n            [rowHover]=\"metadata.descriptor().hasHover\"\n            [styleClass]=\"className()\"\n            [resizableColumns]=\"metadata.descriptor().hasResizableColumns\"\n            [columnResizeMode]=\"metadata.descriptor().columnResizeMode ?? 'expand'\"\n            [reorderableColumns]=\"areColumnsReorderable()\"\n            paginatorDropdownAppendTo=\"body\"\n            [columns]=\"visibleColumns()\"\n            [expandedRowKeys]=\"expandedRowKeys()\"\n            (onColResize)=\"prefs.onColumnResize($event)\"\n            (onColReorder)=\"prefs.onColumnReorder($event)\"\n            (onLazyLoad)=\"onTableLazyLoad($event)\"\n            (onFilter)=\"onTableFilter($event)\"\n            (onRowReorder)=\"onRowReorder($event)\">\n            <ng-template pTemplate=\"caption\">\n                @if (isCaptionVisible()) {\n                    <div class=\"table-header\">\n                        @if (overlayWithTagFilters().length > 0 || metadata.descriptor().search) {\n                            <mng-table-filter-overlay-with-tag\n                                [title]=\"metadata.descriptor().title\"\n                                [metadata]=\"overlayWithTagFilters()\"\n                                [genericFilterDescriptor]=\"metadata.genericFilterDescriptor()\"\n                                [model]=\"metadata.descriptor().model\"\n                                [enableSearch]=\"metadata.descriptor().search\"\n                                [search]=\"data.searchMeta()\"\n                                [searchLimitWordMax]=\"metadata.descriptor().searchLimitMaxWords\"\n                                [enableCaseSensitive]=\"isLazy()\">\n                                @if (hasTitleDisplay()) {\n                                    <ng-template mngTemplate=\"title\">\n                                        <ng-container *ngTemplateOutlet=\"captionTemplateOrComponentOrTitle\"></ng-container>\n                                    </ng-template>\n                                }\n                            </mng-table-filter-overlay-with-tag>\n                        } @else {\n                            <ng-container *ngTemplateOutlet=\"captionTemplateOrComponentOrTitle\"></ng-container>\n                        }\n                        <ng-template #captionTemplateOrComponentOrTitle>\n                            @if (captionTemplate()) {\n                                <ng-container *ngTemplateOutlet=\"captionTemplate()\"></ng-container>\n                            } @else if (captionComponent()) {\n                                <ng-container [mngComponent]=\"captionComponent()\" (instanceCreated)=\"captionComponentInstance.emit($event)\"></ng-container>\n                            } @else if (metadata.descriptor().title) {\n                                <h5 class=\"p-0 m-0\">{{ metadata.descriptor().title! | translate }}</h5>\n                            }\n                        </ng-template>\n                    </div>\n                }\n            </ng-template>\n            <ng-template pTemplate=\"header\">\n                @if (!metadata.descriptor().hideHeader) {\n                    <tr class=\"mng-table-header\" [class]=\"metadata.descriptor().headerClassName\">\n                        @if (selectionEnabled()) {\n                            @if (selectionMode() === 'multiple') {\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                                </th>\n                            } @else {\n                                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                            }\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\" pFrozenColumn [frozen]=\"true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <ng-template #sortableColumnTHTemplate>\n                                <div class=\"flex justify-content-between align-items-center\">\n                                    {{\n                                        (col.descriptor.title && !col.descriptor.titleUseModelBase\n                                            ? col.descriptor.title\n                                            : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                        ) | translate\n                                    }}\n                                    <p-sortIcon [field]=\"col.sort?.property\"></p-sortIcon>\n                                </div>\n                            </ng-template>\n                            <ng-template #nonSortableColumnTHTemplate>\n                                {{\n                                    (col.descriptor.title && !col.descriptor.titleUseModelBase\n                                        ? col.descriptor.title\n                                        : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                    ) | translate\n                                }}\n                            </ng-template>\n                            @if (col.descriptor.isReorderable) {\n                                <th\n                                    pResizableColumn\n                                    pReorderableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            } @else {\n                                <th\n                                    pResizableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            }\n                        }\n                        @if (hasLastColumn()) {\n                            <th\n                                [style.min-width.px]=\"columnLastMinWidth()\"\n                                pFrozenColumn\n                                [frozen]=\"metadata.descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n                                alignFrozen=\"right\"\n                                class=\"column-custom-last text-right\">\n                                @if (areColumnsToggleable()) {\n                                    <p-multiSelect\n                                        #columnToggleMultiselect\n                                        styleClass=\"p-button-primary mng-table-columns-multiselect\"\n                                        appendTo=\"body\"\n                                        dataKey=\"id\"\n                                        tooltipPosition=\"left\"\n                                        placeholder=\"\"\n                                        dropdownIcon=\"pi pi-sliders-h\"\n                                        [filter]=\"false\"\n                                        [options]=\"prefs.columnsWithPrefs()\"\n                                        [ngModel]=\"visibleColumns()\"\n                                        [pTooltip]=\"'mngTable.adjustTable' | translate\"\n                                        [displaySelectedLabel]=\"false\"\n                                        (onChange)=\"prefs.onColumnToggle($event)\">\n                                        <ng-template pTemplate=\"filter\">\n                                            <div class=\"p-checkbox p-component ml-1\">\n                                                <div class=\"p-hidden-accessible\">\n                                                    <input\n                                                        type=\"checkbox\"\n                                                        readonly=\"readonly\"\n                                                        [checked]=\"columnToggleMultiselect.allSelected\"\n                                                        (focus)=\"columnToggleMultiselect.onHeaderCheckboxFocus()\"\n                                                        (blur)=\"columnToggleMultiselect.onHeaderCheckboxBlur()\"\n                                                        (keydown.space)=\"columnToggleMultiselect.onToggleAll($event)\" />\n                                                </div>\n                                                <div\n                                                    class=\"p-checkbox-box\"\n                                                    role=\"checkbox\"\n                                                    [attr.aria-checked]=\"columnToggleMultiselect.allSelected\"\n                                                    [ngClass]=\"{\n                                                        'p-highlight': anyColumnVisible()\n                                                    }\"\n                                                    (click)=\"prefs.onColumnToggleAll()\">\n                                                    <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': anyColumnVisible()}\"></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)=\"prefs.clearLayoutPreferences()\"></p-button>\n                                        </ng-template>\n                                        <ng-template let-item pTemplate=\"item\">\n                                            {{\n                                                (item.descriptor.title && !item.descriptor.titleUseModelBase\n                                                    ? item.descriptor.title\n                                                    : (item.descriptor.title ?? item.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                                ) | translate\n                                            }}\n                                        </ng-template>\n                                    </p-multiSelect>\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n                @if (hasColumnFilters()) {\n                    <tr class=\"mng-column-filter-row\">\n                        <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                        @if (selectionEnabled()) {\n                            <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <th\n                                [class]=\"col.filter?.descriptor?.columnClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\"\n                                [style.width.px]=\"col.width\"\n                                [style.width.%]=\"col.width ? null : (col.filter?.descriptor?.columnWidth ?? col.descriptor.width ?? null)\"\n                                [style.min-width.px]=\"col.width ? null : (col.filter?.descriptor?.columnMinWidth ?? col.descriptor.minWidth)\"\n                                [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                                @if (col.filter) {\n                                    <mng-table-column-filter [metadata]=\"col.filter\"></mng-table-column-filter>\n                                }\n                            </th>\n                        }\n                        @if (hasLastColumn()) {\n                            <th class=\"column-custom-last\" [style.min-width.px]=\"columnLastMinWidth()\"></th>\n                        }\n                    </tr>\n                }\n            </ng-template>\n            <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n                <tr\n                    [pReorderableRow]=\"idx\"\n                    [ngClass]=\"\n                        metadata.descriptor().rowClassName | mngClassMap: metadata.descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: metadata.descriptor() : item\n                    \">\n                    @if (selectionEnabled()) {\n                        @if (selectionMode() === 'multiple') {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                            </td>\n                        } @else {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                            </td>\n                        }\n                    }\n                    @if (metadata.descriptor().rowExpandable) {\n                        <td>\n                            @if (!metadata.descriptor().rowExpandableProperty || item[metadata.descriptor().rowExpandableProperty!]) {\n                                <button\n                                    pButton\n                                    type=\"button\"\n                                    [pRowToggler]=\"item\"\n                                    class=\"p-button-text p-button-rounded p-button-plain mng-table-row-expand-button\"\n                                    [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n                            }\n                        </td>\n                    }\n                    @if (rowReorderEnabled()) {\n                        <td>\n                            <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n                        </td>\n                    }\n                    @for (col of visibleColumns(); track col.id) {\n                        <td\n                            (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                            [class]=\"\n                                col.descriptor.className\n                                    | mngClassMap: col.descriptor.classNameMapFn : item\n                                    | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\n                            \"\n                            [class.clickable]=\"isCellClickEnabled()\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                            <span class=\"p-column-title\">\n                                {{\n                                    (col.descriptor.title && !col.descriptor.titleUseModelBase\n                                        ? col.descriptor.title\n                                        : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                    ) | translate\n                                }}\n                            </span>\n                            <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                        </td>\n                    }\n                    @if (hasLastColumn()) {\n                        <td\n                            class=\"column-custom-last justify-content-end text-right\"\n                            [style.min-width.px]=\"columnLastMinWidth()\"\n                            pFrozenColumn\n                            [frozen]=\"metadata.descriptor().actionColumnFrozen ?? true\"\n                            alignFrozen=\"right\">\n                            @if (columnCustomLastTemplate()) {\n                                <ng-container *ngTemplateOutlet=\"columnCustomLastTemplate(); context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                            } @else if (columnCustomLastComponent()) {\n                                <div [mngComponent]=\"columnCustomLastComponent()\" (instanceCreated)=\"columnCustomLastComponentInstance.emit($event)\"></div>\n                            }\n                        </td>\n                    }\n                </tr>\n            </ng-template>\n            <ng-template pTemplate=\"rowexpansion\" let-item>\n                @if (metadata.descriptor().rowExpandable) {\n                    <tr>\n                        <td></td>\n                        <td [colSpan]=\"metadata.descriptor().rowExpandableColSpan\">\n                            @if (metadata.descriptor().rowExpandableComponentType !== undefined) {\n                                <ng-container [mngComponent]=\"metadata.descriptor().rowExpandableComponentType\" [inputs]=\"{item}\"> </ng-container>\n                            } @else {\n                                <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n                            }\n                        </td>\n                    </tr>\n                }\n            </ng-template>\n            <ng-template pTemplate=\"loadingicon\">\n                <div class=\"flex flex-column align-items-center\">\n                    @if (metadata.descriptor().loadingIcon) {\n                        <i [class]=\"'text-white text-4xl pi-spin ' + metadata.descriptor().loadingIcon\"></i>\n                    }\n                    @if (metadata.descriptor().loadingText) {\n                        <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': metadata.descriptor().loadingIcon}\">\n                            {{ metadata.descriptor().loadingText ?? '' | translate }}\n                        </div>\n                    }\n                </div>\n            </ng-template>\n            <ng-template pTemplate=\"loadingbody\">\n                <tr>\n                    <td [attr.colspan]=\"columnsColspan()\">\n                        <div class=\"loading-text\"></div>\n                        <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                    </td>\n                </tr>\n            </ng-template>\n            <ng-template pTemplate=\"emptymessage\">\n                <tr>\n                    <td [attr.colspan]=\"columnsColspan()\">\n                        {{ 'mngTable.noItems' | translate }}\n                    </td>\n                </tr>\n            </ng-template>\n            @if (footerTemplate()) {\n                <ng-template pTemplate=\"summary\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: data.data(), totalCount: data.count()}\"></ng-container>\n                </ng-template>\n            }\n        </p-table>\n    }\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 /**