@mediusinc/mng-commons 5.5.0-rc.0 → 5.5.0-rc.2

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

@@ -1,8 +1,8 @@
 import { trigger, transition, style, animate } from '@angular/animations';
 import { NgClass, NgTemplateOutlet, DecimalPipe, CurrencyPipe, DatePipe, AsyncPipe, NgStyle } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, ElementRef, Renderer2, ChangeDetectorRef, DestroyRef, input, computed, viewChild, effect, untracked, Component, ViewEncapsulation, ChangeDetectionStrategy, LOCALE_ID, Pipe, output, booleanAttribute, InjectionToken, contentChildren, Injector, viewChildren, afterNextRender } from '@angular/core';
-import { toSignal, takeUntilDestroyed, toObservable, outputFromObservable } from '@angular/core/rxjs-interop';
+import { InjectionToken, inject, Injector, signal, computed, Injectable, ElementRef, Renderer2, ChangeDetectorRef, DestroyRef, input, viewChild, effect, untracked, Component, ViewEncapsulation, ChangeDetectionStrategy, LOCALE_ID, Pipe, output, booleanAttribute, contentChildren, viewChildren, afterNextRender } from '@angular/core';
+import { toSignal, toObservable, takeUntilDestroyed, outputFromObservable } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2 from '@ngx-translate/core';
@@ -23,17 +23,17 @@ import { InputTextModule } from 'primeng/inputtext';
 import * as i1$3 from 'primeng/table';
 import { Table, TableModule } from 'primeng/table';
 import { ZIndexUtils } from 'primeng/utils';
-import { Subject, debounceTime, distinctUntilChanged, ReplaySubject, switchMap, NEVER, BehaviorSubject, combineLatest, skip, of } from 'rxjs';
-import { FilterMatchMode, dateToIsoString, angularDateFormatHasTime, fromAngularDateFormatToPrime, angularDateFormatHasSeconds, fromAngularNumberFormatToFractions, COMMONS_MODULE_CONFIG_IT, GetterPipe, TemplatePipe, BooleanPipe, EnumPipe, ComponentDirective, getI18nTypePropertyKey, TemplateDirective, findTemplateByName, toastMessage, CommonsService, LoggerService, CommonsStorageService, booleanOrUndefinedAttribute, toObservable as toObservable$1, mergeDataListParamsWithDefaults, fromTableLoadToDataListParams, dataListParamsToUrlQuery, fromSubscribeError, getErrorLogLevel, fromUrlQueryToDataListParams, I18nPropertyPipe, ClassMapPipe, CommonsFeatureTypeEnum } from '@mediusinc/mng-commons/core';
-import { FilterTypeEnum, FilterLookupDescriptor, FilterDescriptor, FilterLookupTypeEnum, FilterDisplayTypeEnum } from '@mediusinc/mng-commons/filter';
+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 { 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';
 import * as i4$1 from 'primeng/button';
 import { ButtonModule, Button } from 'primeng/button';
 import * as i4$2 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
 import * as i1$1 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import { ColumnDisplayTypeEnum, TablePaginationModeEnum, TableSizeEnum, tableDescriptor, TableDynamicDescriptorInst } from '@mediusinc/mng-commons/table/api';
 import * as i2$2 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
 import { DropdownModule } from 'primeng/dropdown';
@@ -50,10 +50,9 @@ import { PaginatorModule } from 'primeng/paginator';
 import { Router, ActivatedRoute, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
 import * as i3 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
-import { filter } from 'rxjs/operators';
 import { getI18nForModel } from '@mediusinc/mng-commons/model';
 
-function generateMatchModeOptions(primeConfig, descriptor, cmpSerCfg) {
+function filterGenerateMatchModeOptions(primeConfig, descriptor, cmpSerCfg) {
     let options = undefined;
     if (descriptor == null || descriptor.filterType === FilterTypeEnum.String) {
         options = [
@@ -80,18 +79,12 @@ function generateMatchModeOptions(primeConfig, descriptor, cmpSerCfg) {
         ];
     }
     else if (descriptor.filterType === FilterTypeEnum.Lookup || descriptor.filterType === FilterTypeEnum.LookupEnum) {
-        if (descriptor instanceof FilterLookupDescriptor && descriptor.multiselect) {
-            options = [
-                { value: FilterMatchMode.In, label: primeConfig.getTranslation(FilterMatchMode.In) },
-                { value: FilterMatchMode.NotIn, label: primeConfig.getTranslation(FilterMatchMode.NotIn) }
-            ];
-        }
-        else {
-            options = [
-                { value: FilterMatchMode.Equals, label: primeConfig.getTranslation(FilterMatchMode.Equals) },
-                { value: FilterMatchMode.NotEquals, label: primeConfig.getTranslation(FilterMatchMode.NotEquals) }
-            ];
-        }
+        options = [
+            { value: FilterMatchMode.Equals, label: primeConfig.getTranslation(FilterMatchMode.Equals) },
+            { value: FilterMatchMode.NotEquals, label: primeConfig.getTranslation(FilterMatchMode.NotEquals) },
+            { value: FilterMatchMode.In, label: primeConfig.getTranslation(FilterMatchMode.In) },
+            { value: FilterMatchMode.NotIn, label: primeConfig.getTranslation(FilterMatchMode.NotIn) }
+        ];
     }
     else if (descriptor.filterType === FilterTypeEnum.Date) {
         if (!descriptor.datePickerShowTime && !descriptor.dateValueNoTime && !cmpSerCfg?.filtersDateOnlyDisabled) {
@@ -130,16 +123,6 @@ function filterGetDefaultMatchMode(descriptor, matchModes = []) {
     let defaultMatchMode = FilterMatchMode.Equals;
     if (descriptor?.filterType === FilterTypeEnum.String)
         defaultMatchMode = FilterMatchMode.StartsWith;
-    else if (descriptor?.filterType === FilterTypeEnum.Number || descriptor?.filterType === FilterTypeEnum.Date || descriptor?.filterType === FilterTypeEnum.Boolean)
-        defaultMatchMode = FilterMatchMode.Equals;
-    else if (descriptor?.filterType === FilterTypeEnum.Lookup || descriptor?.filterType === FilterTypeEnum.LookupEnum) {
-        if (descriptor instanceof FilterLookupDescriptor) {
-            defaultMatchMode = descriptor?.multiselect ? FilterMatchMode.In : FilterMatchMode.Equals;
-        }
-        else {
-            defaultMatchMode = FilterMatchMode.Equals;
-        }
-    }
     // overwrite type default set in descriptor
     if (descriptor?.defaultMatchMode) {
         defaultMatchMode = descriptor.defaultMatchMode;
@@ -379,30 +362,343 @@ function createFilterDescriptorsFromGeneric(properties, valueLookup) {
     }, []);
 }
 
-class DataListService {
+function tableCreateFilterMeta(paramsWithDefaults) {
+    const primeFilterMeta = {};
+    // if any filter is present, no default filters should be applied!
+    if (paramsWithDefaults?.filters) {
+        Object.entries(paramsWithDefaults.filters).forEach(([key, value]) => {
+            primeFilterMeta[key] = {
+                value: value?.value,
+                matchMode: value?.matchMode,
+                caseSensitive: value?.caseSensitive
+            };
+        });
+    }
+    return primeFilterMeta;
+}
+function tableCreateSortMeta(paramsWithDefaults) {
+    if (paramsWithDefaults?.sort !== undefined && Array.isArray(paramsWithDefaults?.sort) && paramsWithDefaults?.sort.length > 0) {
+        return paramsWithDefaults?.sort.map(s => ({
+            field: s.property,
+            order: s.ascending ? 1 : -1
+        }));
+    }
+    return undefined;
+}
+
+const COMMONS_TABLE_FEATURE_CONFIG_IT = new InjectionToken('COMMONS_TABLE_FEATURE_CONFIG');
+
+class TableMetadataService {
+    static { this.cmpTypeName = 'TableComponent'; }
+    #injector;
+    #translationObserver;
+    // signal sources
+    #signalSources;
+    #descriptor;
+    #updateDescriptorFromSourceEffect;
+    #genericFilters;
+    // search
+    #searchFieldsFromSignalSource;
+    #searchFields;
+    #searchFieldsEffect;
     constructor() {
+        this.#injector = inject(Injector);
+        this.primeConfig = inject(PrimeNGConfig);
+        this.moduleConfig = inject(COMMONS_MODULE_CONFIG_IT, { optional: true });
+        this.tableModuleConfig = inject(COMMONS_TABLE_FEATURE_CONFIG_IT, { optional: true });
+        this.serializationCfg = {};
+        this.#translationObserver = toSignal(this.primeConfig.translationObserver);
+        this.defaultFilterDisplayType = this.tableModuleConfig?.filterDisplayType ?? FilterDisplayTypeEnum.Column;
+        // signal sources
+        this.#signalSources = signal({});
+        // descriptors
+        this.descriptorFromSource = computed(() => this.#signalSources().descriptor?.());
+        this.#descriptor = signal(tableDescriptor());
+        this.descriptor = this.#descriptor.asReadonly();
+        this.#updateDescriptorFromSourceEffect = effectWithDeps([this.descriptorFromSource], ([d]) => {
+            if (d != null) {
+                this.#descriptor.set(d);
+            }
+        });
         // pagination
-        this.sortMeta = signal(null);
-        this.filterMeta = signal({});
-        this.rowsPerPageOptions = signal([25, 50, 100]);
-        this.rows = signal(this.rowsPerPageOptions()[0]);
-        this.offset = signal(0);
-        this.globalFilterFields = signal([]);
+        this.rowsPerPageOptions = computed(() => {
+            const descriptor = this.descriptor();
+            if (Array.isArray(descriptor.rowsPerPageOptions) && descriptor.rowsPerPageOptions.length > 0) {
+                return descriptor.rowsPerPageOptions;
+            }
+            else {
+                return [25, 50, 100];
+            }
+        });
+        // filters
+        this.filterDescriptors = computed(() => this.descriptor().filters);
+        this.filters = computed(() => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const observer = this.#translationObserver(); // need this one to track language changes
+            return this.filterDescriptors().map(d => this.mapDescriptorToMetadata(d));
+        });
+        this.genericFilterDescriptor = computed(() => this.descriptor().genericFilter);
+        this.#genericFilters = signal([]);
+        this.genericFilters = this.#genericFilters.asReadonly();
+        // search
+        this.#searchFieldsFromSignalSource = computed(() => this.#signalSources().searchFields?.());
+        this.#searchFields = signal([]);
+        this.searchFields = this.#searchFields.asReadonly();
+        this.#searchFieldsEffect = effectWithDeps([this.descriptor, this.#searchFieldsFromSignalSource], ([descriptor, searchFieldsFromSignalSource]) => {
+            this.#searchFields.set(searchFieldsFromSignalSource ?? (descriptor.search && descriptor.searchFields ? descriptor.searchFields : this.descriptor().columns.map(c => c.property)));
+        });
+        // params
+        this.defaultParams = computed(() => {
+            const params = {
+                offset: 0,
+                limit: this.rowsPerPageOptions()[0],
+                sort: this.descriptor()
+                    .sorts.filter(s => s.defaultIsEnabled)
+                    .sort((s1, s2) => (s1.defaultOrder ?? 1000) - (s2.defaultOrder ?? 1000))
+                    .map(s => ({
+                    property: s.property,
+                    ascending: s.defaultIsAscending
+                })),
+                filters: {}
+            };
+            this.filters()
+                .filter(f => f.descriptor.hasDefaultValue)
+                .forEach(f => {
+                params.filters[f.descriptor.property] = {
+                    value: f.descriptor.defaultValue,
+                    matchMode: f.defaultMatchMode
+                };
+            });
+            return params;
+        });
+        filterApplySerializationConfigToCmp(this.moduleConfig, this.serializationCfg);
+        combineLatest([toObservable(this.genericFilterDescriptor), toObservable(this.#translationObserver)])
+            .pipe(switchMap(([genericFilterDescriptor]) => {
+            if (genericFilterDescriptor) {
+                const dataProvider = this.genericFilterDescriptor()?.propertyLookup;
+                const genericFilterService = dataProvider?.serviceType ? this.#injector.get(dataProvider.serviceType) : null;
+                // fetch filterable properties
+                return toObservable$1(genericFilterDescriptor.propertyLookup.lookup({}, genericFilterService));
+            }
+            return of([]);
+        }), takeUntilDestroyed())
+            .subscribe({
+            next: genericFilters => {
+                // set descriptors from generic filter data
+                this.#genericFilters.set(createFilterDescriptorsFromGeneric(genericFilters, this.genericFilterDescriptor()?.valueLookup).map(d => this.mapDescriptorToMetadata(d)));
+            }
+        });
+    }
+    setSignalSources(descriptor, searchFields) {
+        this.#signalSources.set({ descriptor, searchFields });
+    }
+    setDescriptor(descriptor) {
+        if (this.descriptorFromSource() instanceof TableDynamicDescriptorInst) {
+            this.#descriptor.set(descriptor);
+        }
+    }
+    mapDescriptorToMetadata(descriptor) {
+        const matchModes = filterGenerateMatchModeOptions(this.primeConfig, descriptor, this.serializationCfg);
+        return {
+            descriptor: descriptor,
+            matchModes: matchModes,
+            defaultMatchMode: filterGetDefaultMatchMode(descriptor, matchModes),
+            dateConfig: filterGetDateConfig(descriptor, this.serializationCfg),
+            numberConfig: filterGetNumberConfig(descriptor)
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableMetadataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableMetadataService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableMetadataService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class TableDataService {
+    constructor() {
+        this.#injector = inject(Injector);
+        this.#commons = inject(CommonsService);
+        this.#metadata = inject(TableMetadataService);
+        // signal sources
+        this.#dataSources = signal({});
+        // data sources
+        this.#manualLoading = computed(() => this.#dataSources()?.manualLoading?.());
+        // results that are set directly via input and are not result of a asynchronous operation (aka data provider)
+        this.#synchronousResult = computed(() => {
+            const dataSources = this.#dataSources();
+            if (dataSources?.dataProvider?.() !== undefined) {
+                return undefined;
+            }
+            if (dataSources?.dataListResult?.() !== undefined) {
+                return dataSources?.dataListResult();
+            }
+            if (dataSources?.arrayItems?.() !== undefined) {
+                return { data: dataSources.arrayItems(), totalCount: dataSources.arrayItems()?.length ?? 0 };
+            }
+            return undefined;
+        });
+        this.#dataProvider = computed(() => this.#dataSources()?.dataProvider?.());
+        this.#dataProviderService = computed(() => {
+            const dataProvider = this.#dataProvider();
+            return dataProvider?.serviceType ? this.#injector.get(dataProvider.serviceType) : null;
+        });
+        this.#synchronousResultEffect = effectWithDeps([this.#synchronousResult], ([res]) => {
+            if (res != null) {
+                this.#setData(res.data ?? [], res.totalCount);
+            }
+        });
+        this.#synchronousLoadingEffect = effectWithDeps([this.#synchronousResult, this.#manualLoading], ([res, manualLoading]) => {
+            if (res != null && manualLoading == null) {
+                this.#loading.set(false);
+            }
+        });
+        this.#manualLoadingEffect = effectWithDeps([this.#manualLoading], ([manualLoading]) => {
+            if (manualLoading != null) {
+                this.#loading.set(manualLoading);
+            }
+        });
+        // pagination
+        this.#params = signal(undefined);
+        this.params = this.#params.asReadonly();
+        this.#sortMeta = signal(undefined);
+        this.sortMeta = this.#sortMeta.asReadonly();
+        this.#filterMeta = signal({});
+        this.filterMeta = this.#filterMeta.asReadonly();
+        this.#isSortAndFilterMetaInitialized = signal(false);
+        this.#defaultParamsEffect = effectWithDeps([this.#metadata.defaultParams], ([defaultParams]) => {
+            this.#sortMeta.set(tableCreateSortMeta(defaultParams));
+            this.#filterMeta.set(tableCreateFilterMeta(defaultParams));
+            this.#isSortAndFilterMetaInitialized.set(true);
+        }, { firstOnly: true });
+        this.#isSearchMetaInitialized = signal(false);
+        this.#searchMeta = signal(undefined);
+        this.searchMeta = this.#searchMeta.asReadonly();
+        this.isAllPaginationMetaInitialized = computed(() => this.#isSortAndFilterMetaInitialized() && this.#isSortAndFilterMetaInitialized());
+        this.paginationMode = computed(() => {
+            const descriptor = this.#metadata.descriptor();
+            if (descriptor.paginationMode != null) {
+                // descriptor choice is the strongest - if defined, use this value
+                return descriptor.paginationMode;
+            }
+            else if (this.#dataProvider() != null) {
+                // when data provider is used, use pagination
+                return TablePaginationModeEnum.Pagination;
+            }
+            else {
+                return TablePaginationModeEnum.None;
+            }
+        });
+        this.offset = computed(() => this.params()?.offset ?? 0);
+        this.rows = computed(() => {
+            if (this.params()?.limit) {
+                return this.params()?.limit;
+            }
+            const descriptor = this.#metadata.descriptor();
+            const rowsPerPageOptions = this.#metadata.rowsPerPageOptions();
+            if (descriptor.defaultNumRows && rowsPerPageOptions.includes(descriptor.defaultNumRows)) {
+                return descriptor.defaultNumRows;
+            }
+            return rowsPerPageOptions[0];
+        });
         // data
-        this._data = signal([]);
-        this._count = signal(0);
-        this.data = this._data.asReadonly();
-        this.count = this._count.asReadonly();
-        this.loading = signal(true);
-    }
-    setData(data, count) {
-        this._data.set([...data]);
-        this._count.set(count ?? data.length);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: DataListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: DataListService }); }
+        this.#data = signal([]);
+        this.data = this.#data.asReadonly();
+        this.#count = signal(0);
+        this.count = this.#count.asReadonly();
+        this.#loading = signal(true);
+        this.loading = this.#loading.asReadonly();
+    }
+    #injector;
+    #commons;
+    #metadata;
+    // signal sources
+    #dataSources;
+    // data sources
+    #manualLoading;
+    // results that are set directly via input and are not result of a asynchronous operation (aka data provider)
+    #synchronousResult;
+    #dataProvider;
+    #dataProviderService;
+    #synchronousResultEffect;
+    #synchronousLoadingEffect;
+    #manualLoadingEffect;
+    #dataProviderSubscription;
+    // pagination
+    #params;
+    #sortMeta;
+    #filterMeta;
+    #isSortAndFilterMetaInitialized;
+    #defaultParamsEffect;
+    #isSearchMetaInitialized;
+    #searchMeta;
+    // data
+    #data;
+    #count;
+    #loading;
+    setDataSources(arrayItems, dataListResult, dataProvider, manualLoading) {
+        this.#dataSources.set({ arrayItems, dataListResult, dataProvider, manualLoading });
+    }
+    fetchWithDataProvider(params, onErrorFn) {
+        const dataProvider = this.#dataProvider();
+        if (!dataProvider || params.limit === 0) {
+            return false;
+        }
+        this.#dataProviderSubscription?.unsubscribe();
+        this.#loading.set(true);
+        this.#dataProviderSubscription = toObservable$1(dataProvider.getAll(params, this.#dataProviderService(), this.#metadata.descriptor().isLocalized ? (this.#commons.appDataLocale() ?? undefined) : undefined)).subscribe({
+            next: res => {
+                const descriptorInput = this.#metadata.descriptorFromSource();
+                if (descriptorInput instanceof TableDynamicDescriptorInst) {
+                    this.#metadata.setDescriptor(descriptorInput.toTableDescriptorFromData(res));
+                }
+                this.#setData(res?.data ?? [], res?.totalCount);
+                this.#loading.set(false);
+            },
+            error: err => {
+                onErrorFn(err);
+                this.#setData([]);
+                this.#loading.set(false);
+            }
+        });
+        return true;
+    }
+    setParams(params, fromQueryParams = false) {
+        if (!fromQueryParams && this.compareWithCurrentParams(params)) {
+            return;
+        }
+        this.#params.set(params);
+        this.#sortMeta.set(tableCreateSortMeta(params));
+        this.#filterMeta.set(tableCreateFilterMeta(params));
+        this.#isSortAndFilterMetaInitialized.set(true);
+        if (fromQueryParams && !this.#isSearchMetaInitialized() && params?.search) {
+            this.#searchMeta.set({ value: params.search, caseSensitive: params.filters?.['global']?.caseSensitive ?? false });
+        }
+        this.#isSearchMetaInitialized.set(true);
+    }
+    /**
+     * Compare the given params with the stored params in the DataListService.
+     *
+     * @param {DataListParams} params - The params to compare with the stored params.
+     *
+     * @return {boolean} - True if the given params match the stored params, otherwise false.
+     */
+    compareWithCurrentParams(params) {
+        return (params.offset === this.offset() &&
+            params.limit === this.rows() &&
+            JSON.stringify(tableCreateSortMeta(params)) === JSON.stringify(this.#sortMeta()) &&
+            JSON.stringify(tableCreateFilterMeta(params)) === JSON.stringify(this.#filterMeta()));
+    }
+    #setData(data, count) {
+        this.#data.set([...data]);
+        this.#count.set(count ?? data.length);
+    }
+    ngOnDestroy() {
+        this.#dataProviderSubscription?.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableDataService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: DataListService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableDataService, decorators: [{
             type: Injectable
         }] });
 
@@ -418,23 +714,17 @@ class TableColumnFilterComponent {
         this.FilterMatchMode = FilterMatchMode;
         this.el = inject(ElementRef);
         this.primeTable = inject(Table);
-        this.dataListService = inject((DataListService));
-        this.moduleConfig = inject(COMMONS_MODULE_CONFIG_IT, { optional: true });
         this.renderer = inject(Renderer2);
-        this.primeConfig = inject(PrimeNGConfig);
         this.overlayService = inject(OverlayService);
         this.cd = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
+        this.tableData = inject((TableDataService));
+        this.tableMetadata = inject(TableMetadataService);
         this.document = window.document;
-        this.descriptor = input.required();
-        this.descriptorAsLookup = computed(() => (this.descriptor() instanceof FilterLookupDescriptor ? this.descriptor() : undefined));
+        this.metadata = input.required();
+        this.descriptorAsLookup = computed(() => this.metadata().descriptor instanceof FilterLookupDescriptor ? this.metadata().descriptor : undefined);
         this.icon = viewChild('icon');
-        this.translationObserver = toSignal(this.primeConfig.translationObserver);
-        this.matchModes = computed(() => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const translationObserver = this.translationObserver();
-            return generateMatchModeOptions(this.primeConfig, this.descriptor(), this.serializationCfg);
-        });
+        this.matchModes = computed(() => this.metadata().matchModes);
         this.filterConstraint = signal(undefined);
         this.isFilterSet = computed(() => this.filterConstraint()?.matchMode === FilterMatchMode.Exists ||
             this.filterConstraint()?.matchMode === FilterMatchMode.DoesNotExist ||
@@ -442,19 +732,20 @@ class TableColumnFilterComponent {
         this.isInputDisabled = computed(() => this.filterConstraint()?.matchMode === FilterMatchMode.Exists || this.filterConstraint()?.matchMode === FilterMatchMode.DoesNotExist);
         this.overlayVisible = signal(false);
         // display configs
-        this.dateConfig = computed(() => filterGetDateConfig(this.descriptor(), this.serializationCfg));
-        this.numberConfig = computed(() => filterGetNumberConfig(this.descriptor()));
+        this.isMultiselect = computed(() => {
+            const ft = this.filterConstraint();
+            const matchMode = ft?.displayMatchMode ?? this.metadata().defaultMatchMode;
+            return (matchMode === FilterMatchMode.In || matchMode === FilterMatchMode.NotIn) && (ft?.displayValue == null || Array.isArray(ft.displayValue));
+        });
         this.window = this.document.defaultView;
         this.numericValueFromModelChange = null;
         this.dateDebounceSubject = new Subject();
-        this.serializationCfg = {};
-        filterApplySerializationConfigToCmp(this.moduleConfig, this.serializationCfg);
         this.dateDebounceSubject.pipe(debounceTime(500), distinctUntilChanged(), takeUntilDestroyed()).subscribe(v => this.updateFilterOnDisplayValueChange(v));
         effect(() => {
-            const fieldFilterMeta = this.dataListService.filterMeta()[this.descriptor().property];
+            const fieldFilterMeta = this.tableData.filterMeta()?.[this.metadata().descriptor.property];
             const filterConstraint = untracked(() => this.filterConstraint());
             if (fieldFilterMeta && (!filterConstraint || filterConstraint.value !== fieldFilterMeta.value || filterConstraint.matchMode !== fieldFilterMeta.matchMode)) {
-                this.setFilterConstraint(filterSetMetadataOnChange(fieldFilterMeta, fieldFilterMeta.matchMode, fieldFilterMeta.value, untracked(() => this.descriptor().filterType), untracked(() => this.dateConfig())));
+                this.setFilterConstraint(filterSetMetadataOnChange(fieldFilterMeta, fieldFilterMeta.matchMode, fieldFilterMeta.value, untracked(() => this.metadata().descriptor.filterType), untracked(() => this.metadata().dateConfig)));
             }
         }, { allowSignalWrites: true });
     }
@@ -520,16 +811,13 @@ class TableColumnFilterComponent {
     }
     // eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-explicit-any
     dropdownFilter(value) {
-        if (Array.isArray(value) && value.length === 0) {
-            value = undefined;
-        }
         this.updateFilterOnDisplayValueChange(value);
     }
     onMatchModeChange(displayMatchMode) {
         if (this.filterConstraint()?.displayMatchMode === displayMatchMode) {
             return;
         }
-        this.setFilterConstraint(filterSetMetadataOnDisplayChange(this.filterConstraint(), displayMatchMode, filterAdjustDisplayValueOnMatchModeChange(displayMatchMode, this.filterConstraint()?.displayValue), this.descriptor().filterType, this.dateConfig()));
+        this.setFilterConstraint(filterSetMetadataOnDisplayChange(this.filterConstraint(), displayMatchMode, filterAdjustDisplayValueOnMatchModeChange(displayMatchMode, this.filterConstraint()?.displayValue), this.metadata().descriptor.filterType, this.metadata().dateConfig));
         this.hideOverlay();
     }
     onMatchModeKeyDown(event) {
@@ -598,7 +886,7 @@ class TableColumnFilterComponent {
             case 'visible':
                 this.overlay = event.element;
                 this.renderer.appendChild(this.document.body, this.overlay);
-                ZIndexUtils.set('overlay', this.overlay, this.primeConfig.zIndex.overlay);
+                ZIndexUtils.set('overlay', this.overlay, this.tableMetadata.primeConfig.zIndex.overlay);
                 DomHandler.absolutePosition(this.overlay, this.icon()?.nativeElement);
                 this.bindDocumentClickListener();
                 this.bindDocumentResizeListener();
@@ -625,7 +913,7 @@ class TableColumnFilterComponent {
         }
     }
     get noFilterLabel() {
-        return this.primeConfig.getTranslation(TranslationKeys.NO_FILTER);
+        return this.tableMetadata.primeConfig.getTranslation(TranslationKeys.NO_FILTER);
     }
     clearFilter() {
         this.initFilterConstraint(true);
@@ -715,19 +1003,18 @@ class TableColumnFilterComponent {
         this.overlay = null;
     }
     updateFilterOnDisplayValueChange(displayValue) {
-        this.setFilterConstraint(filterSetMetadataOnDisplayChange(this.filterConstraint(), this.filterConstraint()?.displayMatchMode ?? filterGetDefaultMatchMode(this.descriptor(), this.matchModes()), displayValue, this.descriptor().filterType, this.dateConfig()));
+        this.setFilterConstraint(filterSetMetadataOnDisplayChange(this.filterConstraint(), this.filterConstraint()?.displayMatchMode ?? this.metadata().defaultMatchMode, displayValue, this.metadata().descriptor.filterType, this.metadata().dateConfig));
     }
     initFilterConstraint(reset = false) {
         if (reset) {
-            const defaultMatchMode = filterGetDefaultMatchMode(this.descriptor(), this.matchModes());
-            this.primeTable.filters[this.descriptor().property] = { value: null, matchMode: defaultMatchMode };
+            this.primeTable.filters[this.metadata().descriptor.property] = { value: null, matchMode: this.metadata().defaultMatchMode };
         }
         // set internal filter constraint
-        let metadata = this.primeTable.filters[this.descriptor().property];
+        let metadata = this.primeTable.filters[this.metadata().descriptor.property];
         if (Array.isArray(metadata)) {
             metadata = metadata[0];
         }
-        this.setFilterConstraint(filterSetMetadataOnChange(metadata, metadata?.matchMode, metadata?.value, this.descriptor().filterType, this.dateConfig()));
+        this.setFilterConstraint(filterSetMetadataOnChange(metadata, metadata?.matchMode, metadata?.value, this.metadata().descriptor.filterType, this.metadata().dateConfig));
     }
     setFilterConstraint(metadata) {
         if (metadata && !metadata.displayMatchMode)
@@ -735,18 +1022,18 @@ class TableColumnFilterComponent {
         if (metadata && !metadata.displayValue)
             metadata.displayValue = metadata.value;
         this.filterConstraint.set(metadata);
-        this.primeTable.filters[this.descriptor().property] = this.filterConstraint();
+        this.primeTable.filters[this.metadata().descriptor.property] = this.filterConstraint();
         this.primeTable._filter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TableColumnFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: TableColumnFilterComponent, isStandalone: true, selector: "mng-table-column-filter", inputs: { descriptor: { classPropertyName: "descriptor", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "icon", first: true, predicate: ["icon"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"p-column-filter p-column-filter-row\">\n    @switch (descriptor().filterType) {\n        @case (FilterTypeEnum.Number) {\n            @if (filterConstraint()?.displayMatchMode === 'between') {\n                <mng-number-range\n                    className=\"mng-column-filter-number-input\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onNumericModelChange($event)\"\n                    (keyDown)=\"onNumericInputKeyDown($event)\"\n                    [placeholder]=\"descriptor().placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [useGrouping]=\"descriptor().numberUseGrouping\"\n                    [minFractionDigits]=\"numberConfig()?.fractionsMin\"\n                    [maxFractionDigits]=\"numberConfig()?.fractionsMax\"\n                    [disabled]=\"isInputDisabled()\" />\n            } @else {\n                <p-inputNumber\n                    inputStyleClass=\"mng-column-filter-number-input\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onNumericModelChange($event)\"\n                    (onKeyDown)=\"onNumericInputKeyDown($event)\"\n                    [placeholder]=\"descriptor().placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [useGrouping]=\"descriptor().numberUseGrouping\"\n                    [minFractionDigits]=\"numberConfig()?.fractionsMin\"\n                    [maxFractionDigits]=\"numberConfig()?.fractionsMax\"\n                    [disabled]=\"isInputDisabled()\" />\n            }\n        }\n\n        @case (FilterTypeEnum.Boolean) {\n            <p-checkbox [ngModel]=\"filterConstraint()?.displayValue\" binary=\"true\" (ngModelChange)=\"onCheckboxModelChange($event)\"></p-checkbox>\n        }\n        @case (FilterTypeEnum.Date) {\n            @if (filterConstraint()?.displayMatchMode === FilterMatchMode.Between) {\n                <mng-date-range\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onDateFilterModelChange($event)\"\n                    [showTime]=\"dateConfig()?.showTime ?? false\"\n                    [showSeconds]=\"dateConfig()?.showSeconds ?? false\"\n                    [dateFormat]=\"dateConfig()?.format\"\n                    [placeholder]=\"descriptor().placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [disabled]=\"isInputDisabled()\"></mng-date-range>\n            } @else {\n                <p-calendar\n                    appendTo=\"body\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onDateFilterModelChange($event)\"\n                    [placeholder]=\"descriptor().placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [showIcon]=\"true\"\n                    [showTime]=\"dateConfig()?.showTime ?? false\"\n                    [showSeconds]=\"dateConfig()?.showSeconds ?? false\"\n                    [dateFormat]=\"dateConfig()?.format\"\n                    [firstDayOfWeek]=\"1\">\n                </p-calendar>\n            }\n        }\n        @case (FilterTypeEnum.Lookup) {\n            <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n        }\n        @case (FilterTypeEnum.LookupEnum) {\n            <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n        }\n        @default {\n            <input\n                type=\"text\"\n                pInputText\n                class=\"mng-column-filter-string-input\"\n                [value]=\"filterConstraint()?.displayValue\"\n                [disabled]=\"isInputDisabled()\"\n                (input)=\"onTextModelChange($event)\"\n                (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n                [attr.placeholder]=\"descriptor().placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [mngInputTrim]=\"descriptor().trimOption\" />\n        }\n    }\n\n    <ng-template #lookupFilter>\n        @if (descriptorAsLookup(); as lookup) {\n            @switch (lookup.lookupType) {\n                @case (lookupTypeAutocomplete) {\n                    <mng-autocomplete\n                        [ngModel]=\"filterConstraint()?.displayValue\"\n                        [dataProvider]=\"lookup.dataProvider\"\n                        [optionsTrackProperty]=\"lookup.optionsValueProperty\"\n                        [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                        [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                        [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                        [multiselect]=\"lookup.multiselect\"\n                        [autoClear]=\"lookup.autocompleteAutoClear ?? false\"\n                        [openOnFocus]=\"lookup.autocompleteAutoClear ?? true\"\n                        [inlineSearch]=\"lookup.autocompleteInlineSearch ?? false\"\n                        [placeholder]=\"descriptor().placeholder ?? 'mngTable.searchToFilter' | translate\"\n                        [className]=\"lookup.className\"\n                        [dropdownClassName]=\"lookup.dropdownClassName\"\n                        [disabled]=\"isInputDisabled()\"\n                        (valueChange)=\"autocompleteFilter($event)\"\n                        [searchTrim]=\"descriptor().trimOption\">\n                    </mng-autocomplete>\n                }\n                @case (lookupTypeDropdown) {\n                    <mng-dropdown\n                        [ngModel]=\"filterConstraint()?.displayValue\"\n                        [dataProvider]=\"lookup.dataProvider\"\n                        [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                        [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                        [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                        [multiselect]=\"lookup.multiselect\"\n                        [placeholder]=\"descriptor().placeholder ?? 'mngTable.selectToFilter' | translate\"\n                        [className]=\"lookup.className\"\n                        [dropdownClassName]=\"lookup.dropdownClassName\"\n                        [showClear]=\"false\"\n                        [changeValueOnBlur]=\"lookup.multiselect\"\n                        [disabled]=\"isInputDisabled()\"\n                        (valueChange)=\"dropdownFilter($event)\">\n                    </mng-dropdown>\n                }\n            }\n        }\n    </ng-template>\n\n    @if (matchModes().length > 1) {\n        <button\n            #icon\n            type=\"button\"\n            class=\"p-column-filter-menu-button p-link\"\n            aria-haspopup=\"true\"\n            [attr.aria-expanded]=\"overlayVisible()\"\n            [ngClass]=\"{'p-column-filter-menu-button-open': overlayVisible(), 'p-column-filter-menu-button-active': isFilterSet()}\"\n            (click)=\"toggleMenu($event)\"\n            (keydown)=\"onToggleButtonKeyDown($event)\">\n            <FilterIcon [styleClass]=\"'pi-filter-icon'\" />\n        </button>\n    }\n    <button #icon [ngClass]=\"{'p-hidden-space': !isFilterSet()}\" type=\"button\" class=\"p-column-filter-clear-button p-link\" (click)=\"clearFilter()\">\n        <FilterSlashIcon />\n    </button>\n    @if (overlayVisible()) {\n        <div\n            class=\"p-column-filter-overlay p-component p-fluid\"\n            (click)=\"onContentClick()\"\n            [@overlayAnimation]=\"'visible'\"\n            (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n            (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n            (keydown.escape)=\"onEscape()\">\n            <ul class=\"p-column-filter-row-items\">\n                @for (matchMode of matchModes(); track matchMode; let i = $index) {\n                    <li\n                        class=\"p-column-filter-row-item\"\n                        (click)=\"onMatchModeChange(matchMode.value)\"\n                        (keydown)=\"onMatchModeKeyDown($event)\"\n                        (keydown.enter)=\"this.onMatchModeChange(matchMode.value)\"\n                        [ngClass]=\"{'p-highlight': matchMode.value === filterConstraint()?.displayMatchMode}\"\n                        [attr.tabindex]=\"i === 0 ? '0' : null\">\n                        {{ matchMode.label }}\n                    </li>\n                }\n                <li class=\"p-column-filter-separator\"></li>\n                <li class=\"p-column-filter-row-item\" (click)=\"onRowClearItemClick()\" (keydown)=\"onMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">\n                    {{ noFilterLabel }}\n                </li>\n            </ul>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: DateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "dateFormat", "className", "required", "disabled"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$1.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { 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: "component", type: AutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "optionsTrackProperty", "optionsValueProperty", "optionsLabelProperty", "optionsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst", "searchTrim", "disabled"], outputs: ["valueChange", "blur"] }, { kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur", "loading", "disabled", "allowInput", "appendTo", "inlineSearch", "searchTrim"], outputs: ["valueChange", "blur"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i4.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: FilterIcon, selector: "FilterIcon" }, { kind: "component", type: FilterSlashIcon, selector: "FilterSlashIcon" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "component", type: NumberRangeComponent, selector: "mng-number-range", inputs: ["placeholder", "useGrouping", "minFractionDigits", "maxFractionDigits", "required", "disabled"], outputs: ["keyDown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i6.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableColumnFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: TableColumnFilterComponent, isStandalone: true, selector: "mng-table-column-filter", inputs: { metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "icon", first: true, predicate: ["icon"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"p-column-filter p-column-filter-row\">\n    @switch (metadata().descriptor.filterType) {\n        @case (FilterTypeEnum.Number) {\n            @if (filterConstraint()?.displayMatchMode === 'between') {\n                <mng-number-range\n                    className=\"mng-column-filter-number-input\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onNumericModelChange($event)\"\n                    (keyDown)=\"onNumericInputKeyDown($event)\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [useGrouping]=\"metadata().descriptor.numberUseGrouping\"\n                    [minFractionDigits]=\"metadata().numberConfig?.fractionsMin\"\n                    [maxFractionDigits]=\"metadata().numberConfig?.fractionsMax\"\n                    [disabled]=\"isInputDisabled()\" />\n            } @else {\n                <p-inputNumber\n                    inputStyleClass=\"mng-column-filter-number-input\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onNumericModelChange($event)\"\n                    (onKeyDown)=\"onNumericInputKeyDown($event)\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [useGrouping]=\"metadata().descriptor.numberUseGrouping\"\n                    [minFractionDigits]=\"metadata().numberConfig?.fractionsMin\"\n                    [maxFractionDigits]=\"metadata().numberConfig?.fractionsMax\"\n                    [disabled]=\"isInputDisabled()\" />\n            }\n        }\n\n        @case (FilterTypeEnum.Boolean) {\n            <p-checkbox [ngModel]=\"filterConstraint()?.displayValue\" binary=\"true\" (ngModelChange)=\"onCheckboxModelChange($event)\"></p-checkbox>\n        }\n        @case (FilterTypeEnum.Date) {\n            @if (filterConstraint()?.displayMatchMode === FilterMatchMode.Between) {\n                <mng-date-range\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onDateFilterModelChange($event)\"\n                    [showTime]=\"metadata().dateConfig?.showTime ?? false\"\n                    [showSeconds]=\"metadata().dateConfig?.showSeconds ?? false\"\n                    [dateFormat]=\"metadata().dateConfig?.format\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [disabled]=\"isInputDisabled()\"></mng-date-range>\n            } @else {\n                <p-calendar\n                    appendTo=\"body\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onDateFilterModelChange($event)\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [showIcon]=\"true\"\n                    [showTime]=\"metadata().dateConfig?.showTime ?? false\"\n                    [showSeconds]=\"metadata().dateConfig?.showSeconds ?? false\"\n                    [dateFormat]=\"metadata().dateConfig?.format\"\n                    [firstDayOfWeek]=\"1\">\n                </p-calendar>\n            }\n        }\n        @case (FilterTypeEnum.Lookup) {\n            <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n        }\n        @case (FilterTypeEnum.LookupEnum) {\n            <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n        }\n        @default {\n            <input\n                type=\"text\"\n                pInputText\n                class=\"mng-column-filter-string-input\"\n                [value]=\"filterConstraint()?.displayValue\"\n                [disabled]=\"isInputDisabled()\"\n                (input)=\"onTextModelChange($event)\"\n                (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n                [attr.placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [mngInputTrim]=\"metadata().descriptor.trimOption\" />\n        }\n    }\n\n    <ng-template #lookupFilter>\n        @if (descriptorAsLookup(); as lookup) {\n            @switch (lookup.lookupType) {\n                @case (lookupTypeAutocomplete) {\n                    <mng-autocomplete\n                        *mngRerender=\"isMultiselect()\"\n                        [ngModel]=\"filterConstraint()?.displayValue\"\n                        [dataProvider]=\"lookup.dataProvider\"\n                        [optionsTrackProperty]=\"lookup.optionsValueProperty\"\n                        [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                        [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                        [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                        [multiselect]=\"isMultiselect()\"\n                        [autoClear]=\"lookup.autocompleteAutoClear ?? false\"\n                        [openOnFocus]=\"lookup.autocompleteAutoClear ?? true\"\n                        [inlineSearch]=\"lookup.autocompleteInlineSearch ?? false\"\n                        [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                        [className]=\"lookup.className\"\n                        [dropdownClassName]=\"lookup.dropdownClassName\"\n                        [disabled]=\"isInputDisabled()\"\n                        (valueChange)=\"autocompleteFilter($event)\"\n                        [searchTrim]=\"metadata().descriptor.trimOption\">\n                    </mng-autocomplete>\n                }\n                @case (lookupTypeDropdown) {\n                    <mng-dropdown\n                        *mngRerender=\"isMultiselect()\"\n                        [ngModel]=\"filterConstraint()?.displayValue\"\n                        [dataProvider]=\"lookup.dataProvider\"\n                        [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                        [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                        [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                        [multiselect]=\"isMultiselect()\"\n                        [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                        [className]=\"lookup.className\"\n                        [dropdownClassName]=\"lookup.dropdownClassName\"\n                        [showClear]=\"false\"\n                        [changeValueOnBlur]=\"isMultiselect()\"\n                        [disabled]=\"isInputDisabled()\"\n                        (valueChange)=\"dropdownFilter($event)\">\n                    </mng-dropdown>\n                }\n            }\n        }\n    </ng-template>\n\n    @if (matchModes().length > 1) {\n        <button\n            #icon\n            type=\"button\"\n            class=\"p-column-filter-menu-button p-link\"\n            aria-haspopup=\"true\"\n            [attr.aria-expanded]=\"overlayVisible()\"\n            [ngClass]=\"{'p-column-filter-menu-button-open': overlayVisible(), 'p-column-filter-menu-button-active': isFilterSet()}\"\n            (click)=\"toggleMenu($event)\"\n            (keydown)=\"onToggleButtonKeyDown($event)\">\n            <FilterIcon [styleClass]=\"'pi-filter-icon'\" />\n        </button>\n    }\n    <button #icon [ngClass]=\"{'p-hidden-space': !isFilterSet()}\" type=\"button\" class=\"p-column-filter-clear-button p-link\" (click)=\"clearFilter()\">\n        <FilterSlashIcon />\n    </button>\n    @if (overlayVisible()) {\n        <div\n            class=\"p-column-filter-overlay p-component p-fluid\"\n            (click)=\"onContentClick()\"\n            [@overlayAnimation]=\"'visible'\"\n            (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n            (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n            (keydown.escape)=\"onEscape()\">\n            <ul class=\"p-column-filter-row-items\">\n                @for (matchMode of matchModes(); track matchMode; let i = $index) {\n                    <li\n                        class=\"p-column-filter-row-item\"\n                        (click)=\"onMatchModeChange(matchMode.value)\"\n                        (keydown)=\"onMatchModeKeyDown($event)\"\n                        (keydown.enter)=\"this.onMatchModeChange(matchMode.value)\"\n                        [ngClass]=\"{'p-highlight': matchMode.value === filterConstraint()?.displayMatchMode}\"\n                        [attr.tabindex]=\"i === 0 ? '0' : null\">\n                        {{ matchMode.label }}\n                    </li>\n                }\n                <li class=\"p-column-filter-separator\"></li>\n                <li class=\"p-column-filter-row-item\" (click)=\"onRowClearItemClick()\" (keydown)=\"onMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">\n                    {{ noFilterLabel }}\n                </li>\n            </ul>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: DateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "dateFormat", "className", "required", "disabled"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$1.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { 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: "component", type: AutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "optionsTrackProperty", "optionsValueProperty", "optionsLabelProperty", "optionsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst", "searchTrim", "disabled"], outputs: ["valueChange", "blur"] }, { kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur", "loading", "disabled", "allowInput", "appendTo", "inlineSearch", "searchTrim"], outputs: ["valueChange", "blur"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i4.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: FilterIcon, selector: "FilterIcon" }, { kind: "component", type: FilterSlashIcon, selector: "FilterSlashIcon" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "component", type: NumberRangeComponent, selector: "mng-number-range", inputs: ["placeholder", "useGrouping", "minFractionDigits", "maxFractionDigits", "required", "disabled"], outputs: ["keyDown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i6.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: RerenderDirective, selector: "[mngRerender]", inputs: ["mngRerender"] }], animations: [
             trigger('overlayAnimation', [
                 transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]),
                 transition(':leave', [animate('.1s linear', style({ opacity: 0 }))])
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TableColumnFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableColumnFilterComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'mng-table-column-filter', imports: [
                         TableModule,
@@ -764,13 +1051,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                         InputTrimDirective,
                         NumberRangeComponent,
                         NgTemplateOutlet,
-                        CheckboxModule
+                        CheckboxModule,
+                        RerenderDirective
                     ], animations: [
                         trigger('overlayAnimation', [
                             transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]),
                             transition(':leave', [animate('.1s linear', style({ opacity: 0 }))])
                         ])
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"p-column-filter p-column-filter-row\">\n    @switch (descriptor().filterType) {\n        @case (FilterTypeEnum.Number) {\n            @if (filterConstraint()?.displayMatchMode === 'between') {\n                <mng-number-range\n                    className=\"mng-column-filter-number-input\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onNumericModelChange($event)\"\n                    (keyDown)=\"onNumericInputKeyDown($event)\"\n                    [placeholder]=\"descriptor().placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [useGrouping]=\"descriptor().numberUseGrouping\"\n                    [minFractionDigits]=\"numberConfig()?.fractionsMin\"\n                    [maxFractionDigits]=\"numberConfig()?.fractionsMax\"\n                    [disabled]=\"isInputDisabled()\" />\n            } @else {\n                <p-inputNumber\n                    inputStyleClass=\"mng-column-filter-number-input\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onNumericModelChange($event)\"\n                    (onKeyDown)=\"onNumericInputKeyDown($event)\"\n                    [placeholder]=\"descriptor().placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [useGrouping]=\"descriptor().numberUseGrouping\"\n                    [minFractionDigits]=\"numberConfig()?.fractionsMin\"\n                    [maxFractionDigits]=\"numberConfig()?.fractionsMax\"\n                    [disabled]=\"isInputDisabled()\" />\n            }\n        }\n\n        @case (FilterTypeEnum.Boolean) {\n            <p-checkbox [ngModel]=\"filterConstraint()?.displayValue\" binary=\"true\" (ngModelChange)=\"onCheckboxModelChange($event)\"></p-checkbox>\n        }\n        @case (FilterTypeEnum.Date) {\n            @if (filterConstraint()?.displayMatchMode === FilterMatchMode.Between) {\n                <mng-date-range\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onDateFilterModelChange($event)\"\n                    [showTime]=\"dateConfig()?.showTime ?? false\"\n                    [showSeconds]=\"dateConfig()?.showSeconds ?? false\"\n                    [dateFormat]=\"dateConfig()?.format\"\n                    [placeholder]=\"descriptor().placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [disabled]=\"isInputDisabled()\"></mng-date-range>\n            } @else {\n                <p-calendar\n                    appendTo=\"body\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onDateFilterModelChange($event)\"\n                    [placeholder]=\"descriptor().placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [showIcon]=\"true\"\n                    [showTime]=\"dateConfig()?.showTime ?? false\"\n                    [showSeconds]=\"dateConfig()?.showSeconds ?? false\"\n                    [dateFormat]=\"dateConfig()?.format\"\n                    [firstDayOfWeek]=\"1\">\n                </p-calendar>\n            }\n        }\n        @case (FilterTypeEnum.Lookup) {\n            <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n        }\n        @case (FilterTypeEnum.LookupEnum) {\n            <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n        }\n        @default {\n            <input\n                type=\"text\"\n                pInputText\n                class=\"mng-column-filter-string-input\"\n                [value]=\"filterConstraint()?.displayValue\"\n                [disabled]=\"isInputDisabled()\"\n                (input)=\"onTextModelChange($event)\"\n                (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n                [attr.placeholder]=\"descriptor().placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [mngInputTrim]=\"descriptor().trimOption\" />\n        }\n    }\n\n    <ng-template #lookupFilter>\n        @if (descriptorAsLookup(); as lookup) {\n            @switch (lookup.lookupType) {\n                @case (lookupTypeAutocomplete) {\n                    <mng-autocomplete\n                        [ngModel]=\"filterConstraint()?.displayValue\"\n                        [dataProvider]=\"lookup.dataProvider\"\n                        [optionsTrackProperty]=\"lookup.optionsValueProperty\"\n                        [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                        [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                        [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                        [multiselect]=\"lookup.multiselect\"\n                        [autoClear]=\"lookup.autocompleteAutoClear ?? false\"\n                        [openOnFocus]=\"lookup.autocompleteAutoClear ?? true\"\n                        [inlineSearch]=\"lookup.autocompleteInlineSearch ?? false\"\n                        [placeholder]=\"descriptor().placeholder ?? 'mngTable.searchToFilter' | translate\"\n                        [className]=\"lookup.className\"\n                        [dropdownClassName]=\"lookup.dropdownClassName\"\n                        [disabled]=\"isInputDisabled()\"\n                        (valueChange)=\"autocompleteFilter($event)\"\n                        [searchTrim]=\"descriptor().trimOption\">\n                    </mng-autocomplete>\n                }\n                @case (lookupTypeDropdown) {\n                    <mng-dropdown\n                        [ngModel]=\"filterConstraint()?.displayValue\"\n                        [dataProvider]=\"lookup.dataProvider\"\n                        [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                        [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                        [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                        [multiselect]=\"lookup.multiselect\"\n                        [placeholder]=\"descriptor().placeholder ?? 'mngTable.selectToFilter' | translate\"\n                        [className]=\"lookup.className\"\n                        [dropdownClassName]=\"lookup.dropdownClassName\"\n                        [showClear]=\"false\"\n                        [changeValueOnBlur]=\"lookup.multiselect\"\n                        [disabled]=\"isInputDisabled()\"\n                        (valueChange)=\"dropdownFilter($event)\">\n                    </mng-dropdown>\n                }\n            }\n        }\n    </ng-template>\n\n    @if (matchModes().length > 1) {\n        <button\n            #icon\n            type=\"button\"\n            class=\"p-column-filter-menu-button p-link\"\n            aria-haspopup=\"true\"\n            [attr.aria-expanded]=\"overlayVisible()\"\n            [ngClass]=\"{'p-column-filter-menu-button-open': overlayVisible(), 'p-column-filter-menu-button-active': isFilterSet()}\"\n            (click)=\"toggleMenu($event)\"\n            (keydown)=\"onToggleButtonKeyDown($event)\">\n            <FilterIcon [styleClass]=\"'pi-filter-icon'\" />\n        </button>\n    }\n    <button #icon [ngClass]=\"{'p-hidden-space': !isFilterSet()}\" type=\"button\" class=\"p-column-filter-clear-button p-link\" (click)=\"clearFilter()\">\n        <FilterSlashIcon />\n    </button>\n    @if (overlayVisible()) {\n        <div\n            class=\"p-column-filter-overlay p-component p-fluid\"\n            (click)=\"onContentClick()\"\n            [@overlayAnimation]=\"'visible'\"\n            (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n            (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n            (keydown.escape)=\"onEscape()\">\n            <ul class=\"p-column-filter-row-items\">\n                @for (matchMode of matchModes(); track matchMode; let i = $index) {\n                    <li\n                        class=\"p-column-filter-row-item\"\n                        (click)=\"onMatchModeChange(matchMode.value)\"\n                        (keydown)=\"onMatchModeKeyDown($event)\"\n                        (keydown.enter)=\"this.onMatchModeChange(matchMode.value)\"\n                        [ngClass]=\"{'p-highlight': matchMode.value === filterConstraint()?.displayMatchMode}\"\n                        [attr.tabindex]=\"i === 0 ? '0' : null\">\n                        {{ matchMode.label }}\n                    </li>\n                }\n                <li class=\"p-column-filter-separator\"></li>\n                <li class=\"p-column-filter-row-item\" (click)=\"onRowClearItemClick()\" (keydown)=\"onMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">\n                    {{ noFilterLabel }}\n                </li>\n            </ul>\n        </div>\n    }\n</div>\n" }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"p-column-filter p-column-filter-row\">\n    @switch (metadata().descriptor.filterType) {\n        @case (FilterTypeEnum.Number) {\n            @if (filterConstraint()?.displayMatchMode === 'between') {\n                <mng-number-range\n                    className=\"mng-column-filter-number-input\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onNumericModelChange($event)\"\n                    (keyDown)=\"onNumericInputKeyDown($event)\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [useGrouping]=\"metadata().descriptor.numberUseGrouping\"\n                    [minFractionDigits]=\"metadata().numberConfig?.fractionsMin\"\n                    [maxFractionDigits]=\"metadata().numberConfig?.fractionsMax\"\n                    [disabled]=\"isInputDisabled()\" />\n            } @else {\n                <p-inputNumber\n                    inputStyleClass=\"mng-column-filter-number-input\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onNumericModelChange($event)\"\n                    (onKeyDown)=\"onNumericInputKeyDown($event)\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [useGrouping]=\"metadata().descriptor.numberUseGrouping\"\n                    [minFractionDigits]=\"metadata().numberConfig?.fractionsMin\"\n                    [maxFractionDigits]=\"metadata().numberConfig?.fractionsMax\"\n                    [disabled]=\"isInputDisabled()\" />\n            }\n        }\n\n        @case (FilterTypeEnum.Boolean) {\n            <p-checkbox [ngModel]=\"filterConstraint()?.displayValue\" binary=\"true\" (ngModelChange)=\"onCheckboxModelChange($event)\"></p-checkbox>\n        }\n        @case (FilterTypeEnum.Date) {\n            @if (filterConstraint()?.displayMatchMode === FilterMatchMode.Between) {\n                <mng-date-range\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onDateFilterModelChange($event)\"\n                    [showTime]=\"metadata().dateConfig?.showTime ?? false\"\n                    [showSeconds]=\"metadata().dateConfig?.showSeconds ?? false\"\n                    [dateFormat]=\"metadata().dateConfig?.format\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [disabled]=\"isInputDisabled()\"></mng-date-range>\n            } @else {\n                <p-calendar\n                    appendTo=\"body\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onDateFilterModelChange($event)\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [showIcon]=\"true\"\n                    [showTime]=\"metadata().dateConfig?.showTime ?? false\"\n                    [showSeconds]=\"metadata().dateConfig?.showSeconds ?? false\"\n                    [dateFormat]=\"metadata().dateConfig?.format\"\n                    [firstDayOfWeek]=\"1\">\n                </p-calendar>\n            }\n        }\n        @case (FilterTypeEnum.Lookup) {\n            <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n        }\n        @case (FilterTypeEnum.LookupEnum) {\n            <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n        }\n        @default {\n            <input\n                type=\"text\"\n                pInputText\n                class=\"mng-column-filter-string-input\"\n                [value]=\"filterConstraint()?.displayValue\"\n                [disabled]=\"isInputDisabled()\"\n                (input)=\"onTextModelChange($event)\"\n                (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n                [attr.placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [mngInputTrim]=\"metadata().descriptor.trimOption\" />\n        }\n    }\n\n    <ng-template #lookupFilter>\n        @if (descriptorAsLookup(); as lookup) {\n            @switch (lookup.lookupType) {\n                @case (lookupTypeAutocomplete) {\n                    <mng-autocomplete\n                        *mngRerender=\"isMultiselect()\"\n                        [ngModel]=\"filterConstraint()?.displayValue\"\n                        [dataProvider]=\"lookup.dataProvider\"\n                        [optionsTrackProperty]=\"lookup.optionsValueProperty\"\n                        [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                        [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                        [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                        [multiselect]=\"isMultiselect()\"\n                        [autoClear]=\"lookup.autocompleteAutoClear ?? false\"\n                        [openOnFocus]=\"lookup.autocompleteAutoClear ?? true\"\n                        [inlineSearch]=\"lookup.autocompleteInlineSearch ?? false\"\n                        [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                        [className]=\"lookup.className\"\n                        [dropdownClassName]=\"lookup.dropdownClassName\"\n                        [disabled]=\"isInputDisabled()\"\n                        (valueChange)=\"autocompleteFilter($event)\"\n                        [searchTrim]=\"metadata().descriptor.trimOption\">\n                    </mng-autocomplete>\n                }\n                @case (lookupTypeDropdown) {\n                    <mng-dropdown\n                        *mngRerender=\"isMultiselect()\"\n                        [ngModel]=\"filterConstraint()?.displayValue\"\n                        [dataProvider]=\"lookup.dataProvider\"\n                        [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                        [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                        [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                        [multiselect]=\"isMultiselect()\"\n                        [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                        [className]=\"lookup.className\"\n                        [dropdownClassName]=\"lookup.dropdownClassName\"\n                        [showClear]=\"false\"\n                        [changeValueOnBlur]=\"isMultiselect()\"\n                        [disabled]=\"isInputDisabled()\"\n                        (valueChange)=\"dropdownFilter($event)\">\n                    </mng-dropdown>\n                }\n            }\n        }\n    </ng-template>\n\n    @if (matchModes().length > 1) {\n        <button\n            #icon\n            type=\"button\"\n            class=\"p-column-filter-menu-button p-link\"\n            aria-haspopup=\"true\"\n            [attr.aria-expanded]=\"overlayVisible()\"\n            [ngClass]=\"{'p-column-filter-menu-button-open': overlayVisible(), 'p-column-filter-menu-button-active': isFilterSet()}\"\n            (click)=\"toggleMenu($event)\"\n            (keydown)=\"onToggleButtonKeyDown($event)\">\n            <FilterIcon [styleClass]=\"'pi-filter-icon'\" />\n        </button>\n    }\n    <button #icon [ngClass]=\"{'p-hidden-space': !isFilterSet()}\" type=\"button\" class=\"p-column-filter-clear-button p-link\" (click)=\"clearFilter()\">\n        <FilterSlashIcon />\n    </button>\n    @if (overlayVisible()) {\n        <div\n            class=\"p-column-filter-overlay p-component p-fluid\"\n            (click)=\"onContentClick()\"\n            [@overlayAnimation]=\"'visible'\"\n            (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n            (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n            (keydown.escape)=\"onEscape()\">\n            <ul class=\"p-column-filter-row-items\">\n                @for (matchMode of matchModes(); track matchMode; let i = $index) {\n                    <li\n                        class=\"p-column-filter-row-item\"\n                        (click)=\"onMatchModeChange(matchMode.value)\"\n                        (keydown)=\"onMatchModeKeyDown($event)\"\n                        (keydown.enter)=\"this.onMatchModeChange(matchMode.value)\"\n                        [ngClass]=\"{'p-highlight': matchMode.value === filterConstraint()?.displayMatchMode}\"\n                        [attr.tabindex]=\"i === 0 ? '0' : null\">\n                        {{ matchMode.label }}\n                    </li>\n                }\n                <li class=\"p-column-filter-separator\"></li>\n                <li class=\"p-column-filter-row-item\" (click)=\"onRowClearItemClick()\" (keydown)=\"onMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">\n                    {{ noFilterLabel }}\n                </li>\n            </ul>\n        </div>\n    }\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 class TableColumnValueComponent {
@@ -801,7 +1089,7 @@ class TableColumnValueComponent {
         this.value = computed(() => {
             let value = this.item()?.[this.descriptor().property];
             if (typeof this.descriptor().getter === 'function') {
-                value = this.getterPipe.transform(this.item(), this.descriptor().getter, value);
+                value = this.getterPipe.transform(value, this.descriptor().getter, this.item());
             }
             if (this.descriptor().template) {
                 value = this.templatePipe.transform(value, this.descriptor().template);
@@ -810,7 +1098,7 @@ class TableColumnValueComponent {
         });
         this.currency = computed(() => {
             if (this.descriptor().columnDisplayType === ColumnDisplayTypeEnum.Currency) {
-                return this.descriptor().currencyProperty ? this.item()[this.descriptor().currencyProperty] : this.descriptor().currencyCode ?? 'EUR';
+                return this.descriptor().currencyProperty ? this.item()[this.descriptor().currencyProperty] : (this.descriptor().currencyCode ?? 'EUR');
             }
             return;
         });
@@ -827,10 +1115,10 @@ class TableColumnValueComponent {
         const message = this.translate.instant('mngTable.copyNotificationMessage', { value });
         this.messageService.add({ severity: 'info', summary: title, detail: message });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TableColumnValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: TableColumnValueComponent, isStandalone: true, selector: "mng-table-column-value", inputs: { descriptor: { classPropertyName: "descriptor", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "className()", "style.max-width.px": "styleMaxWidth()" } }, ngImport: i0, template: "@if (descriptor().localizationExistsProperty && !item()[descriptor().localizationExistsProperty!]) {\n    <i class=\"pi pi-exclamation-circle\" [pTooltip]=\"'mngTable.translationMissing' | translate\"></i>\n}\n@switch (descriptor().columnDisplayType) {\n    @case (columnDisplayTypeString) {\n        @if (descriptor().hasValueAsTooltip) {\n            <span [pTooltip]=\"value()\" tooltipPosition=\"left\">{{ value() }}</span>\n        } @else {\n            {{ value() }}\n        }\n    }\n    @case (columnDisplayTypeHtml) {\n        <span [innerHTML]=\"value()\"></span>\n    }\n    @case (columnDisplayTypeNumber) {\n        {{ value() | number: descriptor().displayFormat : descriptor().locale }}\n    }\n    @case (columnDisplayTypeCurrency) {\n        {{ value() | currency: currency() : descriptor().currencyDisplay : descriptor().displayFormat : descriptor().locale }}\n    }\n    @case (columnDisplayTypeDate) {\n        {{ value() | date: descriptor().displayFormat }}\n    }\n    @case (columnDisplayTypeBoolean) {\n        @if (descriptor().booleanAsIcon) {\n            <i [class]=\"value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo : true\"></i>\n        } @else {\n            {{ value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo | translate }}\n        }\n    }\n    @case (columnDisplayTypeEnum) {\n        {{ value() | mngEnum: descriptor().enum | translate }}\n    }\n    @case (columnDisplayTypeComponent) {\n        <ng-container\n            [mngComponent]=\"descriptor().customComponentType!\"\n            [inputs]=\"{\n                value: value(),\n                item: item(),\n                descriptor: descriptor()\n            }\"></ng-container>\n    }\n}\n@if (descriptor().hasCopyToClipboard) {\n    <div class=\"help-buttons\">\n        <button pButton pRipple type=\"button\" icon=\"pi pi-copy\" class=\"p-button-rounded p-button-info p-button-sm\" (click)=\"copyToClipboard($event)\"></button>\n    </div>\n}\n", styles: [":host{display:inline-block;overflow:hidden}:host.nowrap{white-space:nowrap;text-overflow:ellipsis}:host.multiline{white-space:pre-wrap;word-wrap:break-word}.help-buttons{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}.help-buttons .p-button{height:1.9rem;width:1.9rem;padding:0}\n"], dependencies: [{ 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: "pipe", type: BooleanPipe, name: "mngBoolean" }, { kind: "pipe", type: EnumPipe, name: "mngEnum" }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { 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: "ngmodule", type: RippleModule }, { kind: "directive", type: i4$2.Ripple, selector: "[pRipple]" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableColumnValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: TableColumnValueComponent, isStandalone: true, selector: "mng-table-column-value", inputs: { descriptor: { classPropertyName: "descriptor", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "className()", "style.max-width.px": "styleMaxWidth()" } }, ngImport: i0, template: "@if (descriptor().localizationExistsProperty && !item()[descriptor().localizationExistsProperty!]) {\n    <i class=\"pi pi-exclamation-circle\" [pTooltip]=\"'mngTable.translationMissing' | translate\"></i>\n}\n@switch (descriptor().columnDisplayType) {\n    @case (columnDisplayTypeString) {\n        @if (descriptor().hasValueAsTooltip) {\n            <span [pTooltip]=\"value()\" tooltipPosition=\"left\">{{ value() }}</span>\n        } @else {\n            {{ value() }}\n        }\n    }\n    @case (columnDisplayTypeHtml) {\n        <span [innerHTML]=\"value()\"></span>\n    }\n    @case (columnDisplayTypeNumber) {\n        {{ value() | number: descriptor().displayFormat : descriptor().locale }}\n    }\n    @case (columnDisplayTypeCurrency) {\n        {{ value() | currency: currency() : descriptor().currencyDisplay : descriptor().displayFormat : descriptor().locale }}\n    }\n    @case (columnDisplayTypeDate) {\n        {{ value() | date: descriptor().displayFormat }}\n    }\n    @case (columnDisplayTypeBoolean) {\n        @if (descriptor().booleanAsIcon) {\n            <i [class]=\"value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo : true\"></i>\n        } @else {\n            {{ value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo | translate }}\n        }\n    }\n    @case (columnDisplayTypeEnum) {\n        {{ value() | mngEnum: descriptor().enum | translate }}\n    }\n    @case (columnDisplayTypeComponent) {\n        <ng-container\n            [mngComponent]=\"descriptor().customComponentType!\"\n            [inputs]=\"{\n                value: value(),\n                item: item(),\n                descriptor: descriptor()\n            }\"></ng-container>\n    }\n}\n@if (descriptor().hasCopyToClipboard) {\n    <div class=\"help-buttons\">\n        <button pButton pRipple type=\"button\" icon=\"pi pi-copy\" class=\"p-button-rounded p-button-info p-button-sm\" (click)=\"copyToClipboard($event)\"></button>\n    </div>\n}\n", styles: [":host{display:inline-block;overflow:hidden}:host.nowrap{white-space:nowrap;text-overflow:ellipsis}:host.multiline{white-space:pre-wrap;word-wrap:break-word}.help-buttons{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}.help-buttons .p-button{height:1.9rem;width:1.9rem;padding:0}\n"], dependencies: [{ 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: "pipe", type: BooleanPipe, name: "mngBoolean" }, { kind: "pipe", type: EnumPipe, name: "mngEnum" }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { 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: "ngmodule", type: RippleModule }, { kind: "directive", type: i4$2.Ripple, selector: "[pRipple]" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TableColumnValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableColumnValueComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'mng-table-column-value', imports: [TooltipModule, TranslateModule, BooleanPipe, EnumPipe, ComponentDirective, ButtonModule, RippleModule, DecimalPipe, CurrencyPipe, DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'className()', '[style.max-width.px]': 'styleMaxWidth()' }, template: "@if (descriptor().localizationExistsProperty && !item()[descriptor().localizationExistsProperty!]) {\n    <i class=\"pi pi-exclamation-circle\" [pTooltip]=\"'mngTable.translationMissing' | translate\"></i>\n}\n@switch (descriptor().columnDisplayType) {\n    @case (columnDisplayTypeString) {\n        @if (descriptor().hasValueAsTooltip) {\n            <span [pTooltip]=\"value()\" tooltipPosition=\"left\">{{ value() }}</span>\n        } @else {\n            {{ value() }}\n        }\n    }\n    @case (columnDisplayTypeHtml) {\n        <span [innerHTML]=\"value()\"></span>\n    }\n    @case (columnDisplayTypeNumber) {\n        {{ value() | number: descriptor().displayFormat : descriptor().locale }}\n    }\n    @case (columnDisplayTypeCurrency) {\n        {{ value() | currency: currency() : descriptor().currencyDisplay : descriptor().displayFormat : descriptor().locale }}\n    }\n    @case (columnDisplayTypeDate) {\n        {{ value() | date: descriptor().displayFormat }}\n    }\n    @case (columnDisplayTypeBoolean) {\n        @if (descriptor().booleanAsIcon) {\n            <i [class]=\"value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo : true\"></i>\n        } @else {\n            {{ value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo | translate }}\n        }\n    }\n    @case (columnDisplayTypeEnum) {\n        {{ value() | mngEnum: descriptor().enum | translate }}\n    }\n    @case (columnDisplayTypeComponent) {\n        <ng-container\n            [mngComponent]=\"descriptor().customComponentType!\"\n            [inputs]=\"{\n                value: value(),\n                item: item(),\n                descriptor: descriptor()\n            }\"></ng-container>\n    }\n}\n@if (descriptor().hasCopyToClipboard) {\n    <div class=\"help-buttons\">\n        <button pButton pRipple type=\"button\" icon=\"pi pi-copy\" class=\"p-button-rounded p-button-info p-button-sm\" (click)=\"copyToClipboard($event)\"></button>\n    </div>\n}\n", styles: [":host{display:inline-block;overflow:hidden}:host.nowrap{white-space:nowrap;text-overflow:ellipsis}:host.multiline{white-space:pre-wrap;word-wrap:break-word}.help-buttons{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}.help-buttons .p-button{height:1.9rem;width:1.9rem;padding:0}\n"] }]
         }] });
@@ -893,10 +1181,10 @@ class FilterValuePipe {
         this.subscription?.unsubscribe();
         this.subject.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FilterValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: FilterValuePipe, isStandalone: true, name: "mngFilterValue" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FilterValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: FilterValuePipe, isStandalone: true, name: "mngFilterValue" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FilterValuePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FilterValuePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'mngFilterValue',
@@ -905,14 +1193,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                 }]
         }] });
 
-class FilterActiveTagComponent {
+class TableFilterActiveTagComponent {
     constructor() {
         this.FilterMatchMode = FilterMatchMode;
         this.model = input.required();
         this.filter = input.required();
         this.edit = output();
         this.remove = output();
-        this.label = computed(() => this.getPropertyLabelKey(this.filter().descriptor));
+        this.label = computed(() => this.getPropertyLabelKey(this.filter().metadata.descriptor));
         this.matchMode = computed(() => this.filter().displayMatchMode);
         this.matchModeSymbol = computed(() => `mngFilterActiveTag.matchMode.${this.matchMode()}`);
         this.value = computed(() => this.filter().displayValue);
@@ -943,26 +1231,24 @@ class FilterActiveTagComponent {
         }
         return labelKey;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FilterActiveTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: FilterActiveTagComponent, isStandalone: true, selector: "mng-filter-active-tag", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { edit: "edit", remove: "remove" }, ngImport: i0, template: "<p-tag severity=\"secondary\" styleClass=\"mr-1 p-tag-outlined\">\n    <div class=\"flex align-items-center gap-2 p-1 cursor-pointer\" (click)=\"onEdit($event)\">\n        <span>{{ label() | translate }}</span>\n        @if (matchMode() === FilterMatchMode.Between) {\n            <span class=\"font-semibold\">{{ value()?.[0] | mngFilterValue: filter().descriptor | async }}</span>\n            <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n            <span class=\"font-semibold\">{{ value()?.[1] | mngFilterValue: filter().descriptor | async }}</span>\n        } @else {\n            <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n            <span class=\"font-semibold\">{{ value() | mngFilterValue: filter().descriptor | async }}</span>\n            @if (filter().caseSensitive) {\n                <small class=\"border-solid border-1 border-round-sm px-1 text-primary-400\">Aa</small>\n            }\n        }\n        <span class=\"pi pi-times text-xs\" (click)=\"onRemove($event)\"></span>\n    </div>\n</p-tag>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i2$2.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: FilterValuePipe, name: "mngFilterValue" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableFilterActiveTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: TableFilterActiveTagComponent, isStandalone: true, selector: "mng-table-filter-active-tag", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { edit: "edit", remove: "remove" }, ngImport: i0, template: "<p-tag severity=\"secondary\" styleClass=\"mr-1 p-tag-outlined\">\n    <div class=\"flex align-items-center gap-2 p-1 cursor-pointer\" (click)=\"onEdit($event)\">\n        <span>{{ label() | translate }}</span>\n        @if (matchMode() === FilterMatchMode.Between) {\n            <span class=\"font-semibold\">{{ value()?.[0] | mngFilterValue: filter().metadata.descriptor | async }}</span>\n            <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n            <span class=\"font-semibold\">{{ value()?.[1] | mngFilterValue: filter().metadata.descriptor | async }}</span>\n        } @else {\n            <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n            <span class=\"font-semibold\">{{ value() | mngFilterValue: filter().metadata.descriptor | async }}</span>\n            @if (filter().caseSensitive) {\n                <small class=\"border-solid border-1 border-round-sm px-1 text-primary-400\">Aa</small>\n            }\n        }\n        <span class=\"pi pi-times text-xs\" (click)=\"onRemove($event)\"></span>\n    </div>\n</p-tag>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i2$2.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: FilterValuePipe, name: "mngFilterValue" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FilterActiveTagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableFilterActiveTagComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-filter-active-tag', imports: [TranslateModule, TagModule, FilterValuePipe, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-tag severity=\"secondary\" styleClass=\"mr-1 p-tag-outlined\">\n    <div class=\"flex align-items-center gap-2 p-1 cursor-pointer\" (click)=\"onEdit($event)\">\n        <span>{{ label() | translate }}</span>\n        @if (matchMode() === FilterMatchMode.Between) {\n            <span class=\"font-semibold\">{{ value()?.[0] | mngFilterValue: filter().descriptor | async }}</span>\n            <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n            <span class=\"font-semibold\">{{ value()?.[1] | mngFilterValue: filter().descriptor | async }}</span>\n        } @else {\n            <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n            <span class=\"font-semibold\">{{ value() | mngFilterValue: filter().descriptor | async }}</span>\n            @if (filter().caseSensitive) {\n                <small class=\"border-solid border-1 border-round-sm px-1 text-primary-400\">Aa</small>\n            }\n        }\n        <span class=\"pi pi-times text-xs\" (click)=\"onRemove($event)\"></span>\n    </div>\n</p-tag>\n" }]
+            args: [{ standalone: true, selector: 'mng-table-filter-active-tag', imports: [TranslateModule, TagModule, FilterValuePipe, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-tag severity=\"secondary\" styleClass=\"mr-1 p-tag-outlined\">\n    <div class=\"flex align-items-center gap-2 p-1 cursor-pointer\" (click)=\"onEdit($event)\">\n        <span>{{ label() | translate }}</span>\n        @if (matchMode() === FilterMatchMode.Between) {\n            <span class=\"font-semibold\">{{ value()?.[0] | mngFilterValue: filter().metadata.descriptor | async }}</span>\n            <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n            <span class=\"font-semibold\">{{ value()?.[1] | mngFilterValue: filter().metadata.descriptor | async }}</span>\n        } @else {\n            <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n            <span class=\"font-semibold\">{{ value() | mngFilterValue: filter().metadata.descriptor | async }}</span>\n            @if (filter().caseSensitive) {\n                <small class=\"border-solid border-1 border-round-sm px-1 text-primary-400\">Aa</small>\n            }\n        }\n        <span class=\"pi pi-times text-xs\" (click)=\"onRemove($event)\"></span>\n    </div>\n</p-tag>\n" }]
         }] });
 
-class FilterFormComponent {
+class TableFilterFormComponent {
     constructor() {
         this.lookupTypeDropdown = FilterLookupTypeEnum.Dropdown;
         this.lookupTypeAutocomplete = FilterLookupTypeEnum.Autocomplete;
         this.FilterTypeEnum = FilterTypeEnum;
         this.FilterMatchMode = FilterMatchMode;
         this.elementRef = inject(ElementRef);
-        this.moduleConfig = inject(COMMONS_MODULE_CONFIG_IT, { optional: true });
-        this.primeConfig = inject(PrimeNGConfig);
         this.translate = inject(TranslateService);
         this.title = input();
-        this.descriptors = input.required();
+        this.metadata = input.required();
         this.genericDescriptor = input();
         this.model = input.required();
         this.filter = input();
@@ -974,17 +1260,17 @@ class FilterFormComponent {
         this.propertyOptionsWithTranslations = computed(() => {
             const disabledProperties = this.disabledProperties();
             const filter = this.filter();
-            return (this.descriptors()?.map(d => {
+            return (this.metadata()?.map(d => {
                 return {
-                    property: d.property,
-                    label: d.isGenericFilter ? d.property : this.getPropertyLabelKey(d),
-                    disabled: !filter && disabledProperties.includes(d.property)
+                    property: d.descriptor.property,
+                    label: d.descriptor.isGenericFilter ? d.descriptor.property : this.getPropertyLabelKey(d.descriptor),
+                    disabled: !filter && disabledProperties.includes(d.descriptor.property)
                 };
             }) ?? []);
         });
-        this.selectedDescriptor = computed(() => {
+        this.selectedFilterMetadata = computed(() => {
             const property = this.propertyModel();
-            return this.descriptors().find(filterDescriptor => filterDescriptor.property === property);
+            return this.metadata().find(d => d.descriptor.property === property);
         });
         // change value lookup function to include the property name of the generic filter
         this.genericValueDataProvider = computed(() => {
@@ -997,8 +1283,8 @@ class FilterFormComponent {
                         filters: {
                             ...params?.filters,
                             field: {
-                                value: this.selectedDescriptor()?.property,
-                                matchMode: this.selectedDescriptor()?.filterType === FilterTypeEnum.LookupEnum ? FilterMatchMode.In : FilterMatchMode.StartsWith
+                                value: this.selectedFilterMetadata()?.descriptor.property,
+                                matchMode: this.selectedFilterMetadata()?.descriptor.filterType === FilterTypeEnum.LookupEnum ? FilterMatchMode.In : FilterMatchMode.StartsWith
                             }
                         }
                     };
@@ -1008,22 +1294,16 @@ class FilterFormComponent {
             return;
         });
         this.selectedDescriptorAsLookup = computed(() => {
-            const filterDescriptor = this.selectedDescriptor();
+            const filterDescriptor = this.selectedFilterMetadata()?.descriptor;
             return filterDescriptor !== undefined &&
                 !filterDescriptor.isGenericFilter &&
                 (filterDescriptor.filterType === FilterTypeEnum.Lookup || filterDescriptor.filterType === FilterTypeEnum.LookupEnum)
                 ? filterDescriptor
                 : undefined;
         });
-        this.matchModeOptions = computed(() => {
-            return generateMatchModeOptions(this.primeConfig, this.selectedDescriptor(), this.serializationCfg);
-        });
         this.isEdit = computed(() => this.filter() != null);
         this.formSubmitted = signal(false);
         this.formErrorMessage = signal([]);
-        // display configs
-        this.dateConfig = computed(() => filterGetDateConfig(this.selectedDescriptor(), this.serializationCfg));
-        this.numberConfig = computed(() => filterGetNumberConfig(this.selectedDescriptor()));
         // UI utilities
         this.filterForm = viewChild.required('filterForm');
         // Filter form model and form utilities
@@ -1031,13 +1311,12 @@ class FilterFormComponent {
         this.matchModeModel = signal(null);
         this.valueModel = signal(null);
         this.caseSensitiveModel = signal(false);
-        this.serializationCfg = {};
-        filterApplySerializationConfigToCmp(this.moduleConfig, this.serializationCfg);
+        this.isMultiselect = computed(() => this.matchModeModel() === FilterMatchMode.In || this.matchModeModel() === FilterMatchMode.NotIn);
         effect(() => {
             const edit = this.filter();
             if (edit) {
                 this.resetForm({
-                    property: edit.descriptor.property,
+                    property: edit.metadata.descriptor.property,
                     matchMode: edit.displayMatchMode ?? edit.matchMode ?? null,
                     value: edit.displayValue ?? edit.value,
                     caseSensitive: edit.caseSensitive ?? false
@@ -1048,7 +1327,7 @@ class FilterFormComponent {
             }
         }, { allowSignalWrites: true });
         effect(() => {
-            const descriptor = this.selectedDescriptor();
+            const descriptor = this.selectedFilterMetadata()?.descriptor;
             const value = untracked(() => this.valueModel());
             if (value != null) {
                 // reset value if filter type and value type mismatch
@@ -1066,12 +1345,12 @@ class FilterFormComponent {
             }
         }, { allowSignalWrites: true });
         effect(() => {
-            const matchModeOptions = this.matchModeOptions();
+            const matchModeOptions = this.selectedFilterMetadata()?.matchModes ?? [];
             const matchMode = untracked(() => this.matchModeModel());
             const filterForm = untracked(() => this.filterForm());
             if (matchModeOptions.length > 0 &&
                 (!matchMode || filterForm.controls['matchMode']?.pristine || filterForm.controls['matchMode']?.untouched || !matchModeOptions.find(o => o.value === matchMode))) {
-                this.matchModeModel.set(filterGetDefaultMatchMode(this.selectedDescriptor(), matchModeOptions));
+                this.matchModeModel.set(filterGetDefaultMatchMode(this.selectedFilterMetadata()?.descriptor, matchModeOptions));
             }
         }, { allowSignalWrites: true });
         effect(() => {
@@ -1131,12 +1410,12 @@ class FilterFormComponent {
         }
         return labelKey;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FilterFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: FilterFormComponent, isStandalone: true, selector: "mng-filter-form", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, descriptors: { classPropertyName: "descriptors", publicName: "descriptors", isSignal: true, isRequired: true, transformFunction: null }, genericDescriptor: { classPropertyName: "genericDescriptor", publicName: "genericDescriptor", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, disabledProperties: { classPropertyName: "disabledProperties", publicName: "disabledProperties", isSignal: true, isRequired: false, transformFunction: null }, enableCaseSensitive: { classPropertyName: "enableCaseSensitive", publicName: "enableCaseSensitive", isSignal: true, isRequired: false, transformFunction: null }, propertySearch: { classPropertyName: "propertySearch", publicName: "propertySearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, host: { classAttribute: "flex flex-grow-1" }, viewQueries: [{ propertyName: "filterForm", first: true, predicate: ["filterForm"], descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n    <div>\n        <h5>{{ filter() ? ('mngFilter.titleEdit' | translate) : ('mngFilter.titleAdd' | translate) }}</h5>\n    </div>\n    <form #filterForm=\"ngForm\" (ngSubmit)=\"onFormSubmit(filterForm)\" class=\"flex flex-column align-items-center lg:flex-row gap-3\">\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"property\"\n                id=\"property\"\n                tabindex=\"1\"\n                #propertyControl=\"ngModel\"\n                [(ngModel)]=\"propertyModel\"\n                [options]=\"propertyOptionsWithTranslations()\"\n                optionsValueProperty=\"property\"\n                optionsDisabledProperty=\"disabled\"\n                optionsLabelProperty=\"label\"\n                [placeholder]=\"'mngFilter.property' | translate\"\n                [optionsLabelTranslate]=\"!propertySearch()\"\n                [inlineSearch]=\"propertySearch()\"\n                required=\"true\"\n                className=\"w-full\"\n                [disabled]=\"isEdit()\"\n                [appendTo]=\"null\" />\n        </div>\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"matchMode\"\n                id=\"matchMode\"\n                [(ngModel)]=\"matchModeModel\"\n                className=\"w-full\"\n                [options]=\"matchModeOptions()\"\n                [placeholder]=\"'mngFilter.matchMode' | translate\"\n                [disabled]=\"!propertyControl.value\"\n                class=\"align-self-end\"\n                required=\"true\"\n                [appendTo]=\"null\" />\n        </div>\n        @if (!(matchModeModel() === FilterMatchMode.Exists || matchModeModel() === FilterMatchMode.DoesNotExist)) {\n            <div class=\"w-full lg:w-auto flex flex-column\">\n                @switch (selectedDescriptor()?.filterType) {\n                    @case (FilterTypeEnum.Number) {\n                        @if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-number-range\n                                className=\"mng-column-filter-number-input\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedDescriptor()?.numberUseGrouping ?? false\"\n                                [minFractionDigits]=\"numberConfig()?.fractionsMin\"\n                                [maxFractionDigits]=\"numberConfig()?.fractionsMax\"\n                                required=\"true\" />\n                        } @else {\n                            <p-inputNumber\n                                inputStyleClass=\"mng-column-filter-number-input\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [styleClass]=\"'w-full'\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedDescriptor()?.numberUseGrouping\"\n                                [minFractionDigits]=\"numberConfig()?.fractionsMin\"\n                                [maxFractionDigits]=\"numberConfig()?.fractionsMax\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\" />\n                        }\n                    }\n\n                    @case (FilterTypeEnum.Boolean) {\n                        <p-checkbox [(ngModel)]=\"valueModel\" [disabled]=\"!matchModeModel()\" name=\"value\" binary=\"true\" required=\"true\" />\n                    }\n                    @case (FilterTypeEnum.Date) {\n                        @if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-date-range\n                                [(ngModel)]=\"valueModel\"\n                                name=\"value\"\n                                [showTime]=\"dateConfig()?.showTime ?? false\"\n                                [showSeconds]=\"dateConfig()?.showSeconds ?? false\"\n                                [dateFormat]=\"dateConfig()?.format\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                required=\"true\"></mng-date-range>\n                        } @else {\n                            <p-calendar\n                                appendTo=\"body\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [styleClass]=\"'w-full'\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [showIcon]=\"true\"\n                                [showTime]=\"dateConfig()?.showTime ?? false\"\n                                [showSeconds]=\"dateConfig()?.showSeconds ?? false\"\n                                [dateFormat]=\"dateConfig()?.format\"\n                                [firstDayOfWeek]=\"1\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\">\n                            </p-calendar>\n                        }\n                    }\n                    @case (FilterTypeEnum.Lookup) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @case (FilterTypeEnum.LookupEnum) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @default {\n                        @if (selectedDescriptor()?.genericValueProvider && genericValueDataProvider()) {\n                            <!-- conditional rendering on the placeholder is there because of styling issues with PrimeNG -->\n                            <!-- (PrimeNG applies the .p-placeholder class to programmatically set values, making them greyed out) -->\n                            <span class=\"flex align-items-center\">\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"genericValueDataProvider()\"\n                                    [className]=\"selectedDescriptor()?.className\"\n                                    [dropdownClassName]=\"selectedDescriptor()?.dropdownClassName\"\n                                    [placeholder]=\"valueModel() ? undefined : ('mngFilter.value' | translate)\"\n                                    allowInput=\"true\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\"></mng-dropdown>\n                                @if (enableCaseSensitive()) {\n                                    <p-toggleButton [(ngModel)]=\"caseSensitiveModel\" name=\"caseSensitive\" styleClass=\"ml-2 p-1 p-button\" onLabel=\"Aa\" offLabel=\"Aa\" />\n                                }\n                            </span>\n                        } @else {\n                            <span class=\"p-input-icon-right\">\n                                <input\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    type=\"text\"\n                                    pInputText\n                                    class=\"mng-column-filter-string-input w-full\"\n                                    [attr.placeholder]=\"'mngFilter.value' | translate\"\n                                    [mngInputTrim]=\"selectedDescriptor()?.trimOption!\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    required=\"true\" />\n                                @if (enableCaseSensitive()) {\n                                    <span class=\"toggle-button-input\">\n                                        <p-toggleButton [(ngModel)]=\"caseSensitiveModel\" name=\"caseSensitive\" styleClass=\"ml-1 p-1 p-button-sm\" onLabel=\"Aa\" offLabel=\"Aa\" />\n                                    </span>\n                                }\n                            </span>\n                        }\n                    }\n                }\n                <ng-template #lookupFilter>\n                    @if (selectedDescriptorAsLookup(); as lookupFilterDescriptor) {\n                        @switch (lookupFilterDescriptor.lookupType) {\n                            @case (lookupTypeAutocomplete) {\n                                <mng-autocomplete\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsTrackProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [multiselect]=\"lookupFilterDescriptor.multiselect\"\n                                    [autoClear]=\"lookupFilterDescriptor.autocompleteAutoClear ?? false\"\n                                    [openOnFocus]=\"lookupFilterDescriptor.autocompleteAutoClear ?? true\"\n                                    [inlineSearch]=\"lookupFilterDescriptor.autocompleteInlineSearch ?? false\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    [searchTrim]=\"selectedDescriptor()?.trimOption!\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    required=\"true\">\n                                </mng-autocomplete>\n                            }\n                            @case (lookupTypeDropdown) {\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [multiselect]=\"lookupFilterDescriptor.multiselect\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className + ' w-full'\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    showClear=\"false\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\">\n                                </mng-dropdown>\n                            }\n                        }\n                    } @else if (selectedDescriptor()?.isGenericFilter && genericValueDataProvider()) {\n                        <mng-dropdown\n                            [(ngModel)]=\"valueModel\"\n                            name=\"value\"\n                            [dataProvider]=\"genericValueDataProvider()\"\n                            [placeholder]=\"'mngFilter.value' | translate\"\n                            showClear=\"false\"\n                            [disabled]=\"!matchModeModel()\"\n                            [appendTo]=\"null\"\n                            required=\"true\">\n                        </mng-dropdown>\n                    }\n                </ng-template>\n            </div>\n        }\n        <div class=\"flex justify-content-end\">\n            <button pButton type=\"submit\" class=\"align-self-end\">\n                {{ (filter() ? 'general.apply' : 'general.add') | translate }}\n            </button>\n        </div>\n    </form>\n    @if (formSubmitted() && filterForm.invalid) {\n        <p-messages [value]=\"formErrorMessage()\" class=\"w-full\"></p-messages>\n    }\n</div>\n", styles: [".toggle-button-input{position:absolute;right:.25rem;top:50%;transform:translateY(-50%)}\n"], dependencies: [{ kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur", "loading", "disabled", "allowInput", "appendTo", "inlineSearch", "searchTrim"], outputs: ["valueChange", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "component", type: NumberRangeComponent, selector: "mng-number-range", inputs: ["placeholder", "useGrouping", "minFractionDigits", "maxFractionDigits", "required", "disabled"], outputs: ["keyDown"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i4.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: DateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "dateFormat", "className", "required", "disabled"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$1.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i4$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: AutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "optionsTrackProperty", "optionsValueProperty", "optionsLabelProperty", "optionsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst", "searchTrim", "disabled"], outputs: ["valueChange", "blur"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i6.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MessagesModule }, { kind: "component", type: i7.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: i9.ToggleButton, selector: "p-toggleButton", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "iconPos", "autofocus"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableFilterFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: TableFilterFormComponent, isStandalone: true, selector: "mng-table-filter-form", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null }, genericDescriptor: { classPropertyName: "genericDescriptor", publicName: "genericDescriptor", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, disabledProperties: { classPropertyName: "disabledProperties", publicName: "disabledProperties", isSignal: true, isRequired: false, transformFunction: null }, enableCaseSensitive: { classPropertyName: "enableCaseSensitive", publicName: "enableCaseSensitive", isSignal: true, isRequired: false, transformFunction: null }, propertySearch: { classPropertyName: "propertySearch", publicName: "propertySearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, host: { classAttribute: "flex flex-grow-1" }, viewQueries: [{ propertyName: "filterForm", first: true, predicate: ["filterForm"], descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n    <div>\n        <h5>{{ filter() ? ('mngFilter.titleEdit' | translate) : ('mngFilter.titleAdd' | translate) }}</h5>\n    </div>\n    <form #filterForm=\"ngForm\" (ngSubmit)=\"onFormSubmit(filterForm)\" class=\"flex flex-column align-items-center lg:flex-row gap-3\">\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"property\"\n                id=\"property\"\n                tabindex=\"1\"\n                #propertyControl=\"ngModel\"\n                [(ngModel)]=\"propertyModel\"\n                [options]=\"propertyOptionsWithTranslations()\"\n                optionsValueProperty=\"property\"\n                optionsDisabledProperty=\"disabled\"\n                optionsLabelProperty=\"label\"\n                [placeholder]=\"'mngFilter.property' | translate\"\n                [optionsLabelTranslate]=\"!propertySearch()\"\n                [inlineSearch]=\"propertySearch()\"\n                required=\"true\"\n                className=\"w-full\"\n                [disabled]=\"isEdit()\"\n                [appendTo]=\"null\" />\n        </div>\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"matchMode\"\n                id=\"matchMode\"\n                [(ngModel)]=\"matchModeModel\"\n                className=\"w-full\"\n                [options]=\"selectedFilterMetadata()?.matchModes ?? []\"\n                [placeholder]=\"'mngFilter.matchMode' | translate\"\n                [disabled]=\"!propertyControl.value\"\n                class=\"align-self-end\"\n                required=\"true\"\n                [appendTo]=\"null\" />\n        </div>\n        @if (!(matchModeModel() === FilterMatchMode.Exists || matchModeModel() === FilterMatchMode.DoesNotExist)) {\n            <div class=\"w-full lg:w-auto flex flex-column\">\n                @switch (selectedFilterMetadata()?.descriptor?.filterType) {\n                    @case (FilterTypeEnum.Number) {\n                        @if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-number-range\n                                className=\"mng-column-filter-number-input\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping ?? false\"\n                                [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n                                required=\"true\" />\n                        } @else {\n                            <p-inputNumber\n                                inputStyleClass=\"mng-column-filter-number-input\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [styleClass]=\"'w-full'\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping\"\n                                [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\" />\n                        }\n                    }\n\n                    @case (FilterTypeEnum.Boolean) {\n                        <p-checkbox [(ngModel)]=\"valueModel\" [disabled]=\"!matchModeModel()\" name=\"value\" binary=\"true\" required=\"true\" />\n                    }\n                    @case (FilterTypeEnum.Date) {\n                        @if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-date-range\n                                [(ngModel)]=\"valueModel\"\n                                name=\"value\"\n                                [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime ?? false\"\n                                [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds ?? false\"\n                                [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                required=\"true\"></mng-date-range>\n                        } @else {\n                            <p-calendar\n                                appendTo=\"body\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [styleClass]=\"'w-full'\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [showIcon]=\"true\"\n                                [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime ?? false\"\n                                [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds ?? false\"\n                                [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n                                [firstDayOfWeek]=\"1\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\">\n                            </p-calendar>\n                        }\n                    }\n                    @case (FilterTypeEnum.Lookup) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @case (FilterTypeEnum.LookupEnum) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @default {\n                        @if (selectedFilterMetadata()?.descriptor?.genericValueProvider && genericValueDataProvider()) {\n                            <!-- conditional rendering on the placeholder is there because of styling issues with PrimeNG -->\n                            <!-- (PrimeNG applies the .p-placeholder class to programmatically set values, making them greyed out) -->\n                            <span class=\"flex align-items-center\">\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"genericValueDataProvider()\"\n                                    [className]=\"selectedFilterMetadata()?.descriptor?.className\"\n                                    [dropdownClassName]=\"selectedFilterMetadata()?.descriptor?.dropdownClassName\"\n                                    [placeholder]=\"valueModel() ? undefined : ('mngFilter.value' | translate)\"\n                                    allowInput=\"true\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\"></mng-dropdown>\n                                @if (enableCaseSensitive()) {\n                                    <p-toggleButton [(ngModel)]=\"caseSensitiveModel\" name=\"caseSensitive\" styleClass=\"ml-2 p-1 p-button\" onLabel=\"Aa\" offLabel=\"Aa\" />\n                                }\n                            </span>\n                        } @else {\n                            <span class=\"p-input-icon-right\">\n                                <input\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    type=\"text\"\n                                    pInputText\n                                    class=\"mng-column-filter-string-input w-full\"\n                                    [attr.placeholder]=\"'mngFilter.value' | translate\"\n                                    [mngInputTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    required=\"true\" />\n                                @if (enableCaseSensitive()) {\n                                    <span class=\"toggle-button-input\">\n                                        <p-toggleButton [(ngModel)]=\"caseSensitiveModel\" name=\"caseSensitive\" styleClass=\"ml-1 p-1 p-button-sm\" onLabel=\"Aa\" offLabel=\"Aa\" />\n                                    </span>\n                                }\n                            </span>\n                        }\n                    }\n                }\n                <ng-template #lookupFilter>\n                    @if (selectedDescriptorAsLookup(); as lookupFilterDescriptor) {\n                        @switch (lookupFilterDescriptor.lookupType) {\n                            @case (lookupTypeAutocomplete) {\n                                <mng-autocomplete\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsTrackProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [multiselect]=\"isMultiselect()\"\n                                    [autoClear]=\"lookupFilterDescriptor.autocompleteAutoClear ?? false\"\n                                    [openOnFocus]=\"lookupFilterDescriptor.autocompleteAutoClear ?? true\"\n                                    [inlineSearch]=\"lookupFilterDescriptor.autocompleteInlineSearch ?? false\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    [searchTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    required=\"true\">\n                                </mng-autocomplete>\n                            }\n                            @case (lookupTypeDropdown) {\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [multiselect]=\"isMultiselect()\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className + ' w-full'\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    showClear=\"false\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\">\n                                </mng-dropdown>\n                            }\n                        }\n                    } @else if (selectedFilterMetadata()?.descriptor?.isGenericFilter && genericValueDataProvider()) {\n                        <mng-dropdown\n                            [(ngModel)]=\"valueModel\"\n                            name=\"value\"\n                            [dataProvider]=\"genericValueDataProvider()\"\n                            [placeholder]=\"'mngFilter.value' | translate\"\n                            showClear=\"false\"\n                            [disabled]=\"!matchModeModel()\"\n                            [appendTo]=\"null\"\n                            required=\"true\">\n                        </mng-dropdown>\n                    }\n                </ng-template>\n            </div>\n        }\n        <div class=\"flex justify-content-end\">\n            <button pButton type=\"submit\" class=\"align-self-end\">\n                {{ (filter() ? 'general.apply' : 'general.add') | translate }}\n            </button>\n        </div>\n    </form>\n    @if (formSubmitted() && filterForm.invalid) {\n        <p-messages [value]=\"formErrorMessage()\" class=\"w-full\"></p-messages>\n    }\n</div>\n", styles: [".toggle-button-input{position:absolute;right:.25rem;top:50%;transform:translateY(-50%)}\n"], dependencies: [{ kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur", "loading", "disabled", "allowInput", "appendTo", "inlineSearch", "searchTrim"], outputs: ["valueChange", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "component", type: NumberRangeComponent, selector: "mng-number-range", inputs: ["placeholder", "useGrouping", "minFractionDigits", "maxFractionDigits", "required", "disabled"], outputs: ["keyDown"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i4.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: DateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "dateFormat", "className", "required", "disabled"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$1.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i4$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: AutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "optionsTrackProperty", "optionsValueProperty", "optionsLabelProperty", "optionsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst", "searchTrim", "disabled"], outputs: ["valueChange", "blur"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i6.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MessagesModule }, { kind: "component", type: i7.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: i9.ToggleButton, selector: "p-toggleButton", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "iconPos", "autofocus"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FilterFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableFilterFormComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-filter-form', imports: [
+            args: [{ standalone: true, selector: 'mng-table-filter-form', imports: [
                         DropdownComponent,
                         FormsModule,
                         NgClass,
@@ -1155,19 +1434,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                         ToggleButtonModule
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'flex flex-grow-1'
-                    }, template: "<div>\n    <div>\n        <h5>{{ filter() ? ('mngFilter.titleEdit' | translate) : ('mngFilter.titleAdd' | translate) }}</h5>\n    </div>\n    <form #filterForm=\"ngForm\" (ngSubmit)=\"onFormSubmit(filterForm)\" class=\"flex flex-column align-items-center lg:flex-row gap-3\">\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"property\"\n                id=\"property\"\n                tabindex=\"1\"\n                #propertyControl=\"ngModel\"\n                [(ngModel)]=\"propertyModel\"\n                [options]=\"propertyOptionsWithTranslations()\"\n                optionsValueProperty=\"property\"\n                optionsDisabledProperty=\"disabled\"\n                optionsLabelProperty=\"label\"\n                [placeholder]=\"'mngFilter.property' | translate\"\n                [optionsLabelTranslate]=\"!propertySearch()\"\n                [inlineSearch]=\"propertySearch()\"\n                required=\"true\"\n                className=\"w-full\"\n                [disabled]=\"isEdit()\"\n                [appendTo]=\"null\" />\n        </div>\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"matchMode\"\n                id=\"matchMode\"\n                [(ngModel)]=\"matchModeModel\"\n                className=\"w-full\"\n                [options]=\"matchModeOptions()\"\n                [placeholder]=\"'mngFilter.matchMode' | translate\"\n                [disabled]=\"!propertyControl.value\"\n                class=\"align-self-end\"\n                required=\"true\"\n                [appendTo]=\"null\" />\n        </div>\n        @if (!(matchModeModel() === FilterMatchMode.Exists || matchModeModel() === FilterMatchMode.DoesNotExist)) {\n            <div class=\"w-full lg:w-auto flex flex-column\">\n                @switch (selectedDescriptor()?.filterType) {\n                    @case (FilterTypeEnum.Number) {\n                        @if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-number-range\n                                className=\"mng-column-filter-number-input\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedDescriptor()?.numberUseGrouping ?? false\"\n                                [minFractionDigits]=\"numberConfig()?.fractionsMin\"\n                                [maxFractionDigits]=\"numberConfig()?.fractionsMax\"\n                                required=\"true\" />\n                        } @else {\n                            <p-inputNumber\n                                inputStyleClass=\"mng-column-filter-number-input\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [styleClass]=\"'w-full'\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedDescriptor()?.numberUseGrouping\"\n                                [minFractionDigits]=\"numberConfig()?.fractionsMin\"\n                                [maxFractionDigits]=\"numberConfig()?.fractionsMax\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\" />\n                        }\n                    }\n\n                    @case (FilterTypeEnum.Boolean) {\n                        <p-checkbox [(ngModel)]=\"valueModel\" [disabled]=\"!matchModeModel()\" name=\"value\" binary=\"true\" required=\"true\" />\n                    }\n                    @case (FilterTypeEnum.Date) {\n                        @if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-date-range\n                                [(ngModel)]=\"valueModel\"\n                                name=\"value\"\n                                [showTime]=\"dateConfig()?.showTime ?? false\"\n                                [showSeconds]=\"dateConfig()?.showSeconds ?? false\"\n                                [dateFormat]=\"dateConfig()?.format\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                required=\"true\"></mng-date-range>\n                        } @else {\n                            <p-calendar\n                                appendTo=\"body\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [styleClass]=\"'w-full'\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [showIcon]=\"true\"\n                                [showTime]=\"dateConfig()?.showTime ?? false\"\n                                [showSeconds]=\"dateConfig()?.showSeconds ?? false\"\n                                [dateFormat]=\"dateConfig()?.format\"\n                                [firstDayOfWeek]=\"1\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\">\n                            </p-calendar>\n                        }\n                    }\n                    @case (FilterTypeEnum.Lookup) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @case (FilterTypeEnum.LookupEnum) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @default {\n                        @if (selectedDescriptor()?.genericValueProvider && genericValueDataProvider()) {\n                            <!-- conditional rendering on the placeholder is there because of styling issues with PrimeNG -->\n                            <!-- (PrimeNG applies the .p-placeholder class to programmatically set values, making them greyed out) -->\n                            <span class=\"flex align-items-center\">\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"genericValueDataProvider()\"\n                                    [className]=\"selectedDescriptor()?.className\"\n                                    [dropdownClassName]=\"selectedDescriptor()?.dropdownClassName\"\n                                    [placeholder]=\"valueModel() ? undefined : ('mngFilter.value' | translate)\"\n                                    allowInput=\"true\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\"></mng-dropdown>\n                                @if (enableCaseSensitive()) {\n                                    <p-toggleButton [(ngModel)]=\"caseSensitiveModel\" name=\"caseSensitive\" styleClass=\"ml-2 p-1 p-button\" onLabel=\"Aa\" offLabel=\"Aa\" />\n                                }\n                            </span>\n                        } @else {\n                            <span class=\"p-input-icon-right\">\n                                <input\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    type=\"text\"\n                                    pInputText\n                                    class=\"mng-column-filter-string-input w-full\"\n                                    [attr.placeholder]=\"'mngFilter.value' | translate\"\n                                    [mngInputTrim]=\"selectedDescriptor()?.trimOption!\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    required=\"true\" />\n                                @if (enableCaseSensitive()) {\n                                    <span class=\"toggle-button-input\">\n                                        <p-toggleButton [(ngModel)]=\"caseSensitiveModel\" name=\"caseSensitive\" styleClass=\"ml-1 p-1 p-button-sm\" onLabel=\"Aa\" offLabel=\"Aa\" />\n                                    </span>\n                                }\n                            </span>\n                        }\n                    }\n                }\n                <ng-template #lookupFilter>\n                    @if (selectedDescriptorAsLookup(); as lookupFilterDescriptor) {\n                        @switch (lookupFilterDescriptor.lookupType) {\n                            @case (lookupTypeAutocomplete) {\n                                <mng-autocomplete\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsTrackProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [multiselect]=\"lookupFilterDescriptor.multiselect\"\n                                    [autoClear]=\"lookupFilterDescriptor.autocompleteAutoClear ?? false\"\n                                    [openOnFocus]=\"lookupFilterDescriptor.autocompleteAutoClear ?? true\"\n                                    [inlineSearch]=\"lookupFilterDescriptor.autocompleteInlineSearch ?? false\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    [searchTrim]=\"selectedDescriptor()?.trimOption!\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    required=\"true\">\n                                </mng-autocomplete>\n                            }\n                            @case (lookupTypeDropdown) {\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [multiselect]=\"lookupFilterDescriptor.multiselect\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className + ' w-full'\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    showClear=\"false\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\">\n                                </mng-dropdown>\n                            }\n                        }\n                    } @else if (selectedDescriptor()?.isGenericFilter && genericValueDataProvider()) {\n                        <mng-dropdown\n                            [(ngModel)]=\"valueModel\"\n                            name=\"value\"\n                            [dataProvider]=\"genericValueDataProvider()\"\n                            [placeholder]=\"'mngFilter.value' | translate\"\n                            showClear=\"false\"\n                            [disabled]=\"!matchModeModel()\"\n                            [appendTo]=\"null\"\n                            required=\"true\">\n                        </mng-dropdown>\n                    }\n                </ng-template>\n            </div>\n        }\n        <div class=\"flex justify-content-end\">\n            <button pButton type=\"submit\" class=\"align-self-end\">\n                {{ (filter() ? 'general.apply' : 'general.add') | translate }}\n            </button>\n        </div>\n    </form>\n    @if (formSubmitted() && filterForm.invalid) {\n        <p-messages [value]=\"formErrorMessage()\" class=\"w-full\"></p-messages>\n    }\n</div>\n", styles: [".toggle-button-input{position:absolute;right:.25rem;top:50%;transform:translateY(-50%)}\n"] }]
+                    }, template: "<div>\n    <div>\n        <h5>{{ filter() ? ('mngFilter.titleEdit' | translate) : ('mngFilter.titleAdd' | translate) }}</h5>\n    </div>\n    <form #filterForm=\"ngForm\" (ngSubmit)=\"onFormSubmit(filterForm)\" class=\"flex flex-column align-items-center lg:flex-row gap-3\">\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"property\"\n                id=\"property\"\n                tabindex=\"1\"\n                #propertyControl=\"ngModel\"\n                [(ngModel)]=\"propertyModel\"\n                [options]=\"propertyOptionsWithTranslations()\"\n                optionsValueProperty=\"property\"\n                optionsDisabledProperty=\"disabled\"\n                optionsLabelProperty=\"label\"\n                [placeholder]=\"'mngFilter.property' | translate\"\n                [optionsLabelTranslate]=\"!propertySearch()\"\n                [inlineSearch]=\"propertySearch()\"\n                required=\"true\"\n                className=\"w-full\"\n                [disabled]=\"isEdit()\"\n                [appendTo]=\"null\" />\n        </div>\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"matchMode\"\n                id=\"matchMode\"\n                [(ngModel)]=\"matchModeModel\"\n                className=\"w-full\"\n                [options]=\"selectedFilterMetadata()?.matchModes ?? []\"\n                [placeholder]=\"'mngFilter.matchMode' | translate\"\n                [disabled]=\"!propertyControl.value\"\n                class=\"align-self-end\"\n                required=\"true\"\n                [appendTo]=\"null\" />\n        </div>\n        @if (!(matchModeModel() === FilterMatchMode.Exists || matchModeModel() === FilterMatchMode.DoesNotExist)) {\n            <div class=\"w-full lg:w-auto flex flex-column\">\n                @switch (selectedFilterMetadata()?.descriptor?.filterType) {\n                    @case (FilterTypeEnum.Number) {\n                        @if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-number-range\n                                className=\"mng-column-filter-number-input\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping ?? false\"\n                                [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n                                required=\"true\" />\n                        } @else {\n                            <p-inputNumber\n                                inputStyleClass=\"mng-column-filter-number-input\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [styleClass]=\"'w-full'\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping\"\n                                [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\" />\n                        }\n                    }\n\n                    @case (FilterTypeEnum.Boolean) {\n                        <p-checkbox [(ngModel)]=\"valueModel\" [disabled]=\"!matchModeModel()\" name=\"value\" binary=\"true\" required=\"true\" />\n                    }\n                    @case (FilterTypeEnum.Date) {\n                        @if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-date-range\n                                [(ngModel)]=\"valueModel\"\n                                name=\"value\"\n                                [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime ?? false\"\n                                [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds ?? false\"\n                                [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                required=\"true\"></mng-date-range>\n                        } @else {\n                            <p-calendar\n                                appendTo=\"body\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [styleClass]=\"'w-full'\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [showIcon]=\"true\"\n                                [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime ?? false\"\n                                [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds ?? false\"\n                                [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n                                [firstDayOfWeek]=\"1\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\">\n                            </p-calendar>\n                        }\n                    }\n                    @case (FilterTypeEnum.Lookup) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @case (FilterTypeEnum.LookupEnum) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @default {\n                        @if (selectedFilterMetadata()?.descriptor?.genericValueProvider && genericValueDataProvider()) {\n                            <!-- conditional rendering on the placeholder is there because of styling issues with PrimeNG -->\n                            <!-- (PrimeNG applies the .p-placeholder class to programmatically set values, making them greyed out) -->\n                            <span class=\"flex align-items-center\">\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"genericValueDataProvider()\"\n                                    [className]=\"selectedFilterMetadata()?.descriptor?.className\"\n                                    [dropdownClassName]=\"selectedFilterMetadata()?.descriptor?.dropdownClassName\"\n                                    [placeholder]=\"valueModel() ? undefined : ('mngFilter.value' | translate)\"\n                                    allowInput=\"true\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\"></mng-dropdown>\n                                @if (enableCaseSensitive()) {\n                                    <p-toggleButton [(ngModel)]=\"caseSensitiveModel\" name=\"caseSensitive\" styleClass=\"ml-2 p-1 p-button\" onLabel=\"Aa\" offLabel=\"Aa\" />\n                                }\n                            </span>\n                        } @else {\n                            <span class=\"p-input-icon-right\">\n                                <input\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    type=\"text\"\n                                    pInputText\n                                    class=\"mng-column-filter-string-input w-full\"\n                                    [attr.placeholder]=\"'mngFilter.value' | translate\"\n                                    [mngInputTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    required=\"true\" />\n                                @if (enableCaseSensitive()) {\n                                    <span class=\"toggle-button-input\">\n                                        <p-toggleButton [(ngModel)]=\"caseSensitiveModel\" name=\"caseSensitive\" styleClass=\"ml-1 p-1 p-button-sm\" onLabel=\"Aa\" offLabel=\"Aa\" />\n                                    </span>\n                                }\n                            </span>\n                        }\n                    }\n                }\n                <ng-template #lookupFilter>\n                    @if (selectedDescriptorAsLookup(); as lookupFilterDescriptor) {\n                        @switch (lookupFilterDescriptor.lookupType) {\n                            @case (lookupTypeAutocomplete) {\n                                <mng-autocomplete\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsTrackProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [multiselect]=\"isMultiselect()\"\n                                    [autoClear]=\"lookupFilterDescriptor.autocompleteAutoClear ?? false\"\n                                    [openOnFocus]=\"lookupFilterDescriptor.autocompleteAutoClear ?? true\"\n                                    [inlineSearch]=\"lookupFilterDescriptor.autocompleteInlineSearch ?? false\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    [searchTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    required=\"true\">\n                                </mng-autocomplete>\n                            }\n                            @case (lookupTypeDropdown) {\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [multiselect]=\"isMultiselect()\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className + ' w-full'\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    showClear=\"false\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\">\n                                </mng-dropdown>\n                            }\n                        }\n                    } @else if (selectedFilterMetadata()?.descriptor?.isGenericFilter && genericValueDataProvider()) {\n                        <mng-dropdown\n                            [(ngModel)]=\"valueModel\"\n                            name=\"value\"\n                            [dataProvider]=\"genericValueDataProvider()\"\n                            [placeholder]=\"'mngFilter.value' | translate\"\n                            showClear=\"false\"\n                            [disabled]=\"!matchModeModel()\"\n                            [appendTo]=\"null\"\n                            required=\"true\">\n                        </mng-dropdown>\n                    }\n                </ng-template>\n            </div>\n        }\n        <div class=\"flex justify-content-end\">\n            <button pButton type=\"submit\" class=\"align-self-end\">\n                {{ (filter() ? 'general.apply' : 'general.add') | translate }}\n            </button>\n        </div>\n    </form>\n    @if (formSubmitted() && filterForm.invalid) {\n        <p-messages [value]=\"formErrorMessage()\" class=\"w-full\"></p-messages>\n    }\n</div>\n", styles: [".toggle-button-input{position:absolute;right:.25rem;top:50%;transform:translateY(-50%)}\n"] }]
         }], ctorParameters: () => [] });
 
-const COMMONS_TABLE_FEATURE_CONFIG_IT = new InjectionToken('COMMONS_TABLE_FEATURE_CONFIG');
-
-class FilterOverlayWithTagComponent {
+class TableFilterOverlayWithTagComponent {
     static { this.SEARCH_WORD_LIMIT_MAX = 4; }
     constructor() {
         this.primeTable = inject(Table);
-        this.dataListService = inject((DataListService));
-        this.moduleConfig = inject(COMMONS_MODULE_CONFIG_IT, { optional: true });
+        this.tableData = inject((TableDataService));
         this.tableConfig = inject(COMMONS_TABLE_FEATURE_CONFIG_IT, { optional: true });
-        this.descriptors = input.required();
+        this.metadata = input.required();
         this.genericFilterDescriptor = input();
         this.model = input.required();
         this.enableSearch = input(false, { transform: booleanAttribute });
@@ -1175,18 +1451,18 @@ class FilterOverlayWithTagComponent {
         this.searchLimitWordMax = input(undefined);
         this.enableCaseSensitive = input(true, { transform: booleanAttribute });
         this.filterOverlay = viewChild.required(OverlayPanel);
-        this.filterFormComponent = viewChild(FilterFormComponent);
+        this.filterFormComponent = viewChild(TableFilterFormComponent);
         this.templates = contentChildren(TemplateDirective);
         this.titleTemplate = computed(() => findTemplateByName([...this.templates()], 'title'));
         this.filters = computed(() => {
-            return this.setInitialFilters(this.dataListService.filterMeta());
+            return this.getInitialFilters(this.tableData.filterMeta(), this.metadata());
         });
-        this.showFilterButton = computed(() => this.descriptors().length > 0);
+        this.showFilterButton = computed(() => this.metadata().length > 0);
         this.activeFilters = computed(() => {
             const filterEntry = this.filters();
-            return this.descriptors()
+            return this.metadata()
                 .filter(d => {
-                const filter = filterEntry[d.property];
+                const filter = filterEntry[d.descriptor.property];
                 return (filter &&
                     filter.matchMode !== undefined &&
                     filter.displayMatchMode !== undefined &&
@@ -1194,11 +1470,10 @@ class FilterOverlayWithTagComponent {
                         filter.matchMode === FilterMatchMode.DoesNotExist ||
                         (filter.value !== undefined && filter.displayValue !== undefined)));
             })
-                .map(d => filterEntry[d.property]);
+                .map(d => filterEntry[d.descriptor.property]);
         });
-        this.activeFilterProperties = computed(() => this.activeFilters().map(f => f.descriptor.property));
+        this.activeFilterProperties = computed(() => this.activeFilters().map(f => f.metadata.descriptor.property));
         this.filterEdit = signal(undefined);
-        this.serializationCfg = {};
         // global search model
         this.searchValue = computed(() => this.search()?.value);
         this.searchCaseSensitive = computed(() => this.search()?.caseSensitive);
@@ -1208,28 +1483,27 @@ class FilterOverlayWithTagComponent {
             if (inputLimit !== undefined) {
                 return inputLimit;
             }
-            return this.tableConfig?.searchLimitMaxWords !== undefined ? this.tableConfig?.searchLimitMaxWords : FilterOverlayWithTagComponent.SEARCH_WORD_LIMIT_MAX;
+            return this.tableConfig?.searchLimitMaxWords !== undefined ? this.tableConfig?.searchLimitMaxWords : TableFilterOverlayWithTagComponent.SEARCH_WORD_LIMIT_MAX;
         });
         this.searchValueSubject = new BehaviorSubject(undefined);
         this.searchCaseSensitiveSubject = new BehaviorSubject(undefined);
         // UI utilities
         this.clickedOnFilterEvent = undefined;
-        filterApplySerializationConfigToCmp(this.moduleConfig, this.serializationCfg);
         combineLatest([this.searchValueSubject.pipe(debounceTime(500), distinctUntilChanged()), this.searchCaseSensitiveSubject])
             // NOTE: skip is used to ignore propagating the initial value of the subjects
             .pipe(skip(1), takeUntilDestroyed())
             .subscribe(([value, caseSensitive]) => {
-            this.updatePrimeTableGlobalFilter(value == null ? this.search()?.value ?? '' : value, caseSensitive == null ? this.search()?.caseSensitive ?? undefined : caseSensitive);
+            this.updatePrimeTableGlobalFilter(value == null ? (this.search()?.value ?? '') : value, caseSensitive == null ? (this.search()?.caseSensitive ?? undefined) : caseSensitive);
         });
     }
     onFilterFormApply(event) {
-        const descriptor = this.descriptors().find(d => d.property === event.property);
-        if (!descriptor) {
+        const filterMetadata = this.metadata().find(d => d.descriptor.property === event.property);
+        if (!filterMetadata) {
             return;
         }
         const filterData = {
-            ...filterSetMetadataOnDisplayChange({ caseSensitive: event.caseSensitive }, event.matchMode, event.value, descriptor.filterType, filterGetDateConfig(descriptor, this.serializationCfg)),
-            descriptor: descriptor
+            ...filterSetMetadataOnDisplayChange({ caseSensitive: event.caseSensitive }, event.matchMode, event.value, filterMetadata.descriptor.filterType, filterMetadata.dateConfig),
+            metadata: filterMetadata
         };
         this.updatePrimeTableFilter(filterData);
         // this keeps the UI updated properly before closing the overlay
@@ -1240,7 +1514,7 @@ class FilterOverlayWithTagComponent {
     }
     onFilterRemove(event) {
         this.updatePrimeTableFilter({
-            ...this.filters()[event.filter.descriptor.property],
+            ...this.filters()[event.filter.metadata.descriptor.property],
             matchMode: undefined,
             displayMatchMode: undefined,
             value: undefined,
@@ -1290,7 +1564,7 @@ class FilterOverlayWithTagComponent {
     }
     onFilterAddOrEdit(filter, event) {
         // If user clicks on the same filter or add that is already open, close the overlay
-        if (this.filterOverlay().overlayVisible && this.filterEdit()?.descriptor.property === filter?.descriptor.property) {
+        if (this.filterOverlay().overlayVisible && this.filterEdit()?.metadata.descriptor.property === filter?.metadata.descriptor.property) {
             this.filterOverlay().hide();
             return;
         }
@@ -1305,23 +1579,25 @@ class FilterOverlayWithTagComponent {
             this.filterOverlay().show(event);
         }
     }
-    setInitialFilters(filtersInit) {
+    getInitialFilters(filtersInit, metadata) {
         const filtersResult = {};
-        for (const property in filtersInit) {
-            const filterInit = filtersInit[property];
-            const descriptor = this.descriptors().find(filterDescriptor => filterDescriptor.property === property);
-            if (!descriptor) {
-                continue;
+        if (filtersInit) {
+            for (const property in filtersInit) {
+                const filterInit = filtersInit[property];
+                const filterMetadata = metadata.find(m => m.descriptor.property === property);
+                if (!filterMetadata) {
+                    continue;
+                }
+                filtersResult[property] = {
+                    ...filterSetMetadataOnChange(filterInit, filterInit.matchMode, filterInit.value, filterMetadata.descriptor.filterType, filterMetadata.dateConfig),
+                    metadata: filterMetadata
+                };
             }
-            filtersResult[property] = {
-                ...filterSetMetadataOnChange(filterInit, filterInit.matchMode, filterInit.value, descriptor.filterType, filterGetDateConfig(descriptor, this.serializationCfg)),
-                descriptor: descriptor
-            };
         }
         return filtersResult;
     }
     updatePrimeTableFilter(filter) {
-        this.primeTable.filters[filter.descriptor.property] = { ...filter };
+        this.primeTable.filters[filter.metadata.descriptor.property] = { ...filter };
         this.primeTable._filter();
     }
     updatePrimeTableGlobalFilter(searchQuery, caseSensitive = false) {
@@ -1329,18 +1605,18 @@ class FilterOverlayWithTagComponent {
         this.primeTable.filters['global'] = { ...{ value: searchQuery, matchMode: 'contains', caseSensitive: caseSensitive } };
         this.primeTable._filter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FilterOverlayWithTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: FilterOverlayWithTagComponent, isStandalone: true, selector: "mng-filter-overlay-with-tag", inputs: { descriptors: { classPropertyName: "descriptors", publicName: "descriptors", isSignal: true, isRequired: true, transformFunction: null }, genericFilterDescriptor: { classPropertyName: "genericFilterDescriptor", publicName: "genericFilterDescriptor", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchLimitWordMax: { classPropertyName: "searchLimitWordMax", publicName: "searchLimitWordMax", isSignal: true, isRequired: false, transformFunction: null }, enableCaseSensitive: { classPropertyName: "enableCaseSensitive", publicName: "enableCaseSensitive", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "templates", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "filterOverlay", first: true, predicate: OverlayPanel, descendants: true, isSignal: true }, { propertyName: "filterFormComponent", first: true, predicate: FilterFormComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex align-items-center flex-grow-1\">\n    @if (titleTemplate()) {\n        <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n    }\n    @if (showFilterButton()) {\n        <p-button\n            icon=\"pi pi-filter\"\n            rounded=\"true\"\n            [severity]=\"activeFilters().length > 0 ? 'primary' : 'secondary'\"\n            size=\"small\"\n            (click)=\"onFilterAdd($event)\"\n            [styleClass]=\"'my-1 mr-2' + (titleTemplate() ? ' ml-3' : '')\">\n        </p-button>\n    }\n    @if (enableSearch()) {\n        <div class=\"col-4\" [ngClass]=\"{'ml-3': !showFilterButton() && titleTemplate()}\">\n            <span class=\"p-input-icon-left w-full\">\n                <i class=\"pi pi-search\"></i>\n                <input\n                    [ngModel]=\"searchValue()\"\n                    (ngModelChange)=\"onSearchChange($event)\"\n                    name=\"globalSearch\"\n                    type=\"text\"\n                    pInputText\n                    class=\"search-input w-full\"\n                    [ngClass]=\"{'ng-invalid': searchWordLimitMaxError()}\"\n                    [attr.placeholder]=\"'mngFilter.search.input' | translate\"\n                    [placeholder]=\"'mngFilter.search.input' | translate\" />\n                @if (enableCaseSensitive()) {\n                    <span class=\"toggle-button-input\">\n                        <p-toggleButton\n                            styleClass=\"ml-1 p-1 p-button-sm\"\n                            [ngModel]=\"searchCaseSensitive()\"\n                            (ngModelChange)=\"onSearchCaseSensitiveChange($event)\"\n                            onLabel=\"Aa\"\n                            offLabel=\"Aa\" />\n                    </span>\n                }\n            </span>\n            @if (searchWordLimitMaxError()) {\n                <small class=\"p-error block\">\n                    {{ 'mngFilter.search.maxWordsExceededMessage' | translate }}\n                </small>\n            }\n        </div>\n    }\n</div>\n@if (activeFilters().length > 0) {\n    <div class=\"flex align-items-center flex-wrap mt-2\">\n        @for (filter of activeFilters(); track filter.descriptor.property) {\n            <mng-filter-active-tag [model]=\"model()\" [filter]=\"filter\" (edit)=\"onFilterEdit($event)\" (remove)=\"onFilterRemove($event)\" />\n        }\n    </div>\n}\n<p-overlayPanel #op [showCloseIcon]=\"true\" (onHide)=\"onOverlayHide()\" appendTo=\"body\">\n    <mng-filter-form\n        [model]=\"model()\"\n        [descriptors]=\"descriptors()\"\n        [genericDescriptor]=\"genericFilterDescriptor()\"\n        [filter]=\"filterEdit()\"\n        [disabledProperties]=\"activeFilterProperties()\"\n        [propertySearch]=\"genericFilterDescriptor()?.propertySearch\"\n        [overlay]=\"op\"\n        [enableCaseSensitive]=\"enableCaseSensitive()\"\n        (apply)=\"onFilterFormApply($event)\" />\n</p-overlayPanel>\n", styles: [".toggle-button-input{position:absolute;right:.35rem;top:50%;transform:translateY(-50%)}\n"], dependencies: [{ kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i1$2.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: FilterFormComponent, selector: "mng-filter-form", inputs: ["title", "descriptors", "genericDescriptor", "model", "filter", "overlay", "disabledProperties", "enableCaseSensitive", "propertySearch"], outputs: ["apply"] }, { kind: "component", type: 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: "component", type: FilterActiveTagComponent, selector: "mng-filter-active-tag", inputs: ["model", "filter"], outputs: ["edit", "remove"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: i9.ToggleButton, selector: "p-toggleButton", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "iconPos", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: CheckboxModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableFilterOverlayWithTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: TableFilterOverlayWithTagComponent, isStandalone: true, selector: "mng-table-filter-overlay-with-tag", inputs: { metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null }, genericFilterDescriptor: { classPropertyName: "genericFilterDescriptor", publicName: "genericFilterDescriptor", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchLimitWordMax: { classPropertyName: "searchLimitWordMax", publicName: "searchLimitWordMax", isSignal: true, isRequired: false, transformFunction: null }, enableCaseSensitive: { classPropertyName: "enableCaseSensitive", publicName: "enableCaseSensitive", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "templates", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "filterOverlay", first: true, predicate: OverlayPanel, descendants: true, isSignal: true }, { propertyName: "filterFormComponent", first: true, predicate: TableFilterFormComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex align-items-center flex-grow-1\">\n    @if (titleTemplate()) {\n        <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n    }\n    @if (showFilterButton()) {\n        <p-button\n            icon=\"pi pi-filter\"\n            rounded=\"true\"\n            [severity]=\"activeFilters().length > 0 ? 'primary' : 'secondary'\"\n            size=\"small\"\n            (click)=\"onFilterAdd($event)\"\n            [styleClass]=\"'my-1 mr-2' + (titleTemplate() ? ' ml-3' : '')\">\n        </p-button>\n    }\n    @if (enableSearch()) {\n        <div class=\"col-4\" [ngClass]=\"{'ml-3': !showFilterButton() && titleTemplate()}\">\n            <span class=\"p-input-icon-left w-full\">\n                <i class=\"pi pi-search\"></i>\n                <input\n                    [ngModel]=\"searchValue()\"\n                    (ngModelChange)=\"onSearchChange($event)\"\n                    name=\"globalSearch\"\n                    type=\"text\"\n                    pInputText\n                    class=\"search-input w-full\"\n                    [ngClass]=\"{'ng-invalid': searchWordLimitMaxError()}\"\n                    [attr.placeholder]=\"'mngFilter.search.input' | translate\"\n                    [placeholder]=\"'mngFilter.search.input' | translate\" />\n                @if (enableCaseSensitive()) {\n                    <span class=\"toggle-button-input\">\n                        <p-toggleButton\n                            styleClass=\"ml-1 p-1 p-button-sm\"\n                            [ngModel]=\"searchCaseSensitive()\"\n                            (ngModelChange)=\"onSearchCaseSensitiveChange($event)\"\n                            onLabel=\"Aa\"\n                            offLabel=\"Aa\" />\n                    </span>\n                }\n            </span>\n            @if (searchWordLimitMaxError()) {\n                <small class=\"p-error block\">\n                    {{ 'mngFilter.search.maxWordsExceededMessage' | translate }}\n                </small>\n            }\n        </div>\n    }\n</div>\n@if (activeFilters().length > 0) {\n    <div class=\"flex align-items-center flex-wrap mt-2\">\n        @for (filter of activeFilters(); track filter.metadata.descriptor.property) {\n            <mng-table-filter-active-tag [model]=\"model()\" [filter]=\"filter\" (edit)=\"onFilterEdit($event)\" (remove)=\"onFilterRemove($event)\" />\n        }\n    </div>\n}\n<p-overlayPanel #op [showCloseIcon]=\"true\" (onHide)=\"onOverlayHide()\" appendTo=\"body\">\n    <mng-table-filter-form\n        [model]=\"model()\"\n        [metadata]=\"metadata()\"\n        [genericDescriptor]=\"genericFilterDescriptor()\"\n        [filter]=\"filterEdit()\"\n        [disabledProperties]=\"activeFilterProperties()\"\n        [propertySearch]=\"genericFilterDescriptor()?.propertySearch\"\n        [overlay]=\"op\"\n        [enableCaseSensitive]=\"enableCaseSensitive()\"\n        (apply)=\"onFilterFormApply($event)\" />\n</p-overlayPanel>\n", styles: [".toggle-button-input{position:absolute;right:.35rem;top:50%;transform:translateY(-50%)}\n"], dependencies: [{ kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i1$2.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: TableFilterFormComponent, selector: "mng-table-filter-form", inputs: ["title", "metadata", "genericDescriptor", "model", "filter", "overlay", "disabledProperties", "enableCaseSensitive", "propertySearch"], outputs: ["apply"] }, { kind: "component", type: 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: "component", type: TableFilterActiveTagComponent, selector: "mng-table-filter-active-tag", inputs: ["model", "filter"], outputs: ["edit", "remove"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: i9.ToggleButton, selector: "p-toggleButton", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "iconPos", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: CheckboxModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FilterOverlayWithTagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableFilterOverlayWithTagComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-filter-overlay-with-tag', imports: [
+            args: [{ standalone: true, selector: 'mng-table-filter-overlay-with-tag', imports: [
                         OverlayPanelModule,
                         TranslateModule,
                         TagModule,
-                        FilterFormComponent,
+                        TableFilterFormComponent,
                         Button,
-                        FilterActiveTagComponent,
+                        TableFilterActiveTagComponent,
                         NgTemplateOutlet,
                         InputTextModule,
                         PaginatorModule,
@@ -1350,7 +1626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                         InputGroupAddonModule,
                         CheckboxModule,
                         NgStyle
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center flex-grow-1\">\n    @if (titleTemplate()) {\n        <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n    }\n    @if (showFilterButton()) {\n        <p-button\n            icon=\"pi pi-filter\"\n            rounded=\"true\"\n            [severity]=\"activeFilters().length > 0 ? 'primary' : 'secondary'\"\n            size=\"small\"\n            (click)=\"onFilterAdd($event)\"\n            [styleClass]=\"'my-1 mr-2' + (titleTemplate() ? ' ml-3' : '')\">\n        </p-button>\n    }\n    @if (enableSearch()) {\n        <div class=\"col-4\" [ngClass]=\"{'ml-3': !showFilterButton() && titleTemplate()}\">\n            <span class=\"p-input-icon-left w-full\">\n                <i class=\"pi pi-search\"></i>\n                <input\n                    [ngModel]=\"searchValue()\"\n                    (ngModelChange)=\"onSearchChange($event)\"\n                    name=\"globalSearch\"\n                    type=\"text\"\n                    pInputText\n                    class=\"search-input w-full\"\n                    [ngClass]=\"{'ng-invalid': searchWordLimitMaxError()}\"\n                    [attr.placeholder]=\"'mngFilter.search.input' | translate\"\n                    [placeholder]=\"'mngFilter.search.input' | translate\" />\n                @if (enableCaseSensitive()) {\n                    <span class=\"toggle-button-input\">\n                        <p-toggleButton\n                            styleClass=\"ml-1 p-1 p-button-sm\"\n                            [ngModel]=\"searchCaseSensitive()\"\n                            (ngModelChange)=\"onSearchCaseSensitiveChange($event)\"\n                            onLabel=\"Aa\"\n                            offLabel=\"Aa\" />\n                    </span>\n                }\n            </span>\n            @if (searchWordLimitMaxError()) {\n                <small class=\"p-error block\">\n                    {{ 'mngFilter.search.maxWordsExceededMessage' | translate }}\n                </small>\n            }\n        </div>\n    }\n</div>\n@if (activeFilters().length > 0) {\n    <div class=\"flex align-items-center flex-wrap mt-2\">\n        @for (filter of activeFilters(); track filter.descriptor.property) {\n            <mng-filter-active-tag [model]=\"model()\" [filter]=\"filter\" (edit)=\"onFilterEdit($event)\" (remove)=\"onFilterRemove($event)\" />\n        }\n    </div>\n}\n<p-overlayPanel #op [showCloseIcon]=\"true\" (onHide)=\"onOverlayHide()\" appendTo=\"body\">\n    <mng-filter-form\n        [model]=\"model()\"\n        [descriptors]=\"descriptors()\"\n        [genericDescriptor]=\"genericFilterDescriptor()\"\n        [filter]=\"filterEdit()\"\n        [disabledProperties]=\"activeFilterProperties()\"\n        [propertySearch]=\"genericFilterDescriptor()?.propertySearch\"\n        [overlay]=\"op\"\n        [enableCaseSensitive]=\"enableCaseSensitive()\"\n        (apply)=\"onFilterFormApply($event)\" />\n</p-overlayPanel>\n", styles: [".toggle-button-input{position:absolute;right:.35rem;top:50%;transform:translateY(-50%)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center flex-grow-1\">\n    @if (titleTemplate()) {\n        <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n    }\n    @if (showFilterButton()) {\n        <p-button\n            icon=\"pi pi-filter\"\n            rounded=\"true\"\n            [severity]=\"activeFilters().length > 0 ? 'primary' : 'secondary'\"\n            size=\"small\"\n            (click)=\"onFilterAdd($event)\"\n            [styleClass]=\"'my-1 mr-2' + (titleTemplate() ? ' ml-3' : '')\">\n        </p-button>\n    }\n    @if (enableSearch()) {\n        <div class=\"col-4\" [ngClass]=\"{'ml-3': !showFilterButton() && titleTemplate()}\">\n            <span class=\"p-input-icon-left w-full\">\n                <i class=\"pi pi-search\"></i>\n                <input\n                    [ngModel]=\"searchValue()\"\n                    (ngModelChange)=\"onSearchChange($event)\"\n                    name=\"globalSearch\"\n                    type=\"text\"\n                    pInputText\n                    class=\"search-input w-full\"\n                    [ngClass]=\"{'ng-invalid': searchWordLimitMaxError()}\"\n                    [attr.placeholder]=\"'mngFilter.search.input' | translate\"\n                    [placeholder]=\"'mngFilter.search.input' | translate\" />\n                @if (enableCaseSensitive()) {\n                    <span class=\"toggle-button-input\">\n                        <p-toggleButton\n                            styleClass=\"ml-1 p-1 p-button-sm\"\n                            [ngModel]=\"searchCaseSensitive()\"\n                            (ngModelChange)=\"onSearchCaseSensitiveChange($event)\"\n                            onLabel=\"Aa\"\n                            offLabel=\"Aa\" />\n                    </span>\n                }\n            </span>\n            @if (searchWordLimitMaxError()) {\n                <small class=\"p-error block\">\n                    {{ 'mngFilter.search.maxWordsExceededMessage' | translate }}\n                </small>\n            }\n        </div>\n    }\n</div>\n@if (activeFilters().length > 0) {\n    <div class=\"flex align-items-center flex-wrap mt-2\">\n        @for (filter of activeFilters(); track filter.metadata.descriptor.property) {\n            <mng-table-filter-active-tag [model]=\"model()\" [filter]=\"filter\" (edit)=\"onFilterEdit($event)\" (remove)=\"onFilterRemove($event)\" />\n        }\n    </div>\n}\n<p-overlayPanel #op [showCloseIcon]=\"true\" (onHide)=\"onOverlayHide()\" appendTo=\"body\">\n    <mng-table-filter-form\n        [model]=\"model()\"\n        [metadata]=\"metadata()\"\n        [genericDescriptor]=\"genericFilterDescriptor()\"\n        [filter]=\"filterEdit()\"\n        [disabledProperties]=\"activeFilterProperties()\"\n        [propertySearch]=\"genericFilterDescriptor()?.propertySearch\"\n        [overlay]=\"op\"\n        [enableCaseSensitive]=\"enableCaseSensitive()\"\n        (apply)=\"onFilterFormApply($event)\" />\n</p-overlayPanel>\n", styles: [".toggle-button-input{position:absolute;right:.35rem;top:50%;transform:translateY(-50%)}\n"] }]
         }], ctorParameters: () => [] });
 
 function tableNotificationError(translate, table, error, messageService) {
@@ -1366,16 +1642,6 @@ function tableNotificationError(translate, table, error, messageService) {
     return toastMessage(messageService, tableErrorTitle, tableErrorMessage, 'error', 'pi-exclamation-triangle');
 }
 
-/**
- * generates table layout preferences key used when saving preferences to localstorage
- * @param typeName string, required
- * @param url string, required
- * @param trackProperty string, not required
- */
-function generateTableLayoutPrefsKey(typeName, url, trackProperty) {
-    return `commonsTableLayoutPrefs~~${typeName}~~${trackProperty ?? url.split('?')[0].split('#')[0]}`;
-}
-
 class LocaleDefaultRowClassPipe {
     constructor(injector) {
         this.injector = injector;
@@ -1388,10 +1654,10 @@ class LocaleDefaultRowClassPipe {
         }
         return value ?? '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: LocaleDefaultRowClassPipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: LocaleDefaultRowClassPipe, isStandalone: true, name: "mngLocaleDefaultRowClass" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: LocaleDefaultRowClassPipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: LocaleDefaultRowClassPipe, isStandalone: true, name: "mngLocaleDefaultRowClass" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: LocaleDefaultRowClassPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: LocaleDefaultRowClassPipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -1410,10 +1676,10 @@ class TableColumnFilterClassPipe {
             return strValue;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TableColumnFilterClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: TableColumnFilterClassPipe, isStandalone: true, name: "mngTableColumnFilterClass" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableColumnFilterClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: TableColumnFilterClassPipe, isStandalone: true, name: "mngTableColumnFilterClass" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TableColumnFilterClassPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableColumnFilterClassPipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -1422,22 +1688,173 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                 }]
         }] });
 
+/**
+ * generates table layout preferences key used when saving preferences to localstorage
+ * @param typeName string, required
+ * @param url string, required
+ * @param trackProperty string, not required
+ */
+function generateTableLayoutPrefsKey(typeName, url, trackProperty) {
+    return `commonsTableLayoutPrefs~~${typeName}~~${trackProperty ?? url.split('?')[0].split('#')[0]}`;
+}
+
+class TablePreferencesService {
+    constructor() {
+        this.#router = inject(Router);
+        this.#storageService = inject(CommonsStorageService);
+        this.#metadata = inject(TableMetadataService);
+        this.localstorageKey = computed(() => {
+            const descriptor = this.#metadata.descriptor();
+            return descriptor.model.i18nBaseKey ? generateTableLayoutPrefsKey(descriptor.model.i18nBaseKey, this.#router.url, descriptor.identifier) : null;
+        });
+        this.#layoutPrefsSaveCnt = signal(0);
+        this.layoutPreferences = computed(() => {
+            const lsKey = this.localstorageKey();
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const cnt = this.#layoutPrefsSaveCnt(); // needed to force updates on user changes
+            const layoutPrefs = lsKey ? this.#storageService.getItem(TableMetadataService.cmpTypeName, lsKey) : undefined;
+            return layoutPrefs ?? { columnWidths: {} };
+        });
+        // columns
+        this.columnsWithPrefs = computed(() => this.#computeColumnsWithLayout());
+    }
+    #router;
+    #storageService;
+    #metadata;
+    #layoutPrefsSaveCnt;
+    /**
+     * Method is called on column resize
+     * @param element event's element
+     */
+    onColumnResize({ element }) {
+        const fieldId = element.id;
+        const width = element.offsetWidth;
+        const layoutPrefs = this.layoutPreferences();
+        const col = this.columnsWithPrefs().find(el => el.descriptor.property === fieldId);
+        if (col)
+            col.width = width;
+        if (!layoutPrefs.columnWidths)
+            layoutPrefs.columnWidths = {};
+        layoutPrefs.columnWidths[fieldId] = width;
+        this.#saveLayoutPreferences(layoutPrefs);
+    }
+    onColumnToggle(event) {
+        const layoutPrefs = this.layoutPreferences();
+        const selectedColumns = event.value.map(v => v.descriptor.property);
+        layoutPrefs.columnHidden = this.columnsWithPrefs()
+            .filter(c => selectedColumns.indexOf(c.descriptor.property) < 0)
+            .map(c => c.descriptor.property);
+        this.#saveLayoutPreferences(layoutPrefs, true);
+    }
+    onColumnToggleAll() {
+        const layoutPrefs = this.layoutPreferences();
+        const columns = [...this.columnsWithPrefs()];
+        const isVisible = !this.columnsWithPrefs().some(c => c.isVisible);
+        for (const col of columns) {
+            if (isVisible !== col.isVisible) {
+                col.isVisible = isVisible;
+            }
+        }
+        layoutPrefs.columnHidden = columns.filter(c => !c.isVisible).map(c => c.descriptor.property);
+        this.#saveLayoutPreferences(layoutPrefs);
+    }
+    onColumnReorder(event) {
+        if (event.dropIndex !== undefined && event.dropIndex >= 0 && event.dragIndex !== undefined && event.dragIndex >= 0 && event.dropIndex !== event.dragIndex) {
+            const eventDropIndex = event.dropIndex;
+            const eventDragIndex = event.dragIndex;
+            const prevVisibleColumns = this.columnsWithPrefs().filter(c => c.isVisible);
+            const colAtDrop = prevVisibleColumns[eventDropIndex];
+            const colAtDrag = prevVisibleColumns[eventDragIndex];
+            const colAtDropIndex = this.columnsWithPrefs().findIndex(el => el.id === colAtDrop.id);
+            const colAtDragIndex = this.columnsWithPrefs().findIndex(el => el.id === colAtDrag.id);
+            if (colAtDropIndex > -1 && colAtDragIndex > -1) {
+                let columns = [...this.columnsWithPrefs()];
+                columns.splice(colAtDragIndex, 1);
+                const dropIndex = columns.findIndex(el => el.id === colAtDrop.id) + (eventDropIndex > eventDragIndex ? 1 : 0);
+                columns = [...columns.slice(0, dropIndex), colAtDrag, ...columns.slice(dropIndex)];
+                const layoutPrefs = this.layoutPreferences();
+                layoutPrefs.columnOrder = columns.map(el => el.descriptor.property);
+                this.#saveLayoutPreferences(layoutPrefs);
+            }
+        }
+    }
+    /**
+     * Reset column order and column visibility to default settings
+     */
+    clearLayoutPreferences() {
+        const key = this.localstorageKey();
+        if (key) {
+            this.#storageService.removeItem(TableMetadataService.cmpTypeName, key);
+            this.#layoutPrefsSaveCnt.update(v => v + 1);
+        }
+    }
+    #saveLayoutPreferences(layoutPrefs, forceUpdate = false) {
+        const key = this.localstorageKey();
+        if (key) {
+            this.#storageService.setItem(TableMetadataService.cmpTypeName, key, layoutPrefs);
+            if (forceUpdate) {
+                this.#layoutPrefsSaveCnt.update(v => v + 1);
+            }
+        }
+    }
+    #computeColumnsWithLayout() {
+        const descriptor = this.#metadata.descriptor();
+        const layoutPrefs = this.layoutPreferences();
+        // initialize columns with additional properties
+        const timestamp = new Date().getTime();
+        const columns = descriptor.columns.map(col => ({
+            id: `${col.property}-${timestamp}`,
+            descriptor: col,
+            filter: this.#metadata
+                .filters()
+                .find(f => f.descriptor.showOnColumn === col.property &&
+                ((f.descriptor.displayType == null && this.#metadata.defaultFilterDisplayType === FilterDisplayTypeEnum.Column) ||
+                    f.descriptor.displayType === FilterDisplayTypeEnum.Column)),
+            sort: descriptor.sorts.find(f => f.showOnColumn === col.property),
+            disabled: !col.isToggleable,
+            isVisible: layoutPrefs.columnHidden ? !layoutPrefs.columnHidden.includes(col.property) : col.isVisible,
+            width: layoutPrefs.columnWidths?.[col.property]
+        }));
+        if (layoutPrefs.columnOrder) {
+            for (let i = 0; i < layoutPrefs.columnOrder.length; i++) {
+                const colName = layoutPrefs.columnOrder[i];
+                const colWithPrefs = columns.find(el => el.descriptor.property === colName);
+                if (colWithPrefs) {
+                    colWithPrefs.orderIdx = i;
+                }
+            }
+        }
+        return columns.sort((a, b) => (a.orderIdx !== undefined && b.orderIdx !== undefined ? a.orderIdx - b.orderIdx : 0));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TablePreferencesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TablePreferencesService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TablePreferencesService, decorators: [{
+            type: Injectable
+        }] });
+
 class TableComponent {
+    // subscriptions and refs
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    #dataProviderEagerFirstLoad;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    #dataProviderReloadSubscription;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    #routeQueryParamsSubscription;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    #routerEventsSubscription;
+    #afterNextRenderRef;
     constructor() {
         this.filterKeyPrepend = 'f_';
-        this.cmpTypeName = 'TableComponent';
-        this.logger = inject(LoggerService).create(this.cmpTypeName);
-        this.injector = inject(Injector);
+        this.logger = inject(LoggerService).create(TableMetadataService.cmpTypeName);
         this.router = inject(Router);
         this.route = inject(ActivatedRoute);
         this.translate = inject(TranslateService);
         this.messageService = inject(MessageService);
-        this.commons = inject(CommonsService);
-        this.storageService = inject(CommonsStorageService);
-        this.config = inject(COMMONS_TABLE_FEATURE_CONFIG_IT, { optional: true });
-        this.dataListService = inject((DataListService));
-        this.defaultFilterDisplayType = this.config?.filterDisplayType ?? FilterDisplayTypeEnum.Column;
-        // metadata input
+        this.metadata = inject(TableMetadataService);
+        this.prefs = inject(TablePreferencesService);
+        this.data = inject((TableDataService));
+        // descriptor
         this.descriptorInput = input.required({ alias: 'descriptor' });
         // data source inputs
         this.items = input();
@@ -1450,12 +1867,28 @@ class TableComponent {
         this.selectionMode = input('multiple');
         this.selectionEnabled = input(false, { transform: booleanAttribute });
         this.rowReorderEnabledInput = input(true, { alias: 'rowReorderEnabled', transform: booleanAttribute });
-        this.rowReorderEnabled = computed(() => this.rowReorderEnabledInput() && this.descriptor().rowReorderable);
+        this.rowReorderEnabled = computed(() => this.rowReorderEnabledInput() && this.metadata.descriptor().rowReorderable);
+        this.expandedRowKeys = computed(() => {
+            const descriptor = this.metadata.descriptor();
+            if (typeof descriptor.isRowExpanded === 'string') {
+                return this.data.data()?.reduce((acc, item) => {
+                    acc[item[descriptor.trackProperty]] = !!item[descriptor.isRowExpanded];
+                    return acc;
+                }, {});
+            }
+            else if (typeof descriptor.isRowExpanded === 'function') {
+                return this.data.data()?.reduce((acc, item) => {
+                    acc[item[descriptor.trackProperty]] = descriptor.isRowExpanded(item);
+                    return acc;
+                }, {});
+            }
+            return {};
+        });
         // styling
         this.columnLastMinWidth = input();
         this.columnsColspan = computed(() => this.visibleColumns().length + (this.hasLastColumn() ? 1 : 0) + (this.selectionEnabled() ? 1 : 0) + (this.rowReorderEnabled() ? 1 : 0));
-        this.hasTitleDisplay = computed(() => this.captionTemplate() || this.captionComponent() || this.descriptor().title);
-        this.isCaptionVisible = computed(() => this.hasTitleDisplay() || this.overlayWithTagFilters().length > 0 || this.descriptor().search);
+        this.hasTitleDisplay = computed(() => this.captionTemplate() || this.captionComponent() || this.metadata.descriptor().title);
+        this.isCaptionVisible = computed(() => this.hasTitleDisplay() || this.overlayWithTagFilters().length > 0 || this.metadata.descriptor().search);
         // component inputs
         this.captionComponent = input();
         this.columnCustomLastComponent = input();
@@ -1474,7 +1907,7 @@ class TableComponent {
         // content and view queries
         this.templates = contentChildren(TemplateDirective);
         this.components = viewChildren((ComponentDirective));
-        this.primeTable = viewChild.required(Table);
+        this.primeTable = viewChild(Table);
         // templates
         this.captionTemplate = computed(() => findTemplateByName([...this.templates()], 'caption'));
         this.columnCustomLastTemplate = computed(() => findTemplateByName([...this.templates()], 'columnCustomLast'));
@@ -1482,25 +1915,12 @@ class TableComponent {
         this.rowExpandTemplate = computed(() => findTemplateByName([...this.templates()], 'rowExpandContent'));
         // data provider and items
         this.isLazy = computed(() => this.dataProvider()?.isLazy === true);
-        this.isPagination = computed(() => this.paginationMode() === TablePaginationModeEnum.Pagination);
+        this.isPagination = computed(() => this.data.paginationMode() === TablePaginationModeEnum.Pagination);
         this.useQueryParamsInitialized = signal(false);
         // visual
-        this.paginationMode = computed(() => {
-            if (typeof this.descriptor().paginationMode !== 'undefined') {
-                // descriptor choice is the strongest - if defined, use this value
-                return this.descriptor().paginationMode;
-            }
-            else if (typeof this.dataProvider() !== 'undefined') {
-                // when data provider is used, use pagination
-                return TablePaginationModeEnum.Pagination;
-            }
-            else {
-                return TablePaginationModeEnum.None;
-            }
-        });
         this.className = computed(() => {
-            let className = this.descriptor().className ?? '';
-            switch (this.descriptor().size) {
+            let className = this.metadata.descriptor().className ?? '';
+            switch (this.metadata.descriptor().size) {
                 case TableSizeEnum.Small:
                     className += ' p-datatable-sm';
                     break;
@@ -1508,7 +1928,7 @@ class TableComponent {
                     className += ' p-datatable-lg';
                     break;
             }
-            if (this.descriptor().hasGridlines) {
+            if (this.metadata.descriptor().hasGridlines) {
                 className += ' p-datatable-gridlines';
             }
             if (!this.isCaptionVisible()) {
@@ -1516,188 +1936,86 @@ class TableComponent {
             }
             return className;
         });
-        // data provider
-        this.dataProviderService = computed(() => {
-            const dataProvider = this.dataProvider();
-            return dataProvider?.serviceType ? this.injector.get(dataProvider.serviceType) : null;
-        });
-        // descriptors
-        this.descriptor = signal(tableDescriptor());
-        this.localstorageKey = computed(() => {
-            const descriptor = this.descriptor();
-            return descriptor.model.i18nBaseKey ? generateTableLayoutPrefsKey(descriptor.model.i18nBaseKey, this.router.url, descriptor.identifier) : null;
-        });
-        this.layoutPrefsSaveCnt = signal(0);
-        this.layoutPreferences = computed(() => {
-            const lsKey = this.localstorageKey();
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const cnt = this.layoutPrefsSaveCnt(); // needed to force updates on user changes
-            const layoutPrefs = lsKey ? this.storageService.getItem(this.cmpTypeName, lsKey) : undefined;
-            return layoutPrefs ?? { columnWidths: {} };
-        });
-        this.columns = computed(() => this.computeColumnsWithLayout());
-        this.visibleColumns = computed(() => this.columns().filter(col => col.isVisible));
+        // columns
+        this.visibleColumns = computed(() => this.prefs.columnsWithPrefs().filter(col => col.isVisible));
+        this.areColumnsReorderable = computed(() => this.prefs.columnsWithPrefs().some(col => col.descriptor.isReorderable));
+        this.areColumnsToggleable = computed(() => this.prefs.columnsWithPrefs().some(col => col.descriptor.isToggleable));
         // filter, sort
-        this.filterDescriptors = computed(() => this.descriptor().filters);
-        this.genericFilterDescriptor = computed(() => this.descriptor().genericFilter);
-        this.filterDescriptorsFromGeneric = signal([]);
-        this.hasColumnFilters = computed(() => (this.defaultFilterDisplayType === FilterDisplayTypeEnum.OverlayWithTag && this.filterDescriptors().some(d => d.displayType === FilterDisplayTypeEnum.Column)) ||
-            (this.defaultFilterDisplayType === FilterDisplayTypeEnum.Column && this.filterDescriptors().some(d => d.displayType == null)));
+        this.hasColumnFilters = computed(() => (this.metadata.defaultFilterDisplayType === FilterDisplayTypeEnum.OverlayWithTag &&
+            this.metadata.filterDescriptors().some(d => d.displayType === FilterDisplayTypeEnum.Column)) ||
+            (this.metadata.defaultFilterDisplayType === FilterDisplayTypeEnum.Column && this.metadata.filterDescriptors().some(d => d.displayType == null)));
         this.overlayWithTagFilters = computed(() => {
-            const filters = this.filterDescriptors().filter(d => (d.displayType == null && this.defaultFilterDisplayType === FilterDisplayTypeEnum.OverlayWithTag) || d.displayType === FilterDisplayTypeEnum.OverlayWithTag);
-            return filters.concat(this.filterDescriptorsFromGeneric());
+            // statically defined filters AND generic filters
+            const filters = this.metadata
+                .filters()
+                .filter(d => (d.descriptor.displayType == null && this.metadata.defaultFilterDisplayType === FilterDisplayTypeEnum.OverlayWithTag) ||
+                d.descriptor.displayType === FilterDisplayTypeEnum.OverlayWithTag);
+            return filters.concat(this.metadata.genericFilters());
         });
-        this.defaultParams = computed(() => this.computeDefaultDataListParams());
         this.anyColumnVisible = computed(() => this.visibleColumns().length > 0);
         this.hasCustomLastColumn = computed(() => this.columnCustomLastComponent() || this.columnCustomLastTemplate());
         this.hasLastColumn = computed(() => this.hasCustomLastColumn() || this.areColumnsToggleable() || this.areColumnsReorderable());
-        // layout prefs
-        this.areColumnsReorderable = computed(() => this.columns().some(col => col.descriptor.isReorderable));
-        this.areColumnsToggleable = computed(() => this.columns().some(col => col.descriptor.isToggleable));
-        this.globalSearchParamFromUrl = signal(undefined);
         // other
         this.lastQueryParams = this.route.snapshot.queryParams;
         this.navigationOutOfTableInProgress = false;
         this.navigationInTableInProgress = false;
-        effect(() => {
-            const descriptor = this.descriptor();
-            if (Array.isArray(descriptor.rowsPerPageOptions) && descriptor.rowsPerPageOptions.length > 0) {
-                this.dataListService.rowsPerPageOptions.set(descriptor.rowsPerPageOptions);
-            }
-            if (descriptor.defaultNumRows) {
-                this.dataListService.rows.set(this.dataListService.rowsPerPageOptions().includes(descriptor.defaultNumRows) ? descriptor.defaultNumRows : this.dataListService.rowsPerPageOptions()[0]);
-            }
-        }, { allowSignalWrites: true });
-        effect(() => {
-            const loading = this.loadingInput();
-            if (loading !== undefined) {
-                this.dataListService.loading.set(loading);
-            }
-        }, { allowSignalWrites: true });
-        effect(() => {
-            const result = this.result();
-            if (result !== undefined) {
-                this.dataListService.setData(result.data, result.totalCount);
-                const loading = this.loadingInput();
-                if (loading == undefined) {
-                    // only set if input is not defined
-                    this.dataListService.loading.set(false);
-                }
-            }
-        }, { allowSignalWrites: true });
-        effect(() => {
-            const result = this.result();
-            const items = this.items();
-            if (result == undefined && items !== undefined) {
-                this.dataListService.setData(items);
-                const loading = this.loadingInput();
-                if (loading == undefined) {
-                    // only set if input is not defined
-                    this.dataListService.loading.set(false);
-                }
+        // subscriptions and refs
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        this.#dataProviderEagerFirstLoad = effectWithDeps([this.dataProvider], ([dataProvider]) => {
+            if (dataProvider?.isLazy === false) {
+                this.loadTableWithDataProvider(this.metadata.defaultParams());
             }
-        }, { allowSignalWrites: true });
-        effect(() => {
-            const descriptor = this.descriptor();
-            this.dataListService.globalFilterFields.set(this.globalFilterFieldsInput() ??
-                (this.descriptor().search && descriptor.searchFields ? descriptor.searchFields : this.columns().map(c => c.descriptor.property)));
-        }, { allowSignalWrites: true });
-        afterNextRender(() => {
-            this.isCellClickObserved.set(this.cellClickSubject.observed);
-        });
-        toObservable(this.dataProvider)
-            .pipe(switchMap(dp => dp?.tableReload$ ?? of({})))
+        }, { firstOnly: true });
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        this.#dataProviderReloadSubscription = toObservable(this.dataProvider)
+            .pipe(switchMap(dp => dp?.tableReload$ ?? of({})), takeUntilDestroyed())
             .subscribe({
             next: e => {
                 this.reload(e);
             }
         });
-        combineLatest([toObservable(this.descriptorInput), toObservable(this.dataProvider), toObservable(this.useQueryParams)])
-            .pipe(
-        // dataProvider is needed to ensure correct order of execution and reload
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        switchMap(([descriptorInput, dataProvider, useQueryParams]) => {
-            if (descriptorInput !== this.descriptor()) {
-                this.descriptor.set(descriptorInput);
-            }
-            if (useQueryParams) {
-                // trigger table loads from route updates
-                return this.route.queryParams;
-            }
-            else {
-                return of(null);
-            }
-        }))
+        this.#routeQueryParamsSubscription = toObservable(this.useQueryParams)
+            .pipe(switchMap(useQp => (useQp ? this.route.queryParams : NEVER)), takeUntilDestroyed())
             .subscribe(qp => {
-            if (qp === null) {
-                // load data immediately by creating default sorts and filters (primeng will trigger onLazyLoad event on sort&filter metadata change)
-                const defaultSort = this.createSortMeta(this.defaultParams());
-                if (!defaultSort || defaultSort.length > 0) {
-                    this.dataListService.sortMeta.set(defaultSort);
-                }
-                const defaultFilter = this.createFilterMeta();
-                if (defaultFilter) {
-                    this.dataListService.filterMeta.set(defaultFilter);
-                }
-                this.loadTableWithDataProvider({});
-            }
-            else {
-                this.loadTableFromRouteUpdate(qp);
-            }
+            this.loadTableFromRouteUpdate(qp);
         });
-        toObservable(this.useQueryParams)
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        this.#routerEventsSubscription = toObservable(this.useQueryParams)
             .pipe(switchMap(useQp => (useQp ? this.router.events : NEVER)), filter(e => (e instanceof NavigationStart && e.url.split('?')[0].split('#')[0] !== this.router.url.split('?')[0].split('#')[0]) ||
             e instanceof NavigationEnd ||
             e instanceof NavigationCancel ||
-            e instanceof NavigationError))
+            e instanceof NavigationError), takeUntilDestroyed())
             .subscribe(e => {
             this.navigationOutOfTableInProgress = e instanceof NavigationStart;
         });
-        toObservable(this.genericFilterDescriptor)
-            .pipe(switchMap(genericFilterDescriptor => {
-            if (genericFilterDescriptor) {
-                const dataProvider = this.genericFilterDescriptor()?.propertyLookup;
-                const genericFilterService = dataProvider?.serviceType ? this.injector.get(dataProvider.serviceType) : null;
-                // fetch filterable properties
-                return toObservable$1(genericFilterDescriptor.propertyLookup.lookup({}, genericFilterService));
-            }
-            return of([]);
-        }), takeUntilDestroyed())
-            .subscribe({
-            next: genericFilters => {
-                // set descriptors from generic filter data
-                this.filterDescriptorsFromGeneric.set(createFilterDescriptorsFromGeneric(genericFilters, this.genericFilterDescriptor()?.valueLookup));
-            }
+        this.#afterNextRenderRef = afterNextRender(() => {
+            this.isCellClickObserved.set(this.cellClickSubject.observed);
         });
-    }
-    ngOnDestroy() {
-        this.dataProviderSubscription?.unsubscribe();
+        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 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.latestParamsWithDefaults;
-        const reloadParams = mergeDataListParamsWithDefaults(params ?? {}, this.defaultParams());
+        const params = typeof emitEventOrEvent === 'object' && emitEventOrEvent?.params ? emitEventOrEvent?.params : resetParams ? undefined : this.lastParamsWithDefaults;
+        const reloadParams = mergeDataListParamsWithDefaults(params ?? {}, this.metadata.defaultParams());
         this.loadTableWithDataProvider(reloadParams, emitEvent);
     }
     onTableLazyLoad(event) {
-        this.dataProviderLatestLazyLoadEvent = event;
+        this.lastLazyLoadEvent = event;
         const params = fromTableLoadToDataListParams(event);
         if (this.useQueryParams()) {
             if (!this.navigationOutOfTableInProgress && !this.navigationInTableInProgress) {
+                // this check is necessary: from some reason, primeNG commits one last lazy load event whenever any angular router navigation occurs
                 this.navigationInTableInProgress = true;
-                const newParams = dataListParamsToUrlQuery(params, this.defaultParams(), { prependFilterName: this.filterKeyPrepend });
+                const newParams = dataListParamsToUrlQuery(params, this.metadata.defaultParams(), { prependFilterName: this.filterKeyPrepend });
                 const newParamsWithParamsToRemove = { ...newParams };
                 if (this.lastQueryParams) {
                     Object.keys(this.lastQueryParams)
                         .filter(k => (k.startsWith(this.filterKeyPrepend) || ['offset', 'limit', 'sort', 'q'].indexOf(k) >= 0) && newParams[k] === undefined)
                         .forEach(k => (newParamsWithParamsToRemove[k] = null));
                 }
-                // this check is necessary: from some reason, primeNG commits one last lazy load event whenever any angular router navigation occurs
                 this.router
                     .navigate([], {
                     relativeTo: this.route,
@@ -1714,10 +2032,8 @@ class TableComponent {
             }
         }
         else {
-            const paramsWithDefaults = mergeDataListParamsWithDefaults(params, this.defaultParams());
-            if (!this.compareWithCurrentParams(paramsWithDefaults)) {
-                this.updatePrimeSortAndFilter(paramsWithDefaults);
-            }
+            const paramsWithDefaults = mergeDataListParamsWithDefaults(params, this.metadata.defaultParams());
+            this.data.setParams(paramsWithDefaults);
             this.loadTableWithDataProvider(paramsWithDefaults);
         }
     }
@@ -1726,13 +2042,11 @@ class TableComponent {
             return;
         }
         const params = fromTableLoadToDataListParams({ filters: event.filters });
-        const paramsWithDefaults = mergeDataListParamsWithDefaults(params, this.defaultParams());
+        const paramsWithDefaults = mergeDataListParamsWithDefaults(params, this.metadata.defaultParams());
         // if table doesn't use lazy loading, filter params need to be set here
         // because the onTableLazyLoad event is not emitted
         if (!this.isLazy()) {
-            if (!this.compareWithCurrentParams(paramsWithDefaults)) {
-                this.updatePrimeSortAndFilter(paramsWithDefaults);
-            }
+            this.data.setParams(paramsWithDefaults);
         }
     }
     onCellClick(event, col, item, idx) {
@@ -1753,256 +2067,39 @@ class TableComponent {
     onRowReorder(event) {
         this.rowReorder.emit(event);
     }
-    /**
-     * Method is called on column resize
-     * @param element event's element
-     */
-    onTableColumnResize({ element }) {
-        const fieldId = element.id;
-        const width = element.offsetWidth;
-        const layoutPrefs = this.layoutPreferences();
-        const col = this.columns().find(el => el.descriptor.property === fieldId);
-        if (col)
-            col.width = width;
-        if (!layoutPrefs.columnWidths)
-            layoutPrefs.columnWidths = {};
-        layoutPrefs.columnWidths[fieldId] = width;
-        this.saveLayoutPreferences(layoutPrefs);
-    }
     loadTableWithDataProvider(paramsWithDefaults, emitEvent = true) {
-        const dataProvider = this.dataProvider();
-        if (!dataProvider || paramsWithDefaults.limit === 0) {
-            return;
-        }
-        this.dataProviderSubscription?.unsubscribe();
-        this.dataListService.loading.set(true);
-        this.latestParamsWithDefaults = paramsWithDefaults;
-        this.dataProviderSubscription = toObservable$1(dataProvider.getAll(paramsWithDefaults, this.dataProviderService(), this.descriptor().isLocalized ? this.commons.appDataLocale() ?? undefined : undefined)).subscribe({
-            next: res => {
-                const descriptorInput = this.descriptorInput();
-                if (descriptorInput instanceof TableDynamicDescriptorInst) {
-                    this.descriptor.set(descriptorInput.toTableDescriptorFromData(res));
-                }
-                this.dataListService.setData(res?.data ?? [], res?.totalCount);
-                this.dataListService.loading.set(false);
-            },
-            error: err => {
-                tableNotificationError(this.translate, this.descriptor(), err, this.messageService);
-                this.dataListService.setData([]);
-                this.dataListService.loading.set(false);
-                const error = fromSubscribeError(err, 'TableComponentError', {
-                    queryParam: paramsWithDefaults
-                });
-                this.logger.log(error, getErrorLogLevel(error));
-            }
-        });
-        if (emitEvent) {
-            const tableEvent = {
-                originalEvent: this.dataProviderLatestLazyLoadEvent,
+        const isFetched = this.data.fetchWithDataProvider(paramsWithDefaults, error => {
+            tableNotificationError(this.translate, this.metadata.descriptor(), error, this.messageService);
+            const commonsError = fromSubscribeError(error, 'TableComponentError', {
                 params: paramsWithDefaults
-            };
-            this.tableLoad.emit(tableEvent);
+            });
+            this.logger.log(commonsError, getErrorLogLevel(commonsError));
+        });
+        if (isFetched) {
+            this.lastParamsWithDefaults = paramsWithDefaults;
+            if (emitEvent) {
+                const tableEvent = {
+                    originalEvent: this.lastLazyLoadEvent,
+                    params: paramsWithDefaults
+                };
+                this.tableLoad.emit(tableEvent);
+            }
         }
     }
     loadTableFromRouteUpdate(urlParams) {
         const paramsWithDefaults = mergeDataListParamsWithDefaults(fromUrlQueryToDataListParams(urlParams, {
             prependFilterName: this.filterKeyPrepend,
             searchAsGlobal: true
-        }), this.defaultParams());
-        this.updatePrimeSortAndFilter(paramsWithDefaults);
-        if (!this.useQueryParamsInitialized() && paramsWithDefaults?.search) {
-            this.globalSearchParamFromUrl.set({ value: paramsWithDefaults?.search, caseSensitive: paramsWithDefaults.filters?.['global']?.caseSensitive ?? false });
-        }
-        this.useQueryParamsInitialized.set(true);
+        }), this.metadata.defaultParams());
+        this.data.setParams(paramsWithDefaults, true);
         this.loadTableWithDataProvider(paramsWithDefaults);
     }
-    updatePrimeSortAndFilter(paramsWithDefaults) {
-        this.dataListService.sortMeta.set(this.createSortMeta(paramsWithDefaults));
-        this.dataListService.filterMeta.set(this.createFilterMeta(paramsWithDefaults));
-        this.dataListService.rows.set(paramsWithDefaults?.limit ?? this.dataListService.rows());
-        this.dataListService.offset.set(paramsWithDefaults?.offset ?? 0);
-    }
-    createFilterMeta(paramsWithDefaults) {
-        const primeFilterMeta = {};
-        // if any filter is present, no default filters should be applied!
-        if (paramsWithDefaults?.filters) {
-            Object.entries(paramsWithDefaults.filters).forEach(([key, value]) => {
-                primeFilterMeta[key] = {
-                    value: value?.value,
-                    matchMode: value?.matchMode,
-                    caseSensitive: value?.caseSensitive
-                };
-            });
-        }
-        return primeFilterMeta;
-    }
-    createSortMeta(paramsWithDefaults) {
-        if (paramsWithDefaults?.sort !== undefined && Array.isArray(paramsWithDefaults?.sort) && paramsWithDefaults?.sort.length > 0) {
-            return paramsWithDefaults?.sort.map(s => ({
-                field: s.property,
-                order: s.ascending ? 1 : -1
-            }));
-        }
-        return null;
-    }
-    onColumnToggle(event) {
-        const layoutPrefs = this.layoutPreferences();
-        const selectedColumns = event.value.map(v => v.descriptor.property);
-        layoutPrefs.columnHidden = this.columns()
-            .filter(c => selectedColumns.indexOf(c.descriptor.property) < 0)
-            .map(c => c.descriptor.property);
-        this.saveLayoutPreferences(layoutPrefs);
-    }
-    onColumnToggleAll() {
-        const layoutPrefs = this.layoutPreferences();
-        const columns = [...this.columns()];
-        const isVisible = !this.columns().some(c => c.isVisible);
-        for (const col of columns) {
-            if (isVisible !== col.isVisible) {
-                col.isVisible = isVisible;
-            }
-        }
-        layoutPrefs.columnHidden = columns.filter(c => !c.isVisible).map(c => c.descriptor.property);
-        this.saveLayoutPreferences(layoutPrefs);
-    }
-    onColumnReorder(event) {
-        if (event.dropIndex !== undefined && event.dropIndex >= 0 && event.dragIndex !== undefined && event.dragIndex >= 0 && event.dropIndex !== event.dragIndex) {
-            const eventDropIndex = event.dropIndex;
-            const eventDragIndex = event.dragIndex;
-            const prevVisibleColumns = this.columns().filter(c => c.isVisible);
-            const colAtDrop = prevVisibleColumns[eventDropIndex];
-            const colAtDrag = prevVisibleColumns[eventDragIndex];
-            const colAtDropIndex = this.columns().findIndex(el => el.id === colAtDrop.id);
-            const colAtDragIndex = this.columns().findIndex(el => el.id === colAtDrag.id);
-            if (colAtDropIndex > -1 && colAtDragIndex > -1) {
-                let columns = [...this.columns()];
-                columns.splice(colAtDragIndex, 1);
-                const dropIndex = columns.findIndex(el => el.id === colAtDrop.id) + (eventDropIndex > eventDragIndex ? 1 : 0);
-                columns = [...columns.slice(0, dropIndex), colAtDrag, ...columns.slice(dropIndex)];
-                const layoutPrefs = this.layoutPreferences();
-                layoutPrefs.columnOrder = columns.map(el => el.descriptor.property);
-                this.saveLayoutPreferences(layoutPrefs);
-            }
-        }
-    }
-    saveLayoutPreferences(layoutPrefs) {
-        const key = this.localstorageKey();
-        if (key) {
-            this.storageService.setItem(this.cmpTypeName, key, layoutPrefs);
-            this.layoutPrefsSaveCnt.update(v => v + 1);
-        }
-    }
-    computeDefaultDataListParams() {
-        const params = {
-            offset: 0,
-            limit: this.dataListService.rowsPerPageOptions()[0],
-            sort: this.descriptor()
-                .sorts.filter(s => s.defaultIsEnabled)
-                .sort((s1, s2) => (s1.defaultOrder ?? 1000) - (s2.defaultOrder ?? 1000))
-                .map(s => ({
-                property: s.property,
-                ascending: s.defaultIsAscending
-            })),
-            filters: {}
-        };
-        this.filterDescriptors()
-            .filter(d => d.hasDefaultValue)
-            .forEach(f => {
-            let matchMode = f.defaultMatchMode;
-            if (!matchMode) {
-                switch (f.filterType) {
-                    case FilterTypeEnum.String:
-                        matchMode = FilterMatchMode.Contains;
-                        break;
-                    case FilterTypeEnum.Lookup:
-                    case FilterTypeEnum.LookupEnum: {
-                        const lookupFilter = f;
-                        if (lookupFilter.multiselect) {
-                            matchMode = FilterMatchMode.In;
-                        }
-                        break;
-                    }
-                    default:
-                        break;
-                }
-            }
-            if (!matchMode) {
-                matchMode = FilterMatchMode.Equals;
-            }
-            if (f.matchModes && !f.matchModes?.includes(matchMode)) {
-                matchMode = f.matchModes[0];
-            }
-            let value = undefined;
-            if (Array.isArray(value)) {
-                value = [...value];
-            }
-            else {
-                value = f.defaultValue;
-            }
-            const property = f.property;
-            params.filters[property] = {
-                value: value,
-                matchMode: matchMode
-            };
-        });
-        return params;
-    }
-    computeColumnsWithLayout() {
-        const descriptor = this.descriptor();
-        const layoutPrefs = this.layoutPreferences();
-        // initialize columns with additional properties
-        const timestamp = new Date().getTime();
-        const columns = descriptor.columns.map(col => ({
-            id: `${col.property}-${timestamp}`,
-            descriptor: col,
-            filter: descriptor.filters.find(f => f.showOnColumn === col.property &&
-                ((f.displayType == null && this.defaultFilterDisplayType === FilterDisplayTypeEnum.Column) || f.displayType === FilterDisplayTypeEnum.Column)),
-            sort: descriptor.sorts.find(f => f.showOnColumn === col.property),
-            disabled: !col.isToggleable,
-            isVisible: layoutPrefs.columnHidden ? !layoutPrefs.columnHidden.includes(col.property) : col.isVisible,
-            width: layoutPrefs.columnWidths?.[col.property]
-        }));
-        if (layoutPrefs.columnOrder) {
-            for (let i = 0; i < layoutPrefs.columnOrder.length; i++) {
-                const colName = layoutPrefs.columnOrder[i];
-                const colWithPrefs = columns.find(el => el.descriptor.property === colName);
-                if (colWithPrefs) {
-                    colWithPrefs.orderIdx = i;
-                }
-            }
-        }
-        return columns.sort((a, b) => (a.orderIdx !== undefined && b.orderIdx !== undefined ? a.orderIdx - b.orderIdx : 0));
-    }
-    /**
-     * Reset column order and column visibility to default settings
-     */
-    resetDefaultLayout() {
-        const key = this.localstorageKey();
-        if (key) {
-            this.storageService.removeItem(this.cmpTypeName, key);
-            this.layoutPrefsSaveCnt.update(v => v + 1);
-        }
-    }
-    /**
-     * Compare the given params with the stored params in the DataListService.
-     *
-     * @param {DataListParams} params - The params to compare with the stored params.
-     *
-     * @return {boolean} - True if the given params match the stored params, otherwise false.
-     */
-    compareWithCurrentParams(params) {
-        return (params.offset === this.dataListService.offset() &&
-            params.limit === this.dataListService.rows() &&
-            JSON.stringify(this.createSortMeta(params)) === JSON.stringify(this.dataListService.sortMeta()) &&
-            JSON.stringify(this.createFilterMeta(params)) === JSON.stringify(this.dataListService.filterMeta()));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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: [DataListService], 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 (!useQueryParams() || useQueryParamsInitialized()) {\n        <p-table\n            [value]=\"dataListService.data()\"\n            [dataKey]=\"descriptor().trackProperty\"\n            [lazy]=\"isLazy()\"\n            [loading]=\"dataListService.loading()\"\n            [paginator]=\"isPagination()\"\n            [rows]=\"dataListService.rows()\"\n            [first]=\"dataListService.offset()\"\n            [totalRecords]=\"dataListService.count()\"\n            [rowsPerPageOptions]=\"dataListService.rowsPerPageOptions()\"\n            [showCurrentPageReport]=\"true\"\n            [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n            [multiSortMeta]=\"dataListService.sortMeta()\"\n            [filters]=\"dataListService.filterMeta()\"\n            [globalFilterFields]=\"dataListService.globalFilterFields()\"\n            sortMode=\"multiple\"\n            [selection]=\"[]\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n            [scrollable]=\"true\"\n            scrollHeight=\"flex\"\n            [rowHover]=\"descriptor().hasHover\"\n            [styleClass]=\"className()\"\n            [resizableColumns]=\"descriptor().hasResizableColumns\"\n            [columnResizeMode]=\"descriptor().columnResizeMode ?? 'expand'\"\n            [reorderableColumns]=\"areColumnsReorderable()\"\n            paginatorDropdownAppendTo=\"body\"\n            [columns]=\"visibleColumns()\"\n            (onColResize)=\"onTableColumnResize($event)\"\n            (onColReorder)=\"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 || descriptor().search) {\n                            <mng-filter-overlay-with-tag\n                                [title]=\"descriptor().title\"\n                                [descriptors]=\"overlayWithTagFilters()\"\n                                [genericFilterDescriptor]=\"genericFilterDescriptor()\"\n                                [model]=\"descriptor().model\"\n                                [enableSearch]=\"descriptor().search\"\n                                [search]=\"globalSearchParamFromUrl()\"\n                                [searchLimitWordMax]=\"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-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 (descriptor().title) {\n                                <h5 class=\"p-0 m-0\">{{ descriptor().title! | translate }}</h5>\n                            }\n                        </ng-template>\n                    </div>\n                }\n            </ng-template>\n            <ng-template pTemplate=\"header\">\n                @if (!descriptor().hideHeader) {\n                    <tr class=\"mng-table-header\" [class]=\"descriptor().headerClassName\">\n                        @if (selectionEnabled()) {\n                            @if (selectionMode() === 'multiple') {\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"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]=\"descriptor().selectionColumnFrozen ?? true\"></th>\n                            }\n                        }\n                        @if (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: 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: 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 : 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 : 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]=\"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]=\"columns()\"\n                                        [ngModel]=\"visibleColumns()\"\n                                        [pTooltip]=\"'mngTable.adjustTable' | translate\"\n                                        [displaySelectedLabel]=\"false\"\n                                        (onChange)=\"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)=\"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)=\"resetDefaultLayout()\"></p-button>\n                                        </ng-template>\n                                        <ng-template let-item pTemplate=\"item\">\n                                            {{ item.descriptor.title ?? (item.descriptor.property | mngI18nProperty: 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]=\"descriptor().selectionColumnFrozen ?? true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @if (descriptor().rowExpandable) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <th\n                                [class]=\"col.filter?.columnClassName | mngTableColumnFilterClass: col.filter : hasColumnFilters() && !col.width\"\n                                [style.width.px]=\"col.width\"\n                                [style.width.%]=\"col.width ? null : col.filter?.columnWidth ?? col.descriptor.width ?? null\"\n                                [style.min-width.px]=\"col.width ? null : col.filter?.columnMinWidth ?? col.descriptor.minWidth\"\n                                [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                                @if (col.filter) {\n                                    <mng-table-column-filter [descriptor]=\"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]=\"descriptor().rowClassName | mngClassMap: descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: descriptor() : item\">\n                    @if (selectionEnabled()) {\n                        @if (selectionMode() === 'multiple') {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                            </td>\n                        } @else {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                            </td>\n                        }\n                    }\n                    @if (descriptor().rowExpandable) {\n                        <td>\n                            @if (!descriptor().rowExpandableProperty || item[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 : 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: 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]=\"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 (descriptor().rowExpandable) {\n                    <tr>\n                        <td></td>\n                        <td [colSpan]=\"descriptor().rowExpandableColSpan\">\n                            @if (descriptor().rowExpandableComponentType !== undefined) {\n                                <ng-container [mngComponent]=\"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 (descriptor().loadingIcon) {\n                        <i [class]=\"'text-white text-4xl pi-spin ' + descriptor().loadingIcon\"></i>\n                    }\n                    @if (descriptor().loadingText) {\n                        <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': descriptor().loadingIcon}\">\n                            {{ 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: dataListService.data(), totalCount: dataListService.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: ["descriptor"] }, { 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: FilterOverlayWithTagComponent, selector: "mng-filter-overlay-with-tag", inputs: ["descriptors", "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.ɵ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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'mng-table', imports: [
-                        AsyncPipe,
                         ComponentDirective,
                         I18nPropertyPipe,
                         NgClass,
@@ -2018,10 +2115,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                         ButtonModule,
                         TooltipModule,
                         TranslateModule,
-                        FilterOverlayWithTagComponent,
+                        TableFilterOverlayWithTagComponent,
                         FormsModule,
                         TemplateDirective
-                    ], providers: [DataListService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    @if (!useQueryParams() || useQueryParamsInitialized()) {\n        <p-table\n            [value]=\"dataListService.data()\"\n            [dataKey]=\"descriptor().trackProperty\"\n            [lazy]=\"isLazy()\"\n            [loading]=\"dataListService.loading()\"\n            [paginator]=\"isPagination()\"\n            [rows]=\"dataListService.rows()\"\n            [first]=\"dataListService.offset()\"\n            [totalRecords]=\"dataListService.count()\"\n            [rowsPerPageOptions]=\"dataListService.rowsPerPageOptions()\"\n            [showCurrentPageReport]=\"true\"\n            [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n            [multiSortMeta]=\"dataListService.sortMeta()\"\n            [filters]=\"dataListService.filterMeta()\"\n            [globalFilterFields]=\"dataListService.globalFilterFields()\"\n            sortMode=\"multiple\"\n            [selection]=\"[]\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n            [scrollable]=\"true\"\n            scrollHeight=\"flex\"\n            [rowHover]=\"descriptor().hasHover\"\n            [styleClass]=\"className()\"\n            [resizableColumns]=\"descriptor().hasResizableColumns\"\n            [columnResizeMode]=\"descriptor().columnResizeMode ?? 'expand'\"\n            [reorderableColumns]=\"areColumnsReorderable()\"\n            paginatorDropdownAppendTo=\"body\"\n            [columns]=\"visibleColumns()\"\n            (onColResize)=\"onTableColumnResize($event)\"\n            (onColReorder)=\"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 || descriptor().search) {\n                            <mng-filter-overlay-with-tag\n                                [title]=\"descriptor().title\"\n                                [descriptors]=\"overlayWithTagFilters()\"\n                                [genericFilterDescriptor]=\"genericFilterDescriptor()\"\n                                [model]=\"descriptor().model\"\n                                [enableSearch]=\"descriptor().search\"\n                                [search]=\"globalSearchParamFromUrl()\"\n                                [searchLimitWordMax]=\"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-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 (descriptor().title) {\n                                <h5 class=\"p-0 m-0\">{{ descriptor().title! | translate }}</h5>\n                            }\n                        </ng-template>\n                    </div>\n                }\n            </ng-template>\n            <ng-template pTemplate=\"header\">\n                @if (!descriptor().hideHeader) {\n                    <tr class=\"mng-table-header\" [class]=\"descriptor().headerClassName\">\n                        @if (selectionEnabled()) {\n                            @if (selectionMode() === 'multiple') {\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"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]=\"descriptor().selectionColumnFrozen ?? true\"></th>\n                            }\n                        }\n                        @if (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: 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: 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 : 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 : 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]=\"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]=\"columns()\"\n                                        [ngModel]=\"visibleColumns()\"\n                                        [pTooltip]=\"'mngTable.adjustTable' | translate\"\n                                        [displaySelectedLabel]=\"false\"\n                                        (onChange)=\"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)=\"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)=\"resetDefaultLayout()\"></p-button>\n                                        </ng-template>\n                                        <ng-template let-item pTemplate=\"item\">\n                                            {{ item.descriptor.title ?? (item.descriptor.property | mngI18nProperty: 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]=\"descriptor().selectionColumnFrozen ?? true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @if (descriptor().rowExpandable) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <th\n                                [class]=\"col.filter?.columnClassName | mngTableColumnFilterClass: col.filter : hasColumnFilters() && !col.width\"\n                                [style.width.px]=\"col.width\"\n                                [style.width.%]=\"col.width ? null : col.filter?.columnWidth ?? col.descriptor.width ?? null\"\n                                [style.min-width.px]=\"col.width ? null : col.filter?.columnMinWidth ?? col.descriptor.minWidth\"\n                                [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                                @if (col.filter) {\n                                    <mng-table-column-filter [descriptor]=\"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]=\"descriptor().rowClassName | mngClassMap: descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: descriptor() : item\">\n                    @if (selectionEnabled()) {\n                        @if (selectionMode() === 'multiple') {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                            </td>\n                        } @else {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                            </td>\n                        }\n                    }\n                    @if (descriptor().rowExpandable) {\n                        <td>\n                            @if (!descriptor().rowExpandableProperty || item[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 : 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: 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]=\"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 (descriptor().rowExpandable) {\n                    <tr>\n                        <td></td>\n                        <td [colSpan]=\"descriptor().rowExpandableColSpan\">\n                            @if (descriptor().rowExpandableComponentType !== undefined) {\n                                <ng-container [mngComponent]=\"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 (descriptor().loadingIcon) {\n                        <i [class]=\"'text-white text-4xl pi-spin ' + descriptor().loadingIcon\"></i>\n                    }\n                    @if (descriptor().loadingText) {\n                        <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': descriptor().loadingIcon}\">\n                            {{ 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: dataListService.data(), totalCount: dataListService.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                                    {{ 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" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -2047,5 +2144,5 @@ function withTable(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { COMMONS_TABLE_FEATURE_CONFIG_IT, DataListService, FilterActiveTagComponent, FilterFormComponent, FilterOverlayWithTagComponent, FilterValuePipe, LocaleDefaultRowClassPipe, TableColumnFilterClassPipe, TableColumnFilterComponent, TableColumnValueComponent, TableComponent, createFilterDescriptorsFromGeneric, filterAdjustDisplayValueOnMatchModeChange, filterApplySerializationConfigToCmp, filterAreDatesEqual, filterGetDateConfig, filterGetDefaultMatchMode, filterGetNumberConfig, filterSetMetadataOnChange, filterSetMetadataOnDisplayChange, generateMatchModeOptions, generateTableLayoutPrefsKey, tableNotificationError, withTable };
+export { COMMONS_TABLE_FEATURE_CONFIG_IT, FilterValuePipe, LocaleDefaultRowClassPipe, TableColumnFilterClassPipe, TableColumnFilterComponent, TableColumnValueComponent, TableComponent, TableDataService, TableFilterActiveTagComponent, TableFilterFormComponent, TableFilterOverlayWithTagComponent, createFilterDescriptorsFromGeneric, filterAdjustDisplayValueOnMatchModeChange, filterApplySerializationConfigToCmp, filterAreDatesEqual, filterGenerateMatchModeOptions, filterGetDateConfig, filterGetDefaultMatchMode, filterGetNumberConfig, filterSetMetadataOnChange, filterSetMetadataOnDisplayChange, generateTableLayoutPrefsKey, tableNotificationError, withTable };
 //# sourceMappingURL=mediusinc-mng-commons-table.mjs.map