@mediusinc/mng-commons 6.2.0 → 7.0.0-rc.0

package/fesm2022/{mediusinc-mng-commons-table-mediusinc-mng-commons-table-8TdW6NCC.mjs → mediusinc-mng-commons-table-mediusinc-mng-commons-table-DFcdSUCN.mjs}

@@ -7,18 +7,17 @@ import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { OverlayService, TranslationKeys, MessageService } from 'primeng/api';
-import { ButtonDirective, ButtonIcon, Button } from 'primeng/button';
+import { ButtonDirective, Button } from 'primeng/button';
 import { Checkbox } from 'primeng/checkbox';
 import { DatePicker } from 'primeng/datepicker';
 import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
-import { FilterIcon } from 'primeng/icons/filter';
 import { InputNumber } from 'primeng/inputnumber';
 import { InputText } from 'primeng/inputtext';
 import * as i1$1 from 'primeng/table';
 import { Table, TableModule } from 'primeng/table';
 import { ZIndexUtils } from 'primeng/utils';
 import { combineLatest, switchMap, of, Subject, debounceTime, distinctUntilChanged, ReplaySubject, NEVER, BehaviorSubject, skip, filter } from 'rxjs';
-import { FilterMatchMode, dateToIsoString, angularDateFormatHasTime, angularDateFormatHasSeconds, fromAngularDateFormatToPrime, fromAngularNumberFormatToFractions, COMMONS_MODULE_CONFIG_IT, effectWithDeps, toObservable as toObservable$1, CommonsService, RerenderDirective, GetterPipe, TemplatePipe, JsonPathPipe, BooleanPipe, EnumPipe, ComponentDirective, getI18nTypePropertyKey, TemplateDirective, findTemplateByName, getI18nErrorParams, getI18nForError, toastMessage, CommonsStorageService, LoggerService, booleanOrUndefinedAttribute, mergeDataListParamsWithDefaults, fromTableLoadToDataListParams, dataListParamsToUrlQuery, fromSubscribeError, getErrorLogLevel, fromUrlQueryToDataListParams, I18nPropertyPipe, ClassMapPipe, CommonsFeatureTypeEnum } from '@mediusinc/mng-commons/core';
+import { FilterMatchMode, dateToIsoString, angularDateFormatHasTime, angularDateFormatHasSeconds, fromAngularDateFormatToPrime, fromAngularNumberFormatToFractions, COMMONS_MODULE_CONFIG_IT, effectWithDeps, toObservable as toObservable$1, CommonsService, RerenderDirective, GetterPipe, TemplatePipe, JsonPathPipe, ComponentDirective, BooleanPipe, EnumPipe, getI18nTypePropertyKey, TemplateDirective, findTemplateByName, getI18nErrorParams, getI18nForError, toastMessage, CommonsStorageService, LoggerService, booleanOrUndefinedAttribute, mergeDataListParamsWithDefaults, fromTableLoadToDataListParams, dataListParamsToUrlQuery, fromSubscribeError, getErrorLogLevel, fromUrlQueryToDataListParams, I18nPropertyPipe, ClassMapPipe, CommonsFeatureTypeEnum } from '@mediusinc/mng-commons/core';
 import { FilterTypeEnum, FilterDescriptor, FilterDisplayTypeEnum, FilterLookupTypeEnum, FilterLookupDescriptor } from '@mediusinc/mng-commons/filter';
 import { DateRangeComponent, AutocompleteComponent, DropdownComponent, InputTrimDirective, NumberRangeComponent } from '@mediusinc/mng-commons/form';
 import { tableDescriptor, TableDynamicDescriptorInst, TablePaginationModeEnum, ColumnDisplayTypeEnum, TableSizeEnum } from '@mediusinc/mng-commons/table/api';
@@ -393,10 +392,10 @@ class TableMetadataService {
         this.#translationObserver = toSignal(this.primeConfig.translationObserver);
         this.defaultFilterDisplayType = this.tableModuleConfig?.filterDisplayType ?? FilterDisplayTypeEnum.Column;
         // signal sources
-        this.#signalSources = signal({});
+        this.#signalSources = signal({}, ...(ngDevMode ? [{ debugName: "#signalSources" }] : []));
         // descriptors
-        this.descriptorFromSource = computed(() => this.#signalSources().descriptor?.());
-        this.#descriptor = signal(tableDescriptor());
+        this.descriptorFromSource = computed(() => this.#signalSources().descriptor?.(), ...(ngDevMode ? [{ debugName: "descriptorFromSource" }] : []));
+        this.#descriptor = signal(tableDescriptor(), ...(ngDevMode ? [{ debugName: "#descriptor" }] : []));
         this.descriptor = this.#descriptor.asReadonly();
         this.#updateDescriptorFromSourceEffect = effectWithDeps([this.descriptorFromSource], ([d]) => {
             if (d != null) {
@@ -412,20 +411,20 @@ class TableMetadataService {
             else {
                 return [25, 50, 100];
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "rowsPerPageOptions" }] : []));
         // filters
-        this.filterDescriptors = computed(() => this.descriptor().filters);
+        this.filterDescriptors = computed(() => this.descriptor().filters, ...(ngDevMode ? [{ debugName: "filterDescriptors" }] : []));
         this.filters = computed(() => {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const observer = this.#translationObserver(); // need this one to track language changes
             return this.filterDescriptors().map(d => this.mapDescriptorToMetadata(d));
-        });
-        this.genericFilterDescriptor = computed(() => this.descriptor().genericFilter);
-        this.#genericFilters = signal([]);
+        }, ...(ngDevMode ? [{ debugName: "filters" }] : []));
+        this.genericFilterDescriptor = computed(() => this.descriptor().genericFilter, ...(ngDevMode ? [{ debugName: "genericFilterDescriptor" }] : []));
+        this.#genericFilters = signal([], ...(ngDevMode ? [{ debugName: "#genericFilters" }] : []));
         this.genericFilters = this.#genericFilters.asReadonly();
         // search
-        this.#searchFieldsFromSignalSource = computed(() => this.#signalSources().searchFields?.());
-        this.#searchFields = signal([]);
+        this.#searchFieldsFromSignalSource = computed(() => this.#signalSources().searchFields?.(), ...(ngDevMode ? [{ debugName: "#searchFieldsFromSignalSource" }] : []));
+        this.#searchFields = signal([], ...(ngDevMode ? [{ debugName: "#searchFields" }] : []));
         this.searchFields = this.#searchFields.asReadonly();
         this.#searchFieldsEffect = effectWithDeps([this.descriptor, this.#searchFieldsFromSignalSource], ([descriptor, searchFieldsFromSignalSource]) => {
             this.#searchFields.set(searchFieldsFromSignalSource ?? (descriptor.search && descriptor.searchFields ? descriptor.searchFields : this.descriptor().columns.map(c => c.property)));
@@ -453,7 +452,7 @@ class TableMetadataService {
                 };
             });
             return params;
-        });
+        }, ...(ngDevMode ? [{ debugName: "defaultParams" }] : []));
         filterApplySerializationConfigToCmp(this.moduleConfig, this.serializationCfg);
         combineLatest([toObservable(this.genericFilterDescriptor), toObservable(this.#translationObserver)])
             .pipe(switchMap(([genericFilterDescriptor]) => {
@@ -490,10 +489,10 @@ class TableMetadataService {
             numberConfig: filterGetNumberConfig(descriptor)
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableMetadataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableMetadataService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableMetadataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableMetadataService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableMetadataService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableMetadataService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -503,9 +502,9 @@ class TableDataService {
         this.#commons = inject(CommonsService);
         this.#metadata = inject(TableMetadataService);
         // signal sources
-        this.#dataSources = signal({});
+        this.#dataSources = signal({}, ...(ngDevMode ? [{ debugName: "#dataSources" }] : []));
         // data sources
-        this.#manualLoading = computed(() => this.#dataSources()?.manualLoading?.());
+        this.#manualLoading = computed(() => this.#dataSources()?.manualLoading?.(), ...(ngDevMode ? [{ debugName: "#manualLoading" }] : []));
         // results that are set directly via input and are not result of a asynchronous operation (aka data provider)
         this.#synchronousResult = computed(() => {
             const dataSources = this.#dataSources();
@@ -519,12 +518,12 @@ class TableDataService {
                 return { data: dataSources.arrayItems(), totalCount: dataSources.arrayItems()?.length ?? 0 };
             }
             return undefined;
-        });
-        this.#dataProvider = computed(() => this.#dataSources()?.dataProvider?.());
+        }, ...(ngDevMode ? [{ debugName: "#synchronousResult" }] : []));
+        this.#dataProvider = computed(() => this.#dataSources()?.dataProvider?.(), ...(ngDevMode ? [{ debugName: "#dataProvider" }] : []));
         this.#dataProviderService = computed(() => {
             const dataProvider = this.#dataProvider();
             return dataProvider?.serviceType ? this.#injector.get(dataProvider.serviceType) : null;
-        });
+        }, ...(ngDevMode ? [{ debugName: "#dataProviderService" }] : []));
         this.#synchronousResultEffect = effectWithDeps([this.#synchronousResult], ([res]) => {
             if (res != null) {
                 this.#setData(res.data ?? [], res.totalCount);
@@ -541,22 +540,22 @@ class TableDataService {
             }
         });
         // pagination
-        this.#params = signal(undefined);
+        this.#params = signal(undefined, ...(ngDevMode ? [{ debugName: "#params" }] : []));
         this.params = this.#params.asReadonly();
-        this.#sortMeta = signal(undefined);
+        this.#sortMeta = signal(undefined, ...(ngDevMode ? [{ debugName: "#sortMeta" }] : []));
         this.sortMeta = this.#sortMeta.asReadonly();
-        this.#filterMeta = signal({});
+        this.#filterMeta = signal({}, ...(ngDevMode ? [{ debugName: "#filterMeta" }] : []));
         this.filterMeta = this.#filterMeta.asReadonly();
-        this.#isSortAndFilterMetaInitialized = signal(false);
+        this.#isSortAndFilterMetaInitialized = signal(false, ...(ngDevMode ? [{ debugName: "#isSortAndFilterMetaInitialized" }] : []));
         this.#defaultParamsEffect = effectWithDeps([this.#metadata.defaultParams], ([defaultParams]) => {
             this.#sortMeta.set(tableCreateSortMeta(defaultParams));
             this.#filterMeta.set(tableCreateFilterMeta(defaultParams));
             this.#isSortAndFilterMetaInitialized.set(true);
         }, { firstOnly: true });
-        this.#isSearchMetaInitialized = signal(false);
-        this.#searchMeta = signal(undefined);
+        this.#isSearchMetaInitialized = signal(false, ...(ngDevMode ? [{ debugName: "#isSearchMetaInitialized" }] : []));
+        this.#searchMeta = signal(undefined, ...(ngDevMode ? [{ debugName: "#searchMeta" }] : []));
         this.searchMeta = this.#searchMeta.asReadonly();
-        this.isAllPaginationMetaInitialized = computed(() => this.#isSortAndFilterMetaInitialized() && this.#isSortAndFilterMetaInitialized());
+        this.isAllPaginationMetaInitialized = computed(() => this.#isSortAndFilterMetaInitialized() && this.#isSortAndFilterMetaInitialized(), ...(ngDevMode ? [{ debugName: "isAllPaginationMetaInitialized" }] : []));
         this.paginationMode = computed(() => {
             const descriptor = this.#metadata.descriptor();
             if (descriptor.paginationMode != null) {
@@ -570,8 +569,8 @@ class TableDataService {
             else {
                 return TablePaginationModeEnum.None;
             }
-        });
-        this.offset = computed(() => this.params()?.offset ?? 0);
+        }, ...(ngDevMode ? [{ debugName: "paginationMode" }] : []));
+        this.offset = computed(() => this.params()?.offset ?? 0, ...(ngDevMode ? [{ debugName: "offset" }] : []));
         this.rows = computed(() => {
             if (this.params()?.limit) {
                 return this.params()?.limit;
@@ -582,15 +581,15 @@ class TableDataService {
                 return descriptor.defaultNumRows;
             }
             return rowsPerPageOptions[0];
-        });
+        }, ...(ngDevMode ? [{ debugName: "rows" }] : []));
         // data
-        this.#data = signal([]);
+        this.#data = signal([], ...(ngDevMode ? [{ debugName: "#data" }] : []));
         this.data = this.#data.asReadonly();
-        this.#count = signal(0);
+        this.#count = signal(0, ...(ngDevMode ? [{ debugName: "#count" }] : []));
         this.count = this.#count.asReadonly();
-        this.#loading = signal(true);
+        this.#loading = signal(true, ...(ngDevMode ? [{ debugName: "#loading" }] : []));
         this.loading = this.#loading.asReadonly();
-        this.selectedItems = signal([]);
+        this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
     }
     #injector;
     #commons;
@@ -679,10 +678,10 @@ class TableDataService {
     ngOnDestroy() {
         this.#dataProviderSubscription?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableDataService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableDataService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableDataService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableDataService, decorators: [{
             type: Injectable
         }] });
 
@@ -705,22 +704,22 @@ class TableColumnFilterComponent {
         this.tableData = inject((TableDataService));
         this.tableMetadata = inject(TableMetadataService);
         this.document = window.document;
-        this.metadata = input.required();
-        this.descriptorAsLookup = computed(() => this.metadata().descriptor instanceof FilterLookupDescriptor ? this.metadata().descriptor : undefined);
-        this.icon = viewChild('icon');
-        this.matchModes = computed(() => this.metadata().matchModes);
-        this.filterConstraint = signal(undefined);
+        this.metadata = input.required(...(ngDevMode ? [{ debugName: "metadata" }] : []));
+        this.descriptorAsLookup = computed(() => this.metadata().descriptor instanceof FilterLookupDescriptor ? this.metadata().descriptor : undefined, ...(ngDevMode ? [{ debugName: "descriptorAsLookup" }] : []));
+        this.icon = viewChild('icon', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.matchModes = computed(() => this.metadata().matchModes, ...(ngDevMode ? [{ debugName: "matchModes" }] : []));
+        this.filterConstraint = signal(undefined, ...(ngDevMode ? [{ debugName: "filterConstraint" }] : []));
         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);
+            !this.primeTable.isFilterBlank(this.filterConstraint()?.value), ...(ngDevMode ? [{ debugName: "isFilterSet" }] : []));
+        this.isInputDisabled = computed(() => this.filterConstraint()?.matchMode === FilterMatchMode.Exists || this.filterConstraint()?.matchMode === FilterMatchMode.DoesNotExist, ...(ngDevMode ? [{ debugName: "isInputDisabled" }] : []));
+        this.overlayVisible = signal(false, ...(ngDevMode ? [{ debugName: "overlayVisible" }] : []));
         // display configs
         this.isMultiselect = computed(() => {
             const ft = this.filterConstraint();
             const matchMode = ft?.displayMatchMode ?? this.metadata().defaultMatchMode;
             return (matchMode === FilterMatchMode.In || matchMode === FilterMatchMode.NotIn) && (ft?.displayValue == null || Array.isArray(ft.displayValue));
-        });
+        }, ...(ngDevMode ? [{ debugName: "isMultiselect" }] : []));
         this.window = this.document.defaultView;
         this.numericValueFromModelChange = null;
         this.dateDebounceSubject = new Subject();
@@ -1001,15 +1000,15 @@ class TableColumnFilterComponent {
         this.primeTable.filters[this.metadata().descriptor.property] = this.filterConstraint();
         this.primeTable._filter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableColumnFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: TableColumnFilterComponent, isStandalone: true, selector: "mng-table-column-filter", inputs: { metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "icon", first: true, predicate: ["icon"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex items-center\">\n    @switch (metadata().descriptor.filterType) {\n        @case (FilterTypeEnum.Number) {\n            @if (filterConstraint()?.displayMatchMode === 'between') {\n                <mng-number-range\n                    vertical=\"true\"\n                    className=\"mng-column-filter-number-input\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onNumericModelChange($event)\"\n                    (keyDown)=\"onNumericInputKeyDown($event)\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [useGrouping]=\"metadata().descriptor.numberUseGrouping\"\n                    [minFractionDigits]=\"metadata().numberConfig?.fractionsMin\"\n                    [maxFractionDigits]=\"metadata().numberConfig?.fractionsMax\"\n                    [disabled]=\"isInputDisabled()\" />\n            } @else {\n                <p-inputNumber\n                    inputStyleClass=\"mng-column-filter-number-input\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onNumericModelChange($event)\"\n                    (onKeyDown)=\"onNumericInputKeyDown($event)\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [useGrouping]=\"metadata().descriptor.numberUseGrouping\"\n                    [minFractionDigits]=\"metadata().numberConfig?.fractionsMin\"\n                    [maxFractionDigits]=\"metadata().numberConfig?.fractionsMax\"\n                    [disabled]=\"isInputDisabled()\" />\n            }\n        }\n\n        @case (FilterTypeEnum.Boolean) {\n            <p-checkbox [ngModel]=\"filterConstraint()?.displayValue\" binary=\"true\" (ngModelChange)=\"onCheckboxModelChange($event)\"></p-checkbox>\n        }\n        @case (FilterTypeEnum.Date) {\n            @if (filterConstraint()?.displayMatchMode === FilterMatchMode.Between) {\n                <mng-date-range\n                    vertical=\"true\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onDateFilterModelChange($event)\"\n                    [showTime]=\"metadata().dateConfig?.showTime ?? false\"\n                    [showSeconds]=\"metadata().dateConfig?.showSeconds ?? false\"\n                    [dateFormat]=\"metadata().dateConfig?.format\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [disabled]=\"isInputDisabled()\"></mng-date-range>\n            } @else {\n                <p-date-picker\n                    appendTo=\"body\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onDateFilterModelChange($event)\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [showIcon]=\"true\"\n                    [showTime]=\"metadata().dateConfig?.showTime ?? false\"\n                    [showSeconds]=\"metadata().dateConfig?.showSeconds ?? false\"\n                    [dateFormat]=\"metadata().dateConfig?.format\"\n                    [firstDayOfWeek]=\"1\">\n                </p-date-picker>\n            }\n        }\n        @case (FilterTypeEnum.Lookup) {\n            <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n        }\n        @case (FilterTypeEnum.LookupEnum) {\n            <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n        }\n        @default {\n            <input\n                type=\"text\"\n                pInputText\n                class=\"mng-column-filter-string-input\"\n                [value]=\"filterConstraint()?.displayValue\"\n                [disabled]=\"isInputDisabled()\"\n                (input)=\"onTextModelChange($event)\"\n                (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n                [attr.placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [mngInputTrim]=\"metadata().descriptor.trimOption\" />\n        }\n    }\n\n    <ng-template #lookupFilter>\n        @if (descriptorAsLookup(); as lookup) {\n            @switch (lookup.lookupType) {\n                @case (lookupTypeAutocomplete) {\n                    <mng-autocomplete\n                        *mngRerender=\"isMultiselect()\"\n                        [ngModel]=\"filterConstraint()?.displayValue\"\n                        [dataProvider]=\"lookup.dataProvider\"\n                        [optionsTrackProperty]=\"lookup.optionsValueProperty\"\n                        [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                        [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                        [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                        [multiselect]=\"isMultiselect()\"\n                        [autoClear]=\"lookup.autocompleteAutoClear ?? false\"\n                        [openOnFocus]=\"lookup.autocompleteAutoClear ?? true\"\n                        [inlineSearch]=\"lookup.autocompleteInlineSearch ?? false\"\n                        [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                        [className]=\"lookup.className\"\n                        [dropdownClassName]=\"lookup.dropdownClassName\"\n                        [disabled]=\"isInputDisabled()\"\n                        (valueChange)=\"autocompleteFilter($event)\"\n                        [searchTrim]=\"metadata().descriptor.trimOption\">\n                    </mng-autocomplete>\n                }\n                @case (lookupTypeDropdown) {\n                    <mng-dropdown\n                        *mngRerender=\"isMultiselect()\"\n                        [ngModel]=\"filterConstraint()?.displayValue\"\n                        [dataProvider]=\"lookup.dataProvider\"\n                        [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                        [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                        [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                        [multiselect]=\"isMultiselect()\"\n                        [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                        [className]=\"lookup.className\"\n                        [dropdownClassName]=\"lookup.dropdownClassName\"\n                        [showClear]=\"false\"\n                        [changeValueOnBlur]=\"isMultiselect()\"\n                        [disabled]=\"isInputDisabled()\"\n                        (valueChange)=\"dropdownFilter($event)\">\n                    </mng-dropdown>\n                }\n            }\n        }\n    </ng-template>\n\n    @if (matchModes().length > 1) {\n        <button\n            #icon\n            pButton\n            type=\"button\"\n            class=\"mng-button-xs mx-1\"\n            [class.!hidden]=\"!isFilterSet()\"\n            rounded=\"true\"\n            severity=\"primary\"\n            (click)=\"toggleMenu($event)\"\n            (keydown)=\"onToggleButtonKeyDown($event)\">\n            <FilterIcon pButtonIcon />\n        </button>\n    }\n    @if (overlayVisible()) {\n        <div\n            class=\"p-datatable-filter-overlay\"\n            (click)=\"onContentClick()\"\n            [@overlayAnimation]=\"'visible'\"\n            (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n            (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n            (keydown.escape)=\"onEscape()\">\n            <ul class=\"p-datatable-filter-constraint-list\">\n                @for (matchMode of matchModes(); track matchMode; let i = $index) {\n                    <li\n                        class=\"p-datatable-filter-constraint\"\n                        [class.p-datatable-filter-constraint-selected]=\"matchMode.value === filterConstraint()?.displayMatchMode\"\n                        (click)=\"onMatchModeChange(matchMode.value)\"\n                        (keydown)=\"onMatchModeKeyDown($event)\"\n                        (keydown.enter)=\"this.onMatchModeChange(matchMode.value)\"\n                        [attr.tabindex]=\"i === 0 ? '0' : null\">\n                        {{ matchMode.label }}\n                    </li>\n                }\n                <li class=\"p-datatable-filter-constraint-separator\"></li>\n                <li class=\"p-datatable-filter-constraint\" (click)=\"onRowClearItemClick()\" (keydown)=\"onMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">\n                    {{ noFilterLabel }}\n                </li>\n            </ul>\n        </div>\n    }\n</div>\n", styles: [".mng-column-filter-string{min-width:135px}.mng-column-filter-number{min-width:165px}.mng-column-filter-date{min-width:170px}.mng-column-filter-boolean{min-width:80px}.mng-column-filter-lookup,.mng-column-filter-lookupenum{min-width:180px}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: DateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "dateFormat", "className", "required", "disabled", "vertical"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "optionsTrackProperty", "optionsValueProperty", "optionsLabelProperty", "optionsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst", "searchTrim", "disabled"], outputs: ["valueChange", "blur"] }, { kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur", "loading", "disabled", "allowInput", "appendTo", "inlineSearch", "searchTrim"], outputs: ["valueChange", "blur"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "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", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "component", type: FilterIcon, selector: "FilterIcon" }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "component", type: NumberRangeComponent, selector: "mng-number-range", inputs: ["placeholder", "useGrouping", "minFractionDigits", "maxFractionDigits", "required", "disabled", "vertical"], outputs: ["keyDown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: RerenderDirective, selector: "[mngRerender]", inputs: ["mngRerender"] }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "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", "size", "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: ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: ButtonIcon, selector: "[pButtonIcon]" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableColumnFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: TableColumnFilterComponent, isStandalone: true, selector: "mng-table-column-filter", inputs: { metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "icon", first: true, predicate: ["icon"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex items-center\">\n    @switch (metadata().descriptor.filterType) {\n        @case (FilterTypeEnum.Number) {\n            @if (filterConstraint()?.displayMatchMode === 'between') {\n                <mng-number-range\n                    vertical=\"true\"\n                    className=\"mng-column-filter-number-input\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onNumericModelChange($event)\"\n                    (keyDown)=\"onNumericInputKeyDown($event)\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [useGrouping]=\"metadata().descriptor.numberUseGrouping\"\n                    [minFractionDigits]=\"metadata().numberConfig?.fractionsMin\"\n                    [maxFractionDigits]=\"metadata().numberConfig?.fractionsMax\"\n                    [disabled]=\"isInputDisabled()\" />\n            } @else {\n                <p-inputNumber\n                    inputStyleClass=\"mng-column-filter-number-input\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onNumericModelChange($event)\"\n                    (onKeyDown)=\"onNumericInputKeyDown($event)\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [useGrouping]=\"metadata().descriptor.numberUseGrouping\"\n                    [minFractionDigits]=\"metadata().numberConfig?.fractionsMin\"\n                    [maxFractionDigits]=\"metadata().numberConfig?.fractionsMax\"\n                    [disabled]=\"isInputDisabled()\" />\n            }\n        }\n\n        @case (FilterTypeEnum.Boolean) {\n            <p-checkbox [ngModel]=\"filterConstraint()?.displayValue\" binary=\"true\" (ngModelChange)=\"onCheckboxModelChange($event)\"></p-checkbox>\n        }\n        @case (FilterTypeEnum.Date) {\n            @if (filterConstraint()?.displayMatchMode === FilterMatchMode.Between) {\n                <mng-date-range\n                    vertical=\"true\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onDateFilterModelChange($event)\"\n                    [showTime]=\"metadata().dateConfig?.showTime ?? false\"\n                    [showSeconds]=\"metadata().dateConfig?.showSeconds ?? false\"\n                    [dateFormat]=\"metadata().dateConfig?.format\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [disabled]=\"isInputDisabled()\"></mng-date-range>\n            } @else {\n                <p-date-picker\n                    appendTo=\"body\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onDateFilterModelChange($event)\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [showIcon]=\"true\"\n                    [showTime]=\"metadata().dateConfig?.showTime ?? false\"\n                    [showSeconds]=\"metadata().dateConfig?.showSeconds ?? false\"\n                    [dateFormat]=\"metadata().dateConfig?.format\"\n                    [firstDayOfWeek]=\"1\">\n                </p-date-picker>\n            }\n        }\n        @case (FilterTypeEnum.Lookup) {\n            <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n        }\n        @case (FilterTypeEnum.LookupEnum) {\n            <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n        }\n        @default {\n            <input\n                type=\"text\"\n                pInputText\n                class=\"mng-column-filter-string-input\"\n                [value]=\"filterConstraint()?.displayValue\"\n                [disabled]=\"isInputDisabled()\"\n                (input)=\"onTextModelChange($event)\"\n                (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n                [attr.placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [mngInputTrim]=\"metadata().descriptor.trimOption\" />\n        }\n    }\n\n    <ng-template #lookupFilter>\n        @if (descriptorAsLookup(); as lookup) {\n            @switch (lookup.lookupType) {\n                @case (lookupTypeAutocomplete) {\n                    <mng-autocomplete\n                        *mngRerender=\"isMultiselect()\"\n                        [ngModel]=\"filterConstraint()?.displayValue\"\n                        [dataProvider]=\"lookup.dataProvider\"\n                        [optionsTrackProperty]=\"lookup.optionsValueProperty\"\n                        [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                        [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                        [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                        [multiselect]=\"isMultiselect()\"\n                        [autoClear]=\"lookup.autocompleteAutoClear ?? false\"\n                        [openOnFocus]=\"lookup.autocompleteAutoClear ?? true\"\n                        [inlineSearch]=\"lookup.autocompleteInlineSearch ?? false\"\n                        [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                        [className]=\"lookup.className\"\n                        [dropdownClassName]=\"lookup.dropdownClassName\"\n                        [disabled]=\"isInputDisabled()\"\n                        (valueChange)=\"autocompleteFilter($event)\"\n                        [searchTrim]=\"metadata().descriptor.trimOption\">\n                    </mng-autocomplete>\n                }\n                @case (lookupTypeDropdown) {\n                    <mng-dropdown\n                        *mngRerender=\"isMultiselect()\"\n                        [ngModel]=\"filterConstraint()?.displayValue\"\n                        [dataProvider]=\"lookup.dataProvider\"\n                        [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                        [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                        [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                        [multiselect]=\"isMultiselect()\"\n                        [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                        [className]=\"lookup.className\"\n                        [dropdownClassName]=\"lookup.dropdownClassName\"\n                        [showClear]=\"false\"\n                        [changeValueOnBlur]=\"isMultiselect()\"\n                        [disabled]=\"isInputDisabled()\"\n                        (valueChange)=\"dropdownFilter($event)\">\n                    </mng-dropdown>\n                }\n            }\n        }\n    </ng-template>\n\n    @if (matchModes().length > 1) {\n        <button\n            #icon\n            pButton\n            type=\"button\"\n            class=\"mng-button-xs mx-1\"\n            [class.hidden!]=\"!isFilterSet()\"\n            icon=\"pi pi-filter\"\n            rounded=\"true\"\n            severity=\"primary\"\n            (click)=\"toggleMenu($event)\"\n            (keydown)=\"onToggleButtonKeyDown($event)\"></button>\n    }\n    @if (overlayVisible()) {\n        <div\n            class=\"p-datatable-filter-overlay\"\n            (click)=\"onContentClick()\"\n            [@overlayAnimation]=\"'visible'\"\n            (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n            (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n            (keydown.escape)=\"onEscape()\">\n            <ul class=\"p-datatable-filter-constraint-list\">\n                @for (matchMode of matchModes(); track matchMode; let i = $index) {\n                    <li\n                        class=\"p-datatable-filter-constraint\"\n                        [class.p-datatable-filter-constraint-selected]=\"matchMode.value === filterConstraint()?.displayMatchMode\"\n                        (click)=\"onMatchModeChange(matchMode.value)\"\n                        (keydown)=\"onMatchModeKeyDown($event)\"\n                        (keydown.enter)=\"this.onMatchModeChange(matchMode.value)\"\n                        [attr.tabindex]=\"i === 0 ? '0' : null\">\n                        {{ matchMode.label }}\n                    </li>\n                }\n                <li class=\"p-datatable-filter-constraint-separator\"></li>\n                <li class=\"p-datatable-filter-constraint\" (click)=\"onRowClearItemClick()\" (keydown)=\"onMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">\n                    {{ noFilterLabel }}\n                </li>\n            </ul>\n        </div>\n    }\n</div>\n", styles: [".mng-column-filter-string{min-width:135px}.mng-column-filter-number{min-width:165px}.mng-column-filter-date{min-width:170px}.mng-column-filter-boolean{min-width:80px}.mng-column-filter-lookup,.mng-column-filter-lookupenum{min-width:180px}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: DateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "dateFormat", "className", "required", "disabled", "vertical"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "optionsTrackProperty", "optionsValueProperty", "optionsLabelProperty", "optionsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst", "searchTrim", "disabled"], outputs: ["valueChange", "blur"] }, { kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur", "loading", "disabled", "allowInput", "appendTo", "inlineSearch", "searchTrim"], outputs: ["valueChange", "blur"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "component", type: NumberRangeComponent, selector: "mng-number-range", inputs: ["placeholder", "useGrouping", "minFractionDigits", "maxFractionDigits", "required", "disabled", "vertical"], outputs: ["keyDown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: RerenderDirective, selector: "[mngRerender]", inputs: ["mngRerender"] }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], 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: "19.2.10", ngImport: i0, type: TableColumnFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableColumnFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-table-column-filter', imports: [
                         TableModule,
@@ -1020,21 +1019,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         DropdownComponent,
                         InputNumber,
                         InputText,
-                        FilterIcon,
                         InputTrimDirective,
                         NumberRangeComponent,
                         NgTemplateOutlet,
                         Checkbox,
                         RerenderDirective,
                         DatePicker,
-                        ButtonDirective,
-                        ButtonIcon
+                        ButtonDirective
                     ], 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=\"flex items-center\">\n    @switch (metadata().descriptor.filterType) {\n        @case (FilterTypeEnum.Number) {\n            @if (filterConstraint()?.displayMatchMode === 'between') {\n                <mng-number-range\n                    vertical=\"true\"\n                    className=\"mng-column-filter-number-input\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onNumericModelChange($event)\"\n                    (keyDown)=\"onNumericInputKeyDown($event)\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [useGrouping]=\"metadata().descriptor.numberUseGrouping\"\n                    [minFractionDigits]=\"metadata().numberConfig?.fractionsMin\"\n                    [maxFractionDigits]=\"metadata().numberConfig?.fractionsMax\"\n                    [disabled]=\"isInputDisabled()\" />\n            } @else {\n                <p-inputNumber\n                    inputStyleClass=\"mng-column-filter-number-input\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onNumericModelChange($event)\"\n                    (onKeyDown)=\"onNumericInputKeyDown($event)\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [useGrouping]=\"metadata().descriptor.numberUseGrouping\"\n                    [minFractionDigits]=\"metadata().numberConfig?.fractionsMin\"\n                    [maxFractionDigits]=\"metadata().numberConfig?.fractionsMax\"\n                    [disabled]=\"isInputDisabled()\" />\n            }\n        }\n\n        @case (FilterTypeEnum.Boolean) {\n            <p-checkbox [ngModel]=\"filterConstraint()?.displayValue\" binary=\"true\" (ngModelChange)=\"onCheckboxModelChange($event)\"></p-checkbox>\n        }\n        @case (FilterTypeEnum.Date) {\n            @if (filterConstraint()?.displayMatchMode === FilterMatchMode.Between) {\n                <mng-date-range\n                    vertical=\"true\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onDateFilterModelChange($event)\"\n                    [showTime]=\"metadata().dateConfig?.showTime ?? false\"\n                    [showSeconds]=\"metadata().dateConfig?.showSeconds ?? false\"\n                    [dateFormat]=\"metadata().dateConfig?.format\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [disabled]=\"isInputDisabled()\"></mng-date-range>\n            } @else {\n                <p-date-picker\n                    appendTo=\"body\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onDateFilterModelChange($event)\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [showIcon]=\"true\"\n                    [showTime]=\"metadata().dateConfig?.showTime ?? false\"\n                    [showSeconds]=\"metadata().dateConfig?.showSeconds ?? false\"\n                    [dateFormat]=\"metadata().dateConfig?.format\"\n                    [firstDayOfWeek]=\"1\">\n                </p-date-picker>\n            }\n        }\n        @case (FilterTypeEnum.Lookup) {\n            <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n        }\n        @case (FilterTypeEnum.LookupEnum) {\n            <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n        }\n        @default {\n            <input\n                type=\"text\"\n                pInputText\n                class=\"mng-column-filter-string-input\"\n                [value]=\"filterConstraint()?.displayValue\"\n                [disabled]=\"isInputDisabled()\"\n                (input)=\"onTextModelChange($event)\"\n                (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n                [attr.placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [mngInputTrim]=\"metadata().descriptor.trimOption\" />\n        }\n    }\n\n    <ng-template #lookupFilter>\n        @if (descriptorAsLookup(); as lookup) {\n            @switch (lookup.lookupType) {\n                @case (lookupTypeAutocomplete) {\n                    <mng-autocomplete\n                        *mngRerender=\"isMultiselect()\"\n                        [ngModel]=\"filterConstraint()?.displayValue\"\n                        [dataProvider]=\"lookup.dataProvider\"\n                        [optionsTrackProperty]=\"lookup.optionsValueProperty\"\n                        [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                        [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                        [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                        [multiselect]=\"isMultiselect()\"\n                        [autoClear]=\"lookup.autocompleteAutoClear ?? false\"\n                        [openOnFocus]=\"lookup.autocompleteAutoClear ?? true\"\n                        [inlineSearch]=\"lookup.autocompleteInlineSearch ?? false\"\n                        [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                        [className]=\"lookup.className\"\n                        [dropdownClassName]=\"lookup.dropdownClassName\"\n                        [disabled]=\"isInputDisabled()\"\n                        (valueChange)=\"autocompleteFilter($event)\"\n                        [searchTrim]=\"metadata().descriptor.trimOption\">\n                    </mng-autocomplete>\n                }\n                @case (lookupTypeDropdown) {\n                    <mng-dropdown\n                        *mngRerender=\"isMultiselect()\"\n                        [ngModel]=\"filterConstraint()?.displayValue\"\n                        [dataProvider]=\"lookup.dataProvider\"\n                        [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                        [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                        [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                        [multiselect]=\"isMultiselect()\"\n                        [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                        [className]=\"lookup.className\"\n                        [dropdownClassName]=\"lookup.dropdownClassName\"\n                        [showClear]=\"false\"\n                        [changeValueOnBlur]=\"isMultiselect()\"\n                        [disabled]=\"isInputDisabled()\"\n                        (valueChange)=\"dropdownFilter($event)\">\n                    </mng-dropdown>\n                }\n            }\n        }\n    </ng-template>\n\n    @if (matchModes().length > 1) {\n        <button\n            #icon\n            pButton\n            type=\"button\"\n            class=\"mng-button-xs mx-1\"\n            [class.!hidden]=\"!isFilterSet()\"\n            rounded=\"true\"\n            severity=\"primary\"\n            (click)=\"toggleMenu($event)\"\n            (keydown)=\"onToggleButtonKeyDown($event)\">\n            <FilterIcon pButtonIcon />\n        </button>\n    }\n    @if (overlayVisible()) {\n        <div\n            class=\"p-datatable-filter-overlay\"\n            (click)=\"onContentClick()\"\n            [@overlayAnimation]=\"'visible'\"\n            (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n            (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n            (keydown.escape)=\"onEscape()\">\n            <ul class=\"p-datatable-filter-constraint-list\">\n                @for (matchMode of matchModes(); track matchMode; let i = $index) {\n                    <li\n                        class=\"p-datatable-filter-constraint\"\n                        [class.p-datatable-filter-constraint-selected]=\"matchMode.value === filterConstraint()?.displayMatchMode\"\n                        (click)=\"onMatchModeChange(matchMode.value)\"\n                        (keydown)=\"onMatchModeKeyDown($event)\"\n                        (keydown.enter)=\"this.onMatchModeChange(matchMode.value)\"\n                        [attr.tabindex]=\"i === 0 ? '0' : null\">\n                        {{ matchMode.label }}\n                    </li>\n                }\n                <li class=\"p-datatable-filter-constraint-separator\"></li>\n                <li class=\"p-datatable-filter-constraint\" (click)=\"onRowClearItemClick()\" (keydown)=\"onMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">\n                    {{ noFilterLabel }}\n                </li>\n            </ul>\n        </div>\n    }\n</div>\n", styles: [".mng-column-filter-string{min-width:135px}.mng-column-filter-number{min-width:165px}.mng-column-filter-date{min-width:170px}.mng-column-filter-boolean{min-width:80px}.mng-column-filter-lookup,.mng-column-filter-lookupenum{min-width:180px}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex items-center\">\n    @switch (metadata().descriptor.filterType) {\n        @case (FilterTypeEnum.Number) {\n            @if (filterConstraint()?.displayMatchMode === 'between') {\n                <mng-number-range\n                    vertical=\"true\"\n                    className=\"mng-column-filter-number-input\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onNumericModelChange($event)\"\n                    (keyDown)=\"onNumericInputKeyDown($event)\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [useGrouping]=\"metadata().descriptor.numberUseGrouping\"\n                    [minFractionDigits]=\"metadata().numberConfig?.fractionsMin\"\n                    [maxFractionDigits]=\"metadata().numberConfig?.fractionsMax\"\n                    [disabled]=\"isInputDisabled()\" />\n            } @else {\n                <p-inputNumber\n                    inputStyleClass=\"mng-column-filter-number-input\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onNumericModelChange($event)\"\n                    (onKeyDown)=\"onNumericInputKeyDown($event)\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [useGrouping]=\"metadata().descriptor.numberUseGrouping\"\n                    [minFractionDigits]=\"metadata().numberConfig?.fractionsMin\"\n                    [maxFractionDigits]=\"metadata().numberConfig?.fractionsMax\"\n                    [disabled]=\"isInputDisabled()\" />\n            }\n        }\n\n        @case (FilterTypeEnum.Boolean) {\n            <p-checkbox [ngModel]=\"filterConstraint()?.displayValue\" binary=\"true\" (ngModelChange)=\"onCheckboxModelChange($event)\"></p-checkbox>\n        }\n        @case (FilterTypeEnum.Date) {\n            @if (filterConstraint()?.displayMatchMode === FilterMatchMode.Between) {\n                <mng-date-range\n                    vertical=\"true\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onDateFilterModelChange($event)\"\n                    [showTime]=\"metadata().dateConfig?.showTime ?? false\"\n                    [showSeconds]=\"metadata().dateConfig?.showSeconds ?? false\"\n                    [dateFormat]=\"metadata().dateConfig?.format\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [disabled]=\"isInputDisabled()\"></mng-date-range>\n            } @else {\n                <p-date-picker\n                    appendTo=\"body\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onDateFilterModelChange($event)\"\n                    [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [showIcon]=\"true\"\n                    [showTime]=\"metadata().dateConfig?.showTime ?? false\"\n                    [showSeconds]=\"metadata().dateConfig?.showSeconds ?? false\"\n                    [dateFormat]=\"metadata().dateConfig?.format\"\n                    [firstDayOfWeek]=\"1\">\n                </p-date-picker>\n            }\n        }\n        @case (FilterTypeEnum.Lookup) {\n            <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n        }\n        @case (FilterTypeEnum.LookupEnum) {\n            <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n        }\n        @default {\n            <input\n                type=\"text\"\n                pInputText\n                class=\"mng-column-filter-string-input\"\n                [value]=\"filterConstraint()?.displayValue\"\n                [disabled]=\"isInputDisabled()\"\n                (input)=\"onTextModelChange($event)\"\n                (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n                [attr.placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [mngInputTrim]=\"metadata().descriptor.trimOption\" />\n        }\n    }\n\n    <ng-template #lookupFilter>\n        @if (descriptorAsLookup(); as lookup) {\n            @switch (lookup.lookupType) {\n                @case (lookupTypeAutocomplete) {\n                    <mng-autocomplete\n                        *mngRerender=\"isMultiselect()\"\n                        [ngModel]=\"filterConstraint()?.displayValue\"\n                        [dataProvider]=\"lookup.dataProvider\"\n                        [optionsTrackProperty]=\"lookup.optionsValueProperty\"\n                        [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                        [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                        [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                        [multiselect]=\"isMultiselect()\"\n                        [autoClear]=\"lookup.autocompleteAutoClear ?? false\"\n                        [openOnFocus]=\"lookup.autocompleteAutoClear ?? true\"\n                        [inlineSearch]=\"lookup.autocompleteInlineSearch ?? false\"\n                        [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                        [className]=\"lookup.className\"\n                        [dropdownClassName]=\"lookup.dropdownClassName\"\n                        [disabled]=\"isInputDisabled()\"\n                        (valueChange)=\"autocompleteFilter($event)\"\n                        [searchTrim]=\"metadata().descriptor.trimOption\">\n                    </mng-autocomplete>\n                }\n                @case (lookupTypeDropdown) {\n                    <mng-dropdown\n                        *mngRerender=\"isMultiselect()\"\n                        [ngModel]=\"filterConstraint()?.displayValue\"\n                        [dataProvider]=\"lookup.dataProvider\"\n                        [optionsValueProperty]=\"lookup.optionsValueProperty\"\n                        [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n                        [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n                        [multiselect]=\"isMultiselect()\"\n                        [placeholder]=\"metadata().descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                        [className]=\"lookup.className\"\n                        [dropdownClassName]=\"lookup.dropdownClassName\"\n                        [showClear]=\"false\"\n                        [changeValueOnBlur]=\"isMultiselect()\"\n                        [disabled]=\"isInputDisabled()\"\n                        (valueChange)=\"dropdownFilter($event)\">\n                    </mng-dropdown>\n                }\n            }\n        }\n    </ng-template>\n\n    @if (matchModes().length > 1) {\n        <button\n            #icon\n            pButton\n            type=\"button\"\n            class=\"mng-button-xs mx-1\"\n            [class.hidden!]=\"!isFilterSet()\"\n            icon=\"pi pi-filter\"\n            rounded=\"true\"\n            severity=\"primary\"\n            (click)=\"toggleMenu($event)\"\n            (keydown)=\"onToggleButtonKeyDown($event)\"></button>\n    }\n    @if (overlayVisible()) {\n        <div\n            class=\"p-datatable-filter-overlay\"\n            (click)=\"onContentClick()\"\n            [@overlayAnimation]=\"'visible'\"\n            (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n            (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n            (keydown.escape)=\"onEscape()\">\n            <ul class=\"p-datatable-filter-constraint-list\">\n                @for (matchMode of matchModes(); track matchMode; let i = $index) {\n                    <li\n                        class=\"p-datatable-filter-constraint\"\n                        [class.p-datatable-filter-constraint-selected]=\"matchMode.value === filterConstraint()?.displayMatchMode\"\n                        (click)=\"onMatchModeChange(matchMode.value)\"\n                        (keydown)=\"onMatchModeKeyDown($event)\"\n                        (keydown.enter)=\"this.onMatchModeChange(matchMode.value)\"\n                        [attr.tabindex]=\"i === 0 ? '0' : null\">\n                        {{ matchMode.label }}\n                    </li>\n                }\n                <li class=\"p-datatable-filter-constraint-separator\"></li>\n                <li class=\"p-datatable-filter-constraint\" (click)=\"onRowClearItemClick()\" (keydown)=\"onMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">\n                    {{ noFilterLabel }}\n                </li>\n            </ul>\n        </div>\n    }\n</div>\n", styles: [".mng-column-filter-string{min-width:135px}.mng-column-filter-number{min-width:165px}.mng-column-filter-date{min-width:170px}.mng-column-filter-boolean{min-width:80px}.mng-column-filter-lookup,.mng-column-filter-lookupenum{min-width:180px}\n"] }]
         }], ctorParameters: () => [] });
 
 var columnFilter_component = /*#__PURE__*/Object.freeze({
@@ -1058,16 +1055,16 @@ class TableColumnValueComponent {
         this.getterPipe = new GetterPipe();
         this.templatePipe = new TemplatePipe();
         this.jsonPathPipe = new JsonPathPipe();
-        this.descriptor = input.required();
-        this.item = input.required();
-        this.styleMaxWidth = computed(() => this.descriptor().maxWidth ?? null);
+        this.descriptor = input.required(...(ngDevMode ? [{ debugName: "descriptor" }] : []));
+        this.item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+        this.styleMaxWidth = computed(() => this.descriptor().maxWidth ?? null, ...(ngDevMode ? [{ debugName: "styleMaxWidth" }] : []));
         this.className = computed(() => {
             let className = 'nowrap';
             if (this.descriptor().columnDisplayType === ColumnDisplayTypeEnum.String && this.descriptor().isMultiline) {
                 className += ' multiline';
             }
             return className;
-        });
+        }, ...(ngDevMode ? [{ debugName: "className" }] : []));
         this.value = computed(() => {
             let value = this.jsonPathPipe.transform(this.item(), `$.${this.descriptor().property}`);
             if (typeof this.descriptor().getter === 'function') {
@@ -1077,14 +1074,14 @@ class TableColumnValueComponent {
                 value = this.templatePipe.transform(value, this.descriptor().template);
             }
             return value;
-        });
+        }, ...(ngDevMode ? [{ debugName: "value" }] : []));
         this.currency = computed(() => {
             if (this.descriptor().columnDisplayType === ColumnDisplayTypeEnum.Currency) {
                 return this.descriptor().currencyProperty ? this.item()[this.descriptor().currencyProperty] : (this.descriptor().currencyCode ?? 'EUR');
             }
             return;
-        });
-        this.hasCopyToClipboard = computed(() => this.descriptor().hasCopyToClipboard && this.value() != null);
+        }, ...(ngDevMode ? [{ debugName: "currency" }] : []));
+        this.hasCopyToClipboard = computed(() => this.descriptor().hasCopyToClipboard && this.value() != null, ...(ngDevMode ? [{ debugName: "hasCopyToClipboard" }] : []));
         this.componentInputs = computed(() => {
             const inputs = {
                 value: this.value(),
@@ -1095,7 +1092,7 @@ class TableColumnValueComponent {
                 return { ...inputs, ...this.descriptor().customComponentInputs };
             }
             return inputs;
-        });
+        }, ...(ngDevMode ? [{ debugName: "componentInputs" }] : []));
     }
     copyToClipboard(event) {
         event.stopPropagation();
@@ -1109,12 +1106,12 @@ class TableColumnValueComponent {
         const message = this.translate.instant('mngTable.copyNotificationMessage', { value });
         this.messageService.add({ severity: 'info', summary: title, detail: message });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableColumnValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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]=\"componentInputs()\"></ng-container>\n    }\n}\n@if (hasCopyToClipboard()) {\n    <div class=\"help-buttons\">\n        <button pButton 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: "pipe", type: 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: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableColumnValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", 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 [mngComponent]=\"descriptor().customComponentType!\" [inputs]=\"componentInputs()\"></ng-container>\n    }\n}\n@if (hasCopyToClipboard()) {\n    <div class=\"help-buttons\">\n        <button pButton 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: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: BooleanPipe, name: "mngBoolean" }, { kind: "pipe", type: EnumPipe, name: "mngEnum" }, { 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: "19.2.10", ngImport: i0, type: TableColumnValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableColumnValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-table-column-value', imports: [TranslatePipe, BooleanPipe, EnumPipe, ComponentDirective, DecimalPipe, CurrencyPipe, DatePipe, ButtonDirective, Tooltip], 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]=\"componentInputs()\"></ng-container>\n    }\n}\n@if (hasCopyToClipboard()) {\n    <div class=\"help-buttons\">\n        <button pButton 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: [{ selector: 'mng-table-column-value', imports: [TranslatePipe, BooleanPipe, EnumPipe, ComponentDirective, DecimalPipe, CurrencyPipe, DatePipe, ButtonDirective, Tooltip], 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 [mngComponent]=\"descriptor().customComponentType!\" [inputs]=\"componentInputs()\"></ng-container>\n    }\n}\n@if (hasCopyToClipboard()) {\n    <div class=\"help-buttons\">\n        <button pButton 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 {
@@ -1175,10 +1172,10 @@ class FilterValuePipe {
         this.subscription?.unsubscribe();
         this.subject.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FilterValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: FilterValuePipe, isStandalone: true, name: "mngFilterValue" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FilterValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: FilterValuePipe, isStandalone: true, name: "mngFilterValue" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FilterValuePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FilterValuePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'mngFilterValue',
@@ -1189,14 +1186,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 class TableFilterActiveTagComponent {
     constructor() {
         this.FilterMatchMode = FilterMatchMode;
-        this.model = input.required();
-        this.filter = input.required();
+        this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
+        this.filter = input.required(...(ngDevMode ? [{ debugName: "filter" }] : []));
         this.edit = output();
         this.remove = output();
-        this.label = computed(() => this.getPropertyLabelKey(this.filter().metadata.descriptor));
-        this.matchMode = computed(() => this.filter().displayMatchMode);
-        this.matchModeSymbol = computed(() => `mngFilterActiveTag.matchMode.${this.matchMode()}`);
-        this.value = computed(() => this.filter().displayValue);
+        this.label = computed(() => this.getPropertyLabelKey(this.filter().metadata.descriptor), ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.matchMode = computed(() => this.filter().displayMatchMode, ...(ngDevMode ? [{ debugName: "matchMode" }] : []));
+        this.matchModeSymbol = computed(() => `mngFilterActiveTag.matchMode.${this.matchMode()}`, ...(ngDevMode ? [{ debugName: "matchModeSymbol" }] : []));
+        this.value = computed(() => this.filter().displayValue, ...(ngDevMode ? [{ debugName: "value" }] : []));
     }
     onRemove(event) {
         event.stopPropagation();
@@ -1224,10 +1221,10 @@ class TableFilterActiveTagComponent {
         }
         return labelKey;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableFilterActiveTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: TableFilterActiveTagComponent, isStandalone: true, selector: "mng-table-filter-active-tag", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { edit: "edit", remove: "remove" }, ngImport: i0, template: "<p-tag severity=\"secondary\" styleClass=\"mr-1 mng-tag-outlined\">\n    <div class=\"flex items-center gap-2 p-1 cursor-pointer\" (click)=\"onEdit($event)\">\n        <span>{{ label() | translate }}</span>\n        @if (matchMode() === FilterMatchMode.Between) {\n            <span class=\"font-semibold\">{{ value()?.[0] | mngFilterValue: filter().metadata.descriptor | async }}</span>\n            <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n            <span class=\"font-semibold\">{{ value()?.[1] | mngFilterValue: filter().metadata.descriptor | async }}</span>\n        } @else {\n            <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n            <span class=\"font-semibold\">{{ value() | mngFilterValue: filter().metadata.descriptor | async }}</span>\n            @if (filter().caseSensitive) {\n                <small class=\"border-solid border rounded 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", styles: ["mng-table-filter-active-tag.p-tag.p-tag-secondary.mng-tag-outlined{background-color:unset;border:1px solid var(--mng-tag-secondary-outlined-border)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FilterValuePipe, name: "mngFilterValue" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableFilterActiveTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: TableFilterActiveTagComponent, isStandalone: true, selector: "mng-table-filter-active-tag", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { edit: "edit", remove: "remove" }, ngImport: i0, template: "<p-tag severity=\"secondary\" styleClass=\"mr-1 mng-tag-outlined\">\n    <div class=\"flex items-center gap-2 p-1 cursor-pointer\" (click)=\"onEdit($event)\">\n        <span>{{ label() | translate }}</span>\n        @if (matchMode() === FilterMatchMode.Between) {\n            <span class=\"font-semibold\">{{ value()?.[0] | mngFilterValue: filter().metadata.descriptor | async }}</span>\n            <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n            <span class=\"font-semibold\">{{ value()?.[1] | mngFilterValue: filter().metadata.descriptor | async }}</span>\n        } @else {\n            <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n            <span class=\"font-semibold\">{{ value() | mngFilterValue: filter().metadata.descriptor | async }}</span>\n            @if (filter().caseSensitive) {\n                <small class=\"border-solid border rounded 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", styles: ["mng-table-filter-active-tag.p-tag.p-tag-secondary.mng-tag-outlined{background-color:unset;border:1px solid var(--mng-tag-secondary-outlined-border)}\n"], dependencies: [{ kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FilterValuePipe, name: "mngFilterValue" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableFilterActiveTagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableFilterActiveTagComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-table-filter-active-tag', imports: [TranslatePipe, FilterValuePipe, AsyncPipe, Tag], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<p-tag severity=\"secondary\" styleClass=\"mr-1 mng-tag-outlined\">\n    <div class=\"flex items-center gap-2 p-1 cursor-pointer\" (click)=\"onEdit($event)\">\n        <span>{{ label() | translate }}</span>\n        @if (matchMode() === FilterMatchMode.Between) {\n            <span class=\"font-semibold\">{{ value()?.[0] | mngFilterValue: filter().metadata.descriptor | async }}</span>\n            <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n            <span class=\"font-semibold\">{{ value()?.[1] | mngFilterValue: filter().metadata.descriptor | async }}</span>\n        } @else {\n            <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n            <span class=\"font-semibold\">{{ value() | mngFilterValue: filter().metadata.descriptor | async }}</span>\n            @if (filter().caseSensitive) {\n                <small class=\"border-solid border rounded 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", styles: ["mng-table-filter-active-tag.p-tag.p-tag-secondary.mng-tag-outlined{background-color:unset;border:1px solid var(--mng-tag-secondary-outlined-border)}\n"] }]
         }] });
@@ -1240,15 +1237,15 @@ class TableFilterFormComponent {
         this.FilterMatchMode = FilterMatchMode;
         this.elementRef = inject(ElementRef);
         this.translate = inject(TranslateService);
-        this.title = input();
-        this.metadata = input.required();
-        this.genericDescriptor = input();
-        this.model = input.required();
-        this.filter = input();
-        this.overlay = input();
-        this.disabledProperties = input([]);
-        this.enableCaseSensitive = input(true);
-        this.propertySearch = input(false, { transform: booleanAttribute });
+        this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+        this.metadata = input.required(...(ngDevMode ? [{ debugName: "metadata" }] : []));
+        this.genericDescriptor = input(...(ngDevMode ? [undefined, { debugName: "genericDescriptor" }] : []));
+        this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
+        this.filter = input(...(ngDevMode ? [undefined, { debugName: "filter" }] : []));
+        this.overlay = input(...(ngDevMode ? [undefined, { debugName: "overlay" }] : []));
+        this.disabledProperties = input([], ...(ngDevMode ? [{ debugName: "disabledProperties" }] : []));
+        this.enableCaseSensitive = input(true, ...(ngDevMode ? [{ debugName: "enableCaseSensitive" }] : []));
+        this.propertySearch = input(false, ...(ngDevMode ? [{ debugName: "propertySearch", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         this.apply = output();
         this.propertyOptionsWithTranslations = computed(() => {
             const disabledProperties = this.disabledProperties();
@@ -1260,11 +1257,11 @@ class TableFilterFormComponent {
                     disabled: !filter && disabledProperties.includes(d.descriptor.property)
                 };
             }) ?? []);
-        });
+        }, ...(ngDevMode ? [{ debugName: "propertyOptionsWithTranslations" }] : []));
         this.selectedFilterMetadata = computed(() => {
             const property = this.propertyModel();
             return this.metadata().find(d => d.descriptor.property === property);
-        });
+        }, ...(ngDevMode ? [{ debugName: "selectedFilterMetadata" }] : []));
         // change value lookup function to include the property name of the generic filter
         this.genericValueDataProvider = computed(() => {
             const genericValueProvider = this.genericDescriptor()?.valueLookup;
@@ -1285,7 +1282,7 @@ class TableFilterFormComponent {
                 });
             }
             return;
-        });
+        }, ...(ngDevMode ? [{ debugName: "genericValueDataProvider" }] : []));
         this.selectedDescriptorAsLookup = computed(() => {
             const filterDescriptor = this.selectedFilterMetadata()?.descriptor;
             return filterDescriptor !== undefined &&
@@ -1293,18 +1290,18 @@ class TableFilterFormComponent {
                 (filterDescriptor.filterType === FilterTypeEnum.Lookup || filterDescriptor.filterType === FilterTypeEnum.LookupEnum)
                 ? filterDescriptor
                 : undefined;
-        });
-        this.isEdit = computed(() => this.filter() != null);
-        this.formSubmitted = signal(false);
-        this.formErrorMessage = signal([]);
+        }, ...(ngDevMode ? [{ debugName: "selectedDescriptorAsLookup" }] : []));
+        this.isEdit = computed(() => this.filter() != null, ...(ngDevMode ? [{ debugName: "isEdit" }] : []));
+        this.formSubmitted = signal(false, ...(ngDevMode ? [{ debugName: "formSubmitted" }] : []));
+        this.formErrorMessage = signal([], ...(ngDevMode ? [{ debugName: "formErrorMessage" }] : []));
         // 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.isMultiselect = computed(() => this.matchModeModel() === FilterMatchMode.In || this.matchModeModel() === FilterMatchMode.NotIn);
+        this.propertyModel = signal(null, ...(ngDevMode ? [{ debugName: "propertyModel" }] : []));
+        this.matchModeModel = signal(null, ...(ngDevMode ? [{ debugName: "matchModeModel" }] : []));
+        this.valueModel = signal(null, ...(ngDevMode ? [{ debugName: "valueModel" }] : []));
+        this.caseSensitiveModel = signal(false, ...(ngDevMode ? [{ debugName: "caseSensitiveModel" }] : []));
+        this.isMultiselect = computed(() => this.matchModeModel() === FilterMatchMode.In || this.matchModeModel() === FilterMatchMode.NotIn, ...(ngDevMode ? [{ debugName: "isMultiselect" }] : []));
         effectWithDeps([this.filter], ([edit]) => {
             if (edit) {
                 this.resetForm({
@@ -1398,10 +1395,10 @@ class TableFilterFormComponent {
         }
         return labelKey;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableFilterFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: TableFilterFormComponent, isStandalone: true, selector: "mng-table-filter-form", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null }, genericDescriptor: { classPropertyName: "genericDescriptor", publicName: "genericDescriptor", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, disabledProperties: { classPropertyName: "disabledProperties", publicName: "disabledProperties", isSignal: true, isRequired: false, transformFunction: null }, enableCaseSensitive: { classPropertyName: "enableCaseSensitive", publicName: "enableCaseSensitive", isSignal: true, isRequired: false, transformFunction: null }, propertySearch: { classPropertyName: "propertySearch", publicName: "propertySearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, host: { classAttribute: "flex grow" }, 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-col items-center lg:flex-row gap-4\">\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"property\"\n                id=\"property\"\n                tabindex=\"1\"\n                #propertyControl=\"ngModel\"\n                [(ngModel)]=\"propertyModel\"\n                [options]=\"propertyOptionsWithTranslations()\"\n                optionsValueProperty=\"property\"\n                optionsDisabledProperty=\"disabled\"\n                optionsLabelProperty=\"label\"\n                [placeholder]=\"'mngFilter.property' | translate\"\n                [optionsLabelTranslate]=\"!propertySearch()\"\n                [inlineSearch]=\"propertySearch()\"\n                required=\"true\"\n                className=\"w-full\"\n                [disabled]=\"isEdit()\"\n                [appendTo]=\"null\" />\n        </div>\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"matchMode\"\n                id=\"matchMode\"\n                [(ngModel)]=\"matchModeModel\"\n                className=\"w-full\"\n                [options]=\"selectedFilterMetadata()?.matchModes ?? []\"\n                [placeholder]=\"'mngFilter.matchMode' | translate\"\n                [disabled]=\"!propertyControl.value\"\n                class=\"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-col\">\n                @switch (selectedFilterMetadata()?.descriptor?.filterType) {\n                    @case (FilterTypeEnum.Number) {\n                        @if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-number-range\n                                className=\"mng-column-filter-number-input\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping ?? false\"\n                                [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n                                required=\"true\" />\n                        } @else {\n                            <p-inputNumber\n                                inputStyleClass=\"mng-column-filter-number-input\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [styleClass]=\"'w-full'\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping\"\n                                [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\" />\n                        }\n                    }\n\n                    @case (FilterTypeEnum.Boolean) {\n                        <p-checkbox [(ngModel)]=\"valueModel\" [disabled]=\"!matchModeModel()\" name=\"value\" binary=\"true\" required=\"true\" />\n                    }\n                    @case (FilterTypeEnum.Date) {\n                        @if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-date-range\n                                [(ngModel)]=\"valueModel\"\n                                name=\"value\"\n                                [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime ?? false\"\n                                [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds ?? false\"\n                                [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                required=\"true\"></mng-date-range>\n                        } @else {\n                            <p-date-picker\n                                appendTo=\"body\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [styleClass]=\"'w-full'\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [showIcon]=\"true\"\n                                [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime ?? false\"\n                                [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds ?? false\"\n                                [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n                                [firstDayOfWeek]=\"1\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\">\n                            </p-date-picker>\n                        }\n                    }\n                    @case (FilterTypeEnum.Lookup) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @case (FilterTypeEnum.LookupEnum) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @default {\n                        @if (selectedFilterMetadata()?.descriptor?.genericValueProvider && genericValueDataProvider()) {\n                            <div class=\"flex\">\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"genericValueDataProvider()\"\n                                    [className]=\"selectedFilterMetadata()?.descriptor?.className + ' ' + (enableCaseSensitive() ? '!rounded-r-none' : '')\"\n                                    [dropdownClassName]=\"selectedFilterMetadata()?.descriptor?.dropdownClassName\"\n                                    [placeholder]=\"valueModel() ? undefined : ('mngFilter.value' | translate)\"\n                                    allowInput=\"true\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\" />\n                                @if (enableCaseSensitive()) {\n                                    <p-toggle-button\n                                        [(ngModel)]=\"caseSensitiveModel\"\n                                        [disabled]=\"!matchModeModel()\"\n                                        name=\"caseSensitive\"\n                                        styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n                                        onLabel=\"Aa\"\n                                        offLabel=\"Aa\" />\n                                }\n                            </div>\n                        } @else {\n                            <div class=\"flex\">\n                                <input\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    type=\"text\"\n                                    pInputText\n                                    class=\"mng-column-filter-string-input w-full\"\n                                    [class.!rounded-r-none]=\"enableCaseSensitive()\"\n                                    [attr.placeholder]=\"'mngFilter.value' | translate\"\n                                    [mngInputTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    required=\"true\" />\n                                @if (enableCaseSensitive()) {\n                                    <p-toggle-button\n                                        [(ngModel)]=\"caseSensitiveModel\"\n                                        [disabled]=\"!matchModeModel()\"\n                                        name=\"caseSensitive\"\n                                        styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n                                        onLabel=\"Aa\"\n                                        offLabel=\"Aa\" />\n                                }\n                            </div>\n                        }\n                    }\n                }\n                <ng-template #lookupFilter>\n                    @if (selectedDescriptorAsLookup(); as lookupFilterDescriptor) {\n                        @switch (lookupFilterDescriptor.lookupType) {\n                            @case (lookupTypeAutocomplete) {\n                                <mng-autocomplete\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsTrackProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [multiselect]=\"isMultiselect()\"\n                                    [autoClear]=\"lookupFilterDescriptor.autocompleteAutoClear ?? false\"\n                                    [openOnFocus]=\"lookupFilterDescriptor.autocompleteAutoClear ?? true\"\n                                    [inlineSearch]=\"lookupFilterDescriptor.autocompleteInlineSearch ?? false\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    [searchTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    required=\"true\">\n                                </mng-autocomplete>\n                            }\n                            @case (lookupTypeDropdown) {\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [multiselect]=\"isMultiselect()\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className + ' w-full'\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    showClear=\"false\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\">\n                                </mng-dropdown>\n                            }\n                        }\n                    } @else if (selectedFilterMetadata()?.descriptor?.isGenericFilter && genericValueDataProvider()) {\n                        <mng-dropdown\n                            [(ngModel)]=\"valueModel\"\n                            name=\"value\"\n                            [dataProvider]=\"genericValueDataProvider()\"\n                            [placeholder]=\"'mngFilter.value' | translate\"\n                            showClear=\"false\"\n                            [disabled]=\"!matchModeModel()\"\n                            [appendTo]=\"null\"\n                            required=\"true\">\n                        </mng-dropdown>\n                    }\n                </ng-template>\n            </div>\n        }\n        <div class=\"flex justify-end\">\n            <button pButton type=\"submit\" class=\"self-end\">\n                {{ (filter() ? 'general.apply' : 'general.add') | translate }}\n            </button>\n        </div>\n    </form>\n    @if (formSubmitted() && filterForm.invalid) {\n        @for (message of formErrorMessage(); track message) {\n            <p-message [severity]=\"message.severity\" [text]=\"message.detail\" [icon]=\"message.icon\" styleClass=\"mt-2\" />\n        }\n    }\n</div>\n", styles: ["::ng-deep .mng-toggle-button-addon-right button,::ng-deep .mng-toggle-button-addon-right button.p-togglebutton-checked{border-color:var(--p-select-border-color)!important;border-left:none!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}\n"], dependencies: [{ kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur", "loading", "disabled", "allowInput", "appendTo", "inlineSearch", "searchTrim"], outputs: ["valueChange", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: 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", "vertical"], outputs: ["keyDown"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "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", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: DateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "dateFormat", "className", "required", "disabled", "vertical"] }, { 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: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "size", "iconPos", "autofocus", "allowEmpty"], outputs: ["onChange"] }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "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", "size", "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: ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableFilterFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: TableFilterFormComponent, isStandalone: true, selector: "mng-table-filter-form", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null }, genericDescriptor: { classPropertyName: "genericDescriptor", publicName: "genericDescriptor", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, disabledProperties: { classPropertyName: "disabledProperties", publicName: "disabledProperties", isSignal: true, isRequired: false, transformFunction: null }, enableCaseSensitive: { classPropertyName: "enableCaseSensitive", publicName: "enableCaseSensitive", isSignal: true, isRequired: false, transformFunction: null }, propertySearch: { classPropertyName: "propertySearch", publicName: "propertySearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, host: { classAttribute: "flex grow" }, 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-col items-center lg:flex-row gap-4\">\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"property\"\n                id=\"property\"\n                tabindex=\"1\"\n                #propertyControl=\"ngModel\"\n                [(ngModel)]=\"propertyModel\"\n                [options]=\"propertyOptionsWithTranslations()\"\n                optionsValueProperty=\"property\"\n                optionsDisabledProperty=\"disabled\"\n                optionsLabelProperty=\"label\"\n                [placeholder]=\"'mngFilter.property' | translate\"\n                [optionsLabelTranslate]=\"!propertySearch()\"\n                [inlineSearch]=\"propertySearch()\"\n                required=\"true\"\n                className=\"w-full\"\n                [disabled]=\"isEdit()\"\n                [appendTo]=\"null\" />\n        </div>\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"matchMode\"\n                id=\"matchMode\"\n                [(ngModel)]=\"matchModeModel\"\n                className=\"w-full\"\n                [options]=\"selectedFilterMetadata()?.matchModes ?? []\"\n                [placeholder]=\"'mngFilter.matchMode' | translate\"\n                [disabled]=\"!propertyControl.value\"\n                class=\"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-col\">\n                @switch (selectedFilterMetadata()?.descriptor?.filterType) {\n                    @case (FilterTypeEnum.Number) {\n                        @if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-number-range\n                                className=\"mng-column-filter-number-input\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping ?? false\"\n                                [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n                                required=\"true\" />\n                        } @else {\n                            <p-inputNumber\n                                inputStyleClass=\"mng-column-filter-number-input\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [styleClass]=\"'w-full'\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping\"\n                                [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\" />\n                        }\n                    }\n\n                    @case (FilterTypeEnum.Boolean) {\n                        <p-checkbox [(ngModel)]=\"valueModel\" [disabled]=\"!matchModeModel()\" name=\"value\" binary=\"true\" required=\"true\" />\n                    }\n                    @case (FilterTypeEnum.Date) {\n                        @if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-date-range\n                                [(ngModel)]=\"valueModel\"\n                                name=\"value\"\n                                [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime ?? false\"\n                                [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds ?? false\"\n                                [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                required=\"true\"></mng-date-range>\n                        } @else {\n                            <p-date-picker\n                                appendTo=\"body\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [styleClass]=\"'w-full'\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [showIcon]=\"true\"\n                                [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime ?? false\"\n                                [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds ?? false\"\n                                [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n                                [firstDayOfWeek]=\"1\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\">\n                            </p-date-picker>\n                        }\n                    }\n                    @case (FilterTypeEnum.Lookup) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @case (FilterTypeEnum.LookupEnum) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @default {\n                        @if (selectedFilterMetadata()?.descriptor?.genericValueProvider && genericValueDataProvider()) {\n                            <div class=\"flex\">\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"genericValueDataProvider()\"\n                                    [className]=\"selectedFilterMetadata()?.descriptor?.className + ' ' + (enableCaseSensitive() ? 'rounded-r-none!' : '')\"\n                                    [dropdownClassName]=\"selectedFilterMetadata()?.descriptor?.dropdownClassName\"\n                                    [placeholder]=\"valueModel() ? undefined : ('mngFilter.value' | translate)\"\n                                    allowInput=\"true\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\" />\n                                @if (enableCaseSensitive()) {\n                                    <p-toggle-button\n                                        [(ngModel)]=\"caseSensitiveModel\"\n                                        [disabled]=\"!matchModeModel()\"\n                                        name=\"caseSensitive\"\n                                        styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n                                        onLabel=\"Aa\"\n                                        offLabel=\"Aa\" />\n                                }\n                            </div>\n                        } @else {\n                            <div class=\"flex\">\n                                <input\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    type=\"text\"\n                                    pInputText\n                                    class=\"mng-column-filter-string-input w-full\"\n                                    [class.rounded-r-none!]=\"enableCaseSensitive()\"\n                                    [attr.placeholder]=\"'mngFilter.value' | translate\"\n                                    [mngInputTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    required=\"true\" />\n                                @if (enableCaseSensitive()) {\n                                    <p-toggle-button\n                                        [(ngModel)]=\"caseSensitiveModel\"\n                                        [disabled]=\"!matchModeModel()\"\n                                        name=\"caseSensitive\"\n                                        styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n                                        onLabel=\"Aa\"\n                                        offLabel=\"Aa\" />\n                                }\n                            </div>\n                        }\n                    }\n                }\n                <ng-template #lookupFilter>\n                    @if (selectedDescriptorAsLookup(); as lookupFilterDescriptor) {\n                        @switch (lookupFilterDescriptor.lookupType) {\n                            @case (lookupTypeAutocomplete) {\n                                <mng-autocomplete\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsTrackProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [multiselect]=\"isMultiselect()\"\n                                    [autoClear]=\"lookupFilterDescriptor.autocompleteAutoClear ?? false\"\n                                    [openOnFocus]=\"lookupFilterDescriptor.autocompleteAutoClear ?? true\"\n                                    [inlineSearch]=\"lookupFilterDescriptor.autocompleteInlineSearch ?? false\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    [searchTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    required=\"true\">\n                                </mng-autocomplete>\n                            }\n                            @case (lookupTypeDropdown) {\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [multiselect]=\"isMultiselect()\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className + ' w-full'\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    showClear=\"false\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\">\n                                </mng-dropdown>\n                            }\n                        }\n                    } @else if (selectedFilterMetadata()?.descriptor?.isGenericFilter && genericValueDataProvider()) {\n                        <mng-dropdown\n                            [(ngModel)]=\"valueModel\"\n                            name=\"value\"\n                            [dataProvider]=\"genericValueDataProvider()\"\n                            [placeholder]=\"'mngFilter.value' | translate\"\n                            showClear=\"false\"\n                            [disabled]=\"!matchModeModel()\"\n                            [appendTo]=\"null\"\n                            required=\"true\">\n                        </mng-dropdown>\n                    }\n                </ng-template>\n            </div>\n        }\n        <div class=\"flex justify-end\">\n            <button pButton type=\"submit\" class=\"self-end\">\n                {{ (filter() ? 'general.apply' : 'general.add') | translate }}\n            </button>\n        </div>\n    </form>\n    @if (formSubmitted() && filterForm.invalid) {\n        @for (message of formErrorMessage(); track message) {\n            <p-message [severity]=\"message.severity\" [text]=\"message.detail\" [icon]=\"message.icon\" styleClass=\"mt-2\" />\n        }\n    }\n</div>\n", styles: [":is() .mng-toggle-button-addon-right button,:is() .mng-toggle-button-addon-right button.p-togglebutton-checked{border-color:var(--p-select-border-color)!important;border-left:none!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}\n"], dependencies: [{ kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur", "loading", "disabled", "allowInput", "appendTo", "inlineSearch", "searchTrim"], outputs: ["valueChange", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "component", type: NumberRangeComponent, selector: "mng-number-range", inputs: ["placeholder", "useGrouping", "minFractionDigits", "maxFractionDigits", "required", "disabled", "vertical"], outputs: ["keyDown"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: DateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "dateFormat", "className", "required", "disabled", "vertical"] }, { 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: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableFilterFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableFilterFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-table-filter-form', imports: [
                         DropdownComponent,
@@ -1421,7 +1418,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         ButtonDirective
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'flex grow'
-                    }, 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-col items-center lg:flex-row gap-4\">\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"property\"\n                id=\"property\"\n                tabindex=\"1\"\n                #propertyControl=\"ngModel\"\n                [(ngModel)]=\"propertyModel\"\n                [options]=\"propertyOptionsWithTranslations()\"\n                optionsValueProperty=\"property\"\n                optionsDisabledProperty=\"disabled\"\n                optionsLabelProperty=\"label\"\n                [placeholder]=\"'mngFilter.property' | translate\"\n                [optionsLabelTranslate]=\"!propertySearch()\"\n                [inlineSearch]=\"propertySearch()\"\n                required=\"true\"\n                className=\"w-full\"\n                [disabled]=\"isEdit()\"\n                [appendTo]=\"null\" />\n        </div>\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"matchMode\"\n                id=\"matchMode\"\n                [(ngModel)]=\"matchModeModel\"\n                className=\"w-full\"\n                [options]=\"selectedFilterMetadata()?.matchModes ?? []\"\n                [placeholder]=\"'mngFilter.matchMode' | translate\"\n                [disabled]=\"!propertyControl.value\"\n                class=\"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-col\">\n                @switch (selectedFilterMetadata()?.descriptor?.filterType) {\n                    @case (FilterTypeEnum.Number) {\n                        @if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-number-range\n                                className=\"mng-column-filter-number-input\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping ?? false\"\n                                [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n                                required=\"true\" />\n                        } @else {\n                            <p-inputNumber\n                                inputStyleClass=\"mng-column-filter-number-input\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [styleClass]=\"'w-full'\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping\"\n                                [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\" />\n                        }\n                    }\n\n                    @case (FilterTypeEnum.Boolean) {\n                        <p-checkbox [(ngModel)]=\"valueModel\" [disabled]=\"!matchModeModel()\" name=\"value\" binary=\"true\" required=\"true\" />\n                    }\n                    @case (FilterTypeEnum.Date) {\n                        @if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-date-range\n                                [(ngModel)]=\"valueModel\"\n                                name=\"value\"\n                                [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime ?? false\"\n                                [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds ?? false\"\n                                [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                required=\"true\"></mng-date-range>\n                        } @else {\n                            <p-date-picker\n                                appendTo=\"body\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [styleClass]=\"'w-full'\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [showIcon]=\"true\"\n                                [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime ?? false\"\n                                [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds ?? false\"\n                                [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n                                [firstDayOfWeek]=\"1\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\">\n                            </p-date-picker>\n                        }\n                    }\n                    @case (FilterTypeEnum.Lookup) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @case (FilterTypeEnum.LookupEnum) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @default {\n                        @if (selectedFilterMetadata()?.descriptor?.genericValueProvider && genericValueDataProvider()) {\n                            <div class=\"flex\">\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"genericValueDataProvider()\"\n                                    [className]=\"selectedFilterMetadata()?.descriptor?.className + ' ' + (enableCaseSensitive() ? '!rounded-r-none' : '')\"\n                                    [dropdownClassName]=\"selectedFilterMetadata()?.descriptor?.dropdownClassName\"\n                                    [placeholder]=\"valueModel() ? undefined : ('mngFilter.value' | translate)\"\n                                    allowInput=\"true\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\" />\n                                @if (enableCaseSensitive()) {\n                                    <p-toggle-button\n                                        [(ngModel)]=\"caseSensitiveModel\"\n                                        [disabled]=\"!matchModeModel()\"\n                                        name=\"caseSensitive\"\n                                        styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n                                        onLabel=\"Aa\"\n                                        offLabel=\"Aa\" />\n                                }\n                            </div>\n                        } @else {\n                            <div class=\"flex\">\n                                <input\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    type=\"text\"\n                                    pInputText\n                                    class=\"mng-column-filter-string-input w-full\"\n                                    [class.!rounded-r-none]=\"enableCaseSensitive()\"\n                                    [attr.placeholder]=\"'mngFilter.value' | translate\"\n                                    [mngInputTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    required=\"true\" />\n                                @if (enableCaseSensitive()) {\n                                    <p-toggle-button\n                                        [(ngModel)]=\"caseSensitiveModel\"\n                                        [disabled]=\"!matchModeModel()\"\n                                        name=\"caseSensitive\"\n                                        styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n                                        onLabel=\"Aa\"\n                                        offLabel=\"Aa\" />\n                                }\n                            </div>\n                        }\n                    }\n                }\n                <ng-template #lookupFilter>\n                    @if (selectedDescriptorAsLookup(); as lookupFilterDescriptor) {\n                        @switch (lookupFilterDescriptor.lookupType) {\n                            @case (lookupTypeAutocomplete) {\n                                <mng-autocomplete\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsTrackProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [multiselect]=\"isMultiselect()\"\n                                    [autoClear]=\"lookupFilterDescriptor.autocompleteAutoClear ?? false\"\n                                    [openOnFocus]=\"lookupFilterDescriptor.autocompleteAutoClear ?? true\"\n                                    [inlineSearch]=\"lookupFilterDescriptor.autocompleteInlineSearch ?? false\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    [searchTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    required=\"true\">\n                                </mng-autocomplete>\n                            }\n                            @case (lookupTypeDropdown) {\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [multiselect]=\"isMultiselect()\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className + ' w-full'\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    showClear=\"false\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\">\n                                </mng-dropdown>\n                            }\n                        }\n                    } @else if (selectedFilterMetadata()?.descriptor?.isGenericFilter && genericValueDataProvider()) {\n                        <mng-dropdown\n                            [(ngModel)]=\"valueModel\"\n                            name=\"value\"\n                            [dataProvider]=\"genericValueDataProvider()\"\n                            [placeholder]=\"'mngFilter.value' | translate\"\n                            showClear=\"false\"\n                            [disabled]=\"!matchModeModel()\"\n                            [appendTo]=\"null\"\n                            required=\"true\">\n                        </mng-dropdown>\n                    }\n                </ng-template>\n            </div>\n        }\n        <div class=\"flex justify-end\">\n            <button pButton type=\"submit\" class=\"self-end\">\n                {{ (filter() ? 'general.apply' : 'general.add') | translate }}\n            </button>\n        </div>\n    </form>\n    @if (formSubmitted() && filterForm.invalid) {\n        @for (message of formErrorMessage(); track message) {\n            <p-message [severity]=\"message.severity\" [text]=\"message.detail\" [icon]=\"message.icon\" styleClass=\"mt-2\" />\n        }\n    }\n</div>\n", styles: ["::ng-deep .mng-toggle-button-addon-right button,::ng-deep .mng-toggle-button-addon-right button.p-togglebutton-checked{border-color:var(--p-select-border-color)!important;border-left:none!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}\n"] }]
+                    }, template: "<div>\n    <div>\n        <h5>{{ filter() ? ('mngFilter.titleEdit' | translate) : ('mngFilter.titleAdd' | translate) }}</h5>\n    </div>\n    <form #filterForm=\"ngForm\" (ngSubmit)=\"onFormSubmit(filterForm)\" class=\"flex flex-col items-center lg:flex-row gap-4\">\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"property\"\n                id=\"property\"\n                tabindex=\"1\"\n                #propertyControl=\"ngModel\"\n                [(ngModel)]=\"propertyModel\"\n                [options]=\"propertyOptionsWithTranslations()\"\n                optionsValueProperty=\"property\"\n                optionsDisabledProperty=\"disabled\"\n                optionsLabelProperty=\"label\"\n                [placeholder]=\"'mngFilter.property' | translate\"\n                [optionsLabelTranslate]=\"!propertySearch()\"\n                [inlineSearch]=\"propertySearch()\"\n                required=\"true\"\n                className=\"w-full\"\n                [disabled]=\"isEdit()\"\n                [appendTo]=\"null\" />\n        </div>\n        <div class=\"w-full lg:w-auto\">\n            <mng-dropdown\n                name=\"matchMode\"\n                id=\"matchMode\"\n                [(ngModel)]=\"matchModeModel\"\n                className=\"w-full\"\n                [options]=\"selectedFilterMetadata()?.matchModes ?? []\"\n                [placeholder]=\"'mngFilter.matchMode' | translate\"\n                [disabled]=\"!propertyControl.value\"\n                class=\"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-col\">\n                @switch (selectedFilterMetadata()?.descriptor?.filterType) {\n                    @case (FilterTypeEnum.Number) {\n                        @if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-number-range\n                                className=\"mng-column-filter-number-input\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping ?? false\"\n                                [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n                                required=\"true\" />\n                        } @else {\n                            <p-inputNumber\n                                inputStyleClass=\"mng-column-filter-number-input\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [styleClass]=\"'w-full'\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping\"\n                                [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n                                [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\" />\n                        }\n                    }\n\n                    @case (FilterTypeEnum.Boolean) {\n                        <p-checkbox [(ngModel)]=\"valueModel\" [disabled]=\"!matchModeModel()\" name=\"value\" binary=\"true\" required=\"true\" />\n                    }\n                    @case (FilterTypeEnum.Date) {\n                        @if (matchModeModel() === FilterMatchMode.Between) {\n                            <mng-date-range\n                                [(ngModel)]=\"valueModel\"\n                                name=\"value\"\n                                [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime ?? false\"\n                                [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds ?? false\"\n                                [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                required=\"true\"></mng-date-range>\n                        } @else {\n                            <p-date-picker\n                                appendTo=\"body\"\n                                name=\"value\"\n                                [(ngModel)]=\"valueModel\"\n                                [styleClass]=\"'w-full'\"\n                                [placeholder]=\"'mngFilter.value' | translate\"\n                                [showIcon]=\"true\"\n                                [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime ?? false\"\n                                [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds ?? false\"\n                                [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n                                [firstDayOfWeek]=\"1\"\n                                [disabled]=\"!matchModeModel()\"\n                                required=\"true\">\n                            </p-date-picker>\n                        }\n                    }\n                    @case (FilterTypeEnum.Lookup) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @case (FilterTypeEnum.LookupEnum) {\n                        <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n                    }\n                    @default {\n                        @if (selectedFilterMetadata()?.descriptor?.genericValueProvider && genericValueDataProvider()) {\n                            <div class=\"flex\">\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"genericValueDataProvider()\"\n                                    [className]=\"selectedFilterMetadata()?.descriptor?.className + ' ' + (enableCaseSensitive() ? 'rounded-r-none!' : '')\"\n                                    [dropdownClassName]=\"selectedFilterMetadata()?.descriptor?.dropdownClassName\"\n                                    [placeholder]=\"valueModel() ? undefined : ('mngFilter.value' | translate)\"\n                                    allowInput=\"true\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\" />\n                                @if (enableCaseSensitive()) {\n                                    <p-toggle-button\n                                        [(ngModel)]=\"caseSensitiveModel\"\n                                        [disabled]=\"!matchModeModel()\"\n                                        name=\"caseSensitive\"\n                                        styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n                                        onLabel=\"Aa\"\n                                        offLabel=\"Aa\" />\n                                }\n                            </div>\n                        } @else {\n                            <div class=\"flex\">\n                                <input\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    type=\"text\"\n                                    pInputText\n                                    class=\"mng-column-filter-string-input w-full\"\n                                    [class.rounded-r-none!]=\"enableCaseSensitive()\"\n                                    [attr.placeholder]=\"'mngFilter.value' | translate\"\n                                    [mngInputTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    required=\"true\" />\n                                @if (enableCaseSensitive()) {\n                                    <p-toggle-button\n                                        [(ngModel)]=\"caseSensitiveModel\"\n                                        [disabled]=\"!matchModeModel()\"\n                                        name=\"caseSensitive\"\n                                        styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n                                        onLabel=\"Aa\"\n                                        offLabel=\"Aa\" />\n                                }\n                            </div>\n                        }\n                    }\n                }\n                <ng-template #lookupFilter>\n                    @if (selectedDescriptorAsLookup(); as lookupFilterDescriptor) {\n                        @switch (lookupFilterDescriptor.lookupType) {\n                            @case (lookupTypeAutocomplete) {\n                                <mng-autocomplete\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsTrackProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [multiselect]=\"isMultiselect()\"\n                                    [autoClear]=\"lookupFilterDescriptor.autocompleteAutoClear ?? false\"\n                                    [openOnFocus]=\"lookupFilterDescriptor.autocompleteAutoClear ?? true\"\n                                    [inlineSearch]=\"lookupFilterDescriptor.autocompleteInlineSearch ?? false\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    [searchTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    required=\"true\">\n                                </mng-autocomplete>\n                            }\n                            @case (lookupTypeDropdown) {\n                                <mng-dropdown\n                                    [(ngModel)]=\"valueModel\"\n                                    name=\"value\"\n                                    [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n                                    [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n                                    [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n                                    [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n                                    [multiselect]=\"isMultiselect()\"\n                                    [placeholder]=\"'mngFilter.value' | translate\"\n                                    [className]=\"lookupFilterDescriptor.className + ' w-full'\"\n                                    [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n                                    showClear=\"false\"\n                                    [disabled]=\"!matchModeModel()\"\n                                    [appendTo]=\"null\"\n                                    required=\"true\">\n                                </mng-dropdown>\n                            }\n                        }\n                    } @else if (selectedFilterMetadata()?.descriptor?.isGenericFilter && genericValueDataProvider()) {\n                        <mng-dropdown\n                            [(ngModel)]=\"valueModel\"\n                            name=\"value\"\n                            [dataProvider]=\"genericValueDataProvider()\"\n                            [placeholder]=\"'mngFilter.value' | translate\"\n                            showClear=\"false\"\n                            [disabled]=\"!matchModeModel()\"\n                            [appendTo]=\"null\"\n                            required=\"true\">\n                        </mng-dropdown>\n                    }\n                </ng-template>\n            </div>\n        }\n        <div class=\"flex justify-end\">\n            <button pButton type=\"submit\" class=\"self-end\">\n                {{ (filter() ? 'general.apply' : 'general.add') | translate }}\n            </button>\n        </div>\n    </form>\n    @if (formSubmitted() && filterForm.invalid) {\n        @for (message of formErrorMessage(); track message) {\n            <p-message [severity]=\"message.severity\" [text]=\"message.detail\" [icon]=\"message.icon\" styleClass=\"mt-2\" />\n        }\n    }\n</div>\n", styles: [":is() .mng-toggle-button-addon-right button,:is() .mng-toggle-button-addon-right button.p-togglebutton-checked{border-color:var(--p-select-border-color)!important;border-left:none!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}\n"] }]
         }], ctorParameters: () => [] });
 
 class TableFilterOverlayWithTagComponent {
@@ -1430,21 +1427,21 @@ class TableFilterOverlayWithTagComponent {
         this.primeTable = inject(Table);
         this.tableData = inject((TableDataService));
         this.tableConfig = inject(COMMONS_TABLE_FEATURE_CONFIG_IT, { optional: true });
-        this.metadata = input.required();
-        this.genericFilterDescriptor = input();
-        this.model = input.required();
-        this.enableSearch = input(false, { transform: booleanAttribute });
-        this.search = input();
-        this.searchLimitWordMax = input(undefined);
-        this.enableCaseSensitive = input(true, { transform: booleanAttribute });
+        this.metadata = input.required(...(ngDevMode ? [{ debugName: "metadata" }] : []));
+        this.genericFilterDescriptor = input(...(ngDevMode ? [undefined, { debugName: "genericFilterDescriptor" }] : []));
+        this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
+        this.enableSearch = input(false, ...(ngDevMode ? [{ debugName: "enableSearch", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.search = input(...(ngDevMode ? [undefined, { debugName: "search" }] : []));
+        this.searchLimitWordMax = input(undefined, ...(ngDevMode ? [{ debugName: "searchLimitWordMax" }] : []));
+        this.enableCaseSensitive = input(true, ...(ngDevMode ? [{ debugName: "enableCaseSensitive", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         this.filterOverlay = viewChild.required(Popover);
-        this.filterFormComponent = viewChild(TableFilterFormComponent);
-        this.templates = contentChildren(TemplateDirective);
-        this.titleTemplate = computed(() => findTemplateByName([...this.templates()], 'title'));
+        this.filterFormComponent = viewChild(TableFilterFormComponent, ...(ngDevMode ? [{ debugName: "filterFormComponent" }] : []));
+        this.templates = contentChildren(TemplateDirective, ...(ngDevMode ? [{ debugName: "templates" }] : []));
+        this.titleTemplate = computed(() => findTemplateByName([...this.templates()], 'title'), ...(ngDevMode ? [{ debugName: "titleTemplate" }] : []));
         this.filters = computed(() => {
             return this.getInitialFilters(this.tableData.filterMeta(), this.metadata());
-        });
-        this.showFilterButton = computed(() => this.metadata().length > 0);
+        }, ...(ngDevMode ? [{ debugName: "filters" }] : []));
+        this.showFilterButton = computed(() => this.metadata().length > 0, ...(ngDevMode ? [{ debugName: "showFilterButton" }] : []));
         this.activeFilters = computed(() => {
             const filterEntry = this.filters();
             return this.metadata()
@@ -1458,20 +1455,20 @@ class TableFilterOverlayWithTagComponent {
                         (filter.value !== undefined && filter.displayValue !== undefined)));
             })
                 .map(d => filterEntry[d.descriptor.property]);
-        });
-        this.activeFilterProperties = computed(() => this.activeFilters().map(f => f.metadata.descriptor.property));
-        this.filterEdit = signal(undefined);
+        }, ...(ngDevMode ? [{ debugName: "activeFilters" }] : []));
+        this.activeFilterProperties = computed(() => this.activeFilters().map(f => f.metadata.descriptor.property), ...(ngDevMode ? [{ debugName: "activeFilterProperties" }] : []));
+        this.filterEdit = signal(undefined, ...(ngDevMode ? [{ debugName: "filterEdit" }] : []));
         // global search model
-        this.searchValue = computed(() => this.search()?.value);
-        this.searchCaseSensitive = computed(() => this.search()?.caseSensitive);
-        this.searchWordLimitMaxError = signal(false);
+        this.searchValue = computed(() => this.search()?.value, ...(ngDevMode ? [{ debugName: "searchValue" }] : []));
+        this.searchCaseSensitive = computed(() => this.search()?.caseSensitive, ...(ngDevMode ? [{ debugName: "searchCaseSensitive" }] : []));
+        this.searchWordLimitMaxError = signal(false, ...(ngDevMode ? [{ debugName: "searchWordLimitMaxError" }] : []));
         this.searchWordLimitMaxCmp = computed(() => {
             const inputLimit = this.searchLimitWordMax();
             if (inputLimit !== undefined) {
                 return inputLimit;
             }
             return this.tableConfig?.searchLimitMaxWords !== undefined ? this.tableConfig?.searchLimitMaxWords : TableFilterOverlayWithTagComponent.SEARCH_WORD_LIMIT_MAX;
-        });
+        }, ...(ngDevMode ? [{ debugName: "searchWordLimitMaxCmp" }] : []));
         this.searchValueSubject = new BehaviorSubject(undefined);
         this.searchCaseSensitiveSubject = new BehaviorSubject(undefined);
         // UI utilities
@@ -1592,10 +1589,10 @@ class TableFilterOverlayWithTagComponent {
         this.primeTable.filters['global'] = { ...{ value: searchQuery, matchMode: 'contains', caseSensitive: caseSensitive } };
         this.primeTable._filter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableFilterOverlayWithTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: TableFilterOverlayWithTagComponent, isStandalone: true, selector: "mng-table-filter-overlay-with-tag", inputs: { metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null }, genericFilterDescriptor: { classPropertyName: "genericFilterDescriptor", publicName: "genericFilterDescriptor", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchLimitWordMax: { classPropertyName: "searchLimitWordMax", publicName: "searchLimitWordMax", isSignal: true, isRequired: false, transformFunction: null }, enableCaseSensitive: { classPropertyName: "enableCaseSensitive", publicName: "enableCaseSensitive", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "templates", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "filterOverlay", first: true, predicate: Popover, descendants: true, isSignal: true }, { propertyName: "filterFormComponent", first: true, predicate: TableFilterFormComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex items-center grow\">\n    @if (titleTemplate()) {\n        <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n    }\n    @if (showFilterButton()) {\n        <p-button\n            icon=\"pi pi-filter\"\n            rounded=\"true\"\n            [severity]=\"activeFilters().length > 0 ? 'primary' : 'secondary'\"\n            size=\"small\"\n            (click)=\"onFilterAdd($event)\"\n            [styleClass]=\"'my-1 mr-2' + (titleTemplate() ? ' ml-3' : '')\">\n        </p-button>\n    }\n    @if (enableSearch()) {\n        <div class=\"col-span-4\" [ngClass]=\"{'ml-3': !showFilterButton() && titleTemplate()}\">\n            <span class=\"p-input-icon-left w-full\">\n                <p-iconfield>\n                    <p-inputicon class=\"pi pi-search\" />\n                    <input\n                        [ngModel]=\"searchValue()\"\n                        (ngModelChange)=\"onSearchChange($event)\"\n                        name=\"globalSearch\"\n                        type=\"text\"\n                        pInputText\n                        class=\"search-input w-full\"\n                        [ngClass]=\"{'ng-invalid': searchWordLimitMaxError()}\"\n                        [attr.placeholder]=\"'mngFilter.search.input' | translate\"\n                        [placeholder]=\"'mngFilter.search.input' | translate\" />\n                </p-iconfield>\n                @if (enableCaseSensitive()) {\n                    <span class=\"toggle-button-input\">\n                        <p-toggleButton\n                            styleClass=\"ml-1 p-1 p-button-sm\"\n                            [ngModel]=\"searchCaseSensitive()\"\n                            (ngModelChange)=\"onSearchCaseSensitiveChange($event)\"\n                            onLabel=\"Aa\"\n                            offLabel=\"Aa\" />\n                    </span>\n                }\n            </span>\n            @if (searchWordLimitMaxError()) {\n                <small class=\"p-error block\">\n                    {{ 'mngFilter.search.maxWordsExceededMessage' | translate }}\n                </small>\n            }\n        </div>\n    }\n</div>\n@if (activeFilters().length > 0) {\n    <div class=\"flex items-center flex-wrap mt-2\">\n        @for (filter of activeFilters(); track filter.metadata.descriptor.property) {\n            <mng-table-filter-active-tag [model]=\"model()\" [filter]=\"filter\" (edit)=\"onFilterEdit($event)\" (remove)=\"onFilterRemove($event)\" />\n        }\n    </div>\n}\n<p-popover #op showCloseIcon=\"true\" (onHide)=\"onOverlayHide()\" appendTo=\"body\">\n    <mng-table-filter-form\n        [model]=\"model()\"\n        [metadata]=\"metadata()\"\n        [genericDescriptor]=\"genericFilterDescriptor()\"\n        [filter]=\"filterEdit()\"\n        [disabledProperties]=\"activeFilterProperties()\"\n        [propertySearch]=\"genericFilterDescriptor()?.propertySearch\"\n        [overlay]=\"op\"\n        [enableCaseSensitive]=\"enableCaseSensitive()\"\n        (apply)=\"onFilterFormApply($event)\" />\n</p-popover>\n", styles: [".toggle-button-input{position:absolute;right:.35rem;top:50%;transform:translateY(-50%)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: TableFilterFormComponent, selector: "mng-table-filter-form", inputs: ["title", "metadata", "genericDescriptor", "model", "filter", "overlay", "disabledProperties", "enableCaseSensitive", "propertySearch"], outputs: ["apply"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: TableFilterActiveTagComponent, selector: "mng-table-filter-active-tag", inputs: ["model", "filter"], outputs: ["edit", "remove"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "size", "iconPos", "autofocus", "allowEmpty"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableFilterOverlayWithTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: TableFilterOverlayWithTagComponent, isStandalone: true, selector: "mng-table-filter-overlay-with-tag", inputs: { metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null }, genericFilterDescriptor: { classPropertyName: "genericFilterDescriptor", publicName: "genericFilterDescriptor", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchLimitWordMax: { classPropertyName: "searchLimitWordMax", publicName: "searchLimitWordMax", isSignal: true, isRequired: false, transformFunction: null }, enableCaseSensitive: { classPropertyName: "enableCaseSensitive", publicName: "enableCaseSensitive", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "templates", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "filterOverlay", first: true, predicate: Popover, descendants: true, isSignal: true }, { propertyName: "filterFormComponent", first: true, predicate: TableFilterFormComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex items-center grow\">\n    @if (titleTemplate()) {\n        <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n    }\n    @if (showFilterButton()) {\n        <p-button\n            icon=\"pi pi-filter\"\n            rounded=\"true\"\n            [severity]=\"activeFilters().length > 0 ? 'primary' : 'secondary'\"\n            size=\"small\"\n            (click)=\"onFilterAdd($event)\"\n            [styleClass]=\"'my-1 mr-2' + (titleTemplate() ? ' ml-3' : '')\">\n        </p-button>\n    }\n    @if (enableSearch()) {\n        <div class=\"col-span-4\" [ngClass]=\"{'ml-3': !showFilterButton() && titleTemplate()}\">\n            <span class=\"p-input-icon-left w-full\">\n                <p-iconfield>\n                    <p-inputicon class=\"pi pi-search\" />\n                    <input\n                        [ngModel]=\"searchValue()\"\n                        (ngModelChange)=\"onSearchChange($event)\"\n                        name=\"globalSearch\"\n                        type=\"text\"\n                        pInputText\n                        class=\"search-input w-full\"\n                        [ngClass]=\"{'ng-invalid': searchWordLimitMaxError()}\"\n                        [attr.placeholder]=\"'mngFilter.search.input' | translate\"\n                        [placeholder]=\"'mngFilter.search.input' | translate\" />\n                </p-iconfield>\n                @if (enableCaseSensitive()) {\n                    <span class=\"toggle-button-input\">\n                        <p-toggleButton\n                            styleClass=\"ml-1 p-1 p-button-sm\"\n                            [ngModel]=\"searchCaseSensitive()\"\n                            (ngModelChange)=\"onSearchCaseSensitiveChange($event)\"\n                            onLabel=\"Aa\"\n                            offLabel=\"Aa\" />\n                    </span>\n                }\n            </span>\n            @if (searchWordLimitMaxError()) {\n                <small class=\"p-error block\">\n                    {{ 'mngFilter.search.maxWordsExceededMessage' | translate }}\n                </small>\n            }\n        </div>\n    }\n</div>\n@if (activeFilters().length > 0) {\n    <div class=\"flex items-center flex-wrap mt-2\">\n        @for (filter of activeFilters(); track filter.metadata.descriptor.property) {\n            <mng-table-filter-active-tag [model]=\"model()\" [filter]=\"filter\" (edit)=\"onFilterEdit($event)\" (remove)=\"onFilterRemove($event)\" />\n        }\n    </div>\n}\n<p-popover #op showCloseIcon=\"true\" (onHide)=\"onOverlayHide()\" appendTo=\"body\">\n    <mng-table-filter-form\n        [model]=\"model()\"\n        [metadata]=\"metadata()\"\n        [genericDescriptor]=\"genericFilterDescriptor()\"\n        [filter]=\"filterEdit()\"\n        [disabledProperties]=\"activeFilterProperties()\"\n        [propertySearch]=\"genericFilterDescriptor()?.propertySearch\"\n        [overlay]=\"op\"\n        [enableCaseSensitive]=\"enableCaseSensitive()\"\n        (apply)=\"onFilterFormApply($event)\" />\n</p-popover>\n", styles: [".toggle-button-input{position:absolute;right:.35rem;top:50%;transform:translateY(-50%)}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "component", type: TableFilterFormComponent, selector: "mng-table-filter-form", inputs: ["title", "metadata", "genericDescriptor", "model", "filter", "overlay", "disabledProperties", "enableCaseSensitive", "propertySearch"], outputs: ["apply"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: TableFilterActiveTagComponent, selector: "mng-table-filter-active-tag", inputs: ["model", "filter"], outputs: ["edit", "remove"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableFilterOverlayWithTagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableFilterOverlayWithTagComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mng-table-filter-overlay-with-tag', imports: [
                         TranslatePipe,
@@ -1639,8 +1636,8 @@ function tableNotificationError(translate, messageService, table, error) {
 }
 
 class LocaleDefaultRowClassPipe {
-    constructor(injector) {
-        this.injector = injector;
+    constructor() {
+        this.injector = inject(Injector);
     }
     transform(value, descriptor, item) {
         if (descriptor?.isLocalized) {
@@ -1650,16 +1647,16 @@ class LocaleDefaultRowClassPipe {
         }
         return value ?? '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LocaleDefaultRowClassPipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: LocaleDefaultRowClassPipe, isStandalone: true, name: "mngLocaleDefaultRowClass" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LocaleDefaultRowClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: LocaleDefaultRowClassPipe, isStandalone: true, name: "mngLocaleDefaultRowClass" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LocaleDefaultRowClassPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LocaleDefaultRowClassPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'mngLocaleDefaultRowClass',
                     pure: true
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }] });
+        }] });
 
 class TableColumnFilterClassPipe {
     transform(value, filter, isEnabled) {
@@ -1671,10 +1668,10 @@ class TableColumnFilterClassPipe {
             return strValue;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableColumnFilterClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: TableColumnFilterClassPipe, isStandalone: true, name: "mngTableColumnFilterClass" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableColumnFilterClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: TableColumnFilterClassPipe, isStandalone: true, name: "mngTableColumnFilterClass" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableColumnFilterClassPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableColumnFilterClassPipe, decorators: [{
             type: Pipe,
             args: [{
                     pure: true,
@@ -1700,17 +1697,17 @@ class TablePreferencesService {
         this.localstorageKey = computed(() => {
             const descriptor = this.#metadata.descriptor();
             return descriptor.model.i18nBaseKey ? generateTableLayoutPrefsKey(descriptor.model.i18nBaseKey, this.#router.url, descriptor.identifier) : null;
-        });
-        this.#layoutPrefsSaveCnt = signal(0);
+        }, ...(ngDevMode ? [{ debugName: "localstorageKey" }] : []));
+        this.#layoutPrefsSaveCnt = signal(0, ...(ngDevMode ? [{ debugName: "#layoutPrefsSaveCnt" }] : []));
         this.layoutPreferences = computed(() => {
             const lsKey = this.localstorageKey();
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const cnt = this.#layoutPrefsSaveCnt(); // needed to force updates on user changes
             const layoutPrefs = lsKey ? this.#storageService.getItem(TableMetadataService.cmpTypeName, lsKey) : undefined;
             return layoutPrefs ?? { columnWidths: {} };
-        });
+        }, ...(ngDevMode ? [{ debugName: "layoutPreferences" }] : []));
         // columns
-        this.columnsWithPrefs = computed(() => this.#computeColumnsWithLayout());
+        this.columnsWithPrefs = computed(() => this.#computeColumnsWithLayout(), ...(ngDevMode ? [{ debugName: "columnsWithPrefs" }] : []));
     }
     #router;
     #storageService;
@@ -1820,10 +1817,10 @@ class TablePreferencesService {
         }
         return columns.sort((a, b) => (a.orderIdx !== undefined && b.orderIdx !== undefined ? a.orderIdx - b.orderIdx : 0));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TablePreferencesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TablePreferencesService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TablePreferencesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TablePreferencesService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TablePreferencesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TablePreferencesService, decorators: [{
             type: Injectable
         }] });
 
@@ -1846,19 +1843,19 @@ class TableComponent {
         this.prefs = inject(TablePreferencesService);
         this.data = inject((TableDataService));
         // descriptor
-        this.descriptorInput = input.required({ alias: 'descriptor' });
+        this.descriptorInput = input.required(...(ngDevMode ? [{ debugName: "descriptorInput", alias: 'descriptor' }] : [{ alias: 'descriptor' }]));
         // data source inputs
-        this.items = input();
-        this.result = input();
-        this.loadingInput = input(undefined, { alias: 'loading', transform: booleanOrUndefinedAttribute });
-        this.dataProvider = input();
+        this.items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
+        this.result = input(...(ngDevMode ? [undefined, { debugName: "result" }] : []));
+        this.loadingInput = input(undefined, ...(ngDevMode ? [{ debugName: "loadingInput", alias: 'loading', transform: booleanOrUndefinedAttribute }] : [{ alias: 'loading', transform: booleanOrUndefinedAttribute }]));
+        this.dataProvider = input(...(ngDevMode ? [undefined, { debugName: "dataProvider" }] : []));
         // extra features input
-        this.useQueryParams = input(false, { transform: booleanAttribute });
-        this.cellClickEnabled = input(true, { transform: booleanAttribute });
-        this.selectionMode = input('multiple');
-        this.selectionEnabled = input(false, { transform: booleanAttribute });
-        this.rowReorderEnabledInput = input(true, { alias: 'rowReorderEnabled', transform: booleanAttribute });
-        this.rowReorderEnabled = computed(() => this.rowReorderEnabledInput() && this.metadata.descriptor().rowReorderable);
+        this.useQueryParams = input(false, ...(ngDevMode ? [{ debugName: "useQueryParams", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.cellClickEnabled = input(true, ...(ngDevMode ? [{ debugName: "cellClickEnabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.selectionMode = input('multiple', ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
+        this.selectionEnabled = input(false, ...(ngDevMode ? [{ debugName: "selectionEnabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.rowReorderEnabledInput = input(true, ...(ngDevMode ? [{ debugName: "rowReorderEnabledInput", alias: 'rowReorderEnabled', transform: booleanAttribute }] : [{ alias: 'rowReorderEnabled', transform: booleanAttribute }]));
+        this.rowReorderEnabled = computed(() => this.rowReorderEnabledInput() && this.metadata.descriptor().rowReorderable, ...(ngDevMode ? [{ debugName: "rowReorderEnabled" }] : []));
         this.expandedRowKeys = computed(() => {
             const descriptor = this.metadata.descriptor();
             if (typeof descriptor.isRowExpanded === 'string') {
@@ -1874,20 +1871,20 @@ class TableComponent {
                 }, {});
             }
             return {};
-        });
+        }, ...(ngDevMode ? [{ debugName: "expandedRowKeys" }] : []));
         // 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.metadata.descriptor().title);
-        this.isCaptionVisible = computed(() => this.hasTitleDisplay() || this.overlayWithTagFilters().length > 0 || this.metadata.descriptor().search);
+        this.columnLastMinWidth = input(...(ngDevMode ? [undefined, { debugName: "columnLastMinWidth" }] : []));
+        this.columnsColspan = computed(() => this.visibleColumns().length + (this.hasLastColumn() ? 1 : 0) + (this.selectionEnabled() ? 1 : 0) + (this.rowReorderEnabled() ? 1 : 0), ...(ngDevMode ? [{ debugName: "columnsColspan" }] : []));
+        this.hasTitleDisplay = computed(() => this.captionTemplate() || this.captionComponent() || this.metadata.descriptor().title, ...(ngDevMode ? [{ debugName: "hasTitleDisplay" }] : []));
+        this.isCaptionVisible = computed(() => this.hasTitleDisplay() || this.overlayWithTagFilters().length > 0 || this.metadata.descriptor().search, ...(ngDevMode ? [{ debugName: "isCaptionVisible" }] : []));
         // component inputs
-        this.captionComponent = input();
-        this.columnCustomLastComponent = input();
-        this.globalFilterFieldsInput = input(undefined, { alias: 'globalFilterFields' });
+        this.captionComponent = input(...(ngDevMode ? [undefined, { debugName: "captionComponent" }] : []));
+        this.columnCustomLastComponent = input(...(ngDevMode ? [undefined, { debugName: "columnCustomLastComponent" }] : []));
+        this.globalFilterFieldsInput = input(undefined, ...(ngDevMode ? [{ debugName: "globalFilterFieldsInput", alias: 'globalFilterFields' }] : [{ alias: 'globalFilterFields' }]));
         // cell click
         this.cellClickSubject = new Subject();
-        this.isCellClickObserved = signal(this.cellClickSubject.observed);
-        this.isCellClickEnabled = computed(() => this.cellClickEnabled() && this.isCellClickObserved());
+        this.isCellClickObserved = signal(this.cellClickSubject.observed, ...(ngDevMode ? [{ debugName: "isCellClickObserved" }] : []));
+        this.isCellClickEnabled = computed(() => this.cellClickEnabled() && this.isCellClickObserved(), ...(ngDevMode ? [{ debugName: "isCellClickEnabled" }] : []));
         // event outputs
         this.tableLoad = output();
         this.cellClick = outputFromObservable(this.cellClickSubject);
@@ -1896,18 +1893,18 @@ class TableComponent {
         this.columnCustomLastComponentInstance = output();
         this.rowReorder = output();
         // content and view queries
-        this.templates = contentChildren(TemplateDirective);
-        this.components = viewChildren((ComponentDirective));
-        this.primeTable = viewChild(Table);
+        this.templates = contentChildren(TemplateDirective, ...(ngDevMode ? [{ debugName: "templates" }] : []));
+        this.components = viewChildren((ComponentDirective), ...(ngDevMode ? [{ debugName: "components" }] : []));
+        this.primeTable = viewChild(Table, ...(ngDevMode ? [{ debugName: "primeTable" }] : []));
         // templates
-        this.captionTemplate = computed(() => findTemplateByName([...this.templates()], 'caption'));
-        this.columnCustomLastTemplate = computed(() => findTemplateByName([...this.templates()], 'columnCustomLast'));
-        this.footerTemplate = computed(() => findTemplateByName([...this.templates()], 'footer'));
-        this.rowExpandTemplate = computed(() => findTemplateByName([...this.templates()], 'rowExpandContent'));
+        this.captionTemplate = computed(() => findTemplateByName([...this.templates()], 'caption'), ...(ngDevMode ? [{ debugName: "captionTemplate" }] : []));
+        this.columnCustomLastTemplate = computed(() => findTemplateByName([...this.templates()], 'columnCustomLast'), ...(ngDevMode ? [{ debugName: "columnCustomLastTemplate" }] : []));
+        this.footerTemplate = computed(() => findTemplateByName([...this.templates()], 'footer'), ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
+        this.rowExpandTemplate = computed(() => findTemplateByName([...this.templates()], 'rowExpandContent'), ...(ngDevMode ? [{ debugName: "rowExpandTemplate" }] : []));
         // data provider and items
-        this.isLazy = computed(() => this.dataProvider()?.isLazy === true);
-        this.isPagination = computed(() => this.data.paginationMode() === TablePaginationModeEnum.Pagination);
-        this.useQueryParamsInitialized = signal(false);
+        this.isLazy = computed(() => this.dataProvider()?.isLazy === true, ...(ngDevMode ? [{ debugName: "isLazy" }] : []));
+        this.isPagination = computed(() => this.data.paginationMode() === TablePaginationModeEnum.Pagination, ...(ngDevMode ? [{ debugName: "isPagination" }] : []));
+        this.useQueryParamsInitialized = signal(false, ...(ngDevMode ? [{ debugName: "useQueryParamsInitialized" }] : []));
         // visual
         this.className = computed(() => {
             let className = this.metadata.descriptor().className ?? '';
@@ -1923,15 +1920,15 @@ class TableComponent {
                 className += ' p-datatable-gridlines';
             }
             return className;
-        });
+        }, ...(ngDevMode ? [{ debugName: "className" }] : []));
         // columns
-        this.visibleColumns = computed(() => this.prefs.columnsWithPrefs().filter(col => col.isVisible));
-        this.areColumnsReorderable = computed(() => this.prefs.columnsWithPrefs().some(col => col.descriptor.isReorderable));
-        this.areColumnsToggleable = computed(() => this.prefs.columnsWithPrefs().some(col => col.descriptor.isToggleable));
+        this.visibleColumns = computed(() => this.prefs.columnsWithPrefs().filter(col => col.isVisible), ...(ngDevMode ? [{ debugName: "visibleColumns" }] : []));
+        this.areColumnsReorderable = computed(() => this.prefs.columnsWithPrefs().some(col => col.descriptor.isReorderable), ...(ngDevMode ? [{ debugName: "areColumnsReorderable" }] : []));
+        this.areColumnsToggleable = computed(() => this.prefs.columnsWithPrefs().some(col => col.descriptor.isToggleable), ...(ngDevMode ? [{ debugName: "areColumnsToggleable" }] : []));
         // filter, sort
         this.hasColumnFilters = computed(() => (this.metadata.defaultFilterDisplayType === FilterDisplayTypeEnum.OverlayWithTag &&
             this.metadata.filterDescriptors().some(d => d.displayType === FilterDisplayTypeEnum.Column)) ||
-            (this.metadata.defaultFilterDisplayType === FilterDisplayTypeEnum.Column && this.metadata.filterDescriptors().some(d => d.displayType == null)));
+            (this.metadata.defaultFilterDisplayType === FilterDisplayTypeEnum.Column && this.metadata.filterDescriptors().some(d => d.displayType == null)), ...(ngDevMode ? [{ debugName: "hasColumnFilters" }] : []));
         this.overlayWithTagFilters = computed(() => {
             // statically defined filters AND generic filters
             const filters = this.metadata
@@ -1939,9 +1936,9 @@ class TableComponent {
                 .filter(d => (d.descriptor.displayType == null && this.metadata.defaultFilterDisplayType === FilterDisplayTypeEnum.OverlayWithTag) ||
                 d.descriptor.displayType === FilterDisplayTypeEnum.OverlayWithTag);
             return filters.concat(this.metadata.genericFilters());
-        });
-        this.hasCustomLastColumn = computed(() => this.columnCustomLastComponent() || this.columnCustomLastTemplate());
-        this.hasLastColumn = computed(() => this.hasCustomLastColumn() || this.areColumnsToggleable() || this.areColumnsReorderable());
+        }, ...(ngDevMode ? [{ debugName: "overlayWithTagFilters" }] : []));
+        this.hasCustomLastColumn = computed(() => this.columnCustomLastComponent() || this.columnCustomLastTemplate(), ...(ngDevMode ? [{ debugName: "hasCustomLastColumn" }] : []));
+        this.hasLastColumn = computed(() => this.hasCustomLastColumn() || this.areColumnsToggleable() || this.areColumnsReorderable(), ...(ngDevMode ? [{ debugName: "hasLastColumn" }] : []));
         // other
         this.navigationOutOfTableInProgress = false;
         this.navigationInTableInProgress = false;
@@ -2076,10 +2073,10 @@ class TableComponent {
         this.data.setParams(paramsWithDefaults, true);
         this.loadTableWithDataProvider(paramsWithDefaults);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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" }, host: { properties: { "class.mng-table-no-header": "!isCaptionVisible()" } }, providers: [TableMetadataService, TableDataService, TablePreferencesService], queries: [{ propertyName: "templates", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "components", predicate: (ComponentDirective), descendants: true, isSignal: true }, { propertyName: "primeTable", first: true, predicate: Table, descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    @if (data.isAllPaginationMetaInitialized()) {\n        <p-table\n            [value]=\"data.data()\"\n            [dataKey]=\"metadata.descriptor().trackProperty\"\n            [lazy]=\"isLazy()\"\n            [loading]=\"data.loading()\"\n            [paginator]=\"isPagination()\"\n            [rows]=\"data.rows()\"\n            [first]=\"data.offset()\"\n            [totalRecords]=\"data.count()\"\n            [rowsPerPageOptions]=\"metadata.rowsPerPageOptions()\"\n            [showCurrentPageReport]=\"true\"\n            [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n            [multiSortMeta]=\"data.sortMeta()\"\n            [filters]=\"data.filterMeta()\"\n            [globalFilterFields]=\"metadata.searchFields()\"\n            sortMode=\"multiple\"\n            [selection]=\"[]\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n            [scrollable]=\"true\"\n            scrollHeight=\"flex\"\n            [rowHover]=\"metadata.descriptor().hasHover\"\n            [styleClass]=\"className()\"\n            [resizableColumns]=\"metadata.descriptor().hasResizableColumns\"\n            [columnResizeMode]=\"metadata.descriptor().columnResizeMode ?? 'expand'\"\n            [reorderableColumns]=\"areColumnsReorderable()\"\n            paginatorDropdownAppendTo=\"body\"\n            [columns]=\"visibleColumns()\"\n            [expandedRowKeys]=\"expandedRowKeys()\"\n            (onColResize)=\"prefs.onColumnResize($event)\"\n            (onColReorder)=\"prefs.onColumnReorder($event)\"\n            (onLazyLoad)=\"onTableLazyLoad($event)\"\n            (onFilter)=\"onTableFilter($event)\"\n            (onRowReorder)=\"onRowReorder($event)\">\n            <ng-template #caption>\n                @if (isCaptionVisible()) {\n                    <div class=\"table-header\">\n                        @if (overlayWithTagFilters().length > 0 || metadata.descriptor().search) {\n                            @defer (on idle) {\n                                <mng-table-filter-overlay-with-tag\n                                    [title]=\"metadata.descriptor().title\"\n                                    [metadata]=\"overlayWithTagFilters()\"\n                                    [genericFilterDescriptor]=\"metadata.genericFilterDescriptor()\"\n                                    [model]=\"metadata.descriptor().model\"\n                                    [enableSearch]=\"metadata.descriptor().search\"\n                                    [search]=\"data.searchMeta()\"\n                                    [searchLimitWordMax]=\"metadata.descriptor().searchLimitMaxWords\"\n                                    [enableCaseSensitive]=\"isLazy()\">\n                                    @if (hasTitleDisplay()) {\n                                        <ng-template mngTemplate=\"title\">\n                                            <ng-container *ngTemplateOutlet=\"captionTemplateOrComponentOrTitle\"></ng-container>\n                                        </ng-template>\n                                    }\n                                </mng-table-filter-overlay-with-tag>\n                            }\n                        } @else {\n                            <ng-container *ngTemplateOutlet=\"captionTemplateOrComponentOrTitle\"></ng-container>\n                        }\n                        <ng-template #captionTemplateOrComponentOrTitle>\n                            @if (captionTemplate()) {\n                                <ng-container *ngTemplateOutlet=\"captionTemplate()\"></ng-container>\n                            } @else if (captionComponent()) {\n                                <ng-container [mngComponent]=\"captionComponent()\" (instanceCreated)=\"captionComponentInstance.emit($event)\"></ng-container>\n                            } @else if (metadata.descriptor().title) {\n                                <h5 class=\"p-0 m-0\">{{ metadata.descriptor().title! | translate }}</h5>\n                            }\n                        </ng-template>\n                    </div>\n                }\n            </ng-template>\n            <ng-template #header>\n                @if (!metadata.descriptor().hideHeader) {\n                    <tr class=\"mng-table-header\" [class]=\"metadata.descriptor().headerClassName\">\n                        @if (selectionEnabled()) {\n                            @if (selectionMode() === 'multiple') {\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                    <p-tableHeaderCheckbox />\n                                </th>\n                            } @else {\n                                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                            }\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\" pFrozenColumn [frozen]=\"true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <ng-template #sortableColumnTHTemplate>\n                                <div class=\"flex justify-between items-center\">\n                                    {{\n                                        (col.descriptor.title && !col.descriptor.titleUseModelBase\n                                            ? col.descriptor.title\n                                            : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                        ) | translate\n                                    }}\n                                    <p-sortIcon [field]=\"col.sort?.property\" class=\"flex\"></p-sortIcon>\n                                </div>\n                            </ng-template>\n                            <ng-template #nonSortableColumnTHTemplate>\n                                {{\n                                    (col.descriptor.title && !col.descriptor.titleUseModelBase\n                                        ? col.descriptor.title\n                                        : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                    ) | translate\n                                }}\n                            </ng-template>\n                            @if (col.descriptor.isReorderable) {\n                                <th\n                                    pResizableColumn\n                                    pReorderableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            } @else {\n                                <th\n                                    pResizableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            }\n                        }\n                        @if (hasLastColumn()) {\n                            <th\n                                [style.min-width.px]=\"columnLastMinWidth()\"\n                                pFrozenColumn\n                                [frozen]=\"metadata.descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n                                alignFrozen=\"right\"\n                                class=\"mng-table-column-custom-last !text-right\">\n                                @if (areColumnsToggleable()) {\n                                    @defer (on idle) {\n                                        <mng-table-column-toggle [columns]=\"visibleColumns()\" />\n                                    }\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n                @if (hasColumnFilters()) {\n                    <tr class=\"mng-column-filter-row\">\n                        <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                        @if (selectionEnabled()) {\n                            <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <th\n                                [class]=\"'!px-1 ' + col.filter?.descriptor?.columnClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\"\n                                [style.width.px]=\"col.width\"\n                                [style.width.%]=\"col.width ? null : (col.filter?.descriptor?.columnWidth ?? col.descriptor.width ?? null)\"\n                                [style.min-width.px]=\"col.width ? null : (col.filter?.descriptor?.columnMinWidth ?? col.descriptor.minWidth)\"\n                                [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                                @if (col.filter) {\n                                    @defer (on idle) {\n                                        <mng-table-column-filter [metadata]=\"col.filter\"></mng-table-column-filter>\n                                    }\n                                }\n                            </th>\n                        }\n                        @if (hasLastColumn()) {\n                            <th pFrozenColumn alignFrozen=\"right\" class=\"mng-table-column-custom-last\" [style.min-width.px]=\"columnLastMinWidth()\"></th>\n                        }\n                    </tr>\n                }\n            </ng-template>\n            <ng-template #body let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n                <tr\n                    [pReorderableRow]=\"idx\"\n                    [ngClass]=\"\n                        metadata.descriptor().rowClassName | mngClassMap: metadata.descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: metadata.descriptor() : item\n                    \">\n                    @if (selectionEnabled()) {\n                        @if (selectionMode() === 'multiple') {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                            </td>\n                        } @else {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                            </td>\n                        }\n                    }\n                    @if (metadata.descriptor().rowExpandable) {\n                        <td>\n                            @let expandProp = metadata.descriptor().rowExpandableProperty;\n                            @if (!expandProp || item[expandProp]) {\n                                <button\n                                    pButton\n                                    type=\"button\"\n                                    [pRowToggler]=\"item\"\n                                    rounded=\"true\"\n                                    text=\"true\"\n                                    class=\"mng-button-sm\"\n                                    [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n                            }\n                        </td>\n                    }\n                    @if (rowReorderEnabled()) {\n                        <td>\n                            <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n                        </td>\n                    }\n                    @for (col of visibleColumns(); track col.id) {\n                        <td\n                            (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                            [class]=\"\n                                col.descriptor.className\n                                    | mngClassMap: col.descriptor.classNameMapFn : item\n                                    | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\n                            \"\n                            [class.clickable]=\"isCellClickEnabled()\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                            <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                        </td>\n                    }\n                    @if (hasLastColumn()) {\n                        <td\n                            class=\"mng-table-column-custom-last justify-end !text-right\"\n                            [style.min-width.px]=\"columnLastMinWidth()\"\n                            pFrozenColumn\n                            alignFrozen=\"right\"\n                            [frozen]=\"metadata.descriptor().actionColumnFrozen ?? true\">\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 #expandedrow let-item>\n                @if (metadata.descriptor().rowExpandable) {\n                    <tr>\n                        <td></td>\n                        <td [colSpan]=\"metadata.descriptor().rowExpandableColSpan\">\n                            @if (metadata.descriptor().rowExpandableComponentType !== undefined) {\n                                <ng-container [mngComponent]=\"metadata.descriptor().rowExpandableComponentType\" [inputs]=\"{item}\"> </ng-container>\n                            } @else {\n                                <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n                            }\n                        </td>\n                    </tr>\n                }\n            </ng-template>\n            <ng-template #loadingicon>\n                <div class=\"flex flex-col items-center\">\n                    @if (metadata.descriptor().loadingIcon) {\n                        <i [class]=\"'text-white text-4xl pi-spin ' + metadata.descriptor().loadingIcon\"></i>\n                    }\n                    @if (metadata.descriptor().loadingText) {\n                        <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': metadata.descriptor().loadingIcon}\">\n                            {{ metadata.descriptor().loadingText ?? '' | translate }}\n                        </div>\n                    }\n                </div>\n            </ng-template>\n            <ng-template #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 #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 #summary>\n                    <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: data.data(), totalCount: data.count()}\"></ng-container>\n                </ng-template>\n            }\n        </p-table>\n    }\n</div>\n", styles: ["mng-table .p-datatable .p-datatable-header{border-top:0}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td{cursor:auto}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td.clickable{cursor:pointer}mng-table .p-datatable :is(.p-datatable-thead>tr>th,.p-datatable-tbody>tr>td):hover mng-table-column-value .help-buttons{display:block}mng-table .p-datatable .p-datatable-thead>tr>th.mng-table-column-custom-last{padding:var(--mng-table-column-head-custom-last, .1rem 1rem)}mng-table .p-datatable .p-datatable-tbody>tr>td{position:relative}mng-table .p-datatable .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding-top:.1rem;padding-bottom:.1rem}mng-table .p-datatable .p-datatable-tbody>tr>td.p-datatable-frozen-column{position:sticky;z-index:1;background:transparent}mng-table .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-column-body-custom-last, .15rem 1rem)}mng-table .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-sm-column-body-custom-last, .05rem 1rem)}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-thead>tr>th{overflow:hidden;text-overflow:ellipsis}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-tbody>tr>td{overflow:hidden}mng-table .p-datatable .mng-table-row-localization-default-locale{background:var(--p-surface-100)!important}mng-table .mng-table-header>th:not(:first-child):not(:last-child){border-radius:0!important}mng-table .mng-table-header>th:first-child{border-top-right-radius:0!important;border-bottom-right-radius:0!important}mng-table .mng-table-header>th:last-child{border-radius:0!important}mng-table .mng-table-header .mng-table-columns-multiselect{width:36px}mng-table .mng-table-header .mng-table-columns-multiselect .p-multiselect-label-container{width:0}mng-table.mng-table-no-header p-datatable .p-datatable-header{display:none}mng-table.mng-table-header-compact .p-datatable-header{padding:var(--mng-table-header-compact-padding, 0 0 .5rem 0)}\n"], dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "pipe", type: I18nPropertyPipe, name: "mngI18nProperty" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { 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: "pipe", type: TableColumnFilterClassPipe, name: "mngTableColumnFilterClass" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$1.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", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i1$1.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i1$1.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i1$1.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i1$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i1$1.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$1.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$1.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [NgTemplateOutlet, Promise.resolve().then(function () { return filterOverlayWithTag_component; }).then(m => m.TableFilterOverlayWithTagComponent), TemplateDirective], () => [import('./mediusinc-mng-commons-table-column-toggle.component-CCyGSxaD.mjs').then(m => m.TableColumnToggleComponent)], () => [Promise.resolve().then(function () { return columnFilter_component; }).then(m => m.TableColumnFilterComponent)]] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", 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" }, host: { properties: { "class.mng-table-no-header": "!isCaptionVisible()" } }, providers: [TableMetadataService, TableDataService, TablePreferencesService], queries: [{ propertyName: "templates", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "components", predicate: (ComponentDirective), descendants: true, isSignal: true }, { propertyName: "primeTable", first: true, predicate: Table, descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    @if (data.isAllPaginationMetaInitialized()) {\n        <p-table\n            [value]=\"data.data()\"\n            [dataKey]=\"metadata.descriptor().trackProperty\"\n            [lazy]=\"isLazy()\"\n            [loading]=\"data.loading()\"\n            [paginator]=\"isPagination()\"\n            [rows]=\"data.rows()\"\n            [first]=\"data.offset()\"\n            [totalRecords]=\"data.count()\"\n            [rowsPerPageOptions]=\"metadata.rowsPerPageOptions()\"\n            [showCurrentPageReport]=\"true\"\n            [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n            [multiSortMeta]=\"data.sortMeta()\"\n            [filters]=\"data.filterMeta()\"\n            [globalFilterFields]=\"metadata.searchFields()\"\n            sortMode=\"multiple\"\n            [selection]=\"[]\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n            [scrollable]=\"true\"\n            scrollHeight=\"flex\"\n            [rowHover]=\"metadata.descriptor().hasHover\"\n            [styleClass]=\"className()\"\n            [resizableColumns]=\"metadata.descriptor().hasResizableColumns\"\n            [columnResizeMode]=\"metadata.descriptor().columnResizeMode ?? 'expand'\"\n            [reorderableColumns]=\"areColumnsReorderable()\"\n            paginatorDropdownAppendTo=\"body\"\n            [columns]=\"visibleColumns()\"\n            [expandedRowKeys]=\"expandedRowKeys()\"\n            (onColResize)=\"prefs.onColumnResize($event)\"\n            (onColReorder)=\"prefs.onColumnReorder($event)\"\n            (onLazyLoad)=\"onTableLazyLoad($event)\"\n            (onFilter)=\"onTableFilter($event)\"\n            (onRowReorder)=\"onRowReorder($event)\">\n            <ng-template #caption>\n                @if (isCaptionVisible()) {\n                    <div class=\"table-header\">\n                        @if (overlayWithTagFilters().length > 0 || metadata.descriptor().search) {\n                            @defer (on idle) {\n                                <mng-table-filter-overlay-with-tag\n                                    [title]=\"metadata.descriptor().title\"\n                                    [metadata]=\"overlayWithTagFilters()\"\n                                    [genericFilterDescriptor]=\"metadata.genericFilterDescriptor()\"\n                                    [model]=\"metadata.descriptor().model\"\n                                    [enableSearch]=\"metadata.descriptor().search\"\n                                    [search]=\"data.searchMeta()\"\n                                    [searchLimitWordMax]=\"metadata.descriptor().searchLimitMaxWords\"\n                                    [enableCaseSensitive]=\"isLazy()\">\n                                    @if (hasTitleDisplay()) {\n                                        <ng-template mngTemplate=\"title\">\n                                            <ng-container *ngTemplateOutlet=\"captionTemplateOrComponentOrTitle\"></ng-container>\n                                        </ng-template>\n                                    }\n                                </mng-table-filter-overlay-with-tag>\n                            }\n                        } @else {\n                            <ng-container *ngTemplateOutlet=\"captionTemplateOrComponentOrTitle\"></ng-container>\n                        }\n                        <ng-template #captionTemplateOrComponentOrTitle>\n                            @if (captionTemplate()) {\n                                <ng-container *ngTemplateOutlet=\"captionTemplate()\"></ng-container>\n                            } @else if (captionComponent()) {\n                                <ng-container [mngComponent]=\"captionComponent()\" (instanceCreated)=\"captionComponentInstance.emit($event)\"></ng-container>\n                            } @else if (metadata.descriptor().title) {\n                                <h5 class=\"p-0 m-0\">{{ metadata.descriptor().title! | translate }}</h5>\n                            }\n                        </ng-template>\n                    </div>\n                }\n            </ng-template>\n            <ng-template #header>\n                @if (!metadata.descriptor().hideHeader) {\n                    <tr class=\"mng-table-header\" [class]=\"metadata.descriptor().headerClassName\">\n                        @if (selectionEnabled()) {\n                            @if (selectionMode() === 'multiple') {\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                    <p-tableHeaderCheckbox />\n                                </th>\n                            } @else {\n                                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                            }\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\" pFrozenColumn [frozen]=\"true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <ng-template #sortableColumnTHTemplate>\n                                <div class=\"flex justify-between items-center\">\n                                    {{\n                                        (col.descriptor.title && !col.descriptor.titleUseModelBase\n                                            ? col.descriptor.title\n                                            : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                        ) | translate\n                                    }}\n                                    <p-sortIcon [field]=\"col.sort?.property\" class=\"flex\"></p-sortIcon>\n                                </div>\n                            </ng-template>\n                            <ng-template #nonSortableColumnTHTemplate>\n                                {{\n                                    (col.descriptor.title && !col.descriptor.titleUseModelBase\n                                        ? col.descriptor.title\n                                        : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                    ) | translate\n                                }}\n                            </ng-template>\n                            @if (col.descriptor.isReorderable) {\n                                <th\n                                    pResizableColumn\n                                    pReorderableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            } @else {\n                                <th\n                                    pResizableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            }\n                        }\n                        @if (hasLastColumn()) {\n                            <th\n                                [style.min-width.px]=\"columnLastMinWidth()\"\n                                pFrozenColumn\n                                [frozen]=\"metadata.descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n                                alignFrozen=\"right\"\n                                class=\"mng-table-column-custom-last text-right!\">\n                                @if (areColumnsToggleable()) {\n                                    @defer (on idle) {\n                                        <mng-table-column-toggle [columns]=\"visibleColumns()\" />\n                                    }\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n                @if (hasColumnFilters()) {\n                    <tr class=\"mng-column-filter-row\">\n                        <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                        @if (selectionEnabled()) {\n                            <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <th\n                                [class]=\"'px-1! ' + col.filter?.descriptor?.columnClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\"\n                                [style.width.px]=\"col.width\"\n                                [style.width.%]=\"col.width ? null : (col.filter?.descriptor?.columnWidth ?? col.descriptor.width ?? null)\"\n                                [style.min-width.px]=\"col.width ? null : (col.filter?.descriptor?.columnMinWidth ?? col.descriptor.minWidth)\"\n                                [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                                @if (col.filter) {\n                                    @defer (on idle) {\n                                        <mng-table-column-filter [metadata]=\"col.filter\"></mng-table-column-filter>\n                                    }\n                                }\n                            </th>\n                        }\n                        @if (hasLastColumn()) {\n                            <th pFrozenColumn alignFrozen=\"right\" class=\"mng-table-column-custom-last\" [style.min-width.px]=\"columnLastMinWidth()\"></th>\n                        }\n                    </tr>\n                }\n            </ng-template>\n            <ng-template #body let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n                <tr\n                    [pReorderableRow]=\"idx\"\n                    [ngClass]=\"\n                        metadata.descriptor().rowClassName | mngClassMap: metadata.descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: metadata.descriptor() : item\n                    \">\n                    @if (selectionEnabled()) {\n                        @if (selectionMode() === 'multiple') {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                            </td>\n                        } @else {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                            </td>\n                        }\n                    }\n                    @if (metadata.descriptor().rowExpandable) {\n                        <td>\n                            @let expandProp = metadata.descriptor().rowExpandableProperty;\n                            @if (!expandProp || item[expandProp]) {\n                                <button\n                                    pButton\n                                    type=\"button\"\n                                    [pRowToggler]=\"item\"\n                                    rounded=\"true\"\n                                    text=\"true\"\n                                    class=\"mng-button-sm\"\n                                    [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n                            }\n                        </td>\n                    }\n                    @if (rowReorderEnabled()) {\n                        <td>\n                            <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n                        </td>\n                    }\n                    @for (col of visibleColumns(); track col.id) {\n                        <td\n                            (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                            [class]=\"\n                                col.descriptor.className\n                                    | mngClassMap: col.descriptor.classNameMapFn : item\n                                    | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\n                            \"\n                            [class.clickable]=\"isCellClickEnabled()\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                            <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                        </td>\n                    }\n                    @if (hasLastColumn()) {\n                        <td\n                            class=\"mng-table-column-custom-last justify-end text-right!\"\n                            [style.min-width.px]=\"columnLastMinWidth()\"\n                            pFrozenColumn\n                            alignFrozen=\"right\"\n                            [frozen]=\"metadata.descriptor().actionColumnFrozen ?? true\">\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 #expandedrow let-item>\n                @if (metadata.descriptor().rowExpandable) {\n                    <tr>\n                        <td></td>\n                        <td [colSpan]=\"metadata.descriptor().rowExpandableColSpan\">\n                            @if (metadata.descriptor().rowExpandableComponentType !== undefined) {\n                                <ng-container [mngComponent]=\"metadata.descriptor().rowExpandableComponentType\" [inputs]=\"{item}\"> </ng-container>\n                            } @else {\n                                <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n                            }\n                        </td>\n                    </tr>\n                }\n            </ng-template>\n            <ng-template #loadingicon>\n                <div class=\"flex flex-col items-center\">\n                    @if (metadata.descriptor().loadingIcon) {\n                        <i [class]=\"'text-white text-4xl pi-spin ' + metadata.descriptor().loadingIcon\"></i>\n                    }\n                    @if (metadata.descriptor().loadingText) {\n                        <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': metadata.descriptor().loadingIcon}\">\n                            {{ metadata.descriptor().loadingText ?? '' | translate }}\n                        </div>\n                    }\n                </div>\n            </ng-template>\n            <ng-template #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 #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 #summary>\n                    <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: data.data(), totalCount: data.count()}\"></ng-container>\n                </ng-template>\n            }\n        </p-table>\n    }\n</div>\n", styles: ["mng-table .p-datatable .p-datatable-header{border-top:0}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td{cursor:auto}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td.clickable{cursor:pointer}:is(mng-table .p-datatable .p-datatable-thead>tr>th,mng-table .p-datatable .p-datatable-tbody>tr>td):hover mng-table-column-value .help-buttons{display:block}mng-table .p-datatable .p-datatable-thead>tr>th.mng-table-column-custom-last{padding:var(--mng-table-column-head-custom-last, .1rem 1rem)}mng-table .p-datatable .p-datatable-tbody>tr>td{position:relative}mng-table .p-datatable .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding-top:.1rem;padding-bottom:.1rem}mng-table .p-datatable .p-datatable-tbody>tr>td.p-datatable-frozen-column{position:sticky;z-index:1;background:transparent}mng-table .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-column-body-custom-last, .15rem 1rem)}mng-table .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-sm-column-body-custom-last, .05rem 1rem)}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-thead>tr>th{overflow:hidden;text-overflow:ellipsis}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-tbody>tr>td{overflow:hidden}mng-table .p-datatable .mng-table-row-localization-default-locale{background:var(--p-surface-100)!important}mng-table .mng-table-header>th:not(:first-child):not(:last-child){border-radius:0!important}mng-table .mng-table-header>th:first-child{border-top-right-radius:0!important;border-bottom-right-radius:0!important}mng-table .mng-table-header>th:last-child{border-radius:0!important}mng-table .mng-table-header .mng-table-columns-multiselect{width:36px}mng-table .mng-table-header .mng-table-columns-multiselect .p-multiselect-label-container{width:0}mng-table.mng-table-no-header p-datatable .p-datatable-header{display:none}mng-table.mng-table-header-compact .p-datatable-header{padding:var(--mng-table-header-compact-padding, 0 0 .5rem 0)}\n"], dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { 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: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i1$1.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i1$1.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i1$1.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i1$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i1$1.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$1.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$1.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "pipe", type: I18nPropertyPipe, name: "mngI18nProperty" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ClassMapPipe, name: "mngClassMap" }, { kind: "pipe", type: LocaleDefaultRowClassPipe, name: "mngLocaleDefaultRowClass" }, { kind: "pipe", type: TableColumnFilterClassPipe, name: "mngTableColumnFilterClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [NgTemplateOutlet, Promise.resolve().then(function () { return filterOverlayWithTag_component; }).then(m => m.TableFilterOverlayWithTagComponent), TemplateDirective], () => [import('./mediusinc-mng-commons-table-column-toggle.component-Dvenjj9n.mjs').then(m => m.TableColumnToggleComponent)], () => [Promise.resolve().then(function () { return columnFilter_component; }).then(m => m.TableColumnFilterComponent)]] }); }
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.10", ngImport: i0, type: TableComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return filterOverlayWithTag_component; }).then(m => m.TableFilterOverlayWithTagComponent), import('./mediusinc-mng-commons-table-column-toggle.component-CCyGSxaD.mjs').then(m => m.TableColumnToggleComponent), Promise.resolve().then(function () { return columnFilter_component; }).then(m => m.TableColumnFilterComponent)], resolveMetadata: (TableFilterOverlayWithTagComponent, TableColumnToggleComponent, TableColumnFilterComponent) => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.1.7", ngImport: i0, type: TableComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return filterOverlayWithTag_component; }).then(m => m.TableFilterOverlayWithTagComponent), import('./mediusinc-mng-commons-table-column-toggle.component-Dvenjj9n.mjs').then(m => m.TableColumnToggleComponent), Promise.resolve().then(function () { return columnFilter_component; }).then(m => m.TableColumnFilterComponent)], resolveMetadata: (TableFilterOverlayWithTagComponent, TableColumnToggleComponent, TableColumnFilterComponent) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'mng-table', imports: [
                             ComponentDirective,
@@ -2102,7 +2099,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.10", n
                             ButtonDirective
                         ], providers: [TableMetadataService, TableDataService, TablePreferencesService], host: {
                             '[class.mng-table-no-header]': '!isCaptionVisible()'
-                        }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div>\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    @if (data.isAllPaginationMetaInitialized()) {\n        <p-table\n            [value]=\"data.data()\"\n            [dataKey]=\"metadata.descriptor().trackProperty\"\n            [lazy]=\"isLazy()\"\n            [loading]=\"data.loading()\"\n            [paginator]=\"isPagination()\"\n            [rows]=\"data.rows()\"\n            [first]=\"data.offset()\"\n            [totalRecords]=\"data.count()\"\n            [rowsPerPageOptions]=\"metadata.rowsPerPageOptions()\"\n            [showCurrentPageReport]=\"true\"\n            [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n            [multiSortMeta]=\"data.sortMeta()\"\n            [filters]=\"data.filterMeta()\"\n            [globalFilterFields]=\"metadata.searchFields()\"\n            sortMode=\"multiple\"\n            [selection]=\"[]\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n            [scrollable]=\"true\"\n            scrollHeight=\"flex\"\n            [rowHover]=\"metadata.descriptor().hasHover\"\n            [styleClass]=\"className()\"\n            [resizableColumns]=\"metadata.descriptor().hasResizableColumns\"\n            [columnResizeMode]=\"metadata.descriptor().columnResizeMode ?? 'expand'\"\n            [reorderableColumns]=\"areColumnsReorderable()\"\n            paginatorDropdownAppendTo=\"body\"\n            [columns]=\"visibleColumns()\"\n            [expandedRowKeys]=\"expandedRowKeys()\"\n            (onColResize)=\"prefs.onColumnResize($event)\"\n            (onColReorder)=\"prefs.onColumnReorder($event)\"\n            (onLazyLoad)=\"onTableLazyLoad($event)\"\n            (onFilter)=\"onTableFilter($event)\"\n            (onRowReorder)=\"onRowReorder($event)\">\n            <ng-template #caption>\n                @if (isCaptionVisible()) {\n                    <div class=\"table-header\">\n                        @if (overlayWithTagFilters().length > 0 || metadata.descriptor().search) {\n                            @defer (on idle) {\n                                <mng-table-filter-overlay-with-tag\n                                    [title]=\"metadata.descriptor().title\"\n                                    [metadata]=\"overlayWithTagFilters()\"\n                                    [genericFilterDescriptor]=\"metadata.genericFilterDescriptor()\"\n                                    [model]=\"metadata.descriptor().model\"\n                                    [enableSearch]=\"metadata.descriptor().search\"\n                                    [search]=\"data.searchMeta()\"\n                                    [searchLimitWordMax]=\"metadata.descriptor().searchLimitMaxWords\"\n                                    [enableCaseSensitive]=\"isLazy()\">\n                                    @if (hasTitleDisplay()) {\n                                        <ng-template mngTemplate=\"title\">\n                                            <ng-container *ngTemplateOutlet=\"captionTemplateOrComponentOrTitle\"></ng-container>\n                                        </ng-template>\n                                    }\n                                </mng-table-filter-overlay-with-tag>\n                            }\n                        } @else {\n                            <ng-container *ngTemplateOutlet=\"captionTemplateOrComponentOrTitle\"></ng-container>\n                        }\n                        <ng-template #captionTemplateOrComponentOrTitle>\n                            @if (captionTemplate()) {\n                                <ng-container *ngTemplateOutlet=\"captionTemplate()\"></ng-container>\n                            } @else if (captionComponent()) {\n                                <ng-container [mngComponent]=\"captionComponent()\" (instanceCreated)=\"captionComponentInstance.emit($event)\"></ng-container>\n                            } @else if (metadata.descriptor().title) {\n                                <h5 class=\"p-0 m-0\">{{ metadata.descriptor().title! | translate }}</h5>\n                            }\n                        </ng-template>\n                    </div>\n                }\n            </ng-template>\n            <ng-template #header>\n                @if (!metadata.descriptor().hideHeader) {\n                    <tr class=\"mng-table-header\" [class]=\"metadata.descriptor().headerClassName\">\n                        @if (selectionEnabled()) {\n                            @if (selectionMode() === 'multiple') {\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                    <p-tableHeaderCheckbox />\n                                </th>\n                            } @else {\n                                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                            }\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\" pFrozenColumn [frozen]=\"true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <ng-template #sortableColumnTHTemplate>\n                                <div class=\"flex justify-between items-center\">\n                                    {{\n                                        (col.descriptor.title && !col.descriptor.titleUseModelBase\n                                            ? col.descriptor.title\n                                            : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                        ) | translate\n                                    }}\n                                    <p-sortIcon [field]=\"col.sort?.property\" class=\"flex\"></p-sortIcon>\n                                </div>\n                            </ng-template>\n                            <ng-template #nonSortableColumnTHTemplate>\n                                {{\n                                    (col.descriptor.title && !col.descriptor.titleUseModelBase\n                                        ? col.descriptor.title\n                                        : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                    ) | translate\n                                }}\n                            </ng-template>\n                            @if (col.descriptor.isReorderable) {\n                                <th\n                                    pResizableColumn\n                                    pReorderableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            } @else {\n                                <th\n                                    pResizableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            }\n                        }\n                        @if (hasLastColumn()) {\n                            <th\n                                [style.min-width.px]=\"columnLastMinWidth()\"\n                                pFrozenColumn\n                                [frozen]=\"metadata.descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n                                alignFrozen=\"right\"\n                                class=\"mng-table-column-custom-last !text-right\">\n                                @if (areColumnsToggleable()) {\n                                    @defer (on idle) {\n                                        <mng-table-column-toggle [columns]=\"visibleColumns()\" />\n                                    }\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n                @if (hasColumnFilters()) {\n                    <tr class=\"mng-column-filter-row\">\n                        <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                        @if (selectionEnabled()) {\n                            <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <th\n                                [class]=\"'!px-1 ' + col.filter?.descriptor?.columnClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\"\n                                [style.width.px]=\"col.width\"\n                                [style.width.%]=\"col.width ? null : (col.filter?.descriptor?.columnWidth ?? col.descriptor.width ?? null)\"\n                                [style.min-width.px]=\"col.width ? null : (col.filter?.descriptor?.columnMinWidth ?? col.descriptor.minWidth)\"\n                                [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                                @if (col.filter) {\n                                    @defer (on idle) {\n                                        <mng-table-column-filter [metadata]=\"col.filter\"></mng-table-column-filter>\n                                    }\n                                }\n                            </th>\n                        }\n                        @if (hasLastColumn()) {\n                            <th pFrozenColumn alignFrozen=\"right\" class=\"mng-table-column-custom-last\" [style.min-width.px]=\"columnLastMinWidth()\"></th>\n                        }\n                    </tr>\n                }\n            </ng-template>\n            <ng-template #body let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n                <tr\n                    [pReorderableRow]=\"idx\"\n                    [ngClass]=\"\n                        metadata.descriptor().rowClassName | mngClassMap: metadata.descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: metadata.descriptor() : item\n                    \">\n                    @if (selectionEnabled()) {\n                        @if (selectionMode() === 'multiple') {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                            </td>\n                        } @else {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                            </td>\n                        }\n                    }\n                    @if (metadata.descriptor().rowExpandable) {\n                        <td>\n                            @let expandProp = metadata.descriptor().rowExpandableProperty;\n                            @if (!expandProp || item[expandProp]) {\n                                <button\n                                    pButton\n                                    type=\"button\"\n                                    [pRowToggler]=\"item\"\n                                    rounded=\"true\"\n                                    text=\"true\"\n                                    class=\"mng-button-sm\"\n                                    [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n                            }\n                        </td>\n                    }\n                    @if (rowReorderEnabled()) {\n                        <td>\n                            <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n                        </td>\n                    }\n                    @for (col of visibleColumns(); track col.id) {\n                        <td\n                            (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                            [class]=\"\n                                col.descriptor.className\n                                    | mngClassMap: col.descriptor.classNameMapFn : item\n                                    | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\n                            \"\n                            [class.clickable]=\"isCellClickEnabled()\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                            <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                        </td>\n                    }\n                    @if (hasLastColumn()) {\n                        <td\n                            class=\"mng-table-column-custom-last justify-end !text-right\"\n                            [style.min-width.px]=\"columnLastMinWidth()\"\n                            pFrozenColumn\n                            alignFrozen=\"right\"\n                            [frozen]=\"metadata.descriptor().actionColumnFrozen ?? true\">\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 #expandedrow let-item>\n                @if (metadata.descriptor().rowExpandable) {\n                    <tr>\n                        <td></td>\n                        <td [colSpan]=\"metadata.descriptor().rowExpandableColSpan\">\n                            @if (metadata.descriptor().rowExpandableComponentType !== undefined) {\n                                <ng-container [mngComponent]=\"metadata.descriptor().rowExpandableComponentType\" [inputs]=\"{item}\"> </ng-container>\n                            } @else {\n                                <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n                            }\n                        </td>\n                    </tr>\n                }\n            </ng-template>\n            <ng-template #loadingicon>\n                <div class=\"flex flex-col items-center\">\n                    @if (metadata.descriptor().loadingIcon) {\n                        <i [class]=\"'text-white text-4xl pi-spin ' + metadata.descriptor().loadingIcon\"></i>\n                    }\n                    @if (metadata.descriptor().loadingText) {\n                        <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': metadata.descriptor().loadingIcon}\">\n                            {{ metadata.descriptor().loadingText ?? '' | translate }}\n                        </div>\n                    }\n                </div>\n            </ng-template>\n            <ng-template #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 #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 #summary>\n                    <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: data.data(), totalCount: data.count()}\"></ng-container>\n                </ng-template>\n            }\n        </p-table>\n    }\n</div>\n", styles: ["mng-table .p-datatable .p-datatable-header{border-top:0}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td{cursor:auto}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td.clickable{cursor:pointer}mng-table .p-datatable :is(.p-datatable-thead>tr>th,.p-datatable-tbody>tr>td):hover mng-table-column-value .help-buttons{display:block}mng-table .p-datatable .p-datatable-thead>tr>th.mng-table-column-custom-last{padding:var(--mng-table-column-head-custom-last, .1rem 1rem)}mng-table .p-datatable .p-datatable-tbody>tr>td{position:relative}mng-table .p-datatable .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding-top:.1rem;padding-bottom:.1rem}mng-table .p-datatable .p-datatable-tbody>tr>td.p-datatable-frozen-column{position:sticky;z-index:1;background:transparent}mng-table .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-column-body-custom-last, .15rem 1rem)}mng-table .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-sm-column-body-custom-last, .05rem 1rem)}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-thead>tr>th{overflow:hidden;text-overflow:ellipsis}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-tbody>tr>td{overflow:hidden}mng-table .p-datatable .mng-table-row-localization-default-locale{background:var(--p-surface-100)!important}mng-table .mng-table-header>th:not(:first-child):not(:last-child){border-radius:0!important}mng-table .mng-table-header>th:first-child{border-top-right-radius:0!important;border-bottom-right-radius:0!important}mng-table .mng-table-header>th:last-child{border-radius:0!important}mng-table .mng-table-header .mng-table-columns-multiselect{width:36px}mng-table .mng-table-header .mng-table-columns-multiselect .p-multiselect-label-container{width:0}mng-table.mng-table-no-header p-datatable .p-datatable-header{display:none}mng-table.mng-table-header-compact .p-datatable-header{padding:var(--mng-table-header-compact-padding, 0 0 .5rem 0)}\n"] }]
+                        }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div>\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    @if (data.isAllPaginationMetaInitialized()) {\n        <p-table\n            [value]=\"data.data()\"\n            [dataKey]=\"metadata.descriptor().trackProperty\"\n            [lazy]=\"isLazy()\"\n            [loading]=\"data.loading()\"\n            [paginator]=\"isPagination()\"\n            [rows]=\"data.rows()\"\n            [first]=\"data.offset()\"\n            [totalRecords]=\"data.count()\"\n            [rowsPerPageOptions]=\"metadata.rowsPerPageOptions()\"\n            [showCurrentPageReport]=\"true\"\n            [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n            [multiSortMeta]=\"data.sortMeta()\"\n            [filters]=\"data.filterMeta()\"\n            [globalFilterFields]=\"metadata.searchFields()\"\n            sortMode=\"multiple\"\n            [selection]=\"[]\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n            [scrollable]=\"true\"\n            scrollHeight=\"flex\"\n            [rowHover]=\"metadata.descriptor().hasHover\"\n            [styleClass]=\"className()\"\n            [resizableColumns]=\"metadata.descriptor().hasResizableColumns\"\n            [columnResizeMode]=\"metadata.descriptor().columnResizeMode ?? 'expand'\"\n            [reorderableColumns]=\"areColumnsReorderable()\"\n            paginatorDropdownAppendTo=\"body\"\n            [columns]=\"visibleColumns()\"\n            [expandedRowKeys]=\"expandedRowKeys()\"\n            (onColResize)=\"prefs.onColumnResize($event)\"\n            (onColReorder)=\"prefs.onColumnReorder($event)\"\n            (onLazyLoad)=\"onTableLazyLoad($event)\"\n            (onFilter)=\"onTableFilter($event)\"\n            (onRowReorder)=\"onRowReorder($event)\">\n            <ng-template #caption>\n                @if (isCaptionVisible()) {\n                    <div class=\"table-header\">\n                        @if (overlayWithTagFilters().length > 0 || metadata.descriptor().search) {\n                            @defer (on idle) {\n                                <mng-table-filter-overlay-with-tag\n                                    [title]=\"metadata.descriptor().title\"\n                                    [metadata]=\"overlayWithTagFilters()\"\n                                    [genericFilterDescriptor]=\"metadata.genericFilterDescriptor()\"\n                                    [model]=\"metadata.descriptor().model\"\n                                    [enableSearch]=\"metadata.descriptor().search\"\n                                    [search]=\"data.searchMeta()\"\n                                    [searchLimitWordMax]=\"metadata.descriptor().searchLimitMaxWords\"\n                                    [enableCaseSensitive]=\"isLazy()\">\n                                    @if (hasTitleDisplay()) {\n                                        <ng-template mngTemplate=\"title\">\n                                            <ng-container *ngTemplateOutlet=\"captionTemplateOrComponentOrTitle\"></ng-container>\n                                        </ng-template>\n                                    }\n                                </mng-table-filter-overlay-with-tag>\n                            }\n                        } @else {\n                            <ng-container *ngTemplateOutlet=\"captionTemplateOrComponentOrTitle\"></ng-container>\n                        }\n                        <ng-template #captionTemplateOrComponentOrTitle>\n                            @if (captionTemplate()) {\n                                <ng-container *ngTemplateOutlet=\"captionTemplate()\"></ng-container>\n                            } @else if (captionComponent()) {\n                                <ng-container [mngComponent]=\"captionComponent()\" (instanceCreated)=\"captionComponentInstance.emit($event)\"></ng-container>\n                            } @else if (metadata.descriptor().title) {\n                                <h5 class=\"p-0 m-0\">{{ metadata.descriptor().title! | translate }}</h5>\n                            }\n                        </ng-template>\n                    </div>\n                }\n            </ng-template>\n            <ng-template #header>\n                @if (!metadata.descriptor().hideHeader) {\n                    <tr class=\"mng-table-header\" [class]=\"metadata.descriptor().headerClassName\">\n                        @if (selectionEnabled()) {\n                            @if (selectionMode() === 'multiple') {\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                    <p-tableHeaderCheckbox />\n                                </th>\n                            } @else {\n                                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                            }\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\" pFrozenColumn [frozen]=\"true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <ng-template #sortableColumnTHTemplate>\n                                <div class=\"flex justify-between items-center\">\n                                    {{\n                                        (col.descriptor.title && !col.descriptor.titleUseModelBase\n                                            ? col.descriptor.title\n                                            : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                        ) | translate\n                                    }}\n                                    <p-sortIcon [field]=\"col.sort?.property\" class=\"flex\"></p-sortIcon>\n                                </div>\n                            </ng-template>\n                            <ng-template #nonSortableColumnTHTemplate>\n                                {{\n                                    (col.descriptor.title && !col.descriptor.titleUseModelBase\n                                        ? col.descriptor.title\n                                        : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n                                    ) | translate\n                                }}\n                            </ng-template>\n                            @if (col.descriptor.isReorderable) {\n                                <th\n                                    pResizableColumn\n                                    pReorderableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            } @else {\n                                <th\n                                    pResizableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            }\n                        }\n                        @if (hasLastColumn()) {\n                            <th\n                                [style.min-width.px]=\"columnLastMinWidth()\"\n                                pFrozenColumn\n                                [frozen]=\"metadata.descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n                                alignFrozen=\"right\"\n                                class=\"mng-table-column-custom-last text-right!\">\n                                @if (areColumnsToggleable()) {\n                                    @defer (on idle) {\n                                        <mng-table-column-toggle [columns]=\"visibleColumns()\" />\n                                    }\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n                @if (hasColumnFilters()) {\n                    <tr class=\"mng-column-filter-row\">\n                        <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                        @if (selectionEnabled()) {\n                            <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @if (metadata.descriptor().rowExpandable) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <th\n                                [class]=\"'px-1! ' + col.filter?.descriptor?.columnClassName | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\"\n                                [style.width.px]=\"col.width\"\n                                [style.width.%]=\"col.width ? null : (col.filter?.descriptor?.columnWidth ?? col.descriptor.width ?? null)\"\n                                [style.min-width.px]=\"col.width ? null : (col.filter?.descriptor?.columnMinWidth ?? col.descriptor.minWidth)\"\n                                [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                                @if (col.filter) {\n                                    @defer (on idle) {\n                                        <mng-table-column-filter [metadata]=\"col.filter\"></mng-table-column-filter>\n                                    }\n                                }\n                            </th>\n                        }\n                        @if (hasLastColumn()) {\n                            <th pFrozenColumn alignFrozen=\"right\" class=\"mng-table-column-custom-last\" [style.min-width.px]=\"columnLastMinWidth()\"></th>\n                        }\n                    </tr>\n                }\n            </ng-template>\n            <ng-template #body let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n                <tr\n                    [pReorderableRow]=\"idx\"\n                    [ngClass]=\"\n                        metadata.descriptor().rowClassName | mngClassMap: metadata.descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: metadata.descriptor() : item\n                    \">\n                    @if (selectionEnabled()) {\n                        @if (selectionMode() === 'multiple') {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                            </td>\n                        } @else {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                            </td>\n                        }\n                    }\n                    @if (metadata.descriptor().rowExpandable) {\n                        <td>\n                            @let expandProp = metadata.descriptor().rowExpandableProperty;\n                            @if (!expandProp || item[expandProp]) {\n                                <button\n                                    pButton\n                                    type=\"button\"\n                                    [pRowToggler]=\"item\"\n                                    rounded=\"true\"\n                                    text=\"true\"\n                                    class=\"mng-button-sm\"\n                                    [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n                            }\n                        </td>\n                    }\n                    @if (rowReorderEnabled()) {\n                        <td>\n                            <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n                        </td>\n                    }\n                    @for (col of visibleColumns(); track col.id) {\n                        <td\n                            (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                            [class]=\"\n                                col.descriptor.className\n                                    | mngClassMap: col.descriptor.classNameMapFn : item\n                                    | mngTableColumnFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\n                            \"\n                            [class.clickable]=\"isCellClickEnabled()\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                            <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                        </td>\n                    }\n                    @if (hasLastColumn()) {\n                        <td\n                            class=\"mng-table-column-custom-last justify-end text-right!\"\n                            [style.min-width.px]=\"columnLastMinWidth()\"\n                            pFrozenColumn\n                            alignFrozen=\"right\"\n                            [frozen]=\"metadata.descriptor().actionColumnFrozen ?? true\">\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 #expandedrow let-item>\n                @if (metadata.descriptor().rowExpandable) {\n                    <tr>\n                        <td></td>\n                        <td [colSpan]=\"metadata.descriptor().rowExpandableColSpan\">\n                            @if (metadata.descriptor().rowExpandableComponentType !== undefined) {\n                                <ng-container [mngComponent]=\"metadata.descriptor().rowExpandableComponentType\" [inputs]=\"{item}\"> </ng-container>\n                            } @else {\n                                <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n                            }\n                        </td>\n                    </tr>\n                }\n            </ng-template>\n            <ng-template #loadingicon>\n                <div class=\"flex flex-col items-center\">\n                    @if (metadata.descriptor().loadingIcon) {\n                        <i [class]=\"'text-white text-4xl pi-spin ' + metadata.descriptor().loadingIcon\"></i>\n                    }\n                    @if (metadata.descriptor().loadingText) {\n                        <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': metadata.descriptor().loadingIcon}\">\n                            {{ metadata.descriptor().loadingText ?? '' | translate }}\n                        </div>\n                    }\n                </div>\n            </ng-template>\n            <ng-template #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 #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 #summary>\n                    <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: data.data(), totalCount: data.count()}\"></ng-container>\n                </ng-template>\n            }\n        </p-table>\n    }\n</div>\n", styles: ["mng-table .p-datatable .p-datatable-header{border-top:0}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td{cursor:auto}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td.clickable{cursor:pointer}:is(mng-table .p-datatable .p-datatable-thead>tr>th,mng-table .p-datatable .p-datatable-tbody>tr>td):hover mng-table-column-value .help-buttons{display:block}mng-table .p-datatable .p-datatable-thead>tr>th.mng-table-column-custom-last{padding:var(--mng-table-column-head-custom-last, .1rem 1rem)}mng-table .p-datatable .p-datatable-tbody>tr>td{position:relative}mng-table .p-datatable .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding-top:.1rem;padding-bottom:.1rem}mng-table .p-datatable .p-datatable-tbody>tr>td.p-datatable-frozen-column{position:sticky;z-index:1;background:transparent}mng-table .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-column-body-custom-last, .15rem 1rem)}mng-table .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-sm-column-body-custom-last, .05rem 1rem)}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-thead>tr>th{overflow:hidden;text-overflow:ellipsis}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-tbody>tr>td{overflow:hidden}mng-table .p-datatable .mng-table-row-localization-default-locale{background:var(--p-surface-100)!important}mng-table .mng-table-header>th:not(:first-child):not(:last-child){border-radius:0!important}mng-table .mng-table-header>th:first-child{border-top-right-radius:0!important;border-bottom-right-radius:0!important}mng-table .mng-table-header>th:last-child{border-radius:0!important}mng-table .mng-table-header .mng-table-columns-multiselect{width:36px}mng-table .mng-table-header .mng-table-columns-multiselect .p-multiselect-label-container{width:0}mng-table.mng-table-no-header p-datatable .p-datatable-header{display:none}mng-table.mng-table-header-compact .p-datatable-header{padding:var(--mng-table-header-compact-padding, 0 0 .5rem 0)}\n"] }]
             }], ctorParameters: () => [], propDecorators: null }) });
 
 /**
@@ -2142,4 +2139,4 @@ function provideTableChild(config) {
  */
 
 export { COMMONS_TABLE_FEATURE_CONFIG_IT as C, FilterValuePipe as F, LocaleDefaultRowClassPipe as L, TableMetadataService as T, TablePreferencesService as a, TableColumnFilterComponent as b, TableColumnValueComponent as c, TableFilterActiveTagComponent as d, TableFilterFormComponent as e, TableFilterOverlayWithTagComponent as f, TableComponent as g, filterGenerateMatchModeOptions as h, filterGetDefaultMatchMode as i, filterSetMetadataOnChange as j, filterSetMetadataOnDisplayChange as k, filterAreDatesEqual as l, filterApplySerializationConfigToCmp as m, filterAdjustDisplayValueOnMatchModeChange as n, filterGetDateConfig as o, filterGetNumberConfig as p, createFilterDescriptorsFromGeneric as q, generateTableLayoutPrefsKey as r, TableColumnFilterClassPipe as s, tableNotificationError as t, TableDataService as u, provideTableChild as v, withTable as w };
-//# sourceMappingURL=mediusinc-mng-commons-table-mediusinc-mng-commons-table-8TdW6NCC.mjs.map
+//# sourceMappingURL=mediusinc-mng-commons-table-mediusinc-mng-commons-table-DFcdSUCN.mjs.map