@mediusinc/mng-commons 0.14.0 → 0.14.1

package/fesm2020/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';
@@ -453,6 +453,124 @@ 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) {
+        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 = DateUtil.NG_PRIME_FORMAT_MAP[matchStr] ?? 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;
@@ -1858,6 +1976,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;
@@ -1900,6 +2020,12 @@ class FilterDescriptor {
     get datePickerShowTime() {
         return this._datePickerShowTime;
     }
+    get datePickerValueInUtc() {
+        return this._datePickerValueInUtc;
+    }
+    get datePickerValueWithTimezone() {
+        return this._datePickerValueWithTimezone;
+    }
     get placeholder() {
         return this._placeholder;
     }
@@ -1951,6 +2077,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;
@@ -1989,6 +2124,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;
@@ -2353,6 +2490,7 @@ class ColumnDescriptor {
         }
         switch (this._columnType) {
             case ColumnTypeEnum.Number:
+            case ColumnTypeEnum.Currency:
                 filterType = FilterTypeEnum.Number;
                 break;
             case ColumnTypeEnum.Boolean:
@@ -2376,6 +2514,19 @@ class ColumnDescriptor {
                 break;
         }
         this._filterDescriptor.asFilterType(filterType);
+        if (filterType === FilterTypeEnum.Number) {
+            const displayFormatFractions = this._displayFormat?.split('.')?.[1]?.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() {
@@ -5589,7 +5740,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);
                 }
@@ -5599,6 +5750,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?.filterType, 1);
                 if (matchMode && filterDescriptor) {
@@ -5621,7 +5776,7 @@ class MediusRestUtil {
         if (event.rows && event.rows !== defaultItemsPerPage && event.rows > 0) {
             params['rows'] = event.rows;
         }
-        if (event.multiSortMeta?.length ?? 0 > 0) {
+        if (event.multiSortMeta?.length) {
             params['sort'] = event.multiSortMeta?.map(s => `${s.field}${s.order === 1 ? '' : ':desc'}`).join(',');
         }
         if (event.filters) {
@@ -5640,11 +5795,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) {
@@ -5662,6 +5827,43 @@ class MediusRestUtil {
         for (const filterParam of mediusQueryParams.filterParams ?? []) {
             const filterDescriptor = filterDescriptors.find(f => f.property === filterParam.property);
             filterParam.property = filterDescriptor?.filterProperty ?? filterParam.property;
+            if (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) {
@@ -5716,7 +5918,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]
@@ -6985,11 +7188,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
@@ -7145,7 +7349,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;
@@ -7304,11 +7508,11 @@ 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: [{
+        }], ctorParameters: function () { 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: [{
@@ -8455,6 +8659,105 @@ 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 {
+            this.dateRangeCtrl.setValue([startDate, endDate]);
+        }
+    }
+    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;
@@ -8991,6 +9294,14 @@ 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 => {
+            this.dateFilterCallback?.(v);
+        });
+    }
+    get activeMatchMode() {
+        const filter = this.primeColumnFilter?.dt.filters[this.descriptor.property];
+        return filter?.matchMode;
     }
     ngOnInit() {
         this.primeDefaultMatchMode = this.descriptor.defaultFilterMatchMode ?? FilterMatchModeEnum.Equals;
@@ -9004,7 +9315,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';
@@ -9018,7 +9329,7 @@ class MngTableColumnFilterComponent {
                 break;
             case FilterTypeEnum.String:
                 this.primeType = 'text';
-                this.primeDefaultMatchMode = FilterMatchMode.CONTAINS;
+                this.primeDefaultMatchMode = FilterMatchModeEnum.Contains;
                 break;
         }
         if (this.descriptor.matchModes) {
@@ -9032,20 +9343,22 @@ 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() {
+        this.dateDebounceSubscription?.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
@@ -9059,19 +9372,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 {
@@ -9426,7 +9739,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: {
@@ -9458,6 +9771,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,
@@ -11218,6 +11536,7 @@ const declarations = [
     // mng fields
     MngAutocompleteComponent,
     MngDropdownComponent,
+    MngDateRangeComponent,
     // formly wrappers
     MngFormlyFieldWrapperComponent,
     MngFormlyTableWrapperComponent,
@@ -11342,6 +11661,7 @@ MngCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         // mng fields
         MngAutocompleteComponent,
         MngDropdownComponent,
+        MngDateRangeComponent,
         // formly wrappers
         MngFormlyFieldWrapperComponent,
         MngFormlyTableWrapperComponent,
@@ -11462,6 +11782,7 @@ MngCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         // mng fields
         MngAutocompleteComponent,
         MngDropdownComponent,
+        MngDateRangeComponent,
         // formly wrappers
         MngFormlyFieldWrapperComponent,
         MngFormlyTableWrapperComponent,
@@ -12327,5 +12648,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