@mediusinc/mng-commons 0.14.0 → 0.14.2

package/fesm2015/mediusinc-mng-commons.mjs

@@ -63,7 +63,7 @@ import { SelectButtonModule } from 'primeng/selectbutton';
 import * as i7$3 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import * as i6$4 from 'primeng/table';
-import { Table, TableModule } from 'primeng/table';
+import { ColumnFilter, Table, TableModule } from 'primeng/table';
 import * as i4$4 from 'primeng/tabview';
 import { TabViewModule } from 'primeng/tabview';
 import { TagModule } from 'primeng/tag';
@@ -74,7 +74,7 @@ import * as i6$2 from 'primeng/toolbar';
 import { ToolbarModule } from 'primeng/toolbar';
 import * as i7 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import { isObservable, throwError, of, Subject, BehaviorSubject, ReplaySubject, distinctUntilChanged, combineLatest, tap, switchMap, mergeMap as mergeMap$1, from, Observable } from 'rxjs';
+import { isObservable, throwError, of, Subject, BehaviorSubject, ReplaySubject, distinctUntilChanged, combineLatest, tap, switchMap, mergeMap as mergeMap$1, from, Observable, merge, debounceTime } from 'rxjs';
 import { map, mergeMap, catchError, first, filter, finalize, startWith } from 'rxjs/operators';
 import 'reflect-metadata';
 import * as i4 from '@angular/platform-browser';
@@ -226,6 +226,12 @@ MediusQueryParam.attributeTypeMap = [
 ];
 
 class MediusQueryResult {
+    static fromArray(pageData, allDataCount) {
+        const mqr = new MediusQueryResult();
+        mqr.allDataCount = allDataCount !== null && allDataCount !== void 0 ? allDataCount : pageData.length;
+        mqr.pageData = pageData;
+        return mqr;
+    }
     static getAttributeTypeMap() {
         return MediusQueryResult.attributeTypeMap;
     }
@@ -464,6 +470,125 @@ class ActionDataProviderUtil {
     }
 }
 
+class DateUtil {
+    static toIsoString(date, inUtc = false, withTimezone = false, withMillis = false) {
+        if (typeof date === 'string') {
+            date = new Date(date);
+        }
+        if (!(date instanceof Date)) {
+            return null;
+        }
+        if (inUtc) {
+            let str = date.toISOString();
+            if (!withMillis) {
+                const dotIdx = str.lastIndexOf('.');
+                str = str.substring(0, dotIdx) + str.substring(dotIdx + 4, str.length);
+            }
+            if (!withTimezone) {
+                str = str.substring(0, str.length - 1);
+            }
+            return str;
+        }
+        else {
+            const tzo = -date.getTimezoneOffset(), dif = tzo >= 0 ? '+' : '-', pad = (num) => (num < 10 ? '0' : '') + num;
+            let base = date.getFullYear() +
+                '-' +
+                pad(date.getMonth() + 1) +
+                '-' +
+                pad(date.getDate()) +
+                'T' +
+                pad(date.getHours()) +
+                ':' +
+                pad(date.getMinutes()) +
+                ':' +
+                pad(date.getSeconds());
+            if (withMillis) {
+                base += '.' + pad(date.getMilliseconds());
+            }
+            if (withTimezone) {
+                return base + (dif + pad(Math.floor(Math.abs(tzo) / 60)) + ':' + pad(Math.abs(tzo) % 60));
+            }
+            else {
+                return base;
+            }
+        }
+    }
+    static fromPrimeToAngularDateFormat(ngDateFormat) {
+        var _a;
+        let primeDateFormat = ngDateFormat;
+        for (const regex of DateUtil.NG_PRIME_FORMAT_OTHER) {
+            primeDateFormat = primeDateFormat.replace(regex, ' ');
+        }
+        for (const regex of DateUtil.NG_PRIME_FORMAT_SUPPORTED) {
+            const matches = [...primeDateFormat.matchAll(regex)].reverse();
+            for (const match of matches) {
+                if (match.index) {
+                    const matchStr = match[0];
+                    const replacement = (_a = DateUtil.NG_PRIME_FORMAT_MAP[matchStr]) !== null && _a !== void 0 ? _a : match[0];
+                    primeDateFormat = primeDateFormat.substring(0, match.index) + replacement + primeDateFormat.substring(match.index + matchStr.length);
+                }
+            }
+        }
+        primeDateFormat = primeDateFormat.replace(/\s+\W\s+/g, ' ');
+        primeDateFormat = primeDateFormat.replace(/\s\s+/g, ' ');
+        return primeDateFormat.trim();
+    }
+}
+DateUtil.NG_PRIME_FORMAT_SUPPORTED = [/d{1,2}/g, /E{1,5}/g, /c{1,5}/g, /M{1,5}/g, /L{1,5}/g, /y{1,4}/g, /Y{1,4}/g];
+DateUtil.NG_PRIME_FORMAT_OTHER = [
+    /G{1,5}/g,
+    /w{1,2}/g,
+    /W/g,
+    /a{1,5}/g,
+    /B{1,5}/g,
+    /b{1,5}/g,
+    /h{1,2}/g,
+    /H{1,2}/g,
+    /m{1,2}/g,
+    /s{1,2}/g,
+    /S{1,3}/g,
+    /z{1,4}/g,
+    /Z{1,5}/g,
+    /O{1,4}/g
+];
+DateUtil.NG_PRIME_FORMAT_MAP = {
+    // days
+    d: 'd',
+    dd: 'dd',
+    E: 'D',
+    EE: 'D',
+    EEE: 'D',
+    EEEE: 'DD',
+    EEEEE: 'D',
+    EEEEEE: 'D',
+    c: 'd',
+    cc: 'dd',
+    ccc: 'D',
+    cccc: 'DD',
+    ccccc: 'D',
+    cccccc: 'D',
+    // months
+    M: 'm',
+    MM: 'mm',
+    MMM: 'M',
+    MMMM: 'MM',
+    MMMMM: 'M',
+    L: 'm',
+    LL: 'mm',
+    LLL: 'M',
+    LLLL: 'MM',
+    LLLLL: 'M',
+    // year
+    y: 'y',
+    yy: 'y',
+    yyy: 'yy',
+    yyyy: 'yy',
+    Y: 'y',
+    YY: 'y',
+    YYY: 'yy',
+    YYYY: 'yy'
+};
+
 class DataProvider {
     constructor(modelType, serviceType) {
         this._modelType = modelType;
@@ -1872,6 +1997,8 @@ class FilterDescriptor {
         this._matchModes = null;
         this._numberUseGrouping = true;
         this._datePickerShowTime = false;
+        this._datePickerValueWithTimezone = false;
+        this._datePickerValueInUtc = false;
         this._className = '';
         this._columnClassName = '';
         this._columnWidth = null;
@@ -1914,6 +2041,12 @@ class FilterDescriptor {
     get datePickerShowTime() {
         return this._datePickerShowTime;
     }
+    get datePickerValueInUtc() {
+        return this._datePickerValueInUtc;
+    }
+    get datePickerValueWithTimezone() {
+        return this._datePickerValueWithTimezone;
+    }
     get placeholder() {
         return this._placeholder;
     }
@@ -1965,6 +2098,15 @@ class FilterDescriptor {
         this._datePickerShowTime = showTime;
         return this;
     }
+    withDateValue(inUtc, withTimezone) {
+        if (typeof inUtc !== 'undefined') {
+            this._datePickerValueInUtc = inUtc;
+        }
+        if (typeof withTimezone !== 'undefined') {
+            this._datePickerValueWithTimezone = withTimezone;
+        }
+        return this;
+    }
     withPlaceholder(placeholder) {
         this._placeholder = placeholder;
         return this;
@@ -2003,6 +2145,8 @@ class FilterDescriptor {
         descriptor._numberUseGrouping = this._numberUseGrouping;
         descriptor._datePickerFormat = this._datePickerFormat;
         descriptor._datePickerShowTime = this._datePickerShowTime;
+        descriptor._datePickerValueInUtc = this._datePickerValueInUtc;
+        descriptor._datePickerValueWithTimezone = this._datePickerValueWithTimezone;
         descriptor._placeholder = this._placeholder;
         descriptor._className = this._className;
         descriptor._columnWidth = this._columnWidth;
@@ -2100,8 +2244,12 @@ class FilterLookupDescriptor extends FilterDescriptor {
         this._defaultValue = filterValue;
         this._defaultValueTo = filterValueTo;
         this._defaultFilterMatchMode = filterMatchMode;
-        if (Array.isArray(filterValue) && !this.multiselect) {
-            throw new Error('Array default filter can only be used with a multiselect filter.');
+        if (filterMatchMode && this._matchModes && this._matchModes.indexOf(filterMatchMode) < 0) {
+            this._defaultFilterMatchMode = undefined;
+            console.warn(`Default filter match mode '${filterMatchMode}' could not be assigned for property ${this._property}.`);
+        }
+        if ((Array.isArray(filterValue) && !this.multiselect) || (this.multiselect && !Array.isArray(filterValue))) {
+            throw new Error(`Default value not in correct format for property ${this._property}.`);
         }
         return this;
     }
@@ -2361,6 +2509,7 @@ class ColumnDescriptor {
         return this;
     }
     withFilter(forceSimple = false) {
+        var _a, _b, _c;
         this._filterDescriptor = new FilterDescriptor(this._property);
         let filterType;
         if (!forceSimple && this._objectModelType) {
@@ -2368,6 +2517,7 @@ class ColumnDescriptor {
         }
         switch (this._columnType) {
             case ColumnTypeEnum.Number:
+            case ColumnTypeEnum.Currency:
                 filterType = FilterTypeEnum.Number;
                 break;
             case ColumnTypeEnum.Boolean:
@@ -2391,6 +2541,19 @@ class ColumnDescriptor {
                 break;
         }
         this._filterDescriptor.asFilterType(filterType);
+        if (filterType === FilterTypeEnum.Number) {
+            const displayFormatFractions = (_c = (_b = (_a = this._displayFormat) === null || _a === void 0 ? void 0 : _a.split('.')) === null || _b === void 0 ? void 0 : _b[1]) === null || _c === void 0 ? void 0 : _c.split('-');
+            if (displayFormatFractions && displayFormatFractions.length > 2) {
+                this._filterDescriptor.withNumberFractions(parseInt(displayFormatFractions[0]), parseInt(displayFormatFractions[1]));
+            }
+        }
+        else if (filterType === FilterTypeEnum.Date) {
+            const displayFormat = this._displayFormat;
+            if (displayFormat) {
+                const filterDisplayFormat = DateUtil.fromPrimeToAngularDateFormat(displayFormat);
+                this._filterDescriptor.withDateFormat(filterDisplayFormat);
+            }
+        }
         return this._filterDescriptor;
     }
     withFilterLookup() {
@@ -5625,7 +5788,7 @@ class MediusRestUtil {
                 const operator = filterFieldSplit.length > 1 ? filterFieldSplit[1] : 'eq';
                 // prepare value
                 let value = filterFieldSplit.length > 2 ? filterFieldSplit.slice(2).join(':') : '';
-                const valueTo = undefined;
+                let valueTo = undefined;
                 if (value.startsWith("'")) {
                     value = value.substring(1, value.length - 1);
                 }
@@ -5635,6 +5798,10 @@ class MediusRestUtil {
                         .split(',')
                         .map((v) => (v.startsWith("'") ? v.substring(1, v.length - 1) : v));
                 }
+                if (operator === 'ft') {
+                    valueTo = value[1];
+                    value = value[0];
+                }
                 const filterDescriptor = filterDescriptors.find(f => f.property === field);
                 const matchMode = MediusRestUtil.getMapping(operator, filterDescriptor === null || filterDescriptor === void 0 ? void 0 : filterDescriptor.filterType, 1);
                 if (matchMode && filterDescriptor) {
@@ -5645,7 +5812,7 @@ class MediusRestUtil {
         return mediusParamsBuilder.build();
     }
     static fromPrimeLazyLoadEventToAngularQueryParams(event, defaultItemsPerPage = 10, defaultOffset = 0) {
-        var _a, _b, _c;
+        var _a, _b;
         const params = {
             first: null,
             rows: null,
@@ -5658,8 +5825,8 @@ class MediusRestUtil {
         if (event.rows && event.rows !== defaultItemsPerPage && event.rows > 0) {
             params['rows'] = event.rows;
         }
-        if ((_b = (_a = event.multiSortMeta) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 > 0) {
-            params['sort'] = (_c = event.multiSortMeta) === null || _c === void 0 ? void 0 : _c.map(s => `${s.field}${s.order === 1 ? '' : ':desc'}`).join(',');
+        if ((_a = event.multiSortMeta) === null || _a === void 0 ? void 0 : _a.length) {
+            params['sort'] = (_b = event.multiSortMeta) === null || _b === void 0 ? void 0 : _b.map(s => `${s.field}${s.order === 1 ? '' : ':desc'}`).join(',');
         }
         if (event.filters) {
             const filters = [];
@@ -5677,11 +5844,21 @@ class MediusRestUtil {
                         doAddFilter = true;
                     }
                     else if (Array.isArray(value)) {
-                        value = `[${value.map(v => `'${v}'`).join(',')}]`;
+                        const joinedValue = value
+                            .map(v => {
+                            if (v instanceof Date) {
+                                // for query params, always convert to iso string, correct transformation will be done later
+                                return v.toISOString();
+                            }
+                            return v;
+                        })
+                            .join(',');
+                        value = `[${joinedValue}]`;
                         doAddFilter = true;
                     }
                     else if (value instanceof Date) {
-                        value = `${value.toISOString()}`;
+                        // for query params, always convert to iso string, correct transformation will be done later
+                        value = value.toISOString();
                         doAddFilter = true;
                     }
                     if (doAddFilter) {
@@ -5700,6 +5877,43 @@ class MediusRestUtil {
         for (const filterParam of (_a = mediusQueryParams.filterParams) !== null && _a !== void 0 ? _a : []) {
             const filterDescriptor = filterDescriptors.find(f => f.property === filterParam.property);
             filterParam.property = (_b = filterDescriptor === null || filterDescriptor === void 0 ? void 0 : filterDescriptor.filterProperty) !== null && _b !== void 0 ? _b : filterParam.property;
+            if ((filterDescriptor === null || filterDescriptor === void 0 ? void 0 : filterDescriptor.filterType) === FilterTypeEnum.Date) {
+                if (filterParam.filterMatchType === MediusFilterMatchType.Equals) {
+                    // convert date equals filter to date range
+                    const filterDate = filterParam.filterValue;
+                    const startDate = new Date(filterDate);
+                    const endDate = new Date(startDate);
+                    if (filterDescriptor.datePickerShowTime) {
+                        startDate.setHours(startDate.getHours(), startDate.getMinutes(), 0, 0);
+                        endDate.setHours(endDate.getHours(), endDate.getMinutes() + 1, 0, 0);
+                    }
+                    else {
+                        startDate.setHours(0, 0, 0, 0);
+                        endDate.setHours(0, 0, 0, 0);
+                        endDate.setDate(endDate.getDate() + 1);
+                    }
+                    filterParam.filterMatchType = MediusFilterMatchType.FromTo;
+                    filterParam.filterValue = startDate;
+                    filterParam.filterValueTo = endDate;
+                }
+                // transform dates to correct iso string
+                if (typeof filterParam.filterValue !== 'undefined') {
+                    if (Array.isArray(filterParam.filterValue)) {
+                        filterParam.filterValue = filterParam.filterValue.map(v => DateUtil.toIsoString(v, filterDescriptor.datePickerValueInUtc, filterDescriptor.datePickerValueWithTimezone));
+                    }
+                    else {
+                        filterParam.filterValue = DateUtil.toIsoString(filterParam.filterValue, filterDescriptor.datePickerValueInUtc, filterDescriptor.datePickerValueWithTimezone);
+                    }
+                }
+                if (typeof filterParam.filterValueTo !== 'undefined') {
+                    if (Array.isArray(filterParam.filterValueTo)) {
+                        filterParam.filterValueTo = filterParam.filterValueTo.map(v => DateUtil.toIsoString(v, filterDescriptor.datePickerValueInUtc, filterDescriptor.datePickerValueWithTimezone));
+                    }
+                    else {
+                        filterParam.filterValueTo = DateUtil.toIsoString(filterParam.filterValueTo, filterDescriptor.datePickerValueInUtc, filterDescriptor.datePickerValueWithTimezone);
+                    }
+                }
+            }
         }
     }
     static fromPrimeLazyLoadEventToMediusQueryParams(event) {
@@ -5756,7 +5970,8 @@ MediusRestUtil.matchModeMapping = [
     [FilterMatchMode.STARTS_WITH, 'sw', MediusFilterMatchType.StartsWith, null],
     [FilterMatchMode.IN, 'in', MediusFilterMatchType.In, null],
     [FilterMatchMode.NOT_EQUALS, 'neq', MediusFilterMatchType.NotEquals, null],
-    [FilterMatchMode.DATE_IS, 'eq', MediusFilterMatchType.Equals, FilterTypeEnum.Date],
+    [FilterMatchMode.BETWEEN, 'ft', MediusFilterMatchType.FromTo, FilterTypeEnum.Date],
+    [FilterMatchMode.DATE_IS, 'dteq', MediusFilterMatchType.Equals, FilterTypeEnum.Date],
     [FilterMatchMode.DATE_BEFORE, 'lt', MediusFilterMatchType.SmallerThan, FilterTypeEnum.Date],
     [FilterMatchMode.DATE_AFTER, 'gt', MediusFilterMatchType.GreaterThan, FilterTypeEnum.Date],
     [FilterMatchMode.DATE_IS_NOT, 'neq', MediusFilterMatchType.NotEquals, FilterTypeEnum.Date]
@@ -7033,11 +7248,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
     } });
 
 class MngCommonsService {
-    constructor(router, primengConfig, translate, titleService, moduleConfig, localStorage) {
+    constructor(router, primengConfig, translate, titleService, filterService, moduleConfig, localStorage) {
         this.router = router;
         this.primengConfig = primengConfig;
         this.translate = translate;
         this.titleService = titleService;
+        this.filterService = filterService;
         this.moduleConfig = moduleConfig;
         this.localStorage = localStorage;
         // menu
@@ -7203,7 +7419,7 @@ class MngCommonsService {
         this.primengConfig.filterMatchModeOptions = {
             text: [FilterMatchModeEnum.Contains, FilterMatchModeEnum.Equals, FilterMatchModeEnum.NotEquals, FilterMatchModeEnum.StartsWith, FilterMatchModeEnum.EndsWith],
             numeric: [FilterMatchModeEnum.Equals, FilterMatchModeEnum.NotEquals, FilterMatchModeEnum.LessThan, FilterMatchModeEnum.GreaterThan],
-            date: [FilterMatchModeEnum.DateIs, FilterMatchModeEnum.DateIsNot, FilterMatchModeEnum.DateBefore, FilterMatchModeEnum.DateAfter]
+            date: [FilterMatchModeEnum.DateIs, FilterMatchModeEnum.DateBefore, FilterMatchModeEnum.DateAfter, FilterMatchModeEnum.Between]
         };
         // translate
         this.translate.langs = this.appLanguages;
@@ -7362,12 +7578,12 @@ class MngCommonsService {
         return titlePieces.join(' - ');
     }
 }
-MngCommonsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngCommonsService, deps: [{ token: i1.Router }, { token: i2.PrimeNGConfig }, { token: i1$2.TranslateService }, { token: i4.Title }, { token: MNG_MODULE_CONFIG_IT }, { token: MNG_BROWSER_STORAGE_IT }], target: i0.ɵɵFactoryTarget.Injectable });
+MngCommonsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngCommonsService, deps: [{ token: i1.Router }, { token: i2.PrimeNGConfig }, { token: i1$2.TranslateService }, { token: i4.Title }, { token: i2.FilterService }, { token: MNG_MODULE_CONFIG_IT }, { token: MNG_BROWSER_STORAGE_IT }], target: i0.ɵɵFactoryTarget.Injectable });
 MngCommonsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngCommonsService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngCommonsService, decorators: [{
             type: Injectable
         }], ctorParameters: function () {
-        return [{ type: i1.Router }, { type: i2.PrimeNGConfig }, { type: i1$2.TranslateService }, { type: i4.Title }, { type: undefined, decorators: [{
+        return [{ type: i1.Router }, { type: i2.PrimeNGConfig }, { type: i1$2.TranslateService }, { type: i4.Title }, { type: i2.FilterService }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [MNG_MODULE_CONFIG_IT]
                     }] }, { type: Storage, decorators: [{
@@ -8543,6 +8759,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                 args: [Dropdown]
             }] } });
 
+const MNG_DATE_RANGE_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => MngDateRangeComponent),
+    multi: true
+};
+class MngDateRangeComponent {
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.showTime = false;
+        this.showSeconds = false;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChangeFn = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouchedFn = () => { };
+        this.subscriptions = [];
+    }
+    get fromCtrl() {
+        return this.fromToFormControl.get('from');
+    }
+    get toCtrl() {
+        return this.fromToFormControl.get('to');
+    }
+    get dateRangeCtrl() {
+        return this.fromToFormControl.get('dateRange');
+    }
+    ngOnInit() {
+        this.fromToFormControl = this.formBuilder.group({
+            from: [],
+            to: [],
+            dateRange: []
+        });
+        this.subscriptions.push(merge(this.fromCtrl.valueChanges, this.toCtrl.valueChanges, this.dateRangeCtrl.valueChanges).subscribe(() => this.onValueChange()));
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach(value => value.unsubscribe());
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.fromToFormControl.disable();
+        }
+        else {
+            this.fromToFormControl.enable();
+        }
+    }
+    writeValue(obj) {
+        let startDate = null;
+        let endDate = null;
+        if (Array.isArray(obj)) {
+            if (obj.length > 0 && (obj[0] instanceof Date || typeof obj[0] === 'string' || typeof obj[0] === 'number')) {
+                startDate = new Date(obj[0]);
+            }
+            if (obj.length > 1 && (obj[1] instanceof Date || typeof obj[1] === 'string' || typeof obj[1] === 'number')) {
+                endDate = new Date(obj[1]);
+            }
+        }
+        else if (obj instanceof Date || typeof obj === 'string' || typeof obj === 'number') {
+            startDate = new Date(obj);
+        }
+        if (this.showTime) {
+            this.fromCtrl.setValue(startDate);
+            this.toCtrl.setValue(endDate);
+        }
+        else if (startDate || endDate) {
+            this.dateRangeCtrl.setValue([startDate, endDate]);
+        }
+        else {
+            this.dateRangeCtrl.setValue(null);
+        }
+    }
+    onValueChange() {
+        if (this.showTime) {
+            const fromDate = this.fromCtrl.value;
+            const toDate = this.toCtrl.value;
+            this.onChangeFn([fromDate, toDate]);
+        }
+        else {
+            const date = this.dateRangeCtrl.value;
+            this.onChangeFn(date);
+        }
+    }
+}
+MngDateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngDateRangeComponent, deps: [{ token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+MngDateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngDateRangeComponent, selector: "mng-date-range", inputs: { placeholder: "placeholder", showTime: "showTime", showSeconds: "showSeconds", dateFormat: "dateFormat" }, providers: [MNG_DATE_RANGE_VALUE_ACCESSOR], ngImport: i0, template: "<ng-container *ngIf=\"showTime; else defaultRange\">\n    <div class=\"flex gap-2\">\n        <p-calendar\n            appendTo=\"body\"\n            [formControl]=\"fromCtrl\"\n            [maxDate]=\"toCtrl.value\"\n            [placeholder]=\"$any(placeholder)\"\n            [dateFormat]=\"$any(dateFormat)\"\n            [showTime]=\"showTime\"\n            [showSeconds]=\"showSeconds\"\n            [showIcon]=\"true\"\n            (onFocus)=\"onTouchedFn()\"></p-calendar>\n        <p-calendar\n            appendTo=\"body\"\n            [formControl]=\"toCtrl\"\n            [minDate]=\"fromCtrl.value\"\n            [placeholder]=\"$any(placeholder)\"\n            [dateFormat]=\"$any(dateFormat)\"\n            [showTime]=\"showTime\"\n            [showSeconds]=\"showSeconds\"\n            [showIcon]=\"true\"\n            (onFocus)=\"onTouchedFn()\"></p-calendar>\n    </div>\n</ng-container>\n<ng-template #defaultRange>\n    <p-calendar\n        appendTo=\"body\"\n        [formControl]=\"dateRangeCtrl\"\n        [placeholder]=\"$any(placeholder)\"\n        [dateFormat]=\"$any(dateFormat)\"\n        selectionMode=\"range\"\n        [showIcon]=\"true\"\n        (onFocus)=\"onTouchedFn()\"></p-calendar>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngDateRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mng-date-range', providers: [MNG_DATE_RANGE_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"showTime; else defaultRange\">\n    <div class=\"flex gap-2\">\n        <p-calendar\n            appendTo=\"body\"\n            [formControl]=\"fromCtrl\"\n            [maxDate]=\"toCtrl.value\"\n            [placeholder]=\"$any(placeholder)\"\n            [dateFormat]=\"$any(dateFormat)\"\n            [showTime]=\"showTime\"\n            [showSeconds]=\"showSeconds\"\n            [showIcon]=\"true\"\n            (onFocus)=\"onTouchedFn()\"></p-calendar>\n        <p-calendar\n            appendTo=\"body\"\n            [formControl]=\"toCtrl\"\n            [minDate]=\"fromCtrl.value\"\n            [placeholder]=\"$any(placeholder)\"\n            [dateFormat]=\"$any(dateFormat)\"\n            [showTime]=\"showTime\"\n            [showSeconds]=\"showSeconds\"\n            [showIcon]=\"true\"\n            (onFocus)=\"onTouchedFn()\"></p-calendar>\n    </div>\n</ng-container>\n<ng-template #defaultRange>\n    <p-calendar\n        appendTo=\"body\"\n        [formControl]=\"dateRangeCtrl\"\n        [placeholder]=\"$any(placeholder)\"\n        [dateFormat]=\"$any(dateFormat)\"\n        selectionMode=\"range\"\n        [showIcon]=\"true\"\n        (onFocus)=\"onTouchedFn()\"></p-calendar>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i2$1.FormBuilder }]; }, propDecorators: { placeholder: [{
+                type: Input
+            }], showTime: [{
+                type: Input
+            }], showSeconds: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }] } });
+
 class MngActionEditorComponent {
     constructor(injector, translate, actionExecutor, mngCommonsService, navigationService, dialogRef, dialogConfig, viewContainerService) {
         this.injector = injector;
@@ -9094,6 +9412,16 @@ class MngTableColumnFilterComponent {
         this.primeShowMatchMode = true;
         this.primeDisplay = 'row';
         this.primeMatchModes = null;
+        this.dateDebounceSubject = new Subject();
+        this.dateDebounceSubscription = this.dateDebounceSubject.pipe(debounceTime(500), distinctUntilChanged()).subscribe(v => {
+            var _a;
+            (_a = this.dateFilterCallback) === null || _a === void 0 ? void 0 : _a.call(this, v);
+        });
+    }
+    get activeMatchMode() {
+        var _a;
+        const filter = (_a = this.primeColumnFilter) === null || _a === void 0 ? void 0 : _a.dt.filters[this.descriptor.property];
+        return filter === null || filter === void 0 ? void 0 : filter.matchMode;
     }
     ngOnInit() {
         var _a, _b;
@@ -9108,7 +9436,7 @@ class MngTableColumnFilterComponent {
                 break;
             case FilterTypeEnum.Date:
                 this.primeType = 'date';
-                this.primeDefaultMatchMode = FilterMatchMode.DATE_AFTER;
+                this.primeDefaultMatchMode = FilterMatchModeEnum.DateIs;
                 break;
             case FilterTypeEnum.Lookup:
                 this.primeType = 'lookup';
@@ -9122,7 +9450,7 @@ class MngTableColumnFilterComponent {
                 break;
             case FilterTypeEnum.String:
                 this.primeType = 'text';
-                this.primeDefaultMatchMode = FilterMatchMode.CONTAINS;
+                this.primeDefaultMatchMode = FilterMatchModeEnum.Contains;
                 break;
         }
         if (this.descriptor.matchModes) {
@@ -9136,20 +9464,23 @@ class MngTableColumnFilterComponent {
             this.primeDisplay = 'menu';
         }
     }
-    valueToDate(value) {
-        console.log('call', this.descriptor.property);
-        if (typeof value === 'string' || typeof value === 'number') {
-            return new Date(value);
-        }
-        else if (value instanceof Date) {
-            return value;
-        }
-        else {
-            return null;
-        }
+    ngOnDestroy() {
+        var _a;
+        (_a = this.dateDebounceSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
     // eslint-disable-next-line @typescript-eslint/ban-types
     dateFilter(value, filterCallback) {
+        this.dateFilterCallback = filterCallback;
+        if (this.activeMatchMode === FilterMatchModeEnum.Between && Array.isArray(value)) {
+            const dateValues = value.filter(v => v instanceof Date);
+            if (dateValues.length <= 1) {
+                return;
+            }
+        }
+        this.dateDebounceSubject.next(value);
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    dateRangeChange(value, filterCallback) {
         filterCallback(value);
     }
     // eslint-disable-next-line @typescript-eslint/ban-types
@@ -9163,19 +9494,19 @@ class MngTableColumnFilterComponent {
         }
         filterCallback(value);
     }
-    toLookupFilterValue(value) {
-        return this.lookupDescriptor.dataKeyProperty && value ? { [this.lookupDescriptor.dataKeyProperty]: value } : value;
-    }
 }
 MngTableColumnFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngTableColumnFilterComponent, deps: [{ token: i2.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
-MngTableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: { descriptor: "descriptor", display: "display" }, ngImport: i0, template: "<p-columnFilter\n    class=\"ml-auto\"\n    [type]=\"primeType\"\n    [field]=\"descriptor.property\"\n    [display]=\"primeDisplay\"\n    [matchMode]=\"primeDefaultMatchMode\"\n    [matchModeOptions]=\"$any(primeMatchModes)\"\n    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n    [showMatchModes]=\"true\"\n    [showOperator]=\"false\"\n    [showAddButton]=\"false\"\n    [hideOnClear]=\"true\"\n    [showMenu]=\"primeShowMatchMode\"\n    [minFractionDigits]=\"$any(descriptor.numberMinFractionDigits)\"\n    [maxFractionDigits]=\"$any(descriptor.numberMaxFractionDigits)\"\n    [useGrouping]=\"descriptor.numberUseGrouping\">\n    <ng-template *ngIf=\"primeType === 'date'\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <p-calendar\n            appendTo=\"body\"\n            [ngModel]=\"value\"\n            (ngModelChange)=\"dateFilter($event, filterCallback)\"\n            [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n            [showIcon]=\"true\"\n            [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n            [showTime]=\"descriptor.datePickerShowTime\">\n        </p-calendar>\n    </ng-template>\n    <ng-template *ngIf=\"lookupDescriptor\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <ng-container [ngSwitch]=\"lookupDescriptor.lookupType\">\n            <mng-autocomplete\n                *ngSwitchCase=\"lookupTypeAutocomplete\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [openOnFocus]=\"lookupDescriptor.autocompleteOpenOnFocus\"\n                [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                (valueChange)=\"autocompleteFilter($event, filterCallback)\">\n            </mng-autocomplete>\n            <mng-dropdown\n                *ngSwitchCase=\"lookupTypeDropdown\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\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                (valueChange)=\"dropdownFilter($event, filterCallback)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$3.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$4.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping"] }, { kind: "component", type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "dataKeyProperty", "itemsValueProperty", "itemsLabelProperty", "itemsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName"], outputs: ["valueChange"] }, { kind: "component", type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsLabelTranslate", "itemsValueProperty", "itemsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
+MngTableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: { descriptor: "descriptor", display: "display" }, viewQueries: [{ propertyName: "primeColumnFilter", first: true, predicate: ColumnFilter, descendants: true }], ngImport: i0, template: "<p-columnFilter\n    class=\"ml-auto\"\n    [type]=\"primeType\"\n    [field]=\"descriptor.property\"\n    [display]=\"primeDisplay\"\n    [matchMode]=\"$any(primeDefaultMatchMode)\"\n    [matchModeOptions]=\"$any(primeMatchModes)\"\n    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n    [showMatchModes]=\"true\"\n    [showOperator]=\"false\"\n    [showAddButton]=\"false\"\n    [hideOnClear]=\"true\"\n    [showMenu]=\"primeShowMatchMode\"\n    [minFractionDigits]=\"$any(descriptor.numberMinFractionDigits)\"\n    [maxFractionDigits]=\"$any(descriptor.numberMaxFractionDigits)\"\n    [useGrouping]=\"descriptor.numberUseGrouping\">\n    <ng-template *ngIf=\"primeType === 'date'\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <ng-container *ngIf=\"activeMatchMode === 'between'; else datePicker\">\n            <mng-date-range\n                [ngModel]=\"value\"\n                (ngModelChange)=\"dateFilter($event, filterCallback)\"\n                [showTime]=\"descriptor.datePickerShowTime\"\n                [dateFormat]=\"descriptor.datePickerFormat\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"></mng-date-range>\n        </ng-container>\n        <ng-template #datePicker>\n            <p-calendar\n                appendTo=\"body\"\n                [ngModel]=\"value\"\n                (ngModelChange)=\"dateFilter($event, filterCallback)\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [showIcon]=\"true\"\n                [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n                [showTime]=\"descriptor.datePickerShowTime\">\n            </p-calendar>\n        </ng-template>\n    </ng-template>\n    <ng-template *ngIf=\"lookupDescriptor\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <ng-container [ngSwitch]=\"lookupDescriptor.lookupType\">\n            <mng-autocomplete\n                *ngSwitchCase=\"lookupTypeAutocomplete\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [openOnFocus]=\"lookupDescriptor.autocompleteOpenOnFocus\"\n                [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                (valueChange)=\"autocompleteFilter($event, filterCallback)\">\n            </mng-autocomplete>\n            <mng-dropdown\n                *ngSwitchCase=\"lookupTypeDropdown\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\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                (valueChange)=\"dropdownFilter($event, filterCallback)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$3.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$4.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping"] }, { kind: "component", type: MngAutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "dataKeyProperty", "itemsValueProperty", "itemsLabelProperty", "itemsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName"], outputs: ["valueChange"] }, { kind: "component", type: MngDropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "dataKeyProperty", "itemsLabelProperty", "itemsLabelTranslate", "itemsValueProperty", "itemsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur"], outputs: ["valueChange"] }, { kind: "component", type: MngDateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "dateFormat"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngTableColumnFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-table-column-filter', template: "<p-columnFilter\n    class=\"ml-auto\"\n    [type]=\"primeType\"\n    [field]=\"descriptor.property\"\n    [display]=\"primeDisplay\"\n    [matchMode]=\"primeDefaultMatchMode\"\n    [matchModeOptions]=\"$any(primeMatchModes)\"\n    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n    [showMatchModes]=\"true\"\n    [showOperator]=\"false\"\n    [showAddButton]=\"false\"\n    [hideOnClear]=\"true\"\n    [showMenu]=\"primeShowMatchMode\"\n    [minFractionDigits]=\"$any(descriptor.numberMinFractionDigits)\"\n    [maxFractionDigits]=\"$any(descriptor.numberMaxFractionDigits)\"\n    [useGrouping]=\"descriptor.numberUseGrouping\">\n    <ng-template *ngIf=\"primeType === 'date'\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <p-calendar\n            appendTo=\"body\"\n            [ngModel]=\"value\"\n            (ngModelChange)=\"dateFilter($event, filterCallback)\"\n            [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n            [showIcon]=\"true\"\n            [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n            [showTime]=\"descriptor.datePickerShowTime\">\n        </p-calendar>\n    </ng-template>\n    <ng-template *ngIf=\"lookupDescriptor\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <ng-container [ngSwitch]=\"lookupDescriptor.lookupType\">\n            <mng-autocomplete\n                *ngSwitchCase=\"lookupTypeAutocomplete\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [openOnFocus]=\"lookupDescriptor.autocompleteOpenOnFocus\"\n                [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                (valueChange)=\"autocompleteFilter($event, filterCallback)\">\n            </mng-autocomplete>\n            <mng-dropdown\n                *ngSwitchCase=\"lookupTypeDropdown\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\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                (valueChange)=\"dropdownFilter($event, filterCallback)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n" }]
+            args: [{ selector: 'mng-table-column-filter', template: "<p-columnFilter\n    class=\"ml-auto\"\n    [type]=\"primeType\"\n    [field]=\"descriptor.property\"\n    [display]=\"primeDisplay\"\n    [matchMode]=\"$any(primeDefaultMatchMode)\"\n    [matchModeOptions]=\"$any(primeMatchModes)\"\n    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n    [showMatchModes]=\"true\"\n    [showOperator]=\"false\"\n    [showAddButton]=\"false\"\n    [hideOnClear]=\"true\"\n    [showMenu]=\"primeShowMatchMode\"\n    [minFractionDigits]=\"$any(descriptor.numberMinFractionDigits)\"\n    [maxFractionDigits]=\"$any(descriptor.numberMaxFractionDigits)\"\n    [useGrouping]=\"descriptor.numberUseGrouping\">\n    <ng-template *ngIf=\"primeType === 'date'\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <ng-container *ngIf=\"activeMatchMode === 'between'; else datePicker\">\n            <mng-date-range\n                [ngModel]=\"value\"\n                (ngModelChange)=\"dateFilter($event, filterCallback)\"\n                [showTime]=\"descriptor.datePickerShowTime\"\n                [dateFormat]=\"descriptor.datePickerFormat\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"></mng-date-range>\n        </ng-container>\n        <ng-template #datePicker>\n            <p-calendar\n                appendTo=\"body\"\n                [ngModel]=\"value\"\n                (ngModelChange)=\"dateFilter($event, filterCallback)\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [showIcon]=\"true\"\n                [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n                [showTime]=\"descriptor.datePickerShowTime\">\n            </p-calendar>\n        </ng-template>\n    </ng-template>\n    <ng-template *ngIf=\"lookupDescriptor\" pTemplate=\"filter\" let-value let-filterCallback=\"filterCallback\">\n        <ng-container [ngSwitch]=\"lookupDescriptor.lookupType\">\n            <mng-autocomplete\n                *ngSwitchCase=\"lookupTypeAutocomplete\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [dataKeyProperty]=\"lookupDescriptor.dataKeyProperty\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\n                [multiselect]=\"lookupDescriptor.multiselect\"\n                [openOnFocus]=\"lookupDescriptor.autocompleteOpenOnFocus\"\n                [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                [className]=\"lookupDescriptor.className\"\n                [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                (valueChange)=\"autocompleteFilter($event, filterCallback)\">\n            </mng-autocomplete>\n            <mng-dropdown\n                *ngSwitchCase=\"lookupTypeDropdown\"\n                [ngModel]=\"value\"\n                [dataProvider]=\"lookupDescriptor.dataProvider\"\n                [itemsValueProperty]=\"lookupDescriptor.itemsValueProperty\"\n                [itemsLabelProperty]=\"lookupDescriptor.itemsLabelProperty\"\n                [itemsLabelTranslate]=\"lookupDescriptor.itemsLabelTranslate\"\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                (valueChange)=\"dropdownFilter($event, filterCallback)\">\n            </mng-dropdown>\n        </ng-container>\n    </ng-template>\n</p-columnFilter>\n" }]
         }], ctorParameters: function () { return [{ type: i2.PrimeNGConfig }]; }, propDecorators: { descriptor: [{
                 type: Input
             }], display: [{
                 type: Input
+            }], primeColumnFilter: [{
+                type: ViewChild,
+                args: [ColumnFilter]
             }] } });
 
 class MngTableComponent {
@@ -9356,6 +9687,7 @@ class MngTableComponent {
         else {
             this.initializeDataLoadingTriggers();
         }
+        this.queryResultSubscription = this.queryResult$.subscribe(e => (this.queryResult = e));
     }
     ngAfterContentInit() {
         this.templates.forEach(template => {
@@ -9369,6 +9701,9 @@ class MngTableComponent {
                         this.showInlineActionsColumn = true;
                     }
                     break;
+                case 'footer':
+                    this.footerTemplate = template.template;
+                    break;
             }
         });
     }
@@ -9378,8 +9713,9 @@ class MngTableComponent {
         }
     }
     ngOnDestroy() {
-        var _a;
+        var _a, _b;
         (_a = this.dataProviderSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        (_b = this.queryResultSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
         this.subscriptions.forEach(s => s.unsubscribe());
     }
     reload(emitEvent = false, resetParams = false) {
@@ -9537,7 +9873,7 @@ class MngTableComponent {
                         matchMode = FilterMatchMode.CONTAINS;
                         break;
                     case FilterTypeEnum.Date:
-                        matchMode = FilterMatchMode.DATE_AFTER;
+                        matchMode = FilterMatchMode.DATE_IS;
                         break;
                     case FilterTypeEnum.Lookup:
                     case FilterTypeEnum.LookupEnum: {
@@ -9555,8 +9891,17 @@ class MngTableComponent {
                         break;
                 }
             }
+            let value = null;
+            if (applyDefaultFilters) {
+                if (f.defaultValueTo && f.defaultValue) {
+                    value = [f.defaultValue, f.defaultValueTo];
+                }
+                else if (f.defaultValue) {
+                    value = f.defaultValue;
+                }
+            }
             primeFilterMeta[f.property] = {
-                value: applyDefaultFilters && f.defaultValue ? f.defaultValue : null,
+                value: value,
                 matchMode: matchMode
             };
         });
@@ -9570,6 +9915,11 @@ class MngTableComponent {
                     if (typeof filterValue === 'string' || typeof filterValue === 'number') {
                         filterValue = new Date(filterValue);
                     }
+                    // if range is provided, take that into account
+                    if (typeof f.filterValueTo === 'string' || typeof f.filterValueTo === 'number') {
+                        const filterValueTo = new Date(f.filterValueTo);
+                        filterValue = [filterValue, filterValueTo];
+                    }
                 }
                 primeFilterMeta[descriptor.property] = {
                     value: filterValue,
@@ -9636,10 +9986,10 @@ class MngTableComponent {
     }
 }
 MngTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngTableComponent, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: i1$2.TranslateService }, { token: MngActionExecutorService }, { token: MngViewContainerComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MngTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngTableComponent, selector: "mng-table", inputs: { initialDescriptor: ["descriptor", "initialDescriptor"], items: "items", queryResult: "queryResult", loading: "loading", dataProvider: "dataProvider", useQueryParams: "useQueryParams", selectionMode: "selectionMode", selectionEnabled: "selectionEnabled", actions: "actions", isColumnClickable: "isColumnClickable", viewContainerInit: ["viewContainer", "viewContainerInit"], captionComponent: "captionComponent", columnActionComponent: "columnActionComponent", columnActionMinWidth: "columnActionMinWidth" }, outputs: { loadEventEmitter: "tableLoad", cellClickEventEmitter: "cellClick", selectionChangeEventEmitter: "selectionChange", captionCmpInstEventEmitter: "captionComponentInstance", columnActionCmpInstEventEmitter: "columnActionComponentInstance" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "primeTable", first: true, predicate: Table, descendants: true }, { propertyName: "components", predicate: MngComponentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [style.height]=\"scrollHeight === 'flex' ? 'calc(100vh - ' + tableFullHeightOffset + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    <p-table\n        *ngIf=\"!useQueryParams || (useQueryParamsInitialized$ | async)\"\n        [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n        [dataKey]=\"$any(descriptor?.dataKeyProperty ?? null)\"\n        [lazy]=\"useDataProvider\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"useDataProvider && !infiniteScroll\"\n        [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n        [first]=\"$any(infiniteScroll ? 0 : offset)\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"$any(multiSortMeta)\"\n        [filters]=\"filterMetadata\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [scrollable]=\"infiniteScroll\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualRowHeight]=\"$any(rowHeight)\"\n        [scrollHeight]=\"$any(scrollHeight)\"\n        [selectionMode]=\"$any(selectionEnabled ? selectionMode : null)\"\n        [rowHover]=\"descriptor?.hasHover ?? true\"\n        [styleClass]=\"className\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\"\n        sortMode=\"multiple\"\n        responsiveLayout=\"scroll\"\n        [resizableColumns]=\"true\"\n        [autoLayout]=\"true\">\n        <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor?.title\" pTemplate=\"caption\">\n            <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #componentOrDefaultCaption>\n                <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n                <ng-template #defaultCaption>\n                    <h5 class=\"p-0 m-0\">{{ descriptor?.title }}</h5>\n                </ng-template>\n            </ng-template>\n        </ng-template>\n\n        <ng-template pTemplate=\"header\">\n            <tr *ngIf=\"!descriptor?.hideHeader\" class=\"mng-table-header\" [class]=\"descriptor?.headerClassName\">\n                <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                </th>\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\"></th>\n                <ng-container *ngFor=\"let col of descriptor?.columns\">\n                    <th *ngIf=\"col.isSortEnabled\" [pSortableColumn]=\"col.property\" [style.width.%]=\"col.width\" [style.min-width.px]=\"col.minWidth\" [class]=\"col.headerClassName\">\n                        <div class=\"flex justify-content-between align-items-center\">\n                            {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n                            <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor!.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </div>\n                    </th>\n                    <th *ngIf=\"!col.isSortEnabled\">\n                        {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n                        <ng-container>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor!.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </ng-container>\n                    </th>\n                </ng-container>\n                <th *ngIf=\"showInlineActionsColumn\"></th>\n            </tr>\n            <tr *ngIf=\"descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters\" class=\"mng-column-filter-row\">\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\"></th>\n                <th\n                    *ngFor=\"let col of descriptor?.columns\"\n                    [class]=\"(col.filterDescriptor ? 'mng-column-filter-' + col.filterDescriptor.filterType + ' ' : ' ') + col.filterDescriptor?.columnClassName\"\n                    [style.width.%]=\"col.filterDescriptor?.columnWidth ?? col.width\"\n                    [style.min-width.px]=\"col.filterDescriptor?.columnMinWidth ?? col.minWidth\">\n                    <div class=\"flex\" *ngIf=\"col.filterDescriptor\">\n                        <mng-table-column-filter [display]=\"descriptor!.filterDisplay\" [descriptor]=\"col.filterDescriptor\"></mng-table-column-filter>\n                    </div>\n                </th>\n                <th *ngIf=\"showInlineActionsColumn\"></th>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n            <tr [style.height.px]=\"rowHeight\" [class]=\"descriptor?.rowClassName | mngClassMapPipe: descriptor?.rowClassNameMapFn:item\">\n                <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"width: 3rem\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 3rem\">\n                    <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                </td>\n                <td\n                    *ngFor=\"let col of descriptor?.columns\"\n                    (click)=\"onCellClick($event, col, item, idx)\"\n                    [class]=\"col.className\"\n                    [class.clickable]=\"isColumnClickable\"\n                    [style.width.%]=\"col.width\"\n                    [style.min-width.px]=\"col.minWidth\">\n                    <mng-table-column-value [descriptor]=\"col\" [item]=\"item\"></mng-table-column-value>\n                </td>\n                <td *ngIf=\"showInlineActionsColumn\" class=\"column-action text-right\" [style.min-width.px]=\"columnActionMinWidth\">\n                    <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponentOrDefault\">\n                        <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                    </ng-container>\n                    <ng-template #showColumnActionComponentOrDefault>\n                        <span\n                            *ngIf=\"columnActionComponent; else defaultColumnActions\"\n                            [mngComponent]=\"columnActionComponent!\"\n                            (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n                    </ng-template>\n                    <ng-template #defaultColumnActions>\n                        <mng-action\n                            *ngFor=\"let action of rowInlineActions\"\n                            [action]=\"action\"\n                            [item]=\"item\"\n                            [itemId]=\"descriptor?.model?.idPropertyName ? item[descriptor!.model!.idPropertyName!] : null\"\n                            [actionData]=\"{itemIndex: idx}\"\n                            (finish)=\"onActionFinish($event)\">\n                        </mng-action>\n                    </ng-template>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"loadingbody\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 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\n        <ng-template pTemplate=\"emptymessage\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    {{ 'mngTable.noItems' | translate }}\n                </td>\n            </tr>\n        </ng-template>\n    </p-table>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6$4.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "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", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i6$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i6$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i6$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i6$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i7$3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs"], outputs: ["instanceCreated"] }, { kind: "component", type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { kind: "component", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: ["descriptor", "display"] }, { kind: "component", type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "queryParam", "dataProvider", "disabled", "loading", "viewContainer", "selectedItems"], outputs: ["finish"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: MngI18nPropertyPipe, name: "i18nProperty" }, { kind: "pipe", type: MngClassMapPipe, name: "mngClassMapPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MngTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngTableComponent, selector: "mng-table", inputs: { initialDescriptor: ["descriptor", "initialDescriptor"], items: "items", queryResult: "queryResult", loading: "loading", dataProvider: "dataProvider", useQueryParams: "useQueryParams", selectionMode: "selectionMode", selectionEnabled: "selectionEnabled", actions: "actions", isColumnClickable: "isColumnClickable", viewContainerInit: ["viewContainer", "viewContainerInit"], captionComponent: "captionComponent", columnActionComponent: "columnActionComponent", columnActionMinWidth: "columnActionMinWidth" }, outputs: { loadEventEmitter: "tableLoad", cellClickEventEmitter: "cellClick", selectionChangeEventEmitter: "selectionChange", captionCmpInstEventEmitter: "captionComponentInstance", columnActionCmpInstEventEmitter: "columnActionComponentInstance" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "primeTable", first: true, predicate: Table, descendants: true }, { propertyName: "components", predicate: MngComponentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [style.height]=\"scrollHeight === 'flex' ? 'calc(100vh - ' + tableFullHeightOffset + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    <p-table\n        *ngIf=\"!useQueryParams || (useQueryParamsInitialized$ | async)\"\n        [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n        [dataKey]=\"$any(descriptor?.dataKeyProperty ?? null)\"\n        [lazy]=\"useDataProvider\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"useDataProvider && !infiniteScroll\"\n        [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n        [first]=\"$any(infiniteScroll ? 0 : offset)\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"$any(multiSortMeta)\"\n        [filters]=\"filterMetadata\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [scrollable]=\"infiniteScroll\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualRowHeight]=\"$any(rowHeight)\"\n        [scrollHeight]=\"$any(scrollHeight)\"\n        [selectionMode]=\"$any(selectionEnabled ? selectionMode : null)\"\n        [rowHover]=\"descriptor?.hasHover ?? true\"\n        [styleClass]=\"className\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\"\n        sortMode=\"multiple\"\n        responsiveLayout=\"scroll\"\n        [resizableColumns]=\"true\"\n        [autoLayout]=\"true\">\n        <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor?.title\" pTemplate=\"caption\">\n            <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #componentOrDefaultCaption>\n                <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n                <ng-template #defaultCaption>\n                    <h5 class=\"p-0 m-0\">{{ descriptor?.title }}</h5>\n                </ng-template>\n            </ng-template>\n        </ng-template>\n\n        <ng-template pTemplate=\"header\">\n            <tr *ngIf=\"!descriptor?.hideHeader\" class=\"mng-table-header\" [class]=\"descriptor?.headerClassName\">\n                <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                </th>\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\"></th>\n                <ng-container *ngFor=\"let col of descriptor?.columns\">\n                    <th *ngIf=\"col.isSortEnabled\" [pSortableColumn]=\"col.property\" [style.width.%]=\"col.width\" [style.min-width.px]=\"col.minWidth\" [class]=\"col.headerClassName\">\n                        <div class=\"flex justify-content-between align-items-center\">\n                            {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n                            <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor!.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </div>\n                    </th>\n                    <th *ngIf=\"!col.isSortEnabled\">\n                        {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n                        <ng-container>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor!.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </ng-container>\n                    </th>\n                </ng-container>\n                <th *ngIf=\"showInlineActionsColumn\"></th>\n            </tr>\n            <tr *ngIf=\"descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters\" class=\"mng-column-filter-row\">\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\"></th>\n                <th\n                    *ngFor=\"let col of descriptor?.columns\"\n                    [class]=\"(col.filterDescriptor ? 'mng-column-filter-' + col.filterDescriptor.filterType + ' ' : ' ') + col.filterDescriptor?.columnClassName\"\n                    [style.width.%]=\"col.filterDescriptor?.columnWidth ?? col.width\"\n                    [style.min-width.px]=\"col.filterDescriptor?.columnMinWidth ?? col.minWidth\">\n                    <div class=\"flex\" *ngIf=\"col.filterDescriptor\">\n                        <mng-table-column-filter [display]=\"descriptor!.filterDisplay\" [descriptor]=\"col.filterDescriptor\"></mng-table-column-filter>\n                    </div>\n                </th>\n                <th *ngIf=\"showInlineActionsColumn\"></th>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n            <tr [style.height.px]=\"rowHeight\" [class]=\"descriptor?.rowClassName | mngClassMapPipe: descriptor?.rowClassNameMapFn:item\">\n                <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"width: 3rem\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 3rem\">\n                    <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                </td>\n                <td\n                    *ngFor=\"let col of descriptor?.columns\"\n                    (click)=\"onCellClick($event, col, item, idx)\"\n                    [class]=\"col.className\"\n                    [class.clickable]=\"isColumnClickable\"\n                    [style.width.%]=\"col.width\"\n                    [style.min-width.px]=\"col.minWidth\">\n                    <mng-table-column-value [descriptor]=\"col\" [item]=\"item\"></mng-table-column-value>\n                </td>\n                <td *ngIf=\"showInlineActionsColumn\" class=\"column-action text-right\" [style.min-width.px]=\"columnActionMinWidth\">\n                    <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponentOrDefault\">\n                        <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                    </ng-container>\n                    <ng-template #showColumnActionComponentOrDefault>\n                        <span\n                            *ngIf=\"columnActionComponent; else defaultColumnActions\"\n                            [mngComponent]=\"columnActionComponent!\"\n                            (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n                    </ng-template>\n                    <ng-template #defaultColumnActions>\n                        <mng-action\n                            *ngFor=\"let action of rowInlineActions\"\n                            [action]=\"action\"\n                            [item]=\"item\"\n                            [itemId]=\"descriptor?.model?.idPropertyName ? item[descriptor!.model!.idPropertyName!] : null\"\n                            [actionData]=\"{itemIndex: idx}\"\n                            (finish)=\"onActionFinish($event)\">\n                        </mng-action>\n                    </ng-template>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"loadingbody\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 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\n        <ng-template pTemplate=\"emptymessage\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    {{ 'mngTable.noItems' | translate }}\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template *ngIf=\"footerTemplate\" pTemplate=\"summary\">\n            <ng-container [ngTemplateOutlet]=\"footerTemplate\" [ngTemplateOutletContext]=\"{queryResult: queryResult}\"></ng-container>\n        </ng-template>\n    </p-table>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6$4.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "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", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i6$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i6$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i6$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i6$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i7$3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs"], outputs: ["instanceCreated"] }, { kind: "component", type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { kind: "component", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: ["descriptor", "display"] }, { kind: "component", type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "queryParam", "dataProvider", "disabled", "loading", "viewContainer", "selectedItems"], outputs: ["finish"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: MngI18nPropertyPipe, name: "i18nProperty" }, { kind: "pipe", type: MngClassMapPipe, name: "mngClassMapPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.height]=\"scrollHeight === 'flex' ? 'calc(100vh - ' + tableFullHeightOffset + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    <p-table\n        *ngIf=\"!useQueryParams || (useQueryParamsInitialized$ | async)\"\n        [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n        [dataKey]=\"$any(descriptor?.dataKeyProperty ?? null)\"\n        [lazy]=\"useDataProvider\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"useDataProvider && !infiniteScroll\"\n        [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n        [first]=\"$any(infiniteScroll ? 0 : offset)\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"$any(multiSortMeta)\"\n        [filters]=\"filterMetadata\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [scrollable]=\"infiniteScroll\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualRowHeight]=\"$any(rowHeight)\"\n        [scrollHeight]=\"$any(scrollHeight)\"\n        [selectionMode]=\"$any(selectionEnabled ? selectionMode : null)\"\n        [rowHover]=\"descriptor?.hasHover ?? true\"\n        [styleClass]=\"className\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\"\n        sortMode=\"multiple\"\n        responsiveLayout=\"scroll\"\n        [resizableColumns]=\"true\"\n        [autoLayout]=\"true\">\n        <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor?.title\" pTemplate=\"caption\">\n            <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #componentOrDefaultCaption>\n                <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n                <ng-template #defaultCaption>\n                    <h5 class=\"p-0 m-0\">{{ descriptor?.title }}</h5>\n                </ng-template>\n            </ng-template>\n        </ng-template>\n\n        <ng-template pTemplate=\"header\">\n            <tr *ngIf=\"!descriptor?.hideHeader\" class=\"mng-table-header\" [class]=\"descriptor?.headerClassName\">\n                <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                </th>\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\"></th>\n                <ng-container *ngFor=\"let col of descriptor?.columns\">\n                    <th *ngIf=\"col.isSortEnabled\" [pSortableColumn]=\"col.property\" [style.width.%]=\"col.width\" [style.min-width.px]=\"col.minWidth\" [class]=\"col.headerClassName\">\n                        <div class=\"flex justify-content-between align-items-center\">\n                            {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n                            <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor!.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </div>\n                    </th>\n                    <th *ngIf=\"!col.isSortEnabled\">\n                        {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n                        <ng-container>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor!.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </ng-container>\n                    </th>\n                </ng-container>\n                <th *ngIf=\"showInlineActionsColumn\"></th>\n            </tr>\n            <tr *ngIf=\"descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters\" class=\"mng-column-filter-row\">\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\"></th>\n                <th\n                    *ngFor=\"let col of descriptor?.columns\"\n                    [class]=\"(col.filterDescriptor ? 'mng-column-filter-' + col.filterDescriptor.filterType + ' ' : ' ') + col.filterDescriptor?.columnClassName\"\n                    [style.width.%]=\"col.filterDescriptor?.columnWidth ?? col.width\"\n                    [style.min-width.px]=\"col.filterDescriptor?.columnMinWidth ?? col.minWidth\">\n                    <div class=\"flex\" *ngIf=\"col.filterDescriptor\">\n                        <mng-table-column-filter [display]=\"descriptor!.filterDisplay\" [descriptor]=\"col.filterDescriptor\"></mng-table-column-filter>\n                    </div>\n                </th>\n                <th *ngIf=\"showInlineActionsColumn\"></th>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n            <tr [style.height.px]=\"rowHeight\" [class]=\"descriptor?.rowClassName | mngClassMapPipe: descriptor?.rowClassNameMapFn:item\">\n                <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"width: 3rem\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 3rem\">\n                    <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                </td>\n                <td\n                    *ngFor=\"let col of descriptor?.columns\"\n                    (click)=\"onCellClick($event, col, item, idx)\"\n                    [class]=\"col.className\"\n                    [class.clickable]=\"isColumnClickable\"\n                    [style.width.%]=\"col.width\"\n                    [style.min-width.px]=\"col.minWidth\">\n                    <mng-table-column-value [descriptor]=\"col\" [item]=\"item\"></mng-table-column-value>\n                </td>\n                <td *ngIf=\"showInlineActionsColumn\" class=\"column-action text-right\" [style.min-width.px]=\"columnActionMinWidth\">\n                    <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponentOrDefault\">\n                        <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                    </ng-container>\n                    <ng-template #showColumnActionComponentOrDefault>\n                        <span\n                            *ngIf=\"columnActionComponent; else defaultColumnActions\"\n                            [mngComponent]=\"columnActionComponent!\"\n                            (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n                    </ng-template>\n                    <ng-template #defaultColumnActions>\n                        <mng-action\n                            *ngFor=\"let action of rowInlineActions\"\n                            [action]=\"action\"\n                            [item]=\"item\"\n                            [itemId]=\"descriptor?.model?.idPropertyName ? item[descriptor!.model!.idPropertyName!] : null\"\n                            [actionData]=\"{itemIndex: idx}\"\n                            (finish)=\"onActionFinish($event)\">\n                        </mng-action>\n                    </ng-template>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"loadingbody\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 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\n        <ng-template pTemplate=\"emptymessage\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    {{ 'mngTable.noItems' | translate }}\n                </td>\n            </tr>\n        </ng-template>\n    </p-table>\n</div>\n" }]
+            args: [{ selector: 'mng-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.height]=\"scrollHeight === 'flex' ? 'calc(100vh - ' + tableFullHeightOffset + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    <p-table\n        *ngIf=\"!useQueryParams || (useQueryParamsInitialized$ | async)\"\n        [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n        [dataKey]=\"$any(descriptor?.dataKeyProperty ?? null)\"\n        [lazy]=\"useDataProvider\"\n        [loading]=\"(loading$ | async) ?? false\"\n        [paginator]=\"useDataProvider && !infiniteScroll\"\n        [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n        [first]=\"$any(infiniteScroll ? 0 : offset)\"\n        [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n        [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n        [showCurrentPageReport]=\"!infiniteScroll\"\n        [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n        [multiSortMeta]=\"$any(multiSortMeta)\"\n        [filters]=\"filterMetadata\"\n        [(selection)]=\"selection\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [scrollable]=\"infiniteScroll\"\n        [virtualScroll]=\"infiniteScroll\"\n        [virtualRowHeight]=\"$any(rowHeight)\"\n        [scrollHeight]=\"$any(scrollHeight)\"\n        [selectionMode]=\"$any(selectionEnabled ? selectionMode : null)\"\n        [rowHover]=\"descriptor?.hasHover ?? true\"\n        [styleClass]=\"className\"\n        (onLazyLoad)=\"onTableLazyLoad($event)\"\n        (onSort)=\"onTableSort($event)\"\n        (onFilter)=\"onTableFilter($event)\"\n        sortMode=\"multiple\"\n        responsiveLayout=\"scroll\"\n        [resizableColumns]=\"true\"\n        [autoLayout]=\"true\">\n        <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor?.title\" pTemplate=\"caption\">\n            <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #componentOrDefaultCaption>\n                <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n                <ng-template #defaultCaption>\n                    <h5 class=\"p-0 m-0\">{{ descriptor?.title }}</h5>\n                </ng-template>\n            </ng-template>\n        </ng-template>\n\n        <ng-template pTemplate=\"header\">\n            <tr *ngIf=\"!descriptor?.hideHeader\" class=\"mng-table-header\" [class]=\"descriptor?.headerClassName\">\n                <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\">\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                </th>\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\"></th>\n                <ng-container *ngFor=\"let col of descriptor?.columns\">\n                    <th *ngIf=\"col.isSortEnabled\" [pSortableColumn]=\"col.property\" [style.width.%]=\"col.width\" [style.min-width.px]=\"col.minWidth\" [class]=\"col.headerClassName\">\n                        <div class=\"flex justify-content-between align-items-center\">\n                            {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n                            <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor!.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </div>\n                    </th>\n                    <th *ngIf=\"!col.isSortEnabled\">\n                        {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n                        <ng-container>\n                            <mng-table-column-filter\n                                *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n                                class=\"ml-auto\"\n                                [display]=\"descriptor!.filterDisplay\"\n                                [descriptor]=\"col.filterDescriptor\">\n                            </mng-table-column-filter>\n                        </ng-container>\n                    </th>\n                </ng-container>\n                <th *ngIf=\"showInlineActionsColumn\"></th>\n            </tr>\n            <tr *ngIf=\"descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters\" class=\"mng-column-filter-row\">\n                <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n                <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\"></th>\n                <th\n                    *ngFor=\"let col of descriptor?.columns\"\n                    [class]=\"(col.filterDescriptor ? 'mng-column-filter-' + col.filterDescriptor.filterType + ' ' : ' ') + col.filterDescriptor?.columnClassName\"\n                    [style.width.%]=\"col.filterDescriptor?.columnWidth ?? col.width\"\n                    [style.min-width.px]=\"col.filterDescriptor?.columnMinWidth ?? col.minWidth\">\n                    <div class=\"flex\" *ngIf=\"col.filterDescriptor\">\n                        <mng-table-column-filter [display]=\"descriptor!.filterDisplay\" [descriptor]=\"col.filterDescriptor\"></mng-table-column-filter>\n                    </div>\n                </th>\n                <th *ngIf=\"showInlineActionsColumn\"></th>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n            <tr [style.height.px]=\"rowHeight\" [class]=\"descriptor?.rowClassName | mngClassMapPipe: descriptor?.rowClassNameMapFn:item\">\n                <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"width: 3rem\">\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                </td>\n                <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 3rem\">\n                    <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                </td>\n                <td\n                    *ngFor=\"let col of descriptor?.columns\"\n                    (click)=\"onCellClick($event, col, item, idx)\"\n                    [class]=\"col.className\"\n                    [class.clickable]=\"isColumnClickable\"\n                    [style.width.%]=\"col.width\"\n                    [style.min-width.px]=\"col.minWidth\">\n                    <mng-table-column-value [descriptor]=\"col\" [item]=\"item\"></mng-table-column-value>\n                </td>\n                <td *ngIf=\"showInlineActionsColumn\" class=\"column-action text-right\" [style.min-width.px]=\"columnActionMinWidth\">\n                    <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponentOrDefault\">\n                        <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                    </ng-container>\n                    <ng-template #showColumnActionComponentOrDefault>\n                        <span\n                            *ngIf=\"columnActionComponent; else defaultColumnActions\"\n                            [mngComponent]=\"columnActionComponent!\"\n                            (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n                    </ng-template>\n                    <ng-template #defaultColumnActions>\n                        <mng-action\n                            *ngFor=\"let action of rowInlineActions\"\n                            [action]=\"action\"\n                            [item]=\"item\"\n                            [itemId]=\"descriptor?.model?.idPropertyName ? item[descriptor!.model!.idPropertyName!] : null\"\n                            [actionData]=\"{itemIndex: idx}\"\n                            (finish)=\"onActionFinish($event)\">\n                        </mng-action>\n                    </ng-template>\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template pTemplate=\"loadingbody\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 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\n        <ng-template pTemplate=\"emptymessage\">\n            <tr [style.height.px]=\"rowHeight\">\n                <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                    {{ 'mngTable.noItems' | translate }}\n                </td>\n            </tr>\n        </ng-template>\n\n        <ng-template *ngIf=\"footerTemplate\" pTemplate=\"summary\">\n            <ng-container [ngTemplateOutlet]=\"footerTemplate\" [ngTemplateOutletContext]=\"{queryResult: queryResult}\"></ng-container>\n        </ng-template>\n    </p-table>\n</div>\n" }]
         }], ctorParameters: function () {
         return [{ type: i0.Injector }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i1$2.TranslateService }, { type: MngActionExecutorService }, { type: MngViewContainerComponentService, decorators: [{
                         type: Optional
@@ -9746,6 +10096,15 @@ class MngTableviewComponent {
         this.toolbarRightActions = this.toolbarRightActions.reverse();
         this.hasItemSelectionAction = [...this.toolbarLeftActions, ...this.toolbarRightActions].some(e => e.hasItemsSelection);
     }
+    ngAfterContentInit() {
+        this.templates.forEach(template => {
+            switch (template.getType()) {
+                case 'footer':
+                    this.footerTemplate = template.template;
+                    break;
+            }
+        });
+    }
     ngOnDestroy() {
         this.subscriptions.forEach(s => s.unsubscribe());
     }
@@ -9767,10 +10126,10 @@ class MngTableviewComponent {
     }
 }
 MngTableviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngTableviewComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.MessageService }, { token: i1$2.TranslateService }, { token: i3.DialogService }, { token: i2.ConfirmationService }, { token: MngActionExecutorService }, { token: MngViewContainerComponentService }], target: i0.ɵɵFactoryTarget.Component });
-MngTableviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngTableviewComponent, selector: "mng-tableview", inputs: { descriptor: "descriptor", dataProvider: "dataProvider", actions: "actions" }, providers: [MessageService, ConfirmationService, MngViewContainerComponentService], viewQueries: [{ propertyName: "tableComponent", first: true, predicate: MngTableComponent, descendants: true }], ngImport: i0, template: "<div class=\"mng-tableview\">\n    <p-toast></p-toast>\n\n    <div class=\"card\">\n        <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n            <ng-template pTemplate=\"left\">\n                <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\" [queryParam]=\"tableQueryParam\" [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\" [queryParam]=\"tableQueryParam\" [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table\n            [descriptor]=\"descriptor.table\"\n            [dataProvider]=\"dataProvider\"\n            [useQueryParams]=\"true\"\n            [actions]=\"actions\"\n            [selectionEnabled]=\"hasItemSelectionAction\"\n            [selectionMode]=\"'multiple'\"\n            (tableLoad)=\"onTableLoad($event)\"\n            (selectionChange)=\"selectionChange($event)\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-0 m-0\">{{ descriptor.tableTitle ?? '' | translate }}</h5>\n                </div>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: i6$2.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass"] }, { kind: "directive", type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { kind: "component", type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "actions", "isColumnClickable", "viewContainer", "captionComponent", "columnActionComponent", "columnActionMinWidth"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { kind: "component", type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "queryParam", "dataProvider", "disabled", "loading", "viewContainer", "selectedItems"], outputs: ["finish"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
+MngTableviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngTableviewComponent, selector: "mng-tableview", inputs: { descriptor: "descriptor", dataProvider: "dataProvider", actions: "actions" }, providers: [MessageService, ConfirmationService, MngViewContainerComponentService], queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "tableComponent", first: true, predicate: MngTableComponent, descendants: true }], ngImport: i0, template: "<div class=\"mng-tableview\">\n    <p-toast></p-toast>\n\n    <div class=\"card\">\n        <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n            <ng-template pTemplate=\"left\">\n                <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\" [queryParam]=\"tableQueryParam\" [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\" [queryParam]=\"tableQueryParam\" [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table\n            [descriptor]=\"descriptor.table\"\n            [dataProvider]=\"dataProvider\"\n            [useQueryParams]=\"true\"\n            [actions]=\"actions\"\n            [selectionEnabled]=\"hasItemSelectionAction\"\n            [selectionMode]=\"'multiple'\"\n            (tableLoad)=\"onTableLoad($event)\"\n            (selectionChange)=\"selectionChange($event)\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-0 m-0\">{{ descriptor.tableTitle ?? '' | translate }}</h5>\n                </div>\n            </ng-template>\n\n            <ng-template let-queryResult=\"queryResult\" mngTemplate=\"footer\">\n                <ng-container *ngIf=\"footerTemplate\" [ngTemplateOutlet]=\"footerTemplate\" [ngTemplateOutletContext]=\"{queryResult: queryResult}\"></ng-container>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: i6$2.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass"] }, { kind: "directive", type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { kind: "component", type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "actions", "isColumnClickable", "viewContainer", "captionComponent", "columnActionComponent", "columnActionMinWidth"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { kind: "component", type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "queryParam", "dataProvider", "disabled", "loading", "viewContainer", "selectedItems"], outputs: ["finish"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngTableviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-tableview', providers: [MessageService, ConfirmationService, MngViewContainerComponentService], template: "<div class=\"mng-tableview\">\n    <p-toast></p-toast>\n\n    <div class=\"card\">\n        <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n            <ng-template pTemplate=\"left\">\n                <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\" [queryParam]=\"tableQueryParam\" [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\" [queryParam]=\"tableQueryParam\" [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table\n            [descriptor]=\"descriptor.table\"\n            [dataProvider]=\"dataProvider\"\n            [useQueryParams]=\"true\"\n            [actions]=\"actions\"\n            [selectionEnabled]=\"hasItemSelectionAction\"\n            [selectionMode]=\"'multiple'\"\n            (tableLoad)=\"onTableLoad($event)\"\n            (selectionChange)=\"selectionChange($event)\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-0 m-0\">{{ descriptor.tableTitle ?? '' | translate }}</h5>\n                </div>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n" }]
+            args: [{ selector: 'mng-tableview', providers: [MessageService, ConfirmationService, MngViewContainerComponentService], template: "<div class=\"mng-tableview\">\n    <p-toast></p-toast>\n\n    <div class=\"card\">\n        <p-toolbar styleClass=\"mb-4\" *ngIf=\"toolbarLeftActions.length > 0 || toolbarRightActions.length > 0\">\n            <ng-template pTemplate=\"left\">\n                <mng-action *ngFor=\"let action of toolbarLeftActions\" [action]=\"action\" [queryParam]=\"tableQueryParam\" [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n\n            <ng-template pTemplate=\"right\">\n                <mng-action *ngFor=\"let action of toolbarRightActions\" [action]=\"action\" [queryParam]=\"tableQueryParam\" [selectedItems]=\"selectedItems\"></mng-action>\n            </ng-template>\n        </p-toolbar>\n\n        <mng-table\n            [descriptor]=\"descriptor.table\"\n            [dataProvider]=\"dataProvider\"\n            [useQueryParams]=\"true\"\n            [actions]=\"actions\"\n            [selectionEnabled]=\"hasItemSelectionAction\"\n            [selectionMode]=\"'multiple'\"\n            (tableLoad)=\"onTableLoad($event)\"\n            (selectionChange)=\"selectionChange($event)\">\n            <ng-template mngTemplate=\"caption\">\n                <div class=\"flex flex-column md:flex-row md:justify-content-between table-header\">\n                    <h5 class=\"p-0 m-0\">{{ descriptor.tableTitle ?? '' | translate }}</h5>\n                </div>\n            </ng-template>\n\n            <ng-template let-queryResult=\"queryResult\" mngTemplate=\"footer\">\n                <ng-container *ngIf=\"footerTemplate\" [ngTemplateOutlet]=\"footerTemplate\" [ngTemplateOutletContext]=\"{queryResult: queryResult}\"></ng-container>\n            </ng-template>\n        </mng-table>\n    </div>\n\n    <router-outlet></router-outlet>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.MessageService }, { type: i1$2.TranslateService }, { type: i3.DialogService }, { type: i2.ConfirmationService }, { type: MngActionExecutorService }, { type: MngViewContainerComponentService }]; }, propDecorators: { descriptor: [{
                 type: Input
             }], dataProvider: [{
@@ -9780,6 +10139,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
             }], tableComponent: [{
                 type: ViewChild,
                 args: [MngTableComponent]
+            }], templates: [{
+                type: ContentChildren,
+                args: [MngTemplateDirective]
             }] } });
 
 class AMngTableviewRouteComponent {
@@ -9887,10 +10249,10 @@ class MngTableviewRouteComponent extends AMngTableviewRouteComponent {
     }
 }
 MngTableviewRouteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngTableviewRouteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MngTableviewRouteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngTableviewRouteComponent, selector: "mng-tableview-route", inputs: { descriptorInit: ["descriptor", "descriptorInit"], dataProviderInit: ["dataProvider", "dataProviderInit"], actionsInit: ["actions", "actionsInit"] }, viewQueries: [{ propertyName: "tableviewComponent", first: true, predicate: MngTableviewComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"grid\">\n    <div class=\"col-12\">\n        <mng-tableview [descriptor]=\"descriptor\" [dataProvider]=\"dataProvider\" [actions]=\"actions\"></mng-tableview>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: MngTableviewComponent, selector: "mng-tableview", inputs: ["descriptor", "dataProvider", "actions"] }] });
+MngTableviewRouteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngTableviewRouteComponent, selector: "mng-tableview-route", inputs: { descriptorInit: ["descriptor", "descriptorInit"], dataProviderInit: ["dataProvider", "dataProviderInit"], actionsInit: ["actions", "actionsInit"] }, viewQueries: [{ propertyName: "tableviewComponent", first: true, predicate: MngTableviewComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"grid\">\n    <div class=\"col-12\">\n        <mng-tableview [descriptor]=\"descriptor\" [dataProvider]=\"dataProvider\" [actions]=\"actions\"> </mng-tableview>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: MngTableviewComponent, selector: "mng-tableview", inputs: ["descriptor", "dataProvider", "actions"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngTableviewRouteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-tableview-route', template: "<div class=\"grid\">\n    <div class=\"col-12\">\n        <mng-tableview [descriptor]=\"descriptor\" [dataProvider]=\"dataProvider\" [actions]=\"actions\"></mng-tableview>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'mng-tableview-route', template: "<div class=\"grid\">\n    <div class=\"col-12\">\n        <mng-tableview [descriptor]=\"descriptor\" [dataProvider]=\"dataProvider\" [actions]=\"actions\"> </mng-tableview>\n    </div>\n</div>\n" }]
         }], propDecorators: { descriptorInit: [{
                 type: Input,
                 args: ['descriptor']
@@ -11364,6 +11726,7 @@ const declarations = [
     // mng fields
     MngAutocompleteComponent,
     MngDropdownComponent,
+    MngDateRangeComponent,
     // formly wrappers
     MngFormlyFieldWrapperComponent,
     MngFormlyTableWrapperComponent,
@@ -11488,6 +11851,7 @@ MngCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         // mng fields
         MngAutocompleteComponent,
         MngDropdownComponent,
+        MngDateRangeComponent,
         // formly wrappers
         MngFormlyFieldWrapperComponent,
         MngFormlyTableWrapperComponent,
@@ -11610,6 +11974,7 @@ MngCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         // mng fields
         MngAutocompleteComponent,
         MngDropdownComponent,
+        MngDateRangeComponent,
         // formly wrappers
         MngFormlyFieldWrapperComponent,
         MngFormlyTableWrapperComponent,
@@ -12476,5 +12841,5 @@ class TableviewRouteBuilder {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_EDITOR_DIALOG_COMPONENT_SETTING, AFieldDescriptor, AFieldGroupDescriptor, AGenericFieldDescriptor, AMngApiService, AMngBaseApiService, AMngCrudApiService, AMngGetAllApiService, AMngTableviewRouteComponent, APermissions, ActionActivationTriggerEnum, ActionConfirmationDialogDescriptor, ActionContext, ActionContextValidation, ActionDataProviderUtil, ActionDeleteDescriptor, ActionDescriptor, ActionEditorAddDescriptor, ActionEditorDescriptor, ActionEditorDetailsDescriptor, ActionEditorDialogSizeEnum, ActionEditorEditDescriptor, ActionEditorSubmitDescriptor, ActionEditorSubmitTypeEnum, ActionError, ActionInstance, ActionInstanceStateEnum, ActionLevelEnum, ActionLinkDescriptor, ActionParameters, ActionPositionEnum, ActionSimpleDescriptor, ActionSizeEnum, ActionTypeEnum, AuthorizationTypeEnum, AuthorizationUtil, ButtonDescriptor, ButtonStyleBuilder, ButtonStyleRoundedEnum, ColumnDescriptor, ColumnDynamicDescriptor, ColumnTypeEnum, DataProvider, DefaultMngErrorMapperService, DynamicTableviewDataProvider, EditorDataProvider, EditorDescriptor, EditorFormlyUtil, EnumName, EnumUtil, FieldGroupDescriptor, FieldGroupTypeEnum, FieldInputDescriptor, FieldInputTypeEnum, FieldLookupDescriptor, FieldLookupEnumDescriptor, FieldLookupTypeEnum, FieldManyEditorActionEnum, FieldManyEditorDescriptor, FieldManyEditorTypeEnum, FieldManyToManyEditorActionEnum, FieldManyToManyEditorDescriptor, FieldManyToManyEditorTypeEnum, FieldSizeEnum, FieldTabGroupDescriptor, FieldValidationDescriptor, FilterDescriptor, FilterLookupDescriptor, FilterLookupEnumDescriptor, FilterLookupTypeEnum, FilterMatchModeEnum, FilterTypeEnum, I18nUtils, JsonPathPipe, LookupDataProvider, MNG_AUTOCOMPLETE_VALUE_ACCESSOR, MNG_BROWSER_STORAGE_IT, MNG_COMMONS_INITIALIZER_IT, MNG_DROPDOWN_VALUE_ACCESSOR, MNG_MODULE_CONFIG_IT, MediusFilterMatchType, MediusFilterParam, MediusQueryMode, MediusQueryParam, MediusQueryParamBuilder, MediusQueryResult, MediusRestUtil, MngActionComponent, MngActionEditorComponent, MngActionExecutorService, MngActionRouteComponent, MngAuthorizationGuard, MngAuthorizationService, MngAutocompleteComponent, MngBooleanPipe, MngBreadcrumbComponent, MngButtonComponent, MngClassMapPipe, MngCommonsModule, MngCommonsService, MngComponentDirective, MngConfigurationService, MngDropdownComponent, MngEnumPipe, MngErrorMapperService, MngFooterComponent, MngFormEditorComponent, MngFormEditorSubmitEvent, MngFormFieldEvent, MngFormFieldEventComponentSubtype, MngFormFieldEventDialogSubtype, MngFormFieldEventTypeEnum, MngFormlyFieldAutocompleteComponent, MngFormlyFieldDropdownComponent, MngFormlyFieldFieldsetComponent, MngFormlyFieldInputComponent, MngFormlyFieldLabelComponent, MngFormlyFieldLookupDialogComponent, MngFormlyFieldTableDialogFormComponent, MngFormlyFieldTableDialogMultiselectComponent, MngFormlyFieldTabsComponent, MngFormlyFieldWrapperComponent, MngFormlyTableWrapperComponent, MngGetterPipe, MngI18nPropertyPipe, MngMainLayoutComponent, MngMainLayoutComponentService, MngMenuComponent, MngMenuItemComponent, MngNavigationService, MngParametrizePipe, MngTableCellClickEvent, MngTableColumnFilterComponent, MngTableColumnValueComponent, MngTableComponent, MngTableLoadEvent, MngTableReloadEvent, MngTableviewComponent, MngTableviewRouteComponent, MngTemplateDirective, MngTemplatePipe, MngTopbarComponent, MngVersionComponent, MngViewContainerComponentService, ModelDescriptor, ModelUtil, NotificationUtil, ObjectSerializer, Permissions, RouteBuilder, RoutesBuilder, StringUtil, StylesUtil, TableDataProvider, TableDescriptor, TableDynamicColumnsModeEnum, TableDynamicDescriptor, TableFilterDisplayEnum, TablePaginationModeEnum, TableSizeEnum, TableviewActionDefaultCategories, TableviewCrudDataProvider, TableviewDataProvider, TableviewDescriptor, TableviewDynamicDescriptor, TableviewRouteBuilder, TableviewTypeEnum, TypeName, TypeUtil, enumNameDecoratorPropertyName, enumsMapBase, formlyTypesConfig, formlyWrappersConfig, getEmailValidationMessage, getFormlyValidationMessages, getMaxLengthValidationMessage, getMinLengthValidationMessage, getRequiredValidationMessage, getTextPatternValidationMessage, mngConfigJsonAppInitializerProvider, mngConfigurationServiceProvider, mngFormlyConfigProvider, primeNgModules, typeMapBase, typeNameDecoratorPropertyName };
+export { ACTION_EDITOR_DIALOG_COMPONENT_SETTING, AFieldDescriptor, AFieldGroupDescriptor, AGenericFieldDescriptor, AMngApiService, AMngBaseApiService, AMngCrudApiService, AMngGetAllApiService, AMngTableviewRouteComponent, APermissions, ActionActivationTriggerEnum, ActionConfirmationDialogDescriptor, ActionContext, ActionContextValidation, ActionDataProviderUtil, ActionDeleteDescriptor, ActionDescriptor, ActionEditorAddDescriptor, ActionEditorDescriptor, ActionEditorDetailsDescriptor, ActionEditorDialogSizeEnum, ActionEditorEditDescriptor, ActionEditorSubmitDescriptor, ActionEditorSubmitTypeEnum, ActionError, ActionInstance, ActionInstanceStateEnum, ActionLevelEnum, ActionLinkDescriptor, ActionParameters, ActionPositionEnum, ActionSimpleDescriptor, ActionSizeEnum, ActionTypeEnum, AuthorizationTypeEnum, AuthorizationUtil, ButtonDescriptor, ButtonStyleBuilder, ButtonStyleRoundedEnum, ColumnDescriptor, ColumnDynamicDescriptor, ColumnTypeEnum, DataProvider, DateUtil, DefaultMngErrorMapperService, DynamicTableviewDataProvider, EditorDataProvider, EditorDescriptor, EditorFormlyUtil, EnumName, EnumUtil, FieldGroupDescriptor, FieldGroupTypeEnum, FieldInputDescriptor, FieldInputTypeEnum, FieldLookupDescriptor, FieldLookupEnumDescriptor, FieldLookupTypeEnum, FieldManyEditorActionEnum, FieldManyEditorDescriptor, FieldManyEditorTypeEnum, FieldManyToManyEditorActionEnum, FieldManyToManyEditorDescriptor, FieldManyToManyEditorTypeEnum, FieldSizeEnum, FieldTabGroupDescriptor, FieldValidationDescriptor, FilterDescriptor, FilterLookupDescriptor, FilterLookupEnumDescriptor, FilterLookupTypeEnum, FilterMatchModeEnum, FilterTypeEnum, I18nUtils, JsonPathPipe, LookupDataProvider, MNG_AUTOCOMPLETE_VALUE_ACCESSOR, MNG_BROWSER_STORAGE_IT, MNG_COMMONS_INITIALIZER_IT, MNG_DATE_RANGE_VALUE_ACCESSOR, MNG_DROPDOWN_VALUE_ACCESSOR, MNG_MODULE_CONFIG_IT, MediusFilterMatchType, MediusFilterParam, MediusQueryMode, MediusQueryParam, MediusQueryParamBuilder, MediusQueryResult, MediusRestUtil, MngActionComponent, MngActionEditorComponent, MngActionExecutorService, MngActionRouteComponent, MngAuthorizationGuard, MngAuthorizationService, MngAutocompleteComponent, MngBooleanPipe, MngBreadcrumbComponent, MngButtonComponent, MngClassMapPipe, MngCommonsModule, MngCommonsService, MngComponentDirective, MngConfigurationService, MngDateRangeComponent, MngDropdownComponent, MngEnumPipe, MngErrorMapperService, MngFooterComponent, MngFormEditorComponent, MngFormEditorSubmitEvent, MngFormFieldEvent, MngFormFieldEventComponentSubtype, MngFormFieldEventDialogSubtype, MngFormFieldEventTypeEnum, MngFormlyFieldAutocompleteComponent, MngFormlyFieldDropdownComponent, MngFormlyFieldFieldsetComponent, MngFormlyFieldInputComponent, MngFormlyFieldLabelComponent, MngFormlyFieldLookupDialogComponent, MngFormlyFieldTableDialogFormComponent, MngFormlyFieldTableDialogMultiselectComponent, MngFormlyFieldTabsComponent, MngFormlyFieldWrapperComponent, MngFormlyTableWrapperComponent, MngGetterPipe, MngI18nPropertyPipe, MngMainLayoutComponent, MngMainLayoutComponentService, MngMenuComponent, MngMenuItemComponent, MngNavigationService, MngParametrizePipe, MngTableCellClickEvent, MngTableColumnFilterComponent, MngTableColumnValueComponent, MngTableComponent, MngTableLoadEvent, MngTableReloadEvent, MngTableviewComponent, MngTableviewRouteComponent, MngTemplateDirective, MngTemplatePipe, MngTopbarComponent, MngVersionComponent, MngViewContainerComponentService, ModelDescriptor, ModelUtil, NotificationUtil, ObjectSerializer, Permissions, RouteBuilder, RoutesBuilder, StringUtil, StylesUtil, TableDataProvider, TableDescriptor, TableDynamicColumnsModeEnum, TableDynamicDescriptor, TableFilterDisplayEnum, TablePaginationModeEnum, TableSizeEnum, TableviewActionDefaultCategories, TableviewCrudDataProvider, TableviewDataProvider, TableviewDescriptor, TableviewDynamicDescriptor, TableviewRouteBuilder, TableviewTypeEnum, TypeName, TypeUtil, enumNameDecoratorPropertyName, enumsMapBase, formlyTypesConfig, formlyWrappersConfig, getEmailValidationMessage, getFormlyValidationMessages, getMaxLengthValidationMessage, getMinLengthValidationMessage, getRequiredValidationMessage, getTextPatternValidationMessage, mngConfigJsonAppInitializerProvider, mngConfigurationServiceProvider, mngFormlyConfigProvider, primeNgModules, typeMapBase, typeNameDecoratorPropertyName };
 //# sourceMappingURL=mediusinc-mng-commons.mjs.map