@mediusinc/mng-commons 5.3.0-rc.1 → 5.3.0-rc.3

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

@@ -1,45 +1,346 @@
 import { trigger, transition, style, animate } from '@angular/animations';
-import { NgClass, DecimalPipe, CurrencyPipe, DatePipe, NgStyle, NgTemplateOutlet, AsyncPipe } from '@angular/common';
+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, computed, effect, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ViewChild, input, Pipe, Injector, output, contentChildren, viewChildren, viewChild, afterNextRender } from '@angular/core';
-import { takeUntilDestroyed, outputFromObservable, toObservable } from '@angular/core/rxjs-interop';
-import * as i3 from '@angular/forms';
+import { signal, Injectable, inject, ElementRef, Renderer2, ChangeDetectorRef, DestroyRef, input, computed, viewChild, effect, untracked, Component, ViewEncapsulation, ChangeDetectionStrategy, LOCALE_ID, Pipe, output, contentChildren, InjectionToken, Injector, booleanAttribute, viewChildren, afterNextRender } from '@angular/core';
+import { toSignal, takeUntilDestroyed, toObservable, outputFromObservable } from '@angular/core/rxjs-interop';
+import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import * as i2$1 from 'primeng/api';
+import * as i2$2 from 'primeng/api';
 import { PrimeNGConfig, OverlayService, TranslationKeys, MessageService } from 'primeng/api';
 import * as i2 from 'primeng/calendar';
 import { CalendarModule } from 'primeng/calendar';
+import * as i6 from 'primeng/checkbox';
+import { CheckboxModule } from 'primeng/checkbox';
 import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
 import { FilterIcon } from 'primeng/icons/filter';
 import { FilterSlashIcon } from 'primeng/icons/filterslash';
-import * as i5 from 'primeng/inputnumber';
+import * as i4 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
-import * as i6 from 'primeng/inputtext';
+import * as i5 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i1$2 from 'primeng/table';
+import * as i1$4 from 'primeng/table';
 import { Table, TableModule } from 'primeng/table';
-import * as i4 from 'primeng/tristatecheckbox';
-import { TriStateCheckboxModule } from 'primeng/tristatecheckbox';
 import { ZIndexUtils } from 'primeng/utils';
-import { Subject, debounceTime, distinctUntilChanged, switchMap, of, combineLatest, NEVER } from 'rxjs';
-import { COMMONS_MODULE_CONFIG_IT, FilterMatchMode, dateToIsoString, GetterPipe, TemplatePipe, BooleanPipe, EnumPipe, ComponentDirective, toastMessage, CommonsService, LoggerService, CommonsStorageService, booleanOrUndefinedAttribute, TemplateDirective, findTemplateByName, mergeDataListParamsWithDefaults, fromTableLoadToDataListParams, dataListParamsToUrlQuery, toObservable as toObservable$1, fromSubscribeError, getErrorLogLevel, fromUrlQueryToDataListParams, I18nPropertyPipe, ClassMapPipe } from '@mediusinc/mng-commons/core';
-import { FilterLookupTypeEnum, FilterTypeEnum } from '@mediusinc/mng-commons/filter';
+import { Subject, debounceTime, distinctUntilChanged, ReplaySubject, switchMap, NEVER, of, combineLatest } 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, mergeDataListParamsWithDefaults, fromTableLoadToDataListParams, dataListParamsToUrlQuery, toObservable as toObservable$1, fromSubscribeError, getErrorLogLevel, fromUrlQueryToDataListParams, I18nPropertyPipe, ClassMapPipe, CommonsFeatureTypeEnum } from '@mediusinc/mng-commons/core';
+import { FilterTypeEnum, FilterLookupDescriptor, FilterLookupTypeEnum, FilterDisplayTypeEnum } from '@mediusinc/mng-commons/filter';
 import { DateRangeComponent, AutocompleteComponent, DropdownComponent, InputTrimDirective, NumberRangeComponent } from '@mediusinc/mng-commons/form';
 import * as i4$1 from 'primeng/button';
-import { ButtonModule } 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 * as i1$2 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
 import { ColumnDisplayTypeEnum, TablePaginationModeEnum, TableSizeEnum, tableDescriptor, TableDynamicDescriptorInst } from '@mediusinc/mng-commons/table/api';
+import * as i2$1 from 'primeng/tag';
+import { TagModule } from 'primeng/tag';
+import * as i7 from 'primeng/messages';
+import { MessagesModule } from 'primeng/messages';
+import * as i1$3 from 'primeng/overlaypanel';
+import { OverlayPanel, OverlayPanelModule } from 'primeng/overlaypanel';
 import { Router, ActivatedRoute, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
-import * as i3$1 from 'primeng/multiselect';
+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) {
+    let options = undefined;
+    if (descriptor == null || descriptor.filterType === FilterTypeEnum.String) {
+        options = [
+            { value: FilterMatchMode.Contains, label: primeConfig.getTranslation(FilterMatchMode.Contains) },
+            { value: FilterMatchMode.NotContains, label: primeConfig.getTranslation(FilterMatchMode.NotContains) },
+            { value: FilterMatchMode.Equals, label: primeConfig.getTranslation(FilterMatchMode.Equals) },
+            { value: FilterMatchMode.NotEquals, label: primeConfig.getTranslation(FilterMatchMode.NotEquals) },
+            { value: FilterMatchMode.StartsWith, label: primeConfig.getTranslation(FilterMatchMode.StartsWith) },
+            { value: FilterMatchMode.EndsWith, label: primeConfig.getTranslation(FilterMatchMode.EndsWith) }
+        ];
+    }
+    else if (descriptor.filterType === FilterTypeEnum.Boolean) {
+        options = [{ value: FilterMatchMode.Equals, label: primeConfig.getTranslation(FilterMatchMode.Equals) }];
+    }
+    else if (descriptor.filterType === FilterTypeEnum.Number) {
+        options = [
+            { value: FilterMatchMode.Equals, label: primeConfig.getTranslation(FilterMatchMode.Equals) },
+            { value: FilterMatchMode.NotEquals, label: primeConfig.getTranslation(FilterMatchMode.NotEquals) },
+            { value: FilterMatchMode.LessThan, label: primeConfig.getTranslation(FilterMatchMode.LessThan) },
+            { value: FilterMatchMode.LessThanOrEqualTo, label: primeConfig.getTranslation(FilterMatchMode.LessThanOrEqualTo) },
+            { value: FilterMatchMode.GreaterThan, label: primeConfig.getTranslation(FilterMatchMode.GreaterThan) },
+            { value: FilterMatchMode.GreaterThanOrEqualTo, label: primeConfig.getTranslation(FilterMatchMode.GreaterThanOrEqualTo) },
+            { value: FilterMatchMode.Between, label: primeConfig.getTranslation(FilterMatchMode.Between) }
+        ];
+    }
+    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) }
+            ];
+        }
+    }
+    else if (descriptor.filterType === FilterTypeEnum.Date) {
+        if (!descriptor.datePickerShowTime && !descriptor.dateValueNoTime && !cmpSerCfg?.filtersDateOnlyDisabled) {
+            options = [
+                { value: FilterMatchMode.Equals, label: primeConfig.getTranslation(FilterMatchMode.Equals) },
+                { value: FilterMatchMode.NotEquals, label: primeConfig.getTranslation(FilterMatchMode.NotEquals) },
+                { value: FilterMatchMode.LessThanOrEqualTo, label: primeConfig.getTranslation(FilterMatchMode.LessThanOrEqualTo) },
+                { value: FilterMatchMode.GreaterThanOrEqualTo, label: primeConfig.getTranslation(FilterMatchMode.GreaterThanOrEqualTo) },
+                { value: FilterMatchMode.Between, label: primeConfig.getTranslation(FilterMatchMode.Between) }
+            ];
+        }
+        else {
+            options = [
+                { value: FilterMatchMode.Equals, label: primeConfig.getTranslation(FilterMatchMode.Equals) },
+                { value: FilterMatchMode.LessThanOrEqualTo, label: primeConfig.getTranslation(FilterMatchMode.LessThanOrEqualTo) },
+                { value: FilterMatchMode.GreaterThanOrEqualTo, label: primeConfig.getTranslation(FilterMatchMode.GreaterThanOrEqualTo) },
+                { value: FilterMatchMode.Between, label: primeConfig.getTranslation(FilterMatchMode.Between) }
+            ];
+        }
+    }
+    options?.push({ value: FilterMatchMode.Exists, label: primeConfig.getTranslation(FilterMatchMode.Exists) }, { value: FilterMatchMode.DoesNotExist, label: primeConfig.getTranslation(FilterMatchMode.DoesNotExist) });
+    if (descriptor?.matchModes) {
+        options = descriptor.matchModes.map(mm => ({ value: mm, label: primeConfig.getTranslation(mm) }));
+    }
+    return options || [];
+}
+/**
+ * Gets the default match mode for a filter.
+ *
+ * @param {FilterDescriptor<any, any>} [descriptor] - The filter descriptor.
+ * @param {SelectItem[]} [matchModes=[]] - The available match modes options.
+ *
+ * @return {FilterMatchModeExtendedType} The default match mode for the filter.
+ */
+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;
+    }
+    // check if default mode exists!
+    if (matchModes.length > 0 && !matchModes.some(m => m.value === defaultMatchMode)) {
+        defaultMatchMode = matchModes[0].value;
+    }
+    return defaultMatchMode;
+}
+function filterSetMetadataOnChange(filter, matchMode, value, filterType, filterDateCfg) {
+    let displayValue = filter?.displayValue ?? value;
+    let displayMatchMode = filter?.displayMatchMode ?? matchMode;
+    // when equals is used on dates with time, the actual filter will be between, but displayed as equals
+    if (filterType === FilterTypeEnum.Date && !filterDateCfg?.valueNoTime) {
+        if (matchMode === FilterMatchMode.Between &&
+            Array.isArray(value) &&
+            value.length === 2 &&
+            value.every(v => v instanceof Date || typeof v === 'string' || typeof v === 'number')) {
+            if (filterAreDatesEqual(value[0], value[1], filterDateCfg)) {
+                displayMatchMode = FilterMatchMode.Equals;
+                displayValue = new Date(value[0]);
+            }
+        }
+        else if (matchMode === FilterMatchMode.Equals && !value) {
+            matchMode = FilterMatchMode.Between;
+        }
+    }
+    if (filterType === FilterTypeEnum.Date && displayValue) {
+        // display value for calendar cannot be string, convert to date
+        displayValue = Array.isArray(displayValue)
+            ? displayValue.map(v => (!(v instanceof Date) ? new Date(v) : v))
+            : displayValue instanceof Date
+                ? displayValue
+                : new Date(displayValue);
+    }
+    if (filterType === FilterTypeEnum.Boolean && displayValue != null && typeof displayValue !== 'boolean') {
+        displayValue = (typeof displayValue === 'string' && displayValue.toLowerCase() === 'true') || displayValue === 1;
+    }
+    if (filterType === FilterTypeEnum.Number && displayValue != null && typeof displayValue !== 'number') {
+        const numValue = +displayValue;
+        if (!isNaN(numValue)) {
+            displayValue = numValue;
+        }
+    }
+    return {
+        ...filter,
+        matchMode,
+        value: value,
+        displayMatchMode,
+        displayValue
+    };
+}
+function filterSetMetadataOnDisplayChange(filter, displayMatchMode, displayValue, filterType, filterDateCfg) {
+    let matchMode = displayMatchMode;
+    let value = displayValue;
+    if (filterType === FilterTypeEnum.Date) {
+        if (!filterDateCfg?.valueNoTime && displayValue !== null) {
+            if (displayMatchMode === FilterMatchMode.Equals) {
+                if (value instanceof Date || typeof value === 'string' || typeof value === 'number') {
+                    const fromDate = new Date(value);
+                    const toDate = new Date(value);
+                    if (filterDateCfg?.showTime) {
+                        if (filterDateCfg?.showSeconds) {
+                            fromDate.setMilliseconds(0);
+                            toDate.setMilliseconds(999);
+                        }
+                        else {
+                            fromDate.setSeconds(0, 0);
+                            toDate.setSeconds(59, 999);
+                        }
+                    }
+                    else {
+                        fromDate.setHours(0, 0, 0, 0);
+                        toDate.setHours(23, 59, 59, 999);
+                    }
+                    value = [fromDate, toDate];
+                    matchMode = FilterMatchMode.Between;
+                }
+                else {
+                    value = null;
+                }
+            }
+            else if (displayMatchMode === FilterMatchMode.Between) {
+                if (Array.isArray(value) && value.length === 2 && value.every(i => i instanceof Date || typeof i === 'string' || typeof i === 'number')) {
+                    const fromDate = new Date(value[0]);
+                    let toDate = new Date(value[1]);
+                    if (filterAreDatesEqual(fromDate, toDate, filterDateCfg)) {
+                        toDate = new Date(fromDate);
+                        if (filterDateCfg?.showTime) {
+                            if (filterDateCfg?.showSeconds) {
+                                toDate.setSeconds(toDate.getSeconds() + 1);
+                            }
+                            else {
+                                toDate.setMinutes(toDate.getMinutes() + 1);
+                            }
+                        }
+                        else {
+                            toDate.setDate(toDate.getDate() + 1);
+                        }
+                        value = [fromDate, toDate];
+                        matchMode = FilterMatchMode.Between;
+                    }
+                }
+                else {
+                    value = null;
+                }
+            }
+        }
+        const convertDateType = filterDateCfg?.valueNoTime ? 'date' : 'date-time';
+        const convertDateTimeOpts = {
+            utc: filterDateCfg?.valueUtc,
+            noMillis: filterDateCfg?.valueNoMillis,
+            noTimezone: filterDateCfg?.valueNoTimezone
+        };
+        value =
+            value == null
+                ? value
+                : Array.isArray(value)
+                    ? value.filter(i => i != null).map(i => dateToIsoString(i, convertDateType, convertDateTimeOpts))
+                    : dateToIsoString(value, convertDateType, convertDateTimeOpts);
+    }
+    if (matchMode === FilterMatchMode.Exists || matchMode === FilterMatchMode.DoesNotExist) {
+        value = null;
+    }
+    return {
+        ...filter,
+        displayMatchMode: displayMatchMode,
+        matchMode: matchMode,
+        displayValue: displayValue,
+        value: value
+    };
+}
+function filterAreDatesEqual(fromDate, toDate, filterDateCfg) {
+    const startDate = dateToIsoString(fromDate);
+    const endDate = dateToIsoString(toDate);
+    // 2020-11-02T11:12:12.000
+    const cmpLength = filterDateCfg?.showTime ? (filterDateCfg?.showSeconds ? 19 : 16) : 10;
+    return startDate.substring(0, cmpLength) === endDate.substring(0, cmpLength);
+}
+function filterApplySerializationConfigToCmp(config, cmpSerCfg) {
+    // set default
+    cmpSerCfg.dateTimeInUtc = false;
+    cmpSerCfg.dateTimeWithTimezone = true;
+    cmpSerCfg.dateTimeWithMillis = true;
+    cmpSerCfg.filtersDateOnlyDisabled = false;
+    // set customizations
+    if (config?.serialization) {
+        if (config.serialization.dateTimeInUtc !== undefined)
+            cmpSerCfg.dateTimeInUtc = config.serialization.dateTimeInUtc;
+        if (config.serialization.dateTimeWithTimezone !== undefined)
+            cmpSerCfg.dateTimeWithTimezone = config.serialization.dateTimeWithTimezone;
+        if (config.serialization.dateTimeWithMillis !== undefined)
+            cmpSerCfg.dateTimeWithMillis = config.serialization.dateTimeWithMillis;
+        if (config.serialization.filtersDateOnlyDisabled !== undefined)
+            cmpSerCfg.filtersDateOnlyDisabled = config.serialization.filtersDateOnlyDisabled;
+    }
+}
+function filterAdjustDisplayValueOnMatchModeChange(matchMode, value) {
+    if (matchMode == null || matchMode === FilterMatchMode.Exists || matchMode === FilterMatchMode.DoesNotExist) {
+        return value; // never change, only change later if something else changes here
+    }
+    if (matchMode === FilterMatchMode.Between) {
+        if (!Array.isArray(value)) {
+            return value != null ? [value, value] : [];
+        }
+        else if (value.length === 0 || value.length === 2) {
+            return value;
+        }
+        else if (value.length === 1) {
+            return [value[0], value[0]];
+        }
+        else {
+            return [value[0], value[1]];
+        }
+    }
+    if (matchMode === FilterMatchMode.In || matchMode === FilterMatchMode.NotIn) {
+        return Array.isArray(value) ? value : value == null ? [] : [value];
+    }
+    return Array.isArray(value) && value.length > 0 ? value[0] : value;
+}
+function filterGetDateConfig(descriptor, serCfg) {
+    if (!descriptor || descriptor.filterType !== FilterTypeEnum.Date) {
+        return undefined;
+    }
+    const showTime = descriptor.datePickerShowTime ?? (descriptor.displayFormatApplyToField && descriptor.displayFormat ? angularDateFormatHasTime(descriptor.displayFormat) : false);
+    return {
+        valueNoTime: descriptor.dateValueNoTime || (!serCfg?.filtersDateOnlyDisabled && !showTime),
+        valueUtc: descriptor.dateValueUtc ?? serCfg?.dateTimeInUtc,
+        valueNoTimezone: descriptor.dateValueNoTimezone ?? !serCfg?.dateTimeWithTimezone,
+        valueNoMillis: !serCfg?.dateTimeWithMillis,
+        format: descriptor.datePickerFormat ?? (descriptor.displayFormatApplyToField && descriptor.displayFormat ? fromAngularDateFormatToPrime(descriptor.displayFormat) : undefined),
+        showTime: showTime,
+        showSeconds: showTime &&
+            (descriptor.datePickerShowSeconds ?? (descriptor.displayFormatApplyToField && descriptor.displayFormat ? angularDateFormatHasSeconds(descriptor.displayFormat) : false))
+    };
+}
+function filterGetNumberConfig(descriptor) {
+    if (!descriptor || descriptor.filterType !== FilterTypeEnum.Number) {
+        return undefined;
+    }
+    const displayCfg = descriptor.displayFormatApplyToField && descriptor.displayFormat ? fromAngularNumberFormatToFractions(descriptor.displayFormat) : undefined;
+    return {
+        fractionsMin: descriptor.numberMinFractionDigits ?? displayCfg?.fractionsMin,
+        fractionsMax: descriptor.numberMaxFractionDigits ?? displayCfg?.fractionsMax
+    };
+}
+
 class DataListService {
     constructor() {
         // pagination
@@ -71,10 +372,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
  * Cannot be on push change detection strategy because of filter updates triggered from route which causes to force update values in force metadata
  * and these must be propagated through to this component and beyond to primeNG.
  */
-class TableColumnFilterFullComponent {
+class TableColumnFilterComponent {
     constructor() {
         this.lookupTypeDropdown = FilterLookupTypeEnum.Dropdown;
         this.lookupTypeAutocomplete = FilterLookupTypeEnum.Autocomplete;
+        this.FilterTypeEnum = FilterTypeEnum;
+        this.FilterMatchMode = FilterMatchMode;
         this.el = inject(ElementRef);
         this.primeTable = inject(Table);
         this.dataListService = inject((DataListService));
@@ -85,136 +388,65 @@ class TableColumnFilterFullComponent {
         this.cd = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
         this.document = window.document;
-        this.primeType = 'text';
-        // public matchModes: SelectItem[] = [];
-        this.matchModes = signal([]);
+        this.descriptor = input.required();
+        this.descriptorAsLookup = computed(() => (this.descriptor() instanceof FilterLookupDescriptor ? this.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.filterConstraint = signal(undefined);
         this.isFilterSet = computed(() => this.filterConstraint()?.matchMode === FilterMatchMode.Exists ||
             this.filterConstraint()?.matchMode === FilterMatchMode.DoesNotExist ||
             !this.primeTable.isFilterBlank(this.filterConstraint()?.value));
         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.window = this.document.defaultView;
         this.numericValueFromModelChange = null;
         this.dateDebounceSubject = new Subject();
-        this.dateTimeInUtc = false;
-        this.dateTimeWithTimezone = true;
-        this.dateTimeWithMillis = true;
-        this.dateOnlyDisabled = false;
-        this.dateDebounceSubject.pipe(debounceTime(500), distinctUntilChanged(), takeUntilDestroyed()).subscribe(v => {
-            if (this.filterConstraint()?.displayMatchMode === FilterMatchMode.Equals && this.filterConstraint()?.matchMode === FilterMatchMode.Between && v !== null) {
-                const dateValue = Array.isArray(v) ? v[0] : v; // could have empty array
-                if (dateValue) {
-                    const fromDate = new Date(dateValue);
-                    const toDate = new Date(dateValue);
-                    if (this.descriptor.datePickerShowTime) {
-                        if (this.descriptor.datePickerShowSeconds) {
-                            fromDate.setMilliseconds(0);
-                            toDate.setMilliseconds(999);
-                        }
-                        else {
-                            fromDate.setSeconds(0, 0);
-                            toDate.setSeconds(59, 0);
-                        }
-                    }
-                    else {
-                        fromDate.setHours(0, 0, 0, 0);
-                        toDate.setHours(23, 59, 59, 999);
-                    }
-                    // adjust to settings
-                    v = [fromDate, toDate];
-                }
-                else {
-                    v = null;
-                }
-            }
-            const convertDateType = this.descriptor.datePickerValueNoTime || (!this.dateOnlyDisabled && !this.descriptor.datePickerShowTime) ? 'date' : 'date-time';
-            const convertDateTimeOpts = {
-                utc: this.descriptor.datePickerValueUtc ?? this.dateTimeInUtc,
-                noMillis: !this.dateTimeWithMillis,
-                noTimezone: this.descriptor.datePickerValueNoTimezone ?? !this.dateTimeWithTimezone
-            };
-            this.updateFilterValue(v == null
-                ? v
-                : Array.isArray(v)
-                    ? v.filter(i => i != null).map(i => dateToIsoString(i, convertDateType, convertDateTimeOpts))
-                    : dateToIsoString(v, convertDateType, convertDateTimeOpts));
-        });
+        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.primeField];
-            if (fieldFilterMeta &&
-                (!this.filterConstraint() || this.filterConstraint().value !== fieldFilterMeta.value || this.filterConstraint().matchMode !== fieldFilterMeta.matchMode)) {
-                this.setFilterConstraint(fieldFilterMeta);
+            const fieldFilterMeta = this.dataListService.filterMeta()[this.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())));
             }
         }, { allowSignalWrites: true });
     }
-    ngOnInit() {
-        if (this.moduleConfig?.serialization) {
-            if (this.moduleConfig.serialization.dateTimeInUtc !== undefined)
-                this.dateTimeInUtc = this.moduleConfig.serialization.dateTimeInUtc;
-            if (this.moduleConfig.serialization.dateTimeWithTimezone !== undefined)
-                this.dateTimeWithTimezone = this.moduleConfig.serialization.dateTimeWithTimezone;
-            if (this.moduleConfig.serialization.dateTimeWithMillis !== undefined)
-                this.dateTimeWithMillis = this.moduleConfig.serialization.dateTimeWithMillis;
-            if (this.moduleConfig.serialization.filtersDateOnlyDisabled !== undefined)
-                this.dateOnlyDisabled = this.moduleConfig.serialization.filtersDateOnlyDisabled;
-        }
-        this.primeField = this.descriptor.property;
-        switch (this.descriptor.filterType) {
-            case FilterTypeEnum.Boolean:
-                this.primeType = 'boolean';
-                break;
-            case FilterTypeEnum.Number:
-                this.primeType = 'numeric';
-                break;
-            case FilterTypeEnum.Date:
-                this.primeType = 'date';
-                break;
-            case FilterTypeEnum.Lookup:
-            case FilterTypeEnum.LookupEnum:
-                this.primeType = 'lookup';
-                this.lookupDescriptor = this.descriptor;
-                break;
-            case FilterTypeEnum.String:
-                this.primeType = 'text';
-                break;
-        }
-        // generate match mode options
-        this.translationSubscription = this.primeConfig.translationObserver.subscribe(() => {
-            this.generateMatchModeOptions();
-        });
-        this.generateMatchModeOptions();
-        this.initFilterConstraint();
-    }
     ngOnDestroy() {
         if (this.overlay) {
             this.renderer.appendChild(this.el.nativeElement, this.overlay);
             ZIndexUtils.clear(this.overlay);
             this.onOverlayHide();
         }
-        this.translationSubscription?.unsubscribe();
         this.resetSubscription?.unsubscribe();
         this.overlaySubscription?.unsubscribe();
-        this.tableFilterMetadataSubscription?.unsubscribe();
     }
     // eslint-disable-next-line @typescript-eslint/ban-types
     onTextModelChange(event) {
         const value = event.target.value;
         if (value === '') {
-            this.updateFilterValue(value);
+            this.updateFilterOnDisplayValueChange(value);
         }
     }
     // eslint-disable-next-line @typescript-eslint/ban-types
     onTextInputEnterKeyDown(event) {
         const value = event.target.value;
-        this.updateFilterValue(value);
+        this.updateFilterOnDisplayValueChange(value);
         event.preventDefault();
     }
     // eslint-disable-next-line @typescript-eslint/ban-types
     onNumericModelChange(value) {
         this.numericValueFromModelChange = value;
         if (value === null) {
-            this.updateFilterValue(value);
+            this.updateFilterOnDisplayValueChange(value);
         }
     }
     // eslint-disable-next-line @typescript-eslint/ban-types
@@ -226,13 +458,13 @@ class TableColumnFilterFullComponent {
                     return;
                 }
             }
-            this.updateFilterValue(this.numericValueFromModelChange);
+            this.updateFilterOnDisplayValueChange(this.numericValueFromModelChange);
             event.preventDefault();
         }
     }
     // eslint-disable-next-line @typescript-eslint/ban-types
-    onTristateModelChange(value) {
-        this.updateFilterValue(value);
+    onCheckboxModelChange(value) {
+        this.updateFilterOnDisplayValueChange(value);
     }
     // eslint-disable-next-line @typescript-eslint/ban-types
     onDateFilterModelChange(value) {
@@ -246,62 +478,20 @@ class TableColumnFilterFullComponent {
     }
     // eslint-disable-next-line @typescript-eslint/ban-types
     autocompleteFilter(value) {
-        this.updateFilterValue(value);
+        this.updateFilterOnDisplayValueChange(value);
     }
     // 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.updateFilterValue(value);
+        this.updateFilterOnDisplayValueChange(value);
     }
     onMatchModeChange(displayMatchMode) {
-        const previousDisplayMatchMode = this.filterConstraint()?.displayMatchMode;
-        let value = this.filterConstraint()?.displayValue;
-        if (Array.isArray(value) && value.length === 0) {
-            value = null;
-        }
-        if (value != null && previousDisplayMatchMode && displayMatchMode !== previousDisplayMatchMode) {
-            // handle values on match mode changes
-            const matchModesWithArrayValues = [FilterMatchMode.Between, FilterMatchMode.In, FilterMatchMode.NotIn];
-            if (matchModesWithArrayValues.indexOf(previousDisplayMatchMode) >= 0 && matchModesWithArrayValues.indexOf(displayMatchMode) === -1) {
-                // from array values to non-array values
-                if (Array.isArray(value)) {
-                    value = value?.[0];
-                }
-            }
-            else if (matchModesWithArrayValues.indexOf(previousDisplayMatchMode) === -1 && displayMatchMode === FilterMatchMode.Between) {
-                // from non-array values to between
-                // it can already be an array because of "fake" equals for dates with timestamps (that is actually between)
-                const fromValue = Array.isArray(value) ? value[0] : value;
-                // for to value, add 1 day (if date) or 1 (if number)
-                const toValue = fromValue instanceof Date ? new Date(fromValue.getTime() + 24 * 3600 * 1000) : typeof fromValue === 'number' ? fromValue + 1 : fromValue;
-                value = [fromValue, toValue];
-            }
-            else if (matchModesWithArrayValues.indexOf(previousDisplayMatchMode) >= 0 && displayMatchMode === FilterMatchMode.Between) {
-                // from array values to between
-                if (Array.isArray(value)) {
-                    if (value.length > 2) {
-                        value = [value[0], value[1]];
-                    }
-                    else if (value.length === 1) {
-                        value = [value[0], value[0]];
-                    }
-                    else if (value.length === 0) {
-                        value = null;
-                    }
-                }
-            }
-            // filters with equals on dates with timezones are extra, because double value needs to be added and match mode changed
-            if (displayMatchMode === FilterMatchMode.Equals &&
-                this.descriptor.filterType === FilterTypeEnum.Date &&
-                (this.descriptor.datePickerShowTime || this.descriptor.datePickerValueNoTime || this.dateOnlyDisabled)) {
-                value = [value, value];
-                displayMatchMode = FilterMatchMode.Between;
-            }
+        if (this.filterConstraint()?.displayMatchMode === displayMatchMode) {
+            return;
         }
-        this.setFilterConstraint({ ...this.filterConstraint(), matchMode: displayMatchMode, value: value });
-        this.updateDtFilter();
+        this.setFilterConstraint(filterSetMetadataOnDisplayChange(this.filterConstraint(), displayMatchMode, filterAdjustDisplayValueOnMatchModeChange(displayMatchMode, this.filterConstraint()?.displayValue), this.descriptor().filterType, this.dateConfig()));
         this.hideOverlay();
     }
     onMatchModeKeyDown(event) {
@@ -371,7 +561,7 @@ class TableColumnFilterFullComponent {
                 this.overlay = event.element;
                 this.renderer.appendChild(this.document.body, this.overlay);
                 ZIndexUtils.set('overlay', this.overlay, this.primeConfig.zIndex.overlay);
-                DomHandler.absolutePosition(this.overlay, this.icon?.nativeElement);
+                DomHandler.absolutePosition(this.overlay, this.icon()?.nativeElement);
                 this.bindDocumentClickListener();
                 this.bindDocumentResizeListener();
                 this.bindScrollListener();
@@ -404,113 +594,6 @@ class TableColumnFilterFullComponent {
         this.primeTable._filter();
         this.hideOverlay();
     }
-    generateMatchModeOptions() {
-        let options = undefined;
-        if (this.descriptor.filterType === FilterTypeEnum.String) {
-            options = [
-                { value: FilterMatchMode.Contains, label: this.primeConfig.getTranslation(FilterMatchMode.Contains) },
-                { value: FilterMatchMode.NotContains, label: this.primeConfig.getTranslation(FilterMatchMode.NotContains) },
-                { value: FilterMatchMode.Equals, label: this.primeConfig.getTranslation(FilterMatchMode.Equals) },
-                { value: FilterMatchMode.NotEquals, label: this.primeConfig.getTranslation(FilterMatchMode.NotEquals) },
-                { value: FilterMatchMode.StartsWith, label: this.primeConfig.getTranslation(FilterMatchMode.StartsWith) },
-                { value: FilterMatchMode.EndsWith, label: this.primeConfig.getTranslation(FilterMatchMode.EndsWith) },
-                { value: FilterMatchMode.Exists, label: this.primeConfig.getTranslation(FilterMatchMode.Exists) },
-                { value: FilterMatchMode.DoesNotExist, label: this.primeConfig.getTranslation(FilterMatchMode.DoesNotExist) }
-            ];
-        }
-        else if (this.descriptor.filterType === FilterTypeEnum.Boolean) {
-            options = [{ value: FilterMatchMode.Equals, label: this.primeConfig.getTranslation(FilterMatchMode.Equals) }];
-        }
-        else if (this.descriptor.filterType === FilterTypeEnum.Number) {
-            options = [
-                { value: FilterMatchMode.Equals, label: this.primeConfig.getTranslation(FilterMatchMode.Equals) },
-                { value: FilterMatchMode.NotEquals, label: this.primeConfig.getTranslation(FilterMatchMode.NotEquals) },
-                { value: FilterMatchMode.LessThan, label: this.primeConfig.getTranslation(FilterMatchMode.LessThan) },
-                { value: FilterMatchMode.LessThanOrEqualTo, label: this.primeConfig.getTranslation(FilterMatchMode.LessThanOrEqualTo) },
-                { value: FilterMatchMode.GreaterThan, label: this.primeConfig.getTranslation(FilterMatchMode.GreaterThan) },
-                { value: FilterMatchMode.GreaterThanOrEqualTo, label: this.primeConfig.getTranslation(FilterMatchMode.GreaterThanOrEqualTo) },
-                { value: FilterMatchMode.Between, label: this.primeConfig.getTranslation(FilterMatchMode.Between) },
-                { value: FilterMatchMode.Exists, label: this.primeConfig.getTranslation(FilterMatchMode.Exists) },
-                { value: FilterMatchMode.DoesNotExist, label: this.primeConfig.getTranslation(FilterMatchMode.DoesNotExist) }
-            ];
-        }
-        else if (this.descriptor.filterType === FilterTypeEnum.Lookup || this.descriptor.filterType === FilterTypeEnum.LookupEnum) {
-            options = [
-                { value: FilterMatchMode.Equals, label: this.primeConfig.getTranslation(FilterMatchMode.Equals) },
-                { value: FilterMatchMode.NotEquals, label: this.primeConfig.getTranslation(FilterMatchMode.NotEquals) },
-                { value: FilterMatchMode.Exists, label: this.primeConfig.getTranslation(FilterMatchMode.Exists) },
-                { value: FilterMatchMode.DoesNotExist, label: this.primeConfig.getTranslation(FilterMatchMode.DoesNotExist) }
-            ];
-            if (this.lookupDescriptor?.multiselect) {
-                options = [
-                    { value: FilterMatchMode.In, label: this.primeConfig.getTranslation(FilterMatchMode.In) },
-                    { value: FilterMatchMode.NotIn, label: this.primeConfig.getTranslation(FilterMatchMode.NotIn) }
-                ];
-            }
-        }
-        else if (this.descriptor.filterType === FilterTypeEnum.Date) {
-            if (!this.descriptor.datePickerShowTime && !this.descriptor.datePickerValueNoTime && !this.dateOnlyDisabled) {
-                options = [
-                    { value: FilterMatchMode.Equals, label: this.primeConfig.getTranslation(FilterMatchMode.Equals) },
-                    { value: FilterMatchMode.NotEquals, label: this.primeConfig.getTranslation(FilterMatchMode.NotEquals) },
-                    { value: FilterMatchMode.LessThanOrEqualTo, label: this.primeConfig.getTranslation(FilterMatchMode.LessThanOrEqualTo) },
-                    { value: FilterMatchMode.GreaterThanOrEqualTo, label: this.primeConfig.getTranslation(FilterMatchMode.GreaterThanOrEqualTo) },
-                    { value: FilterMatchMode.Between, label: this.primeConfig.getTranslation(FilterMatchMode.Between) },
-                    { value: FilterMatchMode.Exists, label: this.primeConfig.getTranslation(FilterMatchMode.Exists) },
-                    { value: FilterMatchMode.DoesNotExist, label: this.primeConfig.getTranslation(FilterMatchMode.DoesNotExist) }
-                ];
-            }
-            else {
-                options = [
-                    { value: FilterMatchMode.Equals, label: this.primeConfig.getTranslation(FilterMatchMode.Equals) },
-                    { value: FilterMatchMode.LessThanOrEqualTo, label: this.primeConfig.getTranslation(FilterMatchMode.LessThanOrEqualTo) },
-                    { value: FilterMatchMode.GreaterThanOrEqualTo, label: this.primeConfig.getTranslation(FilterMatchMode.GreaterThanOrEqualTo) },
-                    { value: FilterMatchMode.Between, label: this.primeConfig.getTranslation(FilterMatchMode.Between) },
-                    { value: FilterMatchMode.Exists, label: this.primeConfig.getTranslation(FilterMatchMode.Exists) },
-                    { value: FilterMatchMode.DoesNotExist, label: this.primeConfig.getTranslation(FilterMatchMode.DoesNotExist) }
-                ];
-            }
-        }
-        if (this.descriptor.matchModes) {
-            options = this.descriptor.matchModes.map(mm => ({ value: mm, label: this.primeConfig.getTranslation(mm) }));
-        }
-        if (!options) {
-            let primeMathcModeOptionByType = undefined;
-            if (this.primeType === 'text') {
-                primeMathcModeOptionByType = this.primeConfig.filterMatchModeOptions.text;
-            }
-            else if (this.primeType === 'numeric') {
-                primeMathcModeOptionByType = this.primeConfig.filterMatchModeOptions.numeric;
-            }
-            else if (this.primeType === 'date') {
-                primeMathcModeOptionByType = this.primeConfig.filterMatchModeOptions.date;
-            }
-            if (primeMathcModeOptionByType) {
-                options = primeMathcModeOptionByType.map(key => ({ label: this.primeConfig.getTranslation(key), value: key }));
-            }
-        }
-        this.matchModes.set(options || []);
-    }
-    getDefaultMatchMode() {
-        let defaultMatchMode = FilterMatchMode.Contains;
-        if (this.primeType === 'text')
-            defaultMatchMode = FilterMatchMode.StartsWith;
-        else if (this.primeType === 'numeric')
-            defaultMatchMode = FilterMatchMode.Equals;
-        else if (this.primeType === 'date')
-            defaultMatchMode = FilterMatchMode.Equals;
-        else if (this.primeType === 'lookup')
-            defaultMatchMode = this.lookupDescriptor?.multiselect ? FilterMatchMode.In : FilterMatchMode.Equals;
-        // overwrite type default set in descriptor
-        if (this.descriptor.defaultMatchMode) {
-            defaultMatchMode = this.descriptor.defaultMatchMode;
-        }
-        // check if default mode exists!
-        if (this.matchModes().length > 0 && !this.matchModes().some(m => m.value === defaultMatchMode)) {
-            defaultMatchMode = this.matchModes()[0].value;
-        }
-        return defaultMatchMode;
-    }
     findNextMenuModeItem(item) {
         const nextItem = item.nextElementSibling;
         if (nextItem)
@@ -528,8 +611,8 @@ class TableColumnFilterFullComponent {
     isOutsideClicked(event) {
         return !(this.overlay?.isSameNode(event.target) ||
             this.overlay?.contains(event.target) ||
-            this.icon?.nativeElement.isSameNode(event.target) ||
-            this.icon?.nativeElement.contains(event.target) ||
+            this.icon()?.nativeElement.isSameNode(event.target) ||
+            this.icon()?.nativeElement.contains(event.target) ||
             DomHandler.hasClass(event.target, 'p-column-filter-add-button') ||
             DomHandler.hasClass(event.target.parentElement, 'p-column-filter-add-button') ||
             DomHandler.hasClass(event.target, 'p-column-filter-remove-button') ||
@@ -570,7 +653,7 @@ class TableColumnFilterFullComponent {
     }
     bindScrollListener() {
         if (!this.scrollHandler) {
-            this.scrollHandler = new ConnectedOverlayScrollHandler(this.icon?.nativeElement, () => {
+            this.scrollHandler = new ConnectedOverlayScrollHandler(this.icon()?.nativeElement, () => {
                 if (this.overlayVisible()) {
                     this.hideOverlay();
                 }
@@ -593,78 +676,41 @@ class TableColumnFilterFullComponent {
         this.unbindScrollListener();
         this.overlay = null;
     }
-    updateFilterValue(value) {
-        this.filterConstraint.set({ ...this.filterConstraint(), value: value });
-        this.updateDtFilter();
-    }
-    updateDtFilter() {
-        this.primeTable.filters[this.primeField] = this.filterConstraint();
-        this.primeTable._filter();
+    updateFilterOnDisplayValueChange(displayValue) {
+        this.setFilterConstraint(filterSetMetadataOnDisplayChange(this.filterConstraint(), this.filterConstraint()?.displayMatchMode ?? filterGetDefaultMatchMode(this.descriptor(), this.matchModes()), displayValue, this.descriptor().filterType, this.dateConfig()));
     }
     initFilterConstraint(reset = false) {
         if (reset) {
-            const defaultMatchMode = this.getDefaultMatchMode();
-            this.primeTable.filters[this.primeField] = { value: null, matchMode: defaultMatchMode };
+            const defaultMatchMode = filterGetDefaultMatchMode(this.descriptor(), this.matchModes());
+            this.primeTable.filters[this.descriptor().property] = { value: null, matchMode: defaultMatchMode };
         }
         // set internal filter constraint
-        const metadata = this.primeTable.filters[this.primeField];
+        let metadata = this.primeTable.filters[this.descriptor().property];
         if (Array.isArray(metadata)) {
-            this.setFilterConstraint(metadata[0]);
-        }
-        else {
-            this.setFilterConstraint(metadata);
+            metadata = metadata[0];
         }
+        this.setFilterConstraint(filterSetMetadataOnChange(metadata, metadata?.matchMode, metadata?.value, this.descriptor().filterType, this.dateConfig()));
     }
     setFilterConstraint(metadata) {
-        let matchMode = metadata?.matchMode ?? this.getDefaultMatchMode();
-        let displayValue = metadata?.value;
-        let displayMatchMode = matchMode;
-        // when equals is used on dates with time, the actual filter will be between, but displayed as equals
-        if (this.descriptor.filterType === FilterTypeEnum.Date && (this.descriptor.datePickerShowTime || this.descriptor.datePickerValueNoTime || this.dateOnlyDisabled)) {
-            if (matchMode === FilterMatchMode.Between &&
-                Array.isArray(metadata?.value) &&
-                metadata?.value.length === 2 &&
-                metadata?.value.every(v => v instanceof Date || typeof v === 'string' || typeof v === 'number')) {
-                const startDate = dateToIsoString(metadata.value[0]);
-                const endDate = dateToIsoString(metadata.value[1]);
-                // 2020-11-02T11:12:12.000
-                const cmpLength = this.descriptor.datePickerShowTime ? (this.descriptor.datePickerShowSeconds ? 19 : 16) : 10;
-                if (startDate.substring(0, cmpLength) === endDate.substring(0, cmpLength)) {
-                    displayMatchMode = FilterMatchMode.Equals;
-                    displayValue = new Date(metadata.value[0]);
-                }
-            }
-            else if (matchMode === FilterMatchMode.Equals && !metadata?.value) {
-                matchMode = FilterMatchMode.Between;
-            }
-        }
-        if (this.descriptor.filterType === FilterTypeEnum.Date && displayValue) {
-            // display value for calendar cannot be string, convert to date
-            displayValue = Array.isArray(displayValue)
-                ? displayValue.map(v => (!(v instanceof Date) ? new Date(v) : v))
-                : displayValue instanceof Date
-                    ? displayValue
-                    : new Date(displayValue);
-        }
-        this.filterConstraint.set({
-            matchMode,
-            value: metadata?.value,
-            displayMatchMode,
-            displayValue: displayValue ?? null
-        });
-        this.primeTable.filters[this.primeField] = this.filterConstraint();
+        if (metadata && !metadata.displayMatchMode)
+            metadata.displayMatchMode = metadata.matchMode;
+        if (metadata && !metadata.displayValue)
+            metadata.displayValue = metadata.value;
+        this.filterConstraint.set(metadata);
+        this.primeTable.filters[this.descriptor().property] = this.filterConstraint();
+        this.primeTable._filter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TableColumnFilterFullComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: TableColumnFilterFullComponent, isStandalone: true, selector: "mng-table-column-filter-full", inputs: { descriptor: "descriptor" }, viewQueries: [{ propertyName: "icon", first: true, predicate: ["icon"], descendants: true }], ngImport: i0, template: "<div class=\"p-column-filter p-column-filter-row\">\n    @switch (primeType) {\n        @case ('text') {\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        @case ('numeric') {\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]=\"descriptor.numberMinFractionDigits\"\n                    [maxFractionDigits]=\"descriptor.numberMaxFractionDigits\"\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]=\"descriptor.numberMinFractionDigits\"\n                    [maxFractionDigits]=\"descriptor.numberMaxFractionDigits\"\n                    [disabled]=\"isInputDisabled()\" />\n            }\n        }\n\n        @case ('boolean') {\n            <p-triStateCheckbox [ngModel]=\"filterConstraint()?.displayValue\" (ngModelChange)=\"onTristateModelChange($event)\"></p-triStateCheckbox>\n        }\n        @case ('date') {\n            @if (filterConstraint()?.displayMatchMode === 'between') {\n                <mng-date-range\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onDateFilterModelChange($event)\"\n                    [showTime]=\"descriptor.datePickerShowTime\"\n                    [dateFormat]=\"descriptor.datePickerFormat\"\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                    [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n                    [showTime]=\"descriptor.datePickerShowTime\"\n                    [firstDayOfWeek]=\"1\">\n                </p-calendar>\n            }\n        }\n        @case ('lookup') {\n            @if (lookupDescriptor) {\n                @switch (lookupDescriptor.lookupType) {\n                    @case (lookupTypeAutocomplete) {\n                        <mng-autocomplete\n                            [ngModel]=\"filterConstraint()?.displayValue\"\n                            [dataProvider]=\"lookupDescriptor.dataProvider\"\n                            [optionsTrackProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsValueProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookupDescriptor.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookupDescriptor.optionsLabelTranslate\"\n                            [multiselect]=\"lookupDescriptor.multiselect\"\n                            [autoClear]=\"lookupDescriptor.autocompleteAutoClear ?? false\"\n                            [openOnFocus]=\"lookupDescriptor.autocompleteAutoClear ?? true\"\n                            [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch ?? false\"\n                            [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                            [className]=\"lookupDescriptor.className\"\n                            [dropdownClassName]=\"lookupDescriptor.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]=\"lookupDescriptor.dataProvider\"\n                            [optionsValueProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookupDescriptor.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookupDescriptor.optionsLabelTranslate\"\n                            [multiselect]=\"lookupDescriptor.multiselect\"\n                            [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                            [className]=\"lookupDescriptor.className\"\n                            [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                            [showClear]=\"false\"\n                            [changeValueOnBlur]=\"lookupDescriptor.multiselect\"\n                            [disabled]=\"isInputDisabled()\"\n                            (valueChange)=\"dropdownFilter($event)\">\n                        </mng-dropdown>\n                    }\n                }\n            }\n        }\n    }\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: i1.TranslatePipe, name: "translate" }, { kind: "component", type: DateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "dateFormat", "className", "disabled"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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"], outputs: ["valueChange", "blur"] }, { kind: "ngmodule", type: TriStateCheckboxModule }, { kind: "component", type: i4.TriStateCheckbox, selector: "p-triStateCheckbox", inputs: ["disabled", "name", "ariaLabel", "ariaLabelledBy", "variant", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i5.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: i6.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", "disabled", "className"], outputs: ["keyDown"] }], animations: [
+    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: i1.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.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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", "appendTo"], 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: [
             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: TableColumnFilterFullComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TableColumnFilterComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-table-column-filter-full', imports: [
+            args: [{ standalone: true, selector: 'mng-table-column-filter', imports: [
                         TableModule,
                         TranslateModule,
                         DateRangeComponent,
@@ -672,27 +718,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                         FormsModule,
                         AutocompleteComponent,
                         DropdownComponent,
-                        TriStateCheckboxModule,
                         InputNumberModule,
                         InputTextModule,
                         FilterIcon,
                         FilterSlashIcon,
                         NgClass,
                         InputTrimDirective,
-                        NumberRangeComponent
+                        NumberRangeComponent,
+                        NgTemplateOutlet,
+                        CheckboxModule
                     ], 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 (primeType) {\n        @case ('text') {\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        @case ('numeric') {\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]=\"descriptor.numberMinFractionDigits\"\n                    [maxFractionDigits]=\"descriptor.numberMaxFractionDigits\"\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]=\"descriptor.numberMinFractionDigits\"\n                    [maxFractionDigits]=\"descriptor.numberMaxFractionDigits\"\n                    [disabled]=\"isInputDisabled()\" />\n            }\n        }\n\n        @case ('boolean') {\n            <p-triStateCheckbox [ngModel]=\"filterConstraint()?.displayValue\" (ngModelChange)=\"onTristateModelChange($event)\"></p-triStateCheckbox>\n        }\n        @case ('date') {\n            @if (filterConstraint()?.displayMatchMode === 'between') {\n                <mng-date-range\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onDateFilterModelChange($event)\"\n                    [showTime]=\"descriptor.datePickerShowTime\"\n                    [dateFormat]=\"descriptor.datePickerFormat\"\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                    [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n                    [showTime]=\"descriptor.datePickerShowTime\"\n                    [firstDayOfWeek]=\"1\">\n                </p-calendar>\n            }\n        }\n        @case ('lookup') {\n            @if (lookupDescriptor) {\n                @switch (lookupDescriptor.lookupType) {\n                    @case (lookupTypeAutocomplete) {\n                        <mng-autocomplete\n                            [ngModel]=\"filterConstraint()?.displayValue\"\n                            [dataProvider]=\"lookupDescriptor.dataProvider\"\n                            [optionsTrackProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsValueProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookupDescriptor.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookupDescriptor.optionsLabelTranslate\"\n                            [multiselect]=\"lookupDescriptor.multiselect\"\n                            [autoClear]=\"lookupDescriptor.autocompleteAutoClear ?? false\"\n                            [openOnFocus]=\"lookupDescriptor.autocompleteAutoClear ?? true\"\n                            [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch ?? false\"\n                            [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                            [className]=\"lookupDescriptor.className\"\n                            [dropdownClassName]=\"lookupDescriptor.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]=\"lookupDescriptor.dataProvider\"\n                            [optionsValueProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookupDescriptor.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookupDescriptor.optionsLabelTranslate\"\n                            [multiselect]=\"lookupDescriptor.multiselect\"\n                            [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                            [className]=\"lookupDescriptor.className\"\n                            [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                            [showClear]=\"false\"\n                            [changeValueOnBlur]=\"lookupDescriptor.multiselect\"\n                            [disabled]=\"isInputDisabled()\"\n                            (valueChange)=\"dropdownFilter($event)\">\n                        </mng-dropdown>\n                    }\n                }\n            }\n        }\n    }\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: () => [], propDecorators: { descriptor: [{
-                type: Input,
-                args: [{ required: true }]
-            }], icon: [{
-                type: ViewChild,
-                args: ['icon']
-            }] } });
+                    ], 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" }]
+        }], ctorParameters: () => [] });
 
 class TableColumnValueComponent {
     constructor() {
@@ -749,13 +790,419 @@ class TableColumnValueComponent {
         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: i1.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.ɵ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$2.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: i1.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: [{
             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"] }]
+            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"] }]
         }] });
 
+class FilterValuePipe {
+    constructor() {
+        this.locale = inject(LOCALE_ID);
+        this.translate = inject(TranslateService);
+        this.enumPipe = new EnumPipe();
+        this.subject = new ReplaySubject(1);
+    }
+    transform(value, descriptor) {
+        const valTransform = this.prepareValueTransform(value, descriptor);
+        this.subscription?.unsubscribe();
+        if (valTransform.translate) {
+            this.subscription = this.translate.stream(valTransform.valueArr).subscribe(i18n => {
+                this.subject.next(valTransform.valueArr.map(k => i18n[k]).join(', '));
+            });
+        }
+        else {
+            this.subject.next(valTransform.valueArr.join(', '));
+        }
+        return this.subject.asObservable();
+    }
+    /**
+     * If returns a string, this represents i18n key that must go through translation. If translation is not needed, undefined is returned.
+     */
+    prepareValueTransform(value, descriptor) {
+        const result = {
+            translate: false,
+            valueArr: Array.isArray(value) ? value : [value]
+        };
+        switch (descriptor?.filterType) {
+            case FilterTypeEnum.Date:
+                // eslint-disable-next-line no-case-declarations
+                const datePipe = new DatePipe(this.locale);
+                result.valueArr = result.valueArr.map(v => datePipe.transform(v, descriptor.displayFormat, descriptor.locale));
+                break;
+            case FilterTypeEnum.Number:
+                // eslint-disable-next-line no-case-declarations
+                const decimalPipe = new DecimalPipe(this.locale);
+                result.valueArr = result.valueArr.map(v => decimalPipe.transform(v, descriptor.displayFormat, descriptor.locale));
+                break;
+            case FilterTypeEnum.Boolean:
+                // eslint-disable-next-line no-case-declarations
+                const booleanPipe = new BooleanPipe();
+                result.valueArr = result.valueArr.map(v => booleanPipe.transform(v));
+                result.translate = true;
+                break;
+            case FilterTypeEnum.LookupEnum:
+                // eslint-disable-next-line no-case-declarations
+                const enumPipe = new EnumPipe();
+                result.valueArr = result.valueArr.map(v => enumPipe.transform(v, descriptor.enum));
+                result.translate = true;
+                break;
+        }
+        return result;
+    }
+    ngOnDestroy() {
+        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" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FilterValuePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'mngFilterValue',
+                    standalone: true,
+                    pure: true
+                }]
+        }] });
+
+class FilterActiveTagComponent {
+    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.matchMode = computed(() => this.filter().displayMatchMode);
+        this.matchModeSymbol = computed(() => `mngFilterActiveTag.matchMode.${this.matchMode()}`);
+        this.value = computed(() => this.filter().displayValue);
+    }
+    onRemove(event) {
+        event.stopPropagation();
+        this.remove.emit({
+            filter: this.filter(),
+            event: event
+        });
+    }
+    onEdit(event) {
+        this.edit.emit({
+            filter: this.filter(),
+            event: event
+        });
+    }
+    getPropertyLabelKey(filterDescriptor) {
+        let labelKey;
+        if (filterDescriptor.title !== undefined) {
+            labelKey = filterDescriptor.title;
+        }
+        else {
+            labelKey = getI18nTypePropertyKey(this.model().i18nBaseKey, filterDescriptor.property);
+        }
+        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: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i2$1.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: [{
+            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" }]
+        }] });
+
+class FilterFormComponent {
+    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.model = input.required();
+        this.filter = input();
+        this.overlay = input();
+        this.disabledProperties = input([]);
+        this.apply = output();
+        this.propertyOptionsWithTranslations = computed(() => {
+            const disabledProperties = this.disabledProperties();
+            const filter = this.filter();
+            return this.descriptors()?.map(d => ({ property: d.property, label: this.getPropertyLabelKey(d), disabled: !filter && disabledProperties.includes(d.property) }));
+        });
+        this.selectedDescriptor = computed(() => {
+            const property = this.propertyModel();
+            return this.descriptors().find(filterDescriptor => filterDescriptor.property === property);
+        });
+        this.selectedDescriptorAsLookup = computed(() => {
+            const filterDescriptor = this.selectedDescriptor();
+            return filterDescriptor !== undefined && (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
+        this.propertyModel = signal(null);
+        this.matchModeModel = signal(null);
+        this.valueModel = signal(null);
+        this.caseSensitiveModel = signal(false);
+        this.serializationCfg = {};
+        filterApplySerializationConfigToCmp(this.moduleConfig, this.serializationCfg);
+        effect(() => {
+            const edit = this.filter();
+            if (edit) {
+                this.resetForm({
+                    property: edit.descriptor.property,
+                    matchMode: edit.displayMatchMode ?? edit.matchMode ?? null,
+                    value: edit.displayValue ?? edit.value,
+                    caseSensitive: edit.caseSensitive ?? false
+                });
+            }
+            else {
+                this.resetForm();
+            }
+        }, { allowSignalWrites: true });
+        effect(() => {
+            const descriptor = this.selectedDescriptor();
+            const value = untracked(() => this.valueModel());
+            if (value != null) {
+                // reset value if filter type and value type mismatch
+                if ((descriptor?.filterType === FilterTypeEnum.String &&
+                    (value === true || value === false || value === 'true' || value === 'false' || value instanceof Date)) ||
+                    (descriptor?.filterType === FilterTypeEnum.Number && typeof value !== 'number' && isNaN(+value)) ||
+                    (descriptor?.filterType === FilterTypeEnum.Date && !(value instanceof Date)) ||
+                    descriptor?.filterType === FilterTypeEnum.Lookup ||
+                    descriptor?.filterType === FilterTypeEnum.LookupEnum) {
+                    this.valueModel.set(null);
+                }
+                else if (descriptor?.filterType === FilterTypeEnum.Boolean && typeof value !== 'boolean') {
+                    this.valueModel.set(false);
+                }
+            }
+        }, { allowSignalWrites: true });
+        effect(() => {
+            const matchModeOptions = this.matchModeOptions();
+            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));
+            }
+        }, { allowSignalWrites: true });
+        effect(() => {
+            const currentValue = untracked(() => this.valueModel());
+            this.valueModel.set(filterAdjustDisplayValueOnMatchModeChange(this.matchModeModel() ?? undefined, currentValue));
+        }, { allowSignalWrites: true });
+        toObservable(this.overlay)
+            .pipe(switchMap(o => (o ? o.onShow : NEVER)), takeUntilDestroyed())
+            .subscribe(() => {
+            const formFields = this.elementRef.nativeElement.querySelectorAll('input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [role="combobox"]:not([disabled])');
+            const activeEl = document.activeElement;
+            const activeInputIdx = activeEl ? [...formFields].findIndex(el => activeEl.isEqualNode(el)) : 0;
+            if (activeInputIdx <= 0) {
+                formFields[0].focus();
+            }
+        });
+    }
+    onFormSubmit(form) {
+        this.formSubmitted.set(true);
+        // mark all as dirty
+        for (const key in form.controls) {
+            form.controls[key].markAsDirty();
+        }
+        const property = this.propertyModel();
+        const matchMode = this.matchModeModel();
+        if (form.invalid || !property || !matchMode) {
+            this.formErrorMessage.set([
+                {
+                    severity: 'warn',
+                    summary: this.translate.instant('mngFilter.messages.invalidFormTitle'),
+                    detail: this.translate.instant('mngFilter.messages.invalidFormMessage')
+                }
+            ]);
+            return;
+        }
+        this.apply.emit({
+            property: property,
+            matchMode: matchMode,
+            value: this.valueModel(),
+            caseSensitive: this.caseSensitiveModel()
+        });
+    }
+    resetForm(value) {
+        this.filterForm().resetForm(value);
+        // somehow have to set case sensitivity manually
+        this.caseSensitiveModel.set(value?.caseSensitive ?? false);
+        this.formSubmitted.set(false);
+    }
+    getPropertyLabelKey(filterDescriptor) {
+        let labelKey;
+        if (filterDescriptor.title !== undefined) {
+            labelKey = filterDescriptor.title;
+        }
+        else {
+            labelKey = getI18nTypePropertyKey(this.model().i18nBaseKey, filterDescriptor.property);
+        }
+        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 }, 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 } }, 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=\"true\"\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                        <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                    }\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                    }\n                </ng-template>\n            </div>\n        }\n        @if (selectedDescriptor()?.filterType === FilterTypeEnum.String && matchModeModel() !== FilterMatchMode.Exists && matchModeModel() !== FilterMatchMode.DoesNotExist) {\n            <div class=\"flex align-items-center gap-2\">\n                <p-checkbox [(ngModel)]=\"caseSensitiveModel\" name=\"caseSensitive\" binary=\"true\" id=\"caseSensitive\" />\n                <label for=\"caseSensitive\">{{ 'mngFilter.caseSensitive' | translate }}</label>\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", 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", "appendTo"], outputs: ["valueChange", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.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.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FilterFormComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-filter-form', imports: [
+                        DropdownComponent,
+                        FormsModule,
+                        NgClass,
+                        TranslateModule,
+                        InputTrimDirective,
+                        NumberRangeComponent,
+                        InputNumberModule,
+                        DateRangeComponent,
+                        CalendarModule,
+                        AutocompleteComponent,
+                        CheckboxModule,
+                        MessagesModule,
+                        InputTextModule,
+                        NgTemplateOutlet
+                    ], 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=\"true\"\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                        <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                    }\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                    }\n                </ng-template>\n            </div>\n        }\n        @if (selectedDescriptor()?.filterType === FilterTypeEnum.String && matchModeModel() !== FilterMatchMode.Exists && matchModeModel() !== FilterMatchMode.DoesNotExist) {\n            <div class=\"flex align-items-center gap-2\">\n                <p-checkbox [(ngModel)]=\"caseSensitiveModel\" name=\"caseSensitive\" binary=\"true\" id=\"caseSensitive\" />\n                <label for=\"caseSensitive\">{{ 'mngFilter.caseSensitive' | translate }}</label>\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" }]
+        }], ctorParameters: () => [] });
+
+class FilterOverlayWithTagComponent {
+    constructor() {
+        this.primeTable = inject(Table);
+        this.dataListService = inject((DataListService));
+        this.moduleConfig = inject(COMMONS_MODULE_CONFIG_IT, { optional: true });
+        this.descriptors = input.required();
+        this.model = input.required();
+        this.filterOverlay = viewChild.required(OverlayPanel);
+        this.templates = contentChildren(TemplateDirective);
+        this.titleTemplate = computed(() => findTemplateByName([...this.templates()], 'title'));
+        this.filters = computed(() => {
+            return this.setInitialFilters(this.dataListService.filterMeta());
+        });
+        this.activeFilters = computed(() => {
+            const filterEntry = this.filters();
+            return this.descriptors()
+                .filter(d => {
+                const filter = filterEntry[d.property];
+                return (filter &&
+                    filter.matchMode !== undefined &&
+                    filter.displayMatchMode !== undefined &&
+                    (filter.matchMode === FilterMatchMode.Exists ||
+                        filter.matchMode === FilterMatchMode.DoesNotExist ||
+                        (filter.value !== undefined && filter.displayValue !== undefined)));
+            })
+                .map(d => filterEntry[d.property]);
+        });
+        this.activeFilterProperties = computed(() => this.activeFilters().map(f => f.descriptor.property));
+        this.filterEdit = signal(undefined);
+        this.serializationCfg = {};
+        // UI utilities
+        this.clickedOnFilterEvent = undefined;
+        filterApplySerializationConfigToCmp(this.moduleConfig, this.serializationCfg);
+    }
+    onFilterFormApply(event) {
+        const descriptor = this.descriptors().find(d => d.property === event.property);
+        if (!descriptor) {
+            return;
+        }
+        this.updatePrimeTableFilter({
+            ...filterSetMetadataOnDisplayChange({ caseSensitive: event.caseSensitive }, event.matchMode, event.value, descriptor.filterType, filterGetDateConfig(descriptor, this.serializationCfg)),
+            descriptor: descriptor
+        });
+        // Resetting the form is done in the onOverlayHide callback because resetting the
+        // values here renders empty inputs for a split second before closing the overlay
+        this.filterOverlay().hide();
+    }
+    onFilterRemove(event) {
+        this.updatePrimeTableFilter({
+            ...this.filters()[event.filter.descriptor.property],
+            matchMode: undefined,
+            displayMatchMode: undefined,
+            value: undefined,
+            displayValue: undefined
+        });
+    }
+    onFilterEdit(event) {
+        this.onFilterAddOrEdit(event.filter, event.event);
+    }
+    onFilterAdd(event) {
+        this.onFilterAddOrEdit(undefined, event);
+    }
+    onOverlayHide() {
+        if (this.clickedOnFilterEvent) {
+            // show the overlay again if the user clicked another filter
+            setTimeout(() => {
+                this.filterOverlay().show(this.clickedOnFilterEvent);
+                this.clickedOnFilterEvent = undefined;
+            }, 0);
+            return;
+        }
+        else {
+            // clean state
+            this.filterEdit.set(undefined);
+        }
+    }
+    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) {
+            this.filterOverlay().hide();
+            this.filterEdit.set(undefined);
+            return;
+        }
+        this.filterEdit.set(filter);
+        if (this.filterOverlay().overlayVisible) {
+            // In case the user clicks another filter, 're-showing' the overlay in
+            // the new position is done in the onOverlayHide callback
+            this.clickedOnFilterEvent = event;
+            this.filterOverlay().hide();
+        }
+        else {
+            this.filterOverlay().show(event);
+        }
+    }
+    setInitialFilters(filtersInit) {
+        const filtersResult = {};
+        for (const property in filtersInit) {
+            const filterInit = filtersInit[property];
+            const descriptor = this.descriptors().find(filterDescriptor => filterDescriptor.property === property);
+            if (!descriptor) {
+                continue;
+            }
+            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._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 }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, queries: [{ propertyName: "templates", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "filterOverlay", first: true, predicate: OverlayPanel, 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    <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</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        [filter]=\"filterEdit()\"\n        [disabledProperties]=\"activeFilterProperties()\"\n        [overlay]=\"op\"\n        (apply)=\"onFilterFormApply($event)\" />\n</p-overlayPanel>\n", dependencies: [{ kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i1$3.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: "ngmodule", type: TagModule }, { kind: "component", type: FilterFormComponent, selector: "mng-filter-form", inputs: ["title", "descriptors", "model", "filter", "overlay", "disabledProperties"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FilterOverlayWithTagComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-filter-overlay-with-tag', imports: [OverlayPanelModule, TranslateModule, TagModule, FilterFormComponent, Button, FilterActiveTagComponent, NgTemplateOutlet], 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    <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</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        [filter]=\"filterEdit()\"\n        [disabledProperties]=\"activeFilterProperties()\"\n        [overlay]=\"op\"\n        (apply)=\"onFilterFormApply($event)\" />\n</p-overlayPanel>\n" }]
+        }], ctorParameters: () => [] });
+
 function tableNotificationError(translate, table, error, messageService) {
     const params = {};
     if (error?.message) {
@@ -825,6 +1272,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                 }]
         }] });
 
+const COMMONS_TABLE_FEATURE_CONFIG_IT = new InjectionToken('COMMONS_TABLE_FEATURE_CONFIG');
+
 class TableComponent {
     constructor() {
         this.cmpTypeName = 'TableComponent';
@@ -836,7 +1285,9 @@ class TableComponent {
         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.descriptorInput = input.required({ alias: 'descriptor' });
         // data source inputs
@@ -845,15 +1296,17 @@ class TableComponent {
         this.loadingInput = input(undefined, { alias: 'loading', transform: booleanOrUndefinedAttribute });
         this.dataProvider = input();
         // extra features input
-        this.useQueryParams = input(false);
-        this.cellClickEnabled = input(true);
+        this.useQueryParams = input(false, { transform: booleanAttribute });
+        this.cellClickEnabled = input(true, { transform: booleanAttribute });
         this.selectionMode = input('multiple');
-        this.selectionEnabled = input(false);
-        this.rowReorderEnabledInput = input(true, { alias: 'rowReorderEnabled' });
+        this.selectionEnabled = input(false, { transform: booleanAttribute });
+        this.rowReorderEnabledInput = input(true, { alias: 'rowReorderEnabled', transform: booleanAttribute });
         this.rowReorderEnabled = computed(() => this.rowReorderEnabledInput() && this.descriptor().rowReorderable);
         // 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);
         // component inputs
         this.captionComponent = input();
         this.columnCustomLastComponent = input();
@@ -909,6 +1362,9 @@ class TableComponent {
             if (this.descriptor().hasGridlines) {
                 className += ' p-datatable-gridlines';
             }
+            if (!this.isCaptionVisible()) {
+                className += ' datatable-no-header';
+            }
             return className;
         });
         // data provider
@@ -916,8 +1372,6 @@ class TableComponent {
             const dataProvider = this.dataProvider();
             return dataProvider?.serviceType ? this.injector.get(dataProvider.serviceType) : null;
         });
-        this.latestLazyLoadEventVersion = 0;
-        this.latestParamsWithDefaultsVersion = 0;
         // descriptors
         this.descriptor = signal(tableDescriptor());
         this.localstorageKey = computed(() => {
@@ -935,8 +1389,10 @@ class TableComponent {
         this.columns = computed(() => this.computeColumnsWithLayout());
         this.visibleColumns = computed(() => this.columns().filter(col => col.isVisible));
         // filter, sort
-        this.hasColumnFilters = computed(() => this.filterDescriptors().length > 0);
         this.filterDescriptors = computed(() => this.descriptor().filters);
+        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.overlayWithTagFilters = computed(() => this.filterDescriptors().filter(d => (d.displayType == null && this.defaultFilterDisplayType === FilterDisplayTypeEnum.OverlayWithTag) || d.displayType === FilterDisplayTypeEnum.OverlayWithTag));
         this.defaultParams = computed(() => this.computeDefaultDataListParams());
         this.anyColumnVisible = computed(() => this.visibleColumns().length > 0);
         this.hasCustomLastColumn = computed(() => this.columnCustomLastComponent || this.columnCustomLastTemplate());
@@ -1048,7 +1504,6 @@ class TableComponent {
     }
     onTableLazyLoad(event) {
         this.dataProviderLatestLazyLoadEvent = event;
-        this.latestLazyLoadEventVersion++;
         const params = fromTableLoadToDataListParams(event);
         if (this.useQueryParams()) {
             if (!this.routerIsNavigationOutsideInProgress) {
@@ -1106,7 +1561,6 @@ class TableComponent {
         this.dataProviderSubscription?.unsubscribe();
         this.dataListService.loading.set(true);
         this.latestParamsWithDefaults = paramsWithDefaults;
-        this.latestParamsWithDefaultsVersion++;
         this.dataProviderSubscription = toObservable$1(dataProvider.getAll(paramsWithDefaults, this.dataProviderService(), this.descriptor().isLocalized ? this.commons.appDataLocale() ?? undefined : undefined)).subscribe({
             next: res => {
                 const descriptorInput = this.descriptorInput();
@@ -1136,10 +1590,8 @@ class TableComponent {
     }
     loadTableFromRouteUpdate(urlParams) {
         const paramsWithDefaults = mergeDataListParamsWithDefaults(fromUrlQueryToDataListParams(urlParams), this.defaultParams());
-        if (this.latestLazyLoadEventVersion < this.latestParamsWithDefaultsVersion + 1) {
-            // update only if new version from query params will be higher
-            this.updatePrimeSortAndFilter(paramsWithDefaults);
-        }
+        this.updatePrimeSortAndFilter(paramsWithDefaults);
+        // }
         this.useQueryParamsInitialized.set(true);
         this.loadTableWithDataProvider(paramsWithDefaults);
     }
@@ -1156,7 +1608,8 @@ class TableComponent {
             Object.entries(paramsWithDefaults.filters).forEach(([key, value]) => {
                 primeFilterMeta[key] = {
                     value: value.value,
-                    matchMode: value.matchMode
+                    matchMode: value.matchMode,
+                    caseSensitive: value.caseSensitive
                 };
             });
         }
@@ -1174,10 +1627,9 @@ class TableComponent {
     onColumnToggle(event) {
         const layoutPrefs = this.layoutPreferences();
         const selectedColumns = event.value.map(v => v.descriptor.property);
-        const hiddenColumns = this.columns()
+        layoutPrefs.columnHidden = this.columns()
             .filter(c => selectedColumns.indexOf(c.descriptor.property) < 0)
             .map(c => c.descriptor.property);
-        layoutPrefs.columnHidden = hiddenColumns;
         this.saveLayoutPreferences(layoutPrefs);
     }
     onColumnToggleAll() {
@@ -1225,6 +1677,7 @@ class TableComponent {
             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
@@ -1281,7 +1734,8 @@ class TableComponent {
         const columns = descriptor.columns.map(col => ({
             id: `${col.property}-${timestamp}`,
             descriptor: col,
-            filter: descriptor.filters.find(f => f.showOnColumn === col.property),
+            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,
@@ -1309,7 +1763,7 @@ class TableComponent {
         }
     }
     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            (onRowReorder)=\"onRowReorder($event)\">\n            @if (captionTemplate() || captionComponent() || descriptor().title) {\n                <ng-template pTemplate=\"caption\">\n                    @if (captionTemplate()) {\n                        <ng-container *ngTemplateOutlet=\"captionTemplate()\"></ng-container>\n                    } @else if (captionComponent()) {\n                        <div [mngComponent]=\"captionComponent()\" (instanceCreated)=\"captionComponentInstance.emit($event)\"></div>\n                    } @else {\n                        <h5 class=\"p-0 m-0\">{{ descriptor().title }}</h5>\n                    }\n                </ng-template>\n            }\n            <ng-template pTemplate=\"header\">\n                @if (!descriptor().hideHeader) {\n                    <tr class=\"mng-table-header\" [class]=\"descriptor().headerClassName\">\n\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\" class=\"col-1\" 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 (descriptor().hasResizableColumns) {\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\" [ngClass]=\"{'p-checkbox-disabled': !areColumnsToggleable}\">\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                                                        [disabled]=\"!areColumnsToggleable\" />\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                        @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-full [descriptor]=\"col.filter\"></mng-table-column-filter-full>\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 class=\"col-1\">\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\"\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            @if (descriptor().rowExpandable) {\n                <ng-template pTemplate=\"rowexpansion\" let-item>\n                    <tr>\n                        <td class=\"col-1\"></td>\n                        <td [colSpan]=\"descriptor().rowExpandableColSpan\">\n                            <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n            }\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: TableColumnFilterFullComponent, selector: "mng-table-column-filter-full", inputs: ["descriptor"] }, { kind: "pipe", type: TableColumnFilterClassPipe, name: "mngTableColumnFilterClass" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$2.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$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i1$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i1$2.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i1$2.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i1$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i1$2.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i1$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$2.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$2.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3$1.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: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "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            (onRowReorder)=\"onRowReorder($event)\">\n            <ng-template pTemplate=\"caption\">\n                @if (isCaptionVisible()) {\n                    <div class=\"table-header\">\n                        @if (overlayWithTagFilters().length > 0) {\n                            <mng-filter-overlay-with-tag [title]=\"descriptor().title\" [descriptors]=\"overlayWithTagFilters()\" [model]=\"descriptor().model\">\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 (descriptor().hasResizableColumns) {\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\" [ngClass]=\"{'p-checkbox-disabled': !areColumnsToggleable}\">\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                                                        [disabled]=\"!areColumnsToggleable\" />\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\n                                    [mngComponent]=\"descriptor().rowExpandableComponentType\"\n                                    [inputs]=\"{item}\">\n                                </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$4.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$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1$4.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i1$4.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i1$4.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i1$4.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i1$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i1$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i1$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$4.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$4.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$2.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: i1.TranslatePipe, name: "translate" }, { kind: "component", type: FilterOverlayWithTagComponent, selector: "mng-filter-overlay-with-tag", inputs: ["descriptors", "model"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: [{
             type: Component,
@@ -1323,22 +1777,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                         TableColumnValueComponent,
                         ClassMapPipe,
                         LocaleDefaultRowClassPipe,
-                        TableColumnFilterFullComponent,
+                        TableColumnFilterComponent,
                         TableColumnFilterClassPipe,
                         TableModule,
                         MultiSelectModule,
                         ButtonModule,
                         TooltipModule,
                         TranslateModule,
-                        FormsModule
-                    ], 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            (onRowReorder)=\"onRowReorder($event)\">\n            @if (captionTemplate() || captionComponent() || descriptor().title) {\n                <ng-template pTemplate=\"caption\">\n                    @if (captionTemplate()) {\n                        <ng-container *ngTemplateOutlet=\"captionTemplate()\"></ng-container>\n                    } @else if (captionComponent()) {\n                        <div [mngComponent]=\"captionComponent()\" (instanceCreated)=\"captionComponentInstance.emit($event)\"></div>\n                    } @else {\n                        <h5 class=\"p-0 m-0\">{{ descriptor().title }}</h5>\n                    }\n                </ng-template>\n            }\n            <ng-template pTemplate=\"header\">\n                @if (!descriptor().hideHeader) {\n                    <tr class=\"mng-table-header\" [class]=\"descriptor().headerClassName\">\n\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\" class=\"col-1\" 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 (descriptor().hasResizableColumns) {\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\" [ngClass]=\"{'p-checkbox-disabled': !areColumnsToggleable}\">\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                                                        [disabled]=\"!areColumnsToggleable\" />\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                        @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-full [descriptor]=\"col.filter\"></mng-table-column-filter-full>\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 class=\"col-1\">\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\"\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            @if (descriptor().rowExpandable) {\n                <ng-template pTemplate=\"rowexpansion\" let-item>\n                    <tr>\n                        <td class=\"col-1\"></td>\n                        <td [colSpan]=\"descriptor().rowExpandableColSpan\">\n                            <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n            }\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" }]
+                        FilterOverlayWithTagComponent,
+                        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            (onRowReorder)=\"onRowReorder($event)\">\n            <ng-template pTemplate=\"caption\">\n                @if (isCaptionVisible()) {\n                    <div class=\"table-header\">\n                        @if (overlayWithTagFilters().length > 0) {\n                            <mng-filter-overlay-with-tag [title]=\"descriptor().title\" [descriptors]=\"overlayWithTagFilters()\" [model]=\"descriptor().model\">\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 (descriptor().hasResizableColumns) {\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\" [ngClass]=\"{'p-checkbox-disabled': !areColumnsToggleable}\">\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                                                        [disabled]=\"!areColumnsToggleable\" />\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\n                                    [mngComponent]=\"descriptor().rowExpandableComponentType\"\n                                    [inputs]=\"{item}\">\n                                </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" }]
         }], ctorParameters: () => [] });
 
+/**
+ * Prepares providers for usage of the tableview functionalities.
+ *
+ * @returns {CommonsFeature} The `CommonsFeature` object with the layout configuration.
+ */
+function withTable(config) {
+    return {
+        type: CommonsFeatureTypeEnum.Table,
+        providers: [
+            {
+                provide: COMMONS_TABLE_FEATURE_CONFIG_IT,
+                useValue: config
+            }
+        ]
+    };
+}
+
 // components
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DataListService, LocaleDefaultRowClassPipe, TableColumnFilterClassPipe, TableColumnFilterFullComponent, TableColumnValueComponent, TableComponent, generateTableLayoutPrefsKey, tableNotificationError };
+export { COMMONS_TABLE_FEATURE_CONFIG_IT, DataListService, FilterActiveTagComponent, FilterFormComponent, FilterOverlayWithTagComponent, FilterValuePipe, LocaleDefaultRowClassPipe, TableColumnFilterClassPipe, TableColumnFilterComponent, TableColumnValueComponent, TableComponent, filterAdjustDisplayValueOnMatchModeChange, filterApplySerializationConfigToCmp, filterAreDatesEqual, filterGetDateConfig, filterGetDefaultMatchMode, filterGetNumberConfig, filterSetMetadataOnChange, filterSetMetadataOnDisplayChange, generateMatchModeOptions, generateTableLayoutPrefsKey, tableNotificationError, withTable };
 //# sourceMappingURL=mediusinc-mng-commons-table.mjs.map