@mediusinc/mng-commons 5.1.0 → 5.2.0-rc.1

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

@@ -26,7 +26,7 @@ import { ZIndexUtils } from 'primeng/utils';
 import { Subject, debounceTime, distinctUntilChanged, switchMap, of, combineLatest, NEVER } from 'rxjs';
 import { COMMONS_MODULE_CONFIG_IT, FilterMatchMode, dateToIsoString, GetterPipe, TemplatePipe, BooleanPipe, EnumPipe, ComponentDirective, toastMessage, CommonsService, LoggerService, LocalStorageService, booleanOrUndefinedAttribute, TemplateDirective, findTemplateByName, mergeDataListParamsWithDefaults, fromTableLoadToDataListParams, dataListParamsToUrlQuery, toObservable as toObservable$1, fromSubscribeError, getErrorLogLevel, fromUrlQueryToDataListParams, I18nPropertyPipe, ClassMapPipe } from '@mediusinc/mng-commons/core';
 import { FilterLookupTypeEnum, FilterTypeEnum } from '@mediusinc/mng-commons/filter';
-import { DateRangeComponent, AutocompleteComponent, DropdownComponent, InputTrimDirective } from '@mediusinc/mng-commons/form';
+import { DateRangeComponent, AutocompleteComponent, DropdownComponent, InputTrimDirective, NumberRangeComponent } from '@mediusinc/mng-commons/form';
 import * as i4$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i4$2 from 'primeng/ripple';
@@ -50,10 +50,16 @@ class DataListService {
         this.offset = signal(0);
         this.globalFilterFields = signal([]);
         // data
-        this.data = signal([]);
-        this.count = signal(0);
+        this._data = signal([]);
+        this._count = signal(0);
+        this.data = this._data.asReadonly();
+        this.count = this._count.asReadonly();
         this.loading = signal(true);
     }
+    setData(data, count) {
+        this._data.set([...data]);
+        this._count.set(count ?? data.length);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: DataListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: DataListService }); }
 }
@@ -89,6 +95,7 @@ class TableColumnFilterFullComponent {
         this.isInputDisabled = computed(() => this.filterConstraint()?.matchMode === FilterMatchMode.Exists || this.filterConstraint()?.matchMode === FilterMatchMode.DoesNotExist);
         this.overlayVisible = signal(false);
         this.window = this.document.defaultView;
+        this.numericValueFromModelChange = null;
         this.dateDebounceSubject = new Subject();
         this.dateTimeInUtc = false;
         this.dateTimeWithTimezone = true;
@@ -205,6 +212,7 @@ class TableColumnFilterFullComponent {
     }
     // eslint-disable-next-line @typescript-eslint/ban-types
     onNumericModelChange(value) {
+        this.numericValueFromModelChange = value;
         if (value === null) {
             this.updateFilterValue(value);
         }
@@ -212,8 +220,13 @@ class TableColumnFilterFullComponent {
     // eslint-disable-next-line @typescript-eslint/ban-types
     onNumericInputKeyDown(event) {
         if (event.key === 'Enter') {
-            const value = event?.target?.value ?? null;
-            this.updateFilterValue(value !== null ? +value : null);
+            if (this.filterConstraint()?.displayMatchMode === FilterMatchMode.Between && Array.isArray(this.numericValueFromModelChange)) {
+                const numberValues = this.numericValueFromModelChange.filter(v => typeof v === 'number');
+                if (numberValues.length !== 2) {
+                    return;
+                }
+            }
+            this.updateFilterValue(this.numericValueFromModelChange);
             event.preventDefault();
         }
     }
@@ -222,7 +235,7 @@ class TableColumnFilterFullComponent {
         this.updateFilterValue(value);
     }
     // eslint-disable-next-line @typescript-eslint/ban-types
-    dateFilter(value) {
+    onDateFilterModelChange(value) {
         if (this.filterConstraint()?.displayMatchMode === FilterMatchMode.Between && Array.isArray(value)) {
             const dateValues = value.filter(v => v instanceof Date);
             if (dateValues.length !== 2) {
@@ -242,8 +255,52 @@ class TableColumnFilterFullComponent {
         }
         this.updateFilterValue(value);
     }
-    onMatchModeChange(matchMode) {
-        this.setFilterConstraint({ ...this.filterConstraint(), matchMode: matchMode });
+    onMatchModeChange(displayMatchMode) {
+        const previousDisplayMatchMode = this.filterConstraint()?.displayMatchMode;
+        let value = this.filterConstraint()?.displayValue;
+        if (Array.isArray(value) && value.length === 0) {
+            value = null;
+        }
+        if (value != null && previousDisplayMatchMode && displayMatchMode !== previousDisplayMatchMode) {
+            // handle values on match mode changes
+            const matchModesWithArrayValues = [FilterMatchMode.Between, FilterMatchMode.In, FilterMatchMode.NotIn];
+            if (matchModesWithArrayValues.indexOf(previousDisplayMatchMode) >= 0 && matchModesWithArrayValues.indexOf(displayMatchMode) === -1) {
+                // from array values to non-array values
+                if (Array.isArray(value)) {
+                    value = value?.[0];
+                }
+            }
+            else if (matchModesWithArrayValues.indexOf(previousDisplayMatchMode) === -1 && displayMatchMode === FilterMatchMode.Between) {
+                // from non-array values to between
+                // it can already be an array because of "fake" equals for dates with timestamps (that is actually between)
+                const fromValue = Array.isArray(value) ? value[0] : value;
+                // for to value, add 1 day (if date) or 1 (if number)
+                const toValue = fromValue instanceof Date ? new Date(fromValue.getTime() + 24 * 3600 * 1000) : typeof fromValue === 'number' ? fromValue + 1 : fromValue;
+                value = [fromValue, toValue];
+            }
+            else if (matchModesWithArrayValues.indexOf(previousDisplayMatchMode) >= 0 && displayMatchMode === FilterMatchMode.Between) {
+                // from array values to between
+                if (Array.isArray(value)) {
+                    if (value.length > 2) {
+                        value = [value[0], value[1]];
+                    }
+                    else if (value.length === 1) {
+                        value = [value[0], value[0]];
+                    }
+                    else if (value.length === 0) {
+                        value = null;
+                    }
+                }
+            }
+            // filters with equals on dates with timezones are extra, because double value needs to be added and match mode changed
+            if (displayMatchMode === FilterMatchMode.Equals &&
+                this.descriptor.filterType === FilterTypeEnum.Date &&
+                (this.descriptor.datePickerShowTime || this.descriptor.datePickerValueNoTime || this.dateOnlyDisabled)) {
+                value = [value, value];
+                displayMatchMode = FilterMatchMode.Between;
+            }
+        }
+        this.setFilterConstraint({ ...this.filterConstraint(), matchMode: displayMatchMode, value: value });
         this.updateDtFilter();
         this.hideOverlay();
     }
@@ -372,6 +429,7 @@ class TableColumnFilterFullComponent {
                 { value: FilterMatchMode.LessThanOrEqualTo, label: this.primeConfig.getTranslation(FilterMatchMode.LessThanOrEqualTo) },
                 { value: FilterMatchMode.GreaterThan, label: this.primeConfig.getTranslation(FilterMatchMode.GreaterThan) },
                 { value: FilterMatchMode.GreaterThanOrEqualTo, label: this.primeConfig.getTranslation(FilterMatchMode.GreaterThanOrEqualTo) },
+                { value: FilterMatchMode.Between, label: this.primeConfig.getTranslation(FilterMatchMode.Between) },
                 { value: FilterMatchMode.Exists, label: this.primeConfig.getTranslation(FilterMatchMode.Exists) },
                 { value: FilterMatchMode.DoesNotExist, label: this.primeConfig.getTranslation(FilterMatchMode.DoesNotExist) }
             ];
@@ -561,6 +619,7 @@ class TableColumnFilterFullComponent {
         let matchMode = metadata?.matchMode ?? this.getDefaultMatchMode();
         let displayValue = metadata?.value;
         let displayMatchMode = matchMode;
+        // when equals is used on dates with time, the actual filter will be between, but displayed as equals
         if (this.descriptor.filterType === FilterTypeEnum.Date && (this.descriptor.datePickerShowTime || this.descriptor.datePickerValueNoTime || this.dateOnlyDisabled)) {
             if (matchMode === FilterMatchMode.Between &&
                 Array.isArray(metadata?.value) &&
@@ -579,6 +638,14 @@ class TableColumnFilterFullComponent {
                 matchMode = FilterMatchMode.Between;
             }
         }
+        if (this.descriptor.filterType === FilterTypeEnum.Date && displayValue) {
+            // display value for calendar cannot be string, convert to date
+            displayValue = Array.isArray(displayValue)
+                ? displayValue.map(v => (!(v instanceof Date) ? new Date(v) : v))
+                : displayValue instanceof Date
+                    ? displayValue
+                    : new Date(displayValue);
+        }
         this.filterConstraint.set({
             matchMode,
             value: metadata?.value,
@@ -588,7 +655,7 @@ class TableColumnFilterFullComponent {
         this.primeTable.filters[this.primeField] = this.filterConstraint();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TableColumnFilterFullComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: TableColumnFilterFullComponent, isStandalone: true, selector: "mng-table-column-filter-full", inputs: { descriptor: "descriptor" }, viewQueries: [{ propertyName: "icon", first: true, predicate: ["icon"], descendants: true }], ngImport: i0, template: "<div class=\"p-column-filter p-column-filter-row\">\n    @switch (primeType) {\n        @case ('text') {\n            <input\n                type=\"text\"\n                pInputText\n                class=\"mng-column-filter-string-input\"\n                [value]=\"filterConstraint()?.displayValue\"\n                [disabled]=\"isInputDisabled()\"\n                (input)=\"onTextModelChange($event)\"\n                (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n                [attr.placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [mngInputTrim]=\"descriptor.trimOption\" />\n        }\n        @case ('numeric') {\n            <p-inputNumber\n                inputStyleClass=\"mng-column-filter-number-input\"\n                [ngModel]=\"filterConstraint()?.displayValue\"\n                (ngModelChange)=\"onNumericModelChange($event)\"\n                (onKeyDown)=\"onNumericInputKeyDown($event)\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [useGrouping]=\"descriptor.numberUseGrouping\"\n                [minFractionDigits]=\"descriptor.numberMinFractionDigits\"\n                [maxFractionDigits]=\"descriptor.numberMaxFractionDigits\"\n                [disabled]=\"isInputDisabled()\"></p-inputNumber>\n        }\n\n        @case ('boolean') {\n            <p-triStateCheckbox [ngModel]=\"filterConstraint()?.displayValue\" (ngModelChange)=\"onTristateModelChange($event)\"></p-triStateCheckbox>\n        }\n        @case ('date') {\n            @if (filterConstraint()?.displayMatchMode === 'between') {\n                <mng-date-range\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"dateFilter($event)\"\n                    [showTime]=\"descriptor.datePickerShowTime\"\n                    [dateFormat]=\"descriptor.datePickerFormat\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [disabled]=\"isInputDisabled()\"></mng-date-range>\n            } @else {\n                <p-calendar\n                    appendTo=\"body\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"dateFilter($event)\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [showIcon]=\"true\"\n                    [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n                    [showTime]=\"descriptor.datePickerShowTime\"\n                    [firstDayOfWeek]=\"1\">\n                </p-calendar>\n            }\n        }\n        @case ('lookup') {\n            @if (lookupDescriptor) {\n                @switch (lookupDescriptor.lookupType) {\n                    @case (lookupTypeAutocomplete) {\n                        <mng-autocomplete\n                            [ngModel]=\"filterConstraint()?.displayValue\"\n                            [dataProvider]=\"lookupDescriptor.dataProvider\"\n                            [optionsTrackProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsValueProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookupDescriptor.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookupDescriptor.optionsLabelTranslate\"\n                            [multiselect]=\"lookupDescriptor.multiselect\"\n                            [autoClear]=\"lookupDescriptor.autocompleteAutoClear ?? false\"\n                            [openOnFocus]=\"lookupDescriptor.autocompleteAutoClear ?? true\"\n                            [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch ?? false\"\n                            [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                            [className]=\"lookupDescriptor.className\"\n                            [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                            [disabled]=\"isInputDisabled()\"\n                            (valueChange)=\"autocompleteFilter($event)\"\n                            [searchTrim]=\"descriptor.trimOption\">\n                        </mng-autocomplete>\n                    }\n                    @case (lookupTypeDropdown) {\n                        <mng-dropdown\n                            [ngModel]=\"filterConstraint()?.displayValue\"\n                            [dataProvider]=\"lookupDescriptor.dataProvider\"\n                            [optionsValueProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookupDescriptor.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookupDescriptor.optionsLabelTranslate\"\n                            [multiselect]=\"lookupDescriptor.multiselect\"\n                            [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                            [className]=\"lookupDescriptor.className\"\n                            [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                            [showClear]=\"false\"\n                            [changeValueOnBlur]=\"lookupDescriptor.multiselect\"\n                            [disabled]=\"isInputDisabled()\"\n                            (valueChange)=\"dropdownFilter($event)\">\n                        </mng-dropdown>\n                    }\n                }\n            }\n        }\n    }\n\n    @if (matchModes().length > 1) {\n        <button\n            #icon\n            type=\"button\"\n            class=\"p-column-filter-menu-button p-link\"\n            aria-haspopup=\"true\"\n            [attr.aria-expanded]=\"overlayVisible()\"\n            [ngClass]=\"{'p-column-filter-menu-button-open': overlayVisible(), 'p-column-filter-menu-button-active': isFilterSet()}\"\n            (click)=\"toggleMenu($event)\"\n            (keydown)=\"onToggleButtonKeyDown($event)\">\n            <FilterIcon [styleClass]=\"'pi-filter-icon'\" />\n        </button>\n    }\n    <button #icon [ngClass]=\"{'p-hidden-space': !isFilterSet()}\" type=\"button\" class=\"p-column-filter-clear-button p-link\" (click)=\"clearFilter()\">\n        <FilterSlashIcon />\n    </button>\n    @if (overlayVisible()) {\n        <div\n            class=\"p-column-filter-overlay p-component p-fluid\"\n            (click)=\"onContentClick()\"\n            [@overlayAnimation]=\"'visible'\"\n            (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n            (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n            (keydown.escape)=\"onEscape()\">\n            <ul class=\"p-column-filter-row-items\">\n                @for (matchMode of matchModes(); track matchMode; let i = $index) {\n                    <li\n                        class=\"p-column-filter-row-item\"\n                        (click)=\"onMatchModeChange(matchMode.value)\"\n                        (keydown)=\"onMatchModeKeyDown($event)\"\n                        (keydown.enter)=\"this.onMatchModeChange(matchMode.value)\"\n                        [ngClass]=\"{'p-highlight': matchMode.value === filterConstraint()?.displayMatchMode}\"\n                        [attr.tabindex]=\"i === 0 ? '0' : null\">\n                        {{ matchMode.label }}\n                    </li>\n                }\n                <li class=\"p-column-filter-separator\"></li>\n                <li class=\"p-column-filter-row-item\" (click)=\"onRowClearItemClick()\" (keydown)=\"onMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">\n                    {{ noFilterLabel }}\n                </li>\n            </ul>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: DateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "dateFormat", "disabled"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "optionsTrackProperty", "optionsValueProperty", "optionsLabelProperty", "optionsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst", "searchTrim", "disabled"], outputs: ["valueChange", "blur"] }, { kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur", "loading", "disabled"], outputs: ["valueChange", "blur"] }, { kind: "ngmodule", type: TriStateCheckboxModule }, { kind: "component", type: i4.TriStateCheckbox, selector: "p-triStateCheckbox", inputs: ["disabled", "name", "ariaLabel", "ariaLabelledBy", "variant", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i5.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i6.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: FilterIcon, selector: "FilterIcon" }, { kind: "component", type: FilterSlashIcon, selector: "FilterSlashIcon" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: TableColumnFilterFullComponent, isStandalone: true, selector: "mng-table-column-filter-full", inputs: { descriptor: "descriptor" }, viewQueries: [{ propertyName: "icon", first: true, predicate: ["icon"], descendants: true }], ngImport: i0, template: "<div class=\"p-column-filter p-column-filter-row\">\n    @switch (primeType) {\n        @case ('text') {\n            <input\n                type=\"text\"\n                pInputText\n                class=\"mng-column-filter-string-input\"\n                [value]=\"filterConstraint()?.displayValue\"\n                [disabled]=\"isInputDisabled()\"\n                (input)=\"onTextModelChange($event)\"\n                (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n                [attr.placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [mngInputTrim]=\"descriptor.trimOption\" />\n        }\n        @case ('numeric') {\n            @if (filterConstraint()?.displayMatchMode === 'between') {\n                <mng-number-range\n                    className=\"mng-column-filter-number-input\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onNumericModelChange($event)\"\n                    (keyDown)=\"onNumericInputKeyDown($event)\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [useGrouping]=\"descriptor.numberUseGrouping\"\n                    [minFractionDigits]=\"descriptor.numberMinFractionDigits\"\n                    [maxFractionDigits]=\"descriptor.numberMaxFractionDigits\"\n                    [disabled]=\"isInputDisabled()\" />\n            } @else {\n                <p-inputNumber\n                    inputStyleClass=\"mng-column-filter-number-input\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onNumericModelChange($event)\"\n                    (onKeyDown)=\"onNumericInputKeyDown($event)\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [useGrouping]=\"descriptor.numberUseGrouping\"\n                    [minFractionDigits]=\"descriptor.numberMinFractionDigits\"\n                    [maxFractionDigits]=\"descriptor.numberMaxFractionDigits\"\n                    [disabled]=\"isInputDisabled()\" />\n            }\n        }\n\n        @case ('boolean') {\n            <p-triStateCheckbox [ngModel]=\"filterConstraint()?.displayValue\" (ngModelChange)=\"onTristateModelChange($event)\"></p-triStateCheckbox>\n        }\n        @case ('date') {\n            @if (filterConstraint()?.displayMatchMode === 'between') {\n                <mng-date-range\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onDateFilterModelChange($event)\"\n                    [showTime]=\"descriptor.datePickerShowTime\"\n                    [dateFormat]=\"descriptor.datePickerFormat\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [disabled]=\"isInputDisabled()\"></mng-date-range>\n            } @else {\n                <p-calendar\n                    appendTo=\"body\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onDateFilterModelChange($event)\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [showIcon]=\"true\"\n                    [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n                    [showTime]=\"descriptor.datePickerShowTime\"\n                    [firstDayOfWeek]=\"1\">\n                </p-calendar>\n            }\n        }\n        @case ('lookup') {\n            @if (lookupDescriptor) {\n                @switch (lookupDescriptor.lookupType) {\n                    @case (lookupTypeAutocomplete) {\n                        <mng-autocomplete\n                            [ngModel]=\"filterConstraint()?.displayValue\"\n                            [dataProvider]=\"lookupDescriptor.dataProvider\"\n                            [optionsTrackProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsValueProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookupDescriptor.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookupDescriptor.optionsLabelTranslate\"\n                            [multiselect]=\"lookupDescriptor.multiselect\"\n                            [autoClear]=\"lookupDescriptor.autocompleteAutoClear ?? false\"\n                            [openOnFocus]=\"lookupDescriptor.autocompleteAutoClear ?? true\"\n                            [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch ?? false\"\n                            [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                            [className]=\"lookupDescriptor.className\"\n                            [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                            [disabled]=\"isInputDisabled()\"\n                            (valueChange)=\"autocompleteFilter($event)\"\n                            [searchTrim]=\"descriptor.trimOption\">\n                        </mng-autocomplete>\n                    }\n                    @case (lookupTypeDropdown) {\n                        <mng-dropdown\n                            [ngModel]=\"filterConstraint()?.displayValue\"\n                            [dataProvider]=\"lookupDescriptor.dataProvider\"\n                            [optionsValueProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookupDescriptor.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookupDescriptor.optionsLabelTranslate\"\n                            [multiselect]=\"lookupDescriptor.multiselect\"\n                            [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                            [className]=\"lookupDescriptor.className\"\n                            [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                            [showClear]=\"false\"\n                            [changeValueOnBlur]=\"lookupDescriptor.multiselect\"\n                            [disabled]=\"isInputDisabled()\"\n                            (valueChange)=\"dropdownFilter($event)\">\n                        </mng-dropdown>\n                    }\n                }\n            }\n        }\n    }\n\n    @if (matchModes().length > 1) {\n        <button\n            #icon\n            type=\"button\"\n            class=\"p-column-filter-menu-button p-link\"\n            aria-haspopup=\"true\"\n            [attr.aria-expanded]=\"overlayVisible()\"\n            [ngClass]=\"{'p-column-filter-menu-button-open': overlayVisible(), 'p-column-filter-menu-button-active': isFilterSet()}\"\n            (click)=\"toggleMenu($event)\"\n            (keydown)=\"onToggleButtonKeyDown($event)\">\n            <FilterIcon [styleClass]=\"'pi-filter-icon'\" />\n        </button>\n    }\n    <button #icon [ngClass]=\"{'p-hidden-space': !isFilterSet()}\" type=\"button\" class=\"p-column-filter-clear-button p-link\" (click)=\"clearFilter()\">\n        <FilterSlashIcon />\n    </button>\n    @if (overlayVisible()) {\n        <div\n            class=\"p-column-filter-overlay p-component p-fluid\"\n            (click)=\"onContentClick()\"\n            [@overlayAnimation]=\"'visible'\"\n            (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n            (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n            (keydown.escape)=\"onEscape()\">\n            <ul class=\"p-column-filter-row-items\">\n                @for (matchMode of matchModes(); track matchMode; let i = $index) {\n                    <li\n                        class=\"p-column-filter-row-item\"\n                        (click)=\"onMatchModeChange(matchMode.value)\"\n                        (keydown)=\"onMatchModeKeyDown($event)\"\n                        (keydown.enter)=\"this.onMatchModeChange(matchMode.value)\"\n                        [ngClass]=\"{'p-highlight': matchMode.value === filterConstraint()?.displayMatchMode}\"\n                        [attr.tabindex]=\"i === 0 ? '0' : null\">\n                        {{ matchMode.label }}\n                    </li>\n                }\n                <li class=\"p-column-filter-separator\"></li>\n                <li class=\"p-column-filter-row-item\" (click)=\"onRowClearItemClick()\" (keydown)=\"onMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">\n                    {{ noFilterLabel }}\n                </li>\n            </ul>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: DateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "dateFormat", "className", "disabled"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "optionsTrackProperty", "optionsValueProperty", "optionsLabelProperty", "optionsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst", "searchTrim", "disabled"], outputs: ["valueChange", "blur"] }, { kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur", "loading", "disabled"], outputs: ["valueChange", "blur"] }, { kind: "ngmodule", type: TriStateCheckboxModule }, { kind: "component", type: i4.TriStateCheckbox, selector: "p-triStateCheckbox", inputs: ["disabled", "name", "ariaLabel", "ariaLabelledBy", "variant", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i5.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i6.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: FilterIcon, selector: "FilterIcon" }, { kind: "component", type: FilterSlashIcon, selector: "FilterSlashIcon" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "component", type: NumberRangeComponent, selector: "mng-number-range", inputs: ["placeholder", "useGrouping", "minFractionDigits", "maxFractionDigits", "disabled", "className"], outputs: ["keyDown"] }], animations: [
             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 }))])
@@ -611,13 +678,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                         FilterIcon,
                         FilterSlashIcon,
                         NgClass,
-                        InputTrimDirective
+                        InputTrimDirective,
+                        NumberRangeComponent
                     ], animations: [
                         trigger('overlayAnimation', [
                             transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]),
                             transition(':leave', [animate('.1s linear', style({ opacity: 0 }))])
                         ])
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"p-column-filter p-column-filter-row\">\n    @switch (primeType) {\n        @case ('text') {\n            <input\n                type=\"text\"\n                pInputText\n                class=\"mng-column-filter-string-input\"\n                [value]=\"filterConstraint()?.displayValue\"\n                [disabled]=\"isInputDisabled()\"\n                (input)=\"onTextModelChange($event)\"\n                (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n                [attr.placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [mngInputTrim]=\"descriptor.trimOption\" />\n        }\n        @case ('numeric') {\n            <p-inputNumber\n                inputStyleClass=\"mng-column-filter-number-input\"\n                [ngModel]=\"filterConstraint()?.displayValue\"\n                (ngModelChange)=\"onNumericModelChange($event)\"\n                (onKeyDown)=\"onNumericInputKeyDown($event)\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [useGrouping]=\"descriptor.numberUseGrouping\"\n                [minFractionDigits]=\"descriptor.numberMinFractionDigits\"\n                [maxFractionDigits]=\"descriptor.numberMaxFractionDigits\"\n                [disabled]=\"isInputDisabled()\"></p-inputNumber>\n        }\n\n        @case ('boolean') {\n            <p-triStateCheckbox [ngModel]=\"filterConstraint()?.displayValue\" (ngModelChange)=\"onTristateModelChange($event)\"></p-triStateCheckbox>\n        }\n        @case ('date') {\n            @if (filterConstraint()?.displayMatchMode === 'between') {\n                <mng-date-range\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"dateFilter($event)\"\n                    [showTime]=\"descriptor.datePickerShowTime\"\n                    [dateFormat]=\"descriptor.datePickerFormat\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [disabled]=\"isInputDisabled()\"></mng-date-range>\n            } @else {\n                <p-calendar\n                    appendTo=\"body\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"dateFilter($event)\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [showIcon]=\"true\"\n                    [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n                    [showTime]=\"descriptor.datePickerShowTime\"\n                    [firstDayOfWeek]=\"1\">\n                </p-calendar>\n            }\n        }\n        @case ('lookup') {\n            @if (lookupDescriptor) {\n                @switch (lookupDescriptor.lookupType) {\n                    @case (lookupTypeAutocomplete) {\n                        <mng-autocomplete\n                            [ngModel]=\"filterConstraint()?.displayValue\"\n                            [dataProvider]=\"lookupDescriptor.dataProvider\"\n                            [optionsTrackProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsValueProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookupDescriptor.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookupDescriptor.optionsLabelTranslate\"\n                            [multiselect]=\"lookupDescriptor.multiselect\"\n                            [autoClear]=\"lookupDescriptor.autocompleteAutoClear ?? false\"\n                            [openOnFocus]=\"lookupDescriptor.autocompleteAutoClear ?? true\"\n                            [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch ?? false\"\n                            [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                            [className]=\"lookupDescriptor.className\"\n                            [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                            [disabled]=\"isInputDisabled()\"\n                            (valueChange)=\"autocompleteFilter($event)\"\n                            [searchTrim]=\"descriptor.trimOption\">\n                        </mng-autocomplete>\n                    }\n                    @case (lookupTypeDropdown) {\n                        <mng-dropdown\n                            [ngModel]=\"filterConstraint()?.displayValue\"\n                            [dataProvider]=\"lookupDescriptor.dataProvider\"\n                            [optionsValueProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookupDescriptor.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookupDescriptor.optionsLabelTranslate\"\n                            [multiselect]=\"lookupDescriptor.multiselect\"\n                            [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                            [className]=\"lookupDescriptor.className\"\n                            [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                            [showClear]=\"false\"\n                            [changeValueOnBlur]=\"lookupDescriptor.multiselect\"\n                            [disabled]=\"isInputDisabled()\"\n                            (valueChange)=\"dropdownFilter($event)\">\n                        </mng-dropdown>\n                    }\n                }\n            }\n        }\n    }\n\n    @if (matchModes().length > 1) {\n        <button\n            #icon\n            type=\"button\"\n            class=\"p-column-filter-menu-button p-link\"\n            aria-haspopup=\"true\"\n            [attr.aria-expanded]=\"overlayVisible()\"\n            [ngClass]=\"{'p-column-filter-menu-button-open': overlayVisible(), 'p-column-filter-menu-button-active': isFilterSet()}\"\n            (click)=\"toggleMenu($event)\"\n            (keydown)=\"onToggleButtonKeyDown($event)\">\n            <FilterIcon [styleClass]=\"'pi-filter-icon'\" />\n        </button>\n    }\n    <button #icon [ngClass]=\"{'p-hidden-space': !isFilterSet()}\" type=\"button\" class=\"p-column-filter-clear-button p-link\" (click)=\"clearFilter()\">\n        <FilterSlashIcon />\n    </button>\n    @if (overlayVisible()) {\n        <div\n            class=\"p-column-filter-overlay p-component p-fluid\"\n            (click)=\"onContentClick()\"\n            [@overlayAnimation]=\"'visible'\"\n            (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n            (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n            (keydown.escape)=\"onEscape()\">\n            <ul class=\"p-column-filter-row-items\">\n                @for (matchMode of matchModes(); track matchMode; let i = $index) {\n                    <li\n                        class=\"p-column-filter-row-item\"\n                        (click)=\"onMatchModeChange(matchMode.value)\"\n                        (keydown)=\"onMatchModeKeyDown($event)\"\n                        (keydown.enter)=\"this.onMatchModeChange(matchMode.value)\"\n                        [ngClass]=\"{'p-highlight': matchMode.value === filterConstraint()?.displayMatchMode}\"\n                        [attr.tabindex]=\"i === 0 ? '0' : null\">\n                        {{ matchMode.label }}\n                    </li>\n                }\n                <li class=\"p-column-filter-separator\"></li>\n                <li class=\"p-column-filter-row-item\" (click)=\"onRowClearItemClick()\" (keydown)=\"onMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">\n                    {{ noFilterLabel }}\n                </li>\n            </ul>\n        </div>\n    }\n</div>\n" }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"p-column-filter p-column-filter-row\">\n    @switch (primeType) {\n        @case ('text') {\n            <input\n                type=\"text\"\n                pInputText\n                class=\"mng-column-filter-string-input\"\n                [value]=\"filterConstraint()?.displayValue\"\n                [disabled]=\"isInputDisabled()\"\n                (input)=\"onTextModelChange($event)\"\n                (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n                [attr.placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [mngInputTrim]=\"descriptor.trimOption\" />\n        }\n        @case ('numeric') {\n            @if (filterConstraint()?.displayMatchMode === 'between') {\n                <mng-number-range\n                    className=\"mng-column-filter-number-input\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onNumericModelChange($event)\"\n                    (keyDown)=\"onNumericInputKeyDown($event)\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [useGrouping]=\"descriptor.numberUseGrouping\"\n                    [minFractionDigits]=\"descriptor.numberMinFractionDigits\"\n                    [maxFractionDigits]=\"descriptor.numberMaxFractionDigits\"\n                    [disabled]=\"isInputDisabled()\" />\n            } @else {\n                <p-inputNumber\n                    inputStyleClass=\"mng-column-filter-number-input\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onNumericModelChange($event)\"\n                    (onKeyDown)=\"onNumericInputKeyDown($event)\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [useGrouping]=\"descriptor.numberUseGrouping\"\n                    [minFractionDigits]=\"descriptor.numberMinFractionDigits\"\n                    [maxFractionDigits]=\"descriptor.numberMaxFractionDigits\"\n                    [disabled]=\"isInputDisabled()\" />\n            }\n        }\n\n        @case ('boolean') {\n            <p-triStateCheckbox [ngModel]=\"filterConstraint()?.displayValue\" (ngModelChange)=\"onTristateModelChange($event)\"></p-triStateCheckbox>\n        }\n        @case ('date') {\n            @if (filterConstraint()?.displayMatchMode === 'between') {\n                <mng-date-range\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onDateFilterModelChange($event)\"\n                    [showTime]=\"descriptor.datePickerShowTime\"\n                    [dateFormat]=\"descriptor.datePickerFormat\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [disabled]=\"isInputDisabled()\"></mng-date-range>\n            } @else {\n                <p-calendar\n                    appendTo=\"body\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"onDateFilterModelChange($event)\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [showIcon]=\"true\"\n                    [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n                    [showTime]=\"descriptor.datePickerShowTime\"\n                    [firstDayOfWeek]=\"1\">\n                </p-calendar>\n            }\n        }\n        @case ('lookup') {\n            @if (lookupDescriptor) {\n                @switch (lookupDescriptor.lookupType) {\n                    @case (lookupTypeAutocomplete) {\n                        <mng-autocomplete\n                            [ngModel]=\"filterConstraint()?.displayValue\"\n                            [dataProvider]=\"lookupDescriptor.dataProvider\"\n                            [optionsTrackProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsValueProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookupDescriptor.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookupDescriptor.optionsLabelTranslate\"\n                            [multiselect]=\"lookupDescriptor.multiselect\"\n                            [autoClear]=\"lookupDescriptor.autocompleteAutoClear ?? false\"\n                            [openOnFocus]=\"lookupDescriptor.autocompleteAutoClear ?? true\"\n                            [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch ?? false\"\n                            [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                            [className]=\"lookupDescriptor.className\"\n                            [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                            [disabled]=\"isInputDisabled()\"\n                            (valueChange)=\"autocompleteFilter($event)\"\n                            [searchTrim]=\"descriptor.trimOption\">\n                        </mng-autocomplete>\n                    }\n                    @case (lookupTypeDropdown) {\n                        <mng-dropdown\n                            [ngModel]=\"filterConstraint()?.displayValue\"\n                            [dataProvider]=\"lookupDescriptor.dataProvider\"\n                            [optionsValueProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookupDescriptor.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookupDescriptor.optionsLabelTranslate\"\n                            [multiselect]=\"lookupDescriptor.multiselect\"\n                            [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                            [className]=\"lookupDescriptor.className\"\n                            [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                            [showClear]=\"false\"\n                            [changeValueOnBlur]=\"lookupDescriptor.multiselect\"\n                            [disabled]=\"isInputDisabled()\"\n                            (valueChange)=\"dropdownFilter($event)\">\n                        </mng-dropdown>\n                    }\n                }\n            }\n        }\n    }\n\n    @if (matchModes().length > 1) {\n        <button\n            #icon\n            type=\"button\"\n            class=\"p-column-filter-menu-button p-link\"\n            aria-haspopup=\"true\"\n            [attr.aria-expanded]=\"overlayVisible()\"\n            [ngClass]=\"{'p-column-filter-menu-button-open': overlayVisible(), 'p-column-filter-menu-button-active': isFilterSet()}\"\n            (click)=\"toggleMenu($event)\"\n            (keydown)=\"onToggleButtonKeyDown($event)\">\n            <FilterIcon [styleClass]=\"'pi-filter-icon'\" />\n        </button>\n    }\n    <button #icon [ngClass]=\"{'p-hidden-space': !isFilterSet()}\" type=\"button\" class=\"p-column-filter-clear-button p-link\" (click)=\"clearFilter()\">\n        <FilterSlashIcon />\n    </button>\n    @if (overlayVisible()) {\n        <div\n            class=\"p-column-filter-overlay p-component p-fluid\"\n            (click)=\"onContentClick()\"\n            [@overlayAnimation]=\"'visible'\"\n            (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n            (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n            (keydown.escape)=\"onEscape()\">\n            <ul class=\"p-column-filter-row-items\">\n                @for (matchMode of matchModes(); track matchMode; let i = $index) {\n                    <li\n                        class=\"p-column-filter-row-item\"\n                        (click)=\"onMatchModeChange(matchMode.value)\"\n                        (keydown)=\"onMatchModeKeyDown($event)\"\n                        (keydown.enter)=\"this.onMatchModeChange(matchMode.value)\"\n                        [ngClass]=\"{'p-highlight': matchMode.value === filterConstraint()?.displayMatchMode}\"\n                        [attr.tabindex]=\"i === 0 ? '0' : null\">\n                        {{ matchMode.label }}\n                    </li>\n                }\n                <li class=\"p-column-filter-separator\"></li>\n                <li class=\"p-column-filter-row-item\" (click)=\"onRowClearItemClick()\" (keydown)=\"onMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">\n                    {{ noFilterLabel }}\n                </li>\n            </ul>\n        </div>\n    }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { descriptor: [{
                 type: Input,
                 args: [{ required: true }]
@@ -691,7 +759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
 function tableNotificationError(translate, table, error, messageService) {
     const params = {};
     if (error?.message) {
-        params.errorMessage = `: ${error.message}`;
+        params.errorMessage = error.message;
     }
     else {
         params.errorMessage = '.';
@@ -781,8 +849,11 @@ class TableComponent {
         this.cellClickEnabled = input(true);
         this.selectionMode = input('multiple');
         this.selectionEnabled = input(false);
+        this.rowReorderEnabledInput = input(true, { alias: 'rowReorderEnabled' });
+        this.rowReorderEnabled = computed(() => this.rowReorderEnabledInput() && this.descriptor().rowReorderable);
         // styling
         this.columnLastMinWidth = input();
+        this.columnsColspan = computed(() => this.visibleColumns().length + (this.hasLastColumn() ? 1 : 0) + (this.selectionEnabled() ? 1 : 0) + (this.rowReorderEnabled() ? 1 : 0));
         // component inputs
         this.captionComponent = input();
         this.columnCustomLastComponent = input();
@@ -797,6 +868,7 @@ class TableComponent {
         this.selectionChange = output();
         this.captionComponentInstance = output();
         this.columnCustomLastComponentInstance = output();
+        this.rowReorder = output();
         // content and view queries
         this.templates = contentChildren(TemplateDirective);
         this.components = viewChildren((ComponentDirective));
@@ -900,8 +972,7 @@ class TableComponent {
         effect(() => {
             const result = this.result();
             if (result !== undefined) {
-                this.dataListService.data.set(result.data);
-                this.dataListService.count.set(result.totalCount ?? result.data.length);
+                this.dataListService.setData(result.data, result.totalCount);
                 const loading = this.loadingInput();
                 if (loading == undefined) {
                     // only set if input is not defined
@@ -913,8 +984,7 @@ class TableComponent {
             const result = this.result();
             const items = this.items();
             if (result == undefined && items !== undefined) {
-                this.dataListService.data.set(items);
-                this.dataListService.count.set(items.length);
+                this.dataListService.setData(items);
                 const loading = this.loadingInput();
                 if (loading == undefined) {
                     // only set if input is not defined
@@ -1025,6 +1095,9 @@ class TableComponent {
     onSelectionChange(event) {
         this.selectionChange.emit(event);
     }
+    onRowReorder(event) {
+        this.rowReorder.emit(event);
+    }
     /**
      * Method is called on column resize
      * @param element event's element
@@ -1062,20 +1135,18 @@ class TableComponent {
                         items = [];
                     }
                     items.splice(paramsWithDefaults.offset ?? 0, paramsWithDefaults.limit ?? this.dataListService.rows(), ...(res?.data ?? []));
-                    this.dataListService.data.set(items);
+                    this.dataListService.setData(items);
                 }
                 else {
-                    this.dataListService.data.set(res?.data ?? []);
+                    this.dataListService.setData(res?.data ?? [], res?.totalCount);
                 }
-                this.dataListService.count.set(res?.totalCount ?? 0); // count is not really important here
                 this.isFilterChanged = false;
                 this.isSortChanged = false;
                 this.dataListService.loading.set(false);
             },
             error: err => {
                 tableNotificationError(this.translate, this.descriptor(), err, this.messageService);
-                this.dataListService.data.set([]);
-                this.dataListService.count.set(0);
+                this.dataListService.setData([]);
                 this.dataListService.loading.set(false);
                 const error = fromSubscribeError(err, 'TableComponentError', {
                     queryParam: paramsWithDefaults
@@ -1266,7 +1337,7 @@ class TableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: TableComponent, isStandalone: true, selector: "mng-table", inputs: { descriptorInput: { classPropertyName: "descriptorInput", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, dataProvider: { classPropertyName: "dataProvider", publicName: "dataProvider", isSignal: true, isRequired: false, transformFunction: null }, useQueryParamsInput: { classPropertyName: "useQueryParamsInput", 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 }, 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" }, providers: [DataListService], queries: [{ propertyName: "templates", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "components", predicate: (ComponentDirective), descendants: true, isSignal: true }, { propertyName: "primeTable", first: true, predicate: Table, descendants: true, isSignal: true }], ngImport: i0, template: "<div [style.height]=\"tableFullHeightOffset() ? 'calc(100vh - ' + tableFullHeightOffset() + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    @if (!useQueryParams() || useQueryParamsInitialized()) {\n        <p-table\n            [value]=\"dataListService.data()\"\n            [dataKey]=\"descriptor().trackProperty\"\n            [lazy]=\"isLazy()\"\n            [loading]=\"dataListService.loading()\"\n            [paginator]=\"isPagination() && !infiniteScroll()\"\n            [rows]=\"infiniteScroll() ? 20 : dataListService.rows()\"\n            [first]=\"infiniteScroll() ? 0 : dataListService.offset()\"\n            [totalRecords]=\"dataListService.count()\"\n            [rowsPerPageOptions]=\"infiniteScroll() ? undefined : dataListService.rowsPerPageOptions()\"\n            [showCurrentPageReport]=\"!infiniteScroll()\"\n            [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n            [multiSortMeta]=\"dataListService.sortMeta()\"\n            [filters]=\"dataListService.filterMeta()\"\n            [globalFilterFields]=\"dataListService.globalFilterFields()\"\n            sortMode=\"multiple\"\n            [selection]=\"[]\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n            [scrollable]=\"true\"\n            [virtualScroll]=\"infiniteScroll()\"\n            [virtualScrollItemSize]=\"rowHeight()\"\n            scrollHeight=\"flex\"\n            [rowHover]=\"descriptor().hasHover\"\n            [styleClass]=\"className()\"\n            [resizableColumns]=\"descriptor().hasResizableColumns\"\n            [columnResizeMode]=\"descriptor().columnResizeMode ?? 'expand'\"\n            [reorderableColumns]=\"areColumnsReorderable()\"\n            paginatorDropdownAppendTo=\"body\"\n            [columns]=\"visibleColumns()\"\n            (onColResize)=\"onTableColumnResize($event)\"\n            (onColReorder)=\"onColumnReorder($event)\"\n            (onLazyLoad)=\"onTableLazyLoad($event)\"\n            (onSort)=\"onTableSort($event)\"\n            (onFilter)=\"onTableFilter($event)\">\n            @if (captionTemplate() || captionComponent() || descriptor().title) {\n                <ng-template pTemplate=\"caption\">\n                    @if (captionTemplate()) {\n                        <ng-container *ngTemplateOutlet=\"captionTemplate()\"></ng-container>\n                    } @else if (captionComponent()) {\n                        <div [mngComponent]=\"captionComponent()\" (instanceCreated)=\"captionComponentInstance.emit($event)\"></div>\n                    } @else {\n                        <h5 class=\"p-0 m-0\">{{ descriptor().title }}</h5>\n                    }\n                </ng-template>\n            }\n            <ng-template pTemplate=\"header\">\n                @if (!descriptor().hideHeader) {\n                    <tr class=\"mng-table-header\" [class]=\"descriptor().headerClassName\">\n                        @if (selectionEnabled()) {\n                            @if (selectionMode() === 'multiple') {\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\">\n                                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                                </th>\n                            } @else {\n                                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\"></th>\n                            }\n                        }\n                        @if (descriptor().rowExpandable) {\n                            <th scope=\"col\" class=\"col-1\" pFrozenColumn [frozen]=\"true\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <ng-template #sortableColumnTHTemplate>\n                                <div class=\"flex justify-content-between align-items-center\">\n                                    {{ col.descriptor.title ?? (col.descriptor.property | mngI18nProperty: descriptor().model) | translate }}\n                                    <p-sortIcon [field]=\"col.descriptor.property\"></p-sortIcon>\n                                </div>\n                            </ng-template>\n                            <ng-template #nonSortableColumnTHTemplate>\n                                {{ col.descriptor.title ?? (col.descriptor.property | mngI18nProperty: descriptor().model) | translate }}\n                            </ng-template>\n                            @if (col.descriptor.isReorderable) {\n                                <th\n                                    pResizableColumn\n                                    pReorderableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            } @else {\n                                <th\n                                    pResizableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            }\n                        }\n                        @if (hasLastColumn()) {\n                            <th\n                                [style.min-width.px]=\"columnLastMinWidth()\"\n                                pFrozenColumn\n                                [frozen]=\"descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n                                alignFrozen=\"right\"\n                                class=\"column-custom-last text-right\">\n                                @if (descriptor().hasResizableColumns) {\n                                    <p-multiSelect\n                                        #columnToggleMultiselect\n                                        styleClass=\"p-button-primary mng-table-columns-multiselect\"\n                                        appendTo=\"body\"\n                                        dataKey=\"id\"\n                                        tooltipPosition=\"left\"\n                                        placeholder=\"\"\n                                        dropdownIcon=\"pi pi-sliders-h\"\n                                        [filter]=\"false\"\n                                        [options]=\"columns()\"\n                                        [ngModel]=\"visibleColumns()\"\n                                        [pTooltip]=\"'mngTable.adjustTable' | translate\"\n                                        [displaySelectedLabel]=\"false\"\n                                        (onChange)=\"onColumnToggle($event)\">\n                                        <ng-template pTemplate=\"filter\">\n                                            <div class=\"p-checkbox p-component ml-1\" [ngClass]=\"{'p-checkbox-disabled': !areColumnsToggleable}\">\n                                                <div class=\"p-hidden-accessible\">\n                                                    <input\n                                                        type=\"checkbox\"\n                                                        readonly=\"readonly\"\n                                                        [checked]=\"columnToggleMultiselect.allSelected\"\n                                                        (focus)=\"columnToggleMultiselect.onHeaderCheckboxFocus()\"\n                                                        (blur)=\"columnToggleMultiselect.onHeaderCheckboxBlur()\"\n                                                        (keydown.space)=\"columnToggleMultiselect.onToggleAll($event)\"\n                                                        [disabled]=\"!areColumnsToggleable\" />\n                                                </div>\n                                                <div\n                                                    class=\"p-checkbox-box\"\n                                                    role=\"checkbox\"\n                                                    [attr.aria-checked]=\"columnToggleMultiselect.allSelected\"\n                                                    [ngClass]=\"{\n                                                        'p-highlight': anyColumnVisible()\n                                                    }\"\n                                                    (click)=\"onColumnToggleAll()\">\n                                                    <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': anyColumnVisible()}\"></span>\n                                                </div>\n                                            </div>\n                                            <p-button\n                                                icon=\"pi pi-replay\"\n                                                styleClass=\"p-button-secondary\"\n                                                [pTooltip]=\"'mngTable.resetLayout' | translate\"\n                                                tooltipPosition=\"left\"\n                                                (click)=\"resetDefaultLayout()\"></p-button>\n                                        </ng-template>\n                                        <ng-template let-item pTemplate=\"item\">\n                                            {{ item.descriptor.title ?? (item.descriptor.property | mngI18nProperty: descriptor().model) | translate }}\n                                        </ng-template>\n                                    </p-multiSelect>\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n                @if (hasColumnFilters()) {\n                    <tr class=\"mng-column-filter-row\">\n                        <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                        @if (selectionEnabled()) {\n                            <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <th\n                                [class]=\"col.filter?.columnClassName | mngTableColumnFilterClass: col.filter : hasColumnFilters() && !col.width\"\n                                [style.width.px]=\"col.width\"\n                                [style.width.%]=\"col.width ? null : col.filter?.columnWidth ?? col.descriptor.width ?? null\"\n                                [style.min-width.px]=\"col.width ? null : col.filter?.columnMinWidth ?? col.descriptor.minWidth\"\n                                [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                                @if (col.filter) {\n                                    <mng-table-column-filter-full [descriptor]=\"col.filter\"></mng-table-column-filter-full>\n                                }\n                            </th>\n                        }\n                        @if (hasLastColumn()) {\n                            <th class=\"column-custom-last\" [style.min-width.px]=\"columnLastMinWidth()\"></th>\n                        }\n                    </tr>\n                }\n            </ng-template>\n            <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n                <tr\n                    [style.height.px]=\"rowHeight()\"\n                    [ngClass]=\"descriptor().rowClassName | mngClassMap: descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: descriptor() : item\">\n                    @if (selectionEnabled()) {\n                        @if (selectionMode() === 'multiple') {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                            </td>\n                        } @else {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                            </td>\n                        }\n                    }\n                    @if (descriptor().rowExpandable) {\n                        <td class=\"col-1\">\n                            @if (!descriptor().rowExpandableProperty || item[descriptor().rowExpandableProperty!]) {\n                                <button\n                                    pButton\n                                    type=\"button\"\n                                    [pRowToggler]=\"item\"\n                                    class=\"p-button-text p-button-rounded p-button-plain\"\n                                    [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n                            }\n                        </td>\n                    }\n                    @for (col of visibleColumns(); track col.id) {\n                        <td\n                            (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                            [class]=\"\n                                col.descriptor.className\n                                    | mngClassMap: col.descriptor.classNameMapFn : item\n                                    | mngTableColumnFilterClass: col.filter : hasColumnFilters() && !col.width\n                            \"\n                            [class.clickable]=\"isCellClickEnabled()\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                            <span class=\"p-column-title\">{{ col.descriptor.title ?? (col.descriptor.property | mngI18nProperty: descriptor().model) | translate }}</span>\n                            <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                        </td>\n                    }\n                    @if (hasLastColumn()) {\n                        <td\n                            class=\"column-custom-last justify-content-end text-right\"\n                            [style.min-width.px]=\"columnLastMinWidth()\"\n                            pFrozenColumn\n                            [frozen]=\"descriptor().actionColumnFrozen ?? true\"\n                            alignFrozen=\"right\">\n                            @if (columnCustomLastTemplate()) {\n                                <ng-container *ngTemplateOutlet=\"columnCustomLastTemplate(); context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                            } @else if (columnCustomLastComponent()) {\n                                <div [mngComponent]=\"columnCustomLastComponent()\" (instanceCreated)=\"columnCustomLastComponentInstance.emit($event)\"></div>\n                            }\n                        </td>\n                    }\n                </tr>\n            </ng-template>\n            @if (descriptor().rowExpandable) {\n                <ng-template pTemplate=\"rowexpansion\" let-item>\n                    <tr>\n                        <td class=\"col-1\"></td>\n                        <td [colSpan]=\"descriptor().rowExpandableColSpan\">\n                            <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n            }\n            <ng-template pTemplate=\"loadingicon\">\n                <div class=\"flex flex-column align-items-center\">\n                    @if (descriptor().loadingIcon) {\n                        <i [class]=\"'text-white text-4xl pi-spin ' + descriptor().loadingIcon\"></i>\n                    }\n                    @if (descriptor().loadingText) {\n                        <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': descriptor().loadingIcon}\">\n                            {{ descriptor().loadingText ?? '' | translate }}\n                        </div>\n                    }\n                </div>\n            </ng-template>\n            <ng-template pTemplate=\"loadingbody\">\n                <tr [style.height.px]=\"rowHeight()\">\n                    <td [attr.colspan]=\"visibleColumns().length + (hasLastColumn() ? 1 : 0) + (selectionEnabled() ? 1 : 0)\">\n                        <div class=\"loading-text\"></div>\n                        <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                    </td>\n                </tr>\n            </ng-template>\n            <ng-template pTemplate=\"emptymessage\">\n                <tr [style.height.px]=\"rowHeight()\">\n                    <td [attr.colspan]=\"visibleColumns().length + (hasLastColumn() ? 1 : 0) + (selectionEnabled() ? 1 : 0)\">\n                        {{ 'mngTable.noItems' | translate }}\n                    </td>\n                </tr>\n            </ng-template>\n            @if (footerTemplate()) {\n                <ng-template pTemplate=\"summary\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: dataListService.data(), totalCount: dataListService.count()}\"></ng-container>\n                </ng-template>\n            }\n        </p-table>\n    }\n</div>\n", dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "pipe", type: I18nPropertyPipe, name: "mngI18nProperty" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { kind: "pipe", type: ClassMapPipe, name: "mngClassMap" }, { kind: "pipe", type: LocaleDefaultRowClassPipe, name: "mngLocaleDefaultRowClass" }, { kind: "component", type: TableColumnFilterFullComponent, selector: "mng-table-column-filter-full", inputs: ["descriptor"] }, { kind: "pipe", type: TableColumnFilterClassPipe, name: "mngTableColumnFilterClass" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i1$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i1$2.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i1$2.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i1$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i1$2.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i1$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i4$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: TableComponent, isStandalone: true, selector: "mng-table", inputs: { descriptorInput: { classPropertyName: "descriptorInput", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, dataProvider: { classPropertyName: "dataProvider", publicName: "dataProvider", isSignal: true, isRequired: false, transformFunction: null }, useQueryParamsInput: { classPropertyName: "useQueryParamsInput", publicName: "useQueryParams", isSignal: true, isRequired: false, transformFunction: null }, cellClickEnabled: { classPropertyName: "cellClickEnabled", publicName: "cellClickEnabled", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionEnabled: { classPropertyName: "selectionEnabled", publicName: "selectionEnabled", isSignal: true, isRequired: false, transformFunction: null }, rowReorderEnabledInput: { classPropertyName: "rowReorderEnabledInput", publicName: "rowReorderEnabled", isSignal: true, isRequired: false, transformFunction: null }, columnLastMinWidth: { classPropertyName: "columnLastMinWidth", publicName: "columnLastMinWidth", isSignal: true, isRequired: false, transformFunction: null }, captionComponent: { classPropertyName: "captionComponent", publicName: "captionComponent", isSignal: true, isRequired: false, transformFunction: null }, columnCustomLastComponent: { classPropertyName: "columnCustomLastComponent", publicName: "columnCustomLastComponent", isSignal: true, isRequired: false, transformFunction: null }, globalFilterFieldsInput: { classPropertyName: "globalFilterFieldsInput", publicName: "globalFilterFields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableLoad: "tableLoad", cellClick: "cellClick", selectionChange: "selectionChange", captionComponentInstance: "captionComponentInstance", columnCustomLastComponentInstance: "columnCustomLastComponentInstance", rowReorder: "rowReorder" }, providers: [DataListService], queries: [{ propertyName: "templates", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "components", predicate: (ComponentDirective), descendants: true, isSignal: true }, { propertyName: "primeTable", first: true, predicate: Table, descendants: true, isSignal: true }], ngImport: i0, template: "<div [style.height]=\"tableFullHeightOffset() ? 'calc(100vh - ' + tableFullHeightOffset() + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    @if (!useQueryParams() || useQueryParamsInitialized()) {\n        <p-table\n            [value]=\"dataListService.data()\"\n            [dataKey]=\"descriptor().trackProperty\"\n            [lazy]=\"isLazy()\"\n            [loading]=\"dataListService.loading()\"\n            [paginator]=\"isPagination() && !infiniteScroll()\"\n            [rows]=\"infiniteScroll() ? 20 : dataListService.rows()\"\n            [first]=\"infiniteScroll() ? 0 : dataListService.offset()\"\n            [totalRecords]=\"dataListService.count()\"\n            [rowsPerPageOptions]=\"infiniteScroll() ? undefined : dataListService.rowsPerPageOptions()\"\n            [showCurrentPageReport]=\"!infiniteScroll()\"\n            [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n            [multiSortMeta]=\"dataListService.sortMeta()\"\n            [filters]=\"dataListService.filterMeta()\"\n            [globalFilterFields]=\"dataListService.globalFilterFields()\"\n            sortMode=\"multiple\"\n            [selection]=\"[]\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n            [scrollable]=\"true\"\n            [virtualScroll]=\"infiniteScroll()\"\n            [virtualScrollItemSize]=\"rowHeight()\"\n            scrollHeight=\"flex\"\n            [rowHover]=\"descriptor().hasHover\"\n            [styleClass]=\"className()\"\n            [resizableColumns]=\"descriptor().hasResizableColumns\"\n            [columnResizeMode]=\"descriptor().columnResizeMode ?? 'expand'\"\n            [reorderableColumns]=\"areColumnsReorderable()\"\n            paginatorDropdownAppendTo=\"body\"\n            [columns]=\"visibleColumns()\"\n            (onColResize)=\"onTableColumnResize($event)\"\n            (onColReorder)=\"onColumnReorder($event)\"\n            (onLazyLoad)=\"onTableLazyLoad($event)\"\n            (onSort)=\"onTableSort($event)\"\n            (onFilter)=\"onTableFilter($event)\"\n            (onRowReorder)=\"onRowReorder($event)\">\n            @if (captionTemplate() || captionComponent() || descriptor().title) {\n                <ng-template pTemplate=\"caption\">\n                    @if (captionTemplate()) {\n                        <ng-container *ngTemplateOutlet=\"captionTemplate()\"></ng-container>\n                    } @else if (captionComponent()) {\n                        <div [mngComponent]=\"captionComponent()\" (instanceCreated)=\"captionComponentInstance.emit($event)\"></div>\n                    } @else {\n                        <h5 class=\"p-0 m-0\">{{ descriptor().title }}</h5>\n                    }\n                </ng-template>\n            }\n            <ng-template pTemplate=\"header\">\n                @if (!descriptor().hideHeader) {\n                    <tr class=\"mng-table-header\" [class]=\"descriptor().headerClassName\">\n\n                        @if (selectionEnabled()) {\n                            @if (selectionMode() === 'multiple') {\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\">\n                                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                                </th>\n                            } @else {\n                                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\"></th>\n                            }\n                        }\n                        @if (descriptor().rowExpandable) {\n                            <th scope=\"col\" class=\"col-1\" pFrozenColumn [frozen]=\"true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <ng-template #sortableColumnTHTemplate>\n                                <div class=\"flex justify-content-between align-items-center\">\n                                    {{ col.descriptor.title ?? (col.descriptor.property | mngI18nProperty: descriptor().model) | translate }}\n                                    <p-sortIcon [field]=\"col.descriptor.property\"></p-sortIcon>\n                                </div>\n                            </ng-template>\n                            <ng-template #nonSortableColumnTHTemplate>\n                                {{ col.descriptor.title ?? (col.descriptor.property | mngI18nProperty: descriptor().model) | translate }}\n                            </ng-template>\n                            @if (col.descriptor.isReorderable) {\n                                <th\n                                    pResizableColumn\n                                    pReorderableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            } @else {\n                                <th\n                                    pResizableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            }\n                        }\n                        @if (hasLastColumn()) {\n                            <th\n                                [style.min-width.px]=\"columnLastMinWidth()\"\n                                pFrozenColumn\n                                [frozen]=\"descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n                                alignFrozen=\"right\"\n                                class=\"column-custom-last text-right\">\n                                @if (descriptor().hasResizableColumns) {\n                                    <p-multiSelect\n                                        #columnToggleMultiselect\n                                        styleClass=\"p-button-primary mng-table-columns-multiselect\"\n                                        appendTo=\"body\"\n                                        dataKey=\"id\"\n                                        tooltipPosition=\"left\"\n                                        placeholder=\"\"\n                                        dropdownIcon=\"pi pi-sliders-h\"\n                                        [filter]=\"false\"\n                                        [options]=\"columns()\"\n                                        [ngModel]=\"visibleColumns()\"\n                                        [pTooltip]=\"'mngTable.adjustTable' | translate\"\n                                        [displaySelectedLabel]=\"false\"\n                                        (onChange)=\"onColumnToggle($event)\">\n                                        <ng-template pTemplate=\"filter\">\n                                            <div class=\"p-checkbox p-component ml-1\" [ngClass]=\"{'p-checkbox-disabled': !areColumnsToggleable}\">\n                                                <div class=\"p-hidden-accessible\">\n                                                    <input\n                                                        type=\"checkbox\"\n                                                        readonly=\"readonly\"\n                                                        [checked]=\"columnToggleMultiselect.allSelected\"\n                                                        (focus)=\"columnToggleMultiselect.onHeaderCheckboxFocus()\"\n                                                        (blur)=\"columnToggleMultiselect.onHeaderCheckboxBlur()\"\n                                                        (keydown.space)=\"columnToggleMultiselect.onToggleAll($event)\"\n                                                        [disabled]=\"!areColumnsToggleable\" />\n                                                </div>\n                                                <div\n                                                    class=\"p-checkbox-box\"\n                                                    role=\"checkbox\"\n                                                    [attr.aria-checked]=\"columnToggleMultiselect.allSelected\"\n                                                    [ngClass]=\"{\n                                                        'p-highlight': anyColumnVisible()\n                                                    }\"\n                                                    (click)=\"onColumnToggleAll()\">\n                                                    <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': anyColumnVisible()}\"></span>\n                                                </div>\n                                            </div>\n                                            <p-button\n                                                icon=\"pi pi-replay\"\n                                                styleClass=\"p-button-secondary\"\n                                                [pTooltip]=\"'mngTable.resetLayout' | translate\"\n                                                tooltipPosition=\"left\"\n                                                (click)=\"resetDefaultLayout()\"></p-button>\n                                        </ng-template>\n                                        <ng-template let-item pTemplate=\"item\">\n                                            {{ item.descriptor.title ?? (item.descriptor.property | mngI18nProperty: descriptor().model) | translate }}\n                                        </ng-template>\n                                    </p-multiSelect>\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n                @if (hasColumnFilters()) {\n                    <tr class=\"mng-column-filter-row\">\n                        <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                        @if (selectionEnabled()) {\n                            <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <th\n                                [class]=\"col.filter?.columnClassName | mngTableColumnFilterClass: col.filter : hasColumnFilters() && !col.width\"\n                                [style.width.px]=\"col.width\"\n                                [style.width.%]=\"col.width ? null : col.filter?.columnWidth ?? col.descriptor.width ?? null\"\n                                [style.min-width.px]=\"col.width ? null : col.filter?.columnMinWidth ?? col.descriptor.minWidth\"\n                                [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                                @if (col.filter) {\n                                    <mng-table-column-filter-full [descriptor]=\"col.filter\"></mng-table-column-filter-full>\n                                }\n                            </th>\n                        }\n                        @if (hasLastColumn()) {\n                            <th class=\"column-custom-last\" [style.min-width.px]=\"columnLastMinWidth()\"></th>\n                        }\n                    </tr>\n                }\n            </ng-template>\n            <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n                <tr\n                    [style.height.px]=\"rowHeight()\"\n                    [pReorderableRow]=\"idx\"\n                    [ngClass]=\"descriptor().rowClassName | mngClassMap: descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: descriptor() : item\">\n                    @if (selectionEnabled()) {\n                        @if (selectionMode() === 'multiple') {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                            </td>\n                        } @else {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                            </td>\n                        }\n                    }\n                    @if (descriptor().rowExpandable) {\n                        <td class=\"col-1\">\n                            @if (!descriptor().rowExpandableProperty || item[descriptor().rowExpandableProperty!]) {\n                                <button\n                                    pButton\n                                    type=\"button\"\n                                    [pRowToggler]=\"item\"\n                                    class=\"p-button-text p-button-rounded p-button-plain\"\n                                    [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n                            }\n                        </td>\n                    }\n                    @if (rowReorderEnabled()) {\n                        <td>\n                            <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n                        </td>\n                    }\n                    @for (col of visibleColumns(); track col.id) {\n                        <td\n                            (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                            [class]=\"\n                                col.descriptor.className\n                                    | mngClassMap: col.descriptor.classNameMapFn : item\n                                    | mngTableColumnFilterClass: col.filter : hasColumnFilters() && !col.width\n                            \"\n                            [class.clickable]=\"isCellClickEnabled()\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                            <span class=\"p-column-title\">{{ col.descriptor.title ?? (col.descriptor.property | mngI18nProperty: descriptor().model) | translate }}</span>\n                            <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                        </td>\n                    }\n                    @if (hasLastColumn()) {\n                        <td\n                            class=\"column-custom-last justify-content-end text-right\"\n                            [style.min-width.px]=\"columnLastMinWidth()\"\n                            pFrozenColumn\n                            [frozen]=\"descriptor().actionColumnFrozen ?? true\"\n                            alignFrozen=\"right\">\n                            @if (columnCustomLastTemplate()) {\n                                <ng-container *ngTemplateOutlet=\"columnCustomLastTemplate(); context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                            } @else if (columnCustomLastComponent()) {\n                                <div [mngComponent]=\"columnCustomLastComponent()\" (instanceCreated)=\"columnCustomLastComponentInstance.emit($event)\"></div>\n                            }\n                        </td>\n                    }\n                </tr>\n            </ng-template>\n            @if (descriptor().rowExpandable) {\n                <ng-template pTemplate=\"rowexpansion\" let-item>\n                    <tr>\n                        <td class=\"col-1\"></td>\n                        <td [colSpan]=\"descriptor().rowExpandableColSpan\">\n                            <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n            }\n            <ng-template pTemplate=\"loadingicon\">\n                <div class=\"flex flex-column align-items-center\">\n                    @if (descriptor().loadingIcon) {\n                        <i [class]=\"'text-white text-4xl pi-spin ' + descriptor().loadingIcon\"></i>\n                    }\n                    @if (descriptor().loadingText) {\n                        <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': descriptor().loadingIcon}\">\n                            {{ descriptor().loadingText ?? '' | translate }}\n                        </div>\n                    }\n                </div>\n            </ng-template>\n            <ng-template pTemplate=\"loadingbody\">\n                <tr [style.height.px]=\"rowHeight()\">\n                    <td [attr.colspan]=\"columnsColspan()\">\n                        <div class=\"loading-text\"></div>\n                        <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                    </td>\n                </tr>\n            </ng-template>\n            <ng-template pTemplate=\"emptymessage\">\n                <tr [style.height.px]=\"rowHeight()\">\n                    <td [attr.colspan]=\"columnsColspan()\">\n                        {{ 'mngTable.noItems' | translate }}\n                    </td>\n                </tr>\n            </ng-template>\n            @if (footerTemplate()) {\n                <ng-template pTemplate=\"summary\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: dataListService.data(), totalCount: dataListService.count()}\"></ng-container>\n                </ng-template>\n            }\n        </p-table>\n    }\n</div>\n", dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "pipe", type: I18nPropertyPipe, name: "mngI18nProperty" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { kind: "pipe", type: ClassMapPipe, name: "mngClassMap" }, { kind: "pipe", type: LocaleDefaultRowClassPipe, name: "mngLocaleDefaultRowClass" }, { kind: "component", type: TableColumnFilterFullComponent, selector: "mng-table-column-filter-full", inputs: ["descriptor"] }, { kind: "pipe", type: TableColumnFilterClassPipe, name: "mngTableColumnFilterClass" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i1$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i1$2.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i1$2.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i1$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i1$2.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i1$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$2.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$2.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i4$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -1288,7 +1359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                         TooltipModule,
                         TranslateModule,
                         FormsModule
-                    ], providers: [DataListService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.height]=\"tableFullHeightOffset() ? 'calc(100vh - ' + tableFullHeightOffset() + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    @if (!useQueryParams() || useQueryParamsInitialized()) {\n        <p-table\n            [value]=\"dataListService.data()\"\n            [dataKey]=\"descriptor().trackProperty\"\n            [lazy]=\"isLazy()\"\n            [loading]=\"dataListService.loading()\"\n            [paginator]=\"isPagination() && !infiniteScroll()\"\n            [rows]=\"infiniteScroll() ? 20 : dataListService.rows()\"\n            [first]=\"infiniteScroll() ? 0 : dataListService.offset()\"\n            [totalRecords]=\"dataListService.count()\"\n            [rowsPerPageOptions]=\"infiniteScroll() ? undefined : dataListService.rowsPerPageOptions()\"\n            [showCurrentPageReport]=\"!infiniteScroll()\"\n            [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n            [multiSortMeta]=\"dataListService.sortMeta()\"\n            [filters]=\"dataListService.filterMeta()\"\n            [globalFilterFields]=\"dataListService.globalFilterFields()\"\n            sortMode=\"multiple\"\n            [selection]=\"[]\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n            [scrollable]=\"true\"\n            [virtualScroll]=\"infiniteScroll()\"\n            [virtualScrollItemSize]=\"rowHeight()\"\n            scrollHeight=\"flex\"\n            [rowHover]=\"descriptor().hasHover\"\n            [styleClass]=\"className()\"\n            [resizableColumns]=\"descriptor().hasResizableColumns\"\n            [columnResizeMode]=\"descriptor().columnResizeMode ?? 'expand'\"\n            [reorderableColumns]=\"areColumnsReorderable()\"\n            paginatorDropdownAppendTo=\"body\"\n            [columns]=\"visibleColumns()\"\n            (onColResize)=\"onTableColumnResize($event)\"\n            (onColReorder)=\"onColumnReorder($event)\"\n            (onLazyLoad)=\"onTableLazyLoad($event)\"\n            (onSort)=\"onTableSort($event)\"\n            (onFilter)=\"onTableFilter($event)\">\n            @if (captionTemplate() || captionComponent() || descriptor().title) {\n                <ng-template pTemplate=\"caption\">\n                    @if (captionTemplate()) {\n                        <ng-container *ngTemplateOutlet=\"captionTemplate()\"></ng-container>\n                    } @else if (captionComponent()) {\n                        <div [mngComponent]=\"captionComponent()\" (instanceCreated)=\"captionComponentInstance.emit($event)\"></div>\n                    } @else {\n                        <h5 class=\"p-0 m-0\">{{ descriptor().title }}</h5>\n                    }\n                </ng-template>\n            }\n            <ng-template pTemplate=\"header\">\n                @if (!descriptor().hideHeader) {\n                    <tr class=\"mng-table-header\" [class]=\"descriptor().headerClassName\">\n                        @if (selectionEnabled()) {\n                            @if (selectionMode() === 'multiple') {\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\">\n                                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                                </th>\n                            } @else {\n                                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\"></th>\n                            }\n                        }\n                        @if (descriptor().rowExpandable) {\n                            <th scope=\"col\" class=\"col-1\" pFrozenColumn [frozen]=\"true\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <ng-template #sortableColumnTHTemplate>\n                                <div class=\"flex justify-content-between align-items-center\">\n                                    {{ col.descriptor.title ?? (col.descriptor.property | mngI18nProperty: descriptor().model) | translate }}\n                                    <p-sortIcon [field]=\"col.descriptor.property\"></p-sortIcon>\n                                </div>\n                            </ng-template>\n                            <ng-template #nonSortableColumnTHTemplate>\n                                {{ col.descriptor.title ?? (col.descriptor.property | mngI18nProperty: descriptor().model) | translate }}\n                            </ng-template>\n                            @if (col.descriptor.isReorderable) {\n                                <th\n                                    pResizableColumn\n                                    pReorderableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            } @else {\n                                <th\n                                    pResizableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            }\n                        }\n                        @if (hasLastColumn()) {\n                            <th\n                                [style.min-width.px]=\"columnLastMinWidth()\"\n                                pFrozenColumn\n                                [frozen]=\"descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n                                alignFrozen=\"right\"\n                                class=\"column-custom-last text-right\">\n                                @if (descriptor().hasResizableColumns) {\n                                    <p-multiSelect\n                                        #columnToggleMultiselect\n                                        styleClass=\"p-button-primary mng-table-columns-multiselect\"\n                                        appendTo=\"body\"\n                                        dataKey=\"id\"\n                                        tooltipPosition=\"left\"\n                                        placeholder=\"\"\n                                        dropdownIcon=\"pi pi-sliders-h\"\n                                        [filter]=\"false\"\n                                        [options]=\"columns()\"\n                                        [ngModel]=\"visibleColumns()\"\n                                        [pTooltip]=\"'mngTable.adjustTable' | translate\"\n                                        [displaySelectedLabel]=\"false\"\n                                        (onChange)=\"onColumnToggle($event)\">\n                                        <ng-template pTemplate=\"filter\">\n                                            <div class=\"p-checkbox p-component ml-1\" [ngClass]=\"{'p-checkbox-disabled': !areColumnsToggleable}\">\n                                                <div class=\"p-hidden-accessible\">\n                                                    <input\n                                                        type=\"checkbox\"\n                                                        readonly=\"readonly\"\n                                                        [checked]=\"columnToggleMultiselect.allSelected\"\n                                                        (focus)=\"columnToggleMultiselect.onHeaderCheckboxFocus()\"\n                                                        (blur)=\"columnToggleMultiselect.onHeaderCheckboxBlur()\"\n                                                        (keydown.space)=\"columnToggleMultiselect.onToggleAll($event)\"\n                                                        [disabled]=\"!areColumnsToggleable\" />\n                                                </div>\n                                                <div\n                                                    class=\"p-checkbox-box\"\n                                                    role=\"checkbox\"\n                                                    [attr.aria-checked]=\"columnToggleMultiselect.allSelected\"\n                                                    [ngClass]=\"{\n                                                        'p-highlight': anyColumnVisible()\n                                                    }\"\n                                                    (click)=\"onColumnToggleAll()\">\n                                                    <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': anyColumnVisible()}\"></span>\n                                                </div>\n                                            </div>\n                                            <p-button\n                                                icon=\"pi pi-replay\"\n                                                styleClass=\"p-button-secondary\"\n                                                [pTooltip]=\"'mngTable.resetLayout' | translate\"\n                                                tooltipPosition=\"left\"\n                                                (click)=\"resetDefaultLayout()\"></p-button>\n                                        </ng-template>\n                                        <ng-template let-item pTemplate=\"item\">\n                                            {{ item.descriptor.title ?? (item.descriptor.property | mngI18nProperty: descriptor().model) | translate }}\n                                        </ng-template>\n                                    </p-multiSelect>\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n                @if (hasColumnFilters()) {\n                    <tr class=\"mng-column-filter-row\">\n                        <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                        @if (selectionEnabled()) {\n                            <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <th\n                                [class]=\"col.filter?.columnClassName | mngTableColumnFilterClass: col.filter : hasColumnFilters() && !col.width\"\n                                [style.width.px]=\"col.width\"\n                                [style.width.%]=\"col.width ? null : col.filter?.columnWidth ?? col.descriptor.width ?? null\"\n                                [style.min-width.px]=\"col.width ? null : col.filter?.columnMinWidth ?? col.descriptor.minWidth\"\n                                [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                                @if (col.filter) {\n                                    <mng-table-column-filter-full [descriptor]=\"col.filter\"></mng-table-column-filter-full>\n                                }\n                            </th>\n                        }\n                        @if (hasLastColumn()) {\n                            <th class=\"column-custom-last\" [style.min-width.px]=\"columnLastMinWidth()\"></th>\n                        }\n                    </tr>\n                }\n            </ng-template>\n            <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n                <tr\n                    [style.height.px]=\"rowHeight()\"\n                    [ngClass]=\"descriptor().rowClassName | mngClassMap: descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: descriptor() : item\">\n                    @if (selectionEnabled()) {\n                        @if (selectionMode() === 'multiple') {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                            </td>\n                        } @else {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                            </td>\n                        }\n                    }\n                    @if (descriptor().rowExpandable) {\n                        <td class=\"col-1\">\n                            @if (!descriptor().rowExpandableProperty || item[descriptor().rowExpandableProperty!]) {\n                                <button\n                                    pButton\n                                    type=\"button\"\n                                    [pRowToggler]=\"item\"\n                                    class=\"p-button-text p-button-rounded p-button-plain\"\n                                    [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n                            }\n                        </td>\n                    }\n                    @for (col of visibleColumns(); track col.id) {\n                        <td\n                            (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                            [class]=\"\n                                col.descriptor.className\n                                    | mngClassMap: col.descriptor.classNameMapFn : item\n                                    | mngTableColumnFilterClass: col.filter : hasColumnFilters() && !col.width\n                            \"\n                            [class.clickable]=\"isCellClickEnabled()\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                            <span class=\"p-column-title\">{{ col.descriptor.title ?? (col.descriptor.property | mngI18nProperty: descriptor().model) | translate }}</span>\n                            <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                        </td>\n                    }\n                    @if (hasLastColumn()) {\n                        <td\n                            class=\"column-custom-last justify-content-end text-right\"\n                            [style.min-width.px]=\"columnLastMinWidth()\"\n                            pFrozenColumn\n                            [frozen]=\"descriptor().actionColumnFrozen ?? true\"\n                            alignFrozen=\"right\">\n                            @if (columnCustomLastTemplate()) {\n                                <ng-container *ngTemplateOutlet=\"columnCustomLastTemplate(); context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                            } @else if (columnCustomLastComponent()) {\n                                <div [mngComponent]=\"columnCustomLastComponent()\" (instanceCreated)=\"columnCustomLastComponentInstance.emit($event)\"></div>\n                            }\n                        </td>\n                    }\n                </tr>\n            </ng-template>\n            @if (descriptor().rowExpandable) {\n                <ng-template pTemplate=\"rowexpansion\" let-item>\n                    <tr>\n                        <td class=\"col-1\"></td>\n                        <td [colSpan]=\"descriptor().rowExpandableColSpan\">\n                            <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n            }\n            <ng-template pTemplate=\"loadingicon\">\n                <div class=\"flex flex-column align-items-center\">\n                    @if (descriptor().loadingIcon) {\n                        <i [class]=\"'text-white text-4xl pi-spin ' + descriptor().loadingIcon\"></i>\n                    }\n                    @if (descriptor().loadingText) {\n                        <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': descriptor().loadingIcon}\">\n                            {{ descriptor().loadingText ?? '' | translate }}\n                        </div>\n                    }\n                </div>\n            </ng-template>\n            <ng-template pTemplate=\"loadingbody\">\n                <tr [style.height.px]=\"rowHeight()\">\n                    <td [attr.colspan]=\"visibleColumns().length + (hasLastColumn() ? 1 : 0) + (selectionEnabled() ? 1 : 0)\">\n                        <div class=\"loading-text\"></div>\n                        <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                    </td>\n                </tr>\n            </ng-template>\n            <ng-template pTemplate=\"emptymessage\">\n                <tr [style.height.px]=\"rowHeight()\">\n                    <td [attr.colspan]=\"visibleColumns().length + (hasLastColumn() ? 1 : 0) + (selectionEnabled() ? 1 : 0)\">\n                        {{ 'mngTable.noItems' | translate }}\n                    </td>\n                </tr>\n            </ng-template>\n            @if (footerTemplate()) {\n                <ng-template pTemplate=\"summary\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: dataListService.data(), totalCount: dataListService.count()}\"></ng-container>\n                </ng-template>\n            }\n        </p-table>\n    }\n</div>\n" }]
+                    ], providers: [DataListService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.height]=\"tableFullHeightOffset() ? 'calc(100vh - ' + tableFullHeightOffset() + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    @if (!useQueryParams() || useQueryParamsInitialized()) {\n        <p-table\n            [value]=\"dataListService.data()\"\n            [dataKey]=\"descriptor().trackProperty\"\n            [lazy]=\"isLazy()\"\n            [loading]=\"dataListService.loading()\"\n            [paginator]=\"isPagination() && !infiniteScroll()\"\n            [rows]=\"infiniteScroll() ? 20 : dataListService.rows()\"\n            [first]=\"infiniteScroll() ? 0 : dataListService.offset()\"\n            [totalRecords]=\"dataListService.count()\"\n            [rowsPerPageOptions]=\"infiniteScroll() ? undefined : dataListService.rowsPerPageOptions()\"\n            [showCurrentPageReport]=\"!infiniteScroll()\"\n            [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n            [multiSortMeta]=\"dataListService.sortMeta()\"\n            [filters]=\"dataListService.filterMeta()\"\n            [globalFilterFields]=\"dataListService.globalFilterFields()\"\n            sortMode=\"multiple\"\n            [selection]=\"[]\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n            [scrollable]=\"true\"\n            [virtualScroll]=\"infiniteScroll()\"\n            [virtualScrollItemSize]=\"rowHeight()\"\n            scrollHeight=\"flex\"\n            [rowHover]=\"descriptor().hasHover\"\n            [styleClass]=\"className()\"\n            [resizableColumns]=\"descriptor().hasResizableColumns\"\n            [columnResizeMode]=\"descriptor().columnResizeMode ?? 'expand'\"\n            [reorderableColumns]=\"areColumnsReorderable()\"\n            paginatorDropdownAppendTo=\"body\"\n            [columns]=\"visibleColumns()\"\n            (onColResize)=\"onTableColumnResize($event)\"\n            (onColReorder)=\"onColumnReorder($event)\"\n            (onLazyLoad)=\"onTableLazyLoad($event)\"\n            (onSort)=\"onTableSort($event)\"\n            (onFilter)=\"onTableFilter($event)\"\n            (onRowReorder)=\"onRowReorder($event)\">\n            @if (captionTemplate() || captionComponent() || descriptor().title) {\n                <ng-template pTemplate=\"caption\">\n                    @if (captionTemplate()) {\n                        <ng-container *ngTemplateOutlet=\"captionTemplate()\"></ng-container>\n                    } @else if (captionComponent()) {\n                        <div [mngComponent]=\"captionComponent()\" (instanceCreated)=\"captionComponentInstance.emit($event)\"></div>\n                    } @else {\n                        <h5 class=\"p-0 m-0\">{{ descriptor().title }}</h5>\n                    }\n                </ng-template>\n            }\n            <ng-template pTemplate=\"header\">\n                @if (!descriptor().hideHeader) {\n                    <tr class=\"mng-table-header\" [class]=\"descriptor().headerClassName\">\n\n                        @if (selectionEnabled()) {\n                            @if (selectionMode() === 'multiple') {\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\">\n                                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                                </th>\n                            } @else {\n                                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\"></th>\n                            }\n                        }\n                        @if (descriptor().rowExpandable) {\n                            <th scope=\"col\" class=\"col-1\" pFrozenColumn [frozen]=\"true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <ng-template #sortableColumnTHTemplate>\n                                <div class=\"flex justify-content-between align-items-center\">\n                                    {{ col.descriptor.title ?? (col.descriptor.property | mngI18nProperty: descriptor().model) | translate }}\n                                    <p-sortIcon [field]=\"col.descriptor.property\"></p-sortIcon>\n                                </div>\n                            </ng-template>\n                            <ng-template #nonSortableColumnTHTemplate>\n                                {{ col.descriptor.title ?? (col.descriptor.property | mngI18nProperty: descriptor().model) | translate }}\n                            </ng-template>\n                            @if (col.descriptor.isReorderable) {\n                                <th\n                                    pResizableColumn\n                                    pReorderableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            } @else {\n                                <th\n                                    pResizableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter : hasColumnFilters() && !col.width\">\n                                    <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n                                </th>\n                            }\n                        }\n                        @if (hasLastColumn()) {\n                            <th\n                                [style.min-width.px]=\"columnLastMinWidth()\"\n                                pFrozenColumn\n                                [frozen]=\"descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n                                alignFrozen=\"right\"\n                                class=\"column-custom-last text-right\">\n                                @if (descriptor().hasResizableColumns) {\n                                    <p-multiSelect\n                                        #columnToggleMultiselect\n                                        styleClass=\"p-button-primary mng-table-columns-multiselect\"\n                                        appendTo=\"body\"\n                                        dataKey=\"id\"\n                                        tooltipPosition=\"left\"\n                                        placeholder=\"\"\n                                        dropdownIcon=\"pi pi-sliders-h\"\n                                        [filter]=\"false\"\n                                        [options]=\"columns()\"\n                                        [ngModel]=\"visibleColumns()\"\n                                        [pTooltip]=\"'mngTable.adjustTable' | translate\"\n                                        [displaySelectedLabel]=\"false\"\n                                        (onChange)=\"onColumnToggle($event)\">\n                                        <ng-template pTemplate=\"filter\">\n                                            <div class=\"p-checkbox p-component ml-1\" [ngClass]=\"{'p-checkbox-disabled': !areColumnsToggleable}\">\n                                                <div class=\"p-hidden-accessible\">\n                                                    <input\n                                                        type=\"checkbox\"\n                                                        readonly=\"readonly\"\n                                                        [checked]=\"columnToggleMultiselect.allSelected\"\n                                                        (focus)=\"columnToggleMultiselect.onHeaderCheckboxFocus()\"\n                                                        (blur)=\"columnToggleMultiselect.onHeaderCheckboxBlur()\"\n                                                        (keydown.space)=\"columnToggleMultiselect.onToggleAll($event)\"\n                                                        [disabled]=\"!areColumnsToggleable\" />\n                                                </div>\n                                                <div\n                                                    class=\"p-checkbox-box\"\n                                                    role=\"checkbox\"\n                                                    [attr.aria-checked]=\"columnToggleMultiselect.allSelected\"\n                                                    [ngClass]=\"{\n                                                        'p-highlight': anyColumnVisible()\n                                                    }\"\n                                                    (click)=\"onColumnToggleAll()\">\n                                                    <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': anyColumnVisible()}\"></span>\n                                                </div>\n                                            </div>\n                                            <p-button\n                                                icon=\"pi pi-replay\"\n                                                styleClass=\"p-button-secondary\"\n                                                [pTooltip]=\"'mngTable.resetLayout' | translate\"\n                                                tooltipPosition=\"left\"\n                                                (click)=\"resetDefaultLayout()\"></p-button>\n                                        </ng-template>\n                                        <ng-template let-item pTemplate=\"item\">\n                                            {{ item.descriptor.title ?? (item.descriptor.property | mngI18nProperty: descriptor().model) | translate }}\n                                        </ng-template>\n                                    </p-multiSelect>\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n                @if (hasColumnFilters()) {\n                    <tr class=\"mng-column-filter-row\">\n                        <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                        @if (selectionEnabled()) {\n                            <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\"></th>\n                        }\n                        @if (rowReorderEnabled()) {\n                            <th scope=\"col\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <th\n                                [class]=\"col.filter?.columnClassName | mngTableColumnFilterClass: col.filter : hasColumnFilters() && !col.width\"\n                                [style.width.px]=\"col.width\"\n                                [style.width.%]=\"col.width ? null : col.filter?.columnWidth ?? col.descriptor.width ?? null\"\n                                [style.min-width.px]=\"col.width ? null : col.filter?.columnMinWidth ?? col.descriptor.minWidth\"\n                                [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                                @if (col.filter) {\n                                    <mng-table-column-filter-full [descriptor]=\"col.filter\"></mng-table-column-filter-full>\n                                }\n                            </th>\n                        }\n                        @if (hasLastColumn()) {\n                            <th class=\"column-custom-last\" [style.min-width.px]=\"columnLastMinWidth()\"></th>\n                        }\n                    </tr>\n                }\n            </ng-template>\n            <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n                <tr\n                    [style.height.px]=\"rowHeight()\"\n                    [pReorderableRow]=\"idx\"\n                    [ngClass]=\"descriptor().rowClassName | mngClassMap: descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: descriptor() : item\">\n                    @if (selectionEnabled()) {\n                        @if (selectionMode() === 'multiple') {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                            </td>\n                        } @else {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                            </td>\n                        }\n                    }\n                    @if (descriptor().rowExpandable) {\n                        <td class=\"col-1\">\n                            @if (!descriptor().rowExpandableProperty || item[descriptor().rowExpandableProperty!]) {\n                                <button\n                                    pButton\n                                    type=\"button\"\n                                    [pRowToggler]=\"item\"\n                                    class=\"p-button-text p-button-rounded p-button-plain\"\n                                    [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n                            }\n                        </td>\n                    }\n                    @if (rowReorderEnabled()) {\n                        <td>\n                            <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n                        </td>\n                    }\n                    @for (col of visibleColumns(); track col.id) {\n                        <td\n                            (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n                            [class]=\"\n                                col.descriptor.className\n                                    | mngClassMap: col.descriptor.classNameMapFn : item\n                                    | mngTableColumnFilterClass: col.filter : hasColumnFilters() && !col.width\n                            \"\n                            [class.clickable]=\"isCellClickEnabled()\"\n                            [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                            [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                            [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                            <span class=\"p-column-title\">{{ col.descriptor.title ?? (col.descriptor.property | mngI18nProperty: descriptor().model) | translate }}</span>\n                            <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                        </td>\n                    }\n                    @if (hasLastColumn()) {\n                        <td\n                            class=\"column-custom-last justify-content-end text-right\"\n                            [style.min-width.px]=\"columnLastMinWidth()\"\n                            pFrozenColumn\n                            [frozen]=\"descriptor().actionColumnFrozen ?? true\"\n                            alignFrozen=\"right\">\n                            @if (columnCustomLastTemplate()) {\n                                <ng-container *ngTemplateOutlet=\"columnCustomLastTemplate(); context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                            } @else if (columnCustomLastComponent()) {\n                                <div [mngComponent]=\"columnCustomLastComponent()\" (instanceCreated)=\"columnCustomLastComponentInstance.emit($event)\"></div>\n                            }\n                        </td>\n                    }\n                </tr>\n            </ng-template>\n            @if (descriptor().rowExpandable) {\n                <ng-template pTemplate=\"rowexpansion\" let-item>\n                    <tr>\n                        <td class=\"col-1\"></td>\n                        <td [colSpan]=\"descriptor().rowExpandableColSpan\">\n                            <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n            }\n            <ng-template pTemplate=\"loadingicon\">\n                <div class=\"flex flex-column align-items-center\">\n                    @if (descriptor().loadingIcon) {\n                        <i [class]=\"'text-white text-4xl pi-spin ' + descriptor().loadingIcon\"></i>\n                    }\n                    @if (descriptor().loadingText) {\n                        <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': descriptor().loadingIcon}\">\n                            {{ descriptor().loadingText ?? '' | translate }}\n                        </div>\n                    }\n                </div>\n            </ng-template>\n            <ng-template pTemplate=\"loadingbody\">\n                <tr [style.height.px]=\"rowHeight()\">\n                    <td [attr.colspan]=\"columnsColspan()\">\n                        <div class=\"loading-text\"></div>\n                        <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                    </td>\n                </tr>\n            </ng-template>\n            <ng-template pTemplate=\"emptymessage\">\n                <tr [style.height.px]=\"rowHeight()\">\n                    <td [attr.colspan]=\"columnsColspan()\">\n                        {{ 'mngTable.noItems' | translate }}\n                    </td>\n                </tr>\n            </ng-template>\n            @if (footerTemplate()) {\n                <ng-template pTemplate=\"summary\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: dataListService.data(), totalCount: dataListService.count()}\"></ng-container>\n                </ng-template>\n            }\n        </p-table>\n    }\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 // components