@recursyve/nice-data-filter-kit 15.1.1 → 15.2.0

package/fesm2015/recursyve-nice-data-filter-kit.mjs

@@ -1,13 +1,13 @@
 import { plainToInstance } from 'class-transformer';
-import { map, takeUntil, debounceTime, switchMap, distinctUntilChanged, withLatestFrom } from 'rxjs/operators';
+import { map, takeUntil, debounceTime, switchMap, distinctUntilChanged, combineLatestWith } from 'rxjs/operators';
 import { HttpParams } from '@angular/common/http';
 import * as i5$1 from '@recursyve/nice-ui-kit.v2';
 import { isNullOrUndefined, ObjectUtils, FileUtils, ArrayUtils, ExportBottomSheetComponent, NiceLoadingSpinnerModule, NiceTypeaheadModule, NiceExportBottomSheetModule, NiceAsyncTypeaheadProvider, NICE_ASYNC_TYPEAHEAD_PROVIDER, NiceAsyncTypeaheadModule } from '@recursyve/nice-ui-kit.v2';
 import * as i0 from '@angular/core';
-import { Directive, Input, NgModule, Injectable, Inject, InjectionToken, Optional, Pipe, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Output, HostListener, forwardRef, TemplateRef, ContentChild, ContentChildren, QueryList, ViewChild } from '@angular/core';
+import { Directive, Input, NgModule, Injectable, Inject, InjectionToken, Optional, Pipe, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Output, HostListener, forwardRef, TemplateRef, ContentChild, ContentChildren, inject, QueryList, ViewChild } from '@angular/core';
 import { Store, StoreConfig, Query, arrayAdd, arrayUpsert, arrayRemove, EntityStore, transaction, QueryEntity, EntityActions } from '@datorama/akita';
 import { combineLatest, Subject, firstValueFrom, of, lastValueFrom, startWith, tap, distinct, take } from 'rxjs';
-import { __decorate, __metadata, __awaiter, __rest } from 'tslib';
+import { __decorate, __metadata, __awaiter } from 'tslib';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i4$1 from '@angular/material/bottom-sheet';
@@ -2852,6 +2852,11 @@ class NiceFilterViewStore extends EntityStore {
     setParameters(filterParameters) {
         this.update({ filterParameters });
     }
+    patchParameters(filterParameters) {
+        this.update(({ filterParameters: currentFilterParameters }) => ({
+            filterParameters: Object.assign(Object.assign({}, currentFilterParameters), filterParameters)
+        }));
+    }
     setResult(filterResult) {
         const { mode, resetResult, initialLoadCompleted } = this.getValue();
         if (mode === "accumulated") {
@@ -3181,6 +3186,9 @@ class NiceFilterViewService {
             this.filter();
         }
     }
+    patchParameters(filterParameters) {
+        this.store.patchParameters(filterParameters);
+    }
     resetPaging() {
         const { filterParameters } = this.store.getValue();
         this.setParameters(Object.assign(Object.assign({}, filterParameters), { start: 0 }));
@@ -3197,6 +3205,30 @@ class NiceFilterViewService {
             this.filter();
         }
     }
+    addBaseRule(rule, reload) {
+        this.store.update(({ baseRules }) => ({
+            baseRules: arrayAdd(baseRules !== null && baseRules !== void 0 ? baseRules : [], rule)
+        }));
+        if (reload) {
+            this.filter();
+        }
+    }
+    upsertBaseRules(rule, reload) {
+        this.store.update(({ baseRules }) => ({
+            baseRules: arrayUpsert(baseRules !== null && baseRules !== void 0 ? baseRules : [], rule.id, rule)
+        }));
+        if (reload) {
+            this.filter();
+        }
+    }
+    removeBaseRules(key, reload) {
+        this.store.update(({ baseRules }) => ({
+            baseRules: arrayRemove(baseRules !== null && baseRules !== void 0 ? baseRules : [], key)
+        }));
+        if (reload) {
+            this.filter();
+        }
+    }
     setRules(rules) {
         if (!Array.isArray(rules)) {
             rules = [rules];
@@ -3453,7 +3485,7 @@ class NiceAdvancedFiltersButtonComponent {
         this.query = query;
         this.service = service;
         this.shouldShowAdvancedFilters$ = this.query.selectSubState("showAdvancedFilters");
-        this.hasParameters$ = this.query.selectFilterParameters().pipe(withLatestFrom(this.query.selectFilterConfig()), map(([parameter, config]) => {
+        this.hasParameters$ = this.query.selectFilterParameters().pipe(combineLatestWith(this.query.selectFilterConfig()), map(([parameter, config]) => {
             var _a, _b;
             return !!((_b = (_a = parameter
                 .rules) === null || _a === void 0 ? void 0 : _a.filter((rule) => config.some((conf) => { var _a; return (conf === null || conf === void 0 ? void 0 : conf.id) === ((_a = rule.rules[0]) === null || _a === void 0 ? void 0 : _a.id); }))) === null || _b === void 0 ? void 0 : _b.length);
@@ -3469,10 +3501,10 @@ class NiceAdvancedFiltersButtonComponent {
     }
 }
 NiceAdvancedFiltersButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceAdvancedFiltersButtonComponent, deps: [{ token: ADVANCED_FILTER_ICONS, optional: true }, { token: NiceFilterViewQuery }, { token: NiceFilterViewService }], target: i0.ɵɵFactoryTarget.Component });
-NiceAdvancedFiltersButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceAdvancedFiltersButtonComponent, selector: "nice-advanced-filters-button", ngImport: i0, template: "<div class=\"relative\">\n    <ng-container *ngIf=\"(hasParameters$ | async) && (shouldShowAdvancedFilters$ | async) !== true\">\n        <div class=\"absolute top-2 right-2 w-1 h-1 rounded bg-accent\"></div>\n\n        <button mat-icon-button (click)=\"clickToggleShowAdvancedFilters()\">\n            <mat-icon [svgIcon]=\"icons.queryBuilder.svgIcon\">{{ icons.queryBuilder.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"shouldShowAdvancedFilters$ | async\">\n        <button mat-icon-button (click)=\"clickToggleShowAdvancedFilters()\">\n            <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"(hasParameters$ | async) !== true && (shouldShowAdvancedFilters$ | async) !== true\">\n        <button mat-icon-button niceAdvancedFiltersTrigger (advancedFilterSelected)=\"onSelectedFilter($event)\">\n            <mat-icon [svgIcon]=\"icons.queryBuilder.svgIcon\">{{ icons.queryBuilder.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n</div>\n", styles: ["nice-advanced-filters-button{width:40px;height:40px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: AdvancedFiltersTriggerDirective, selector: "[niceAdvancedFiltersTrigger]", inputs: ["position"], outputs: ["advancedFilterSelected"], exportAs: ["niceAdvancedFiltersTrigger"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NiceAdvancedFiltersButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceAdvancedFiltersButtonComponent, selector: "nice-advanced-filters-button", ngImport: i0, template: "<div class=\"relative\">\n    <ng-container *ngIf=\"(hasParameters$ | async) && (shouldShowAdvancedFilters$ | async) !== true\">\n        <div class=\"absolute top-1 right-1 w-2 h-2 z-10 rounded bg-accent\"></div>\n\n        <button mat-icon-button (click)=\"clickToggleShowAdvancedFilters()\">\n            <mat-icon [svgIcon]=\"icons.queryBuilder.svgIcon\">{{ icons.queryBuilder.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"shouldShowAdvancedFilters$ | async\">\n        <button mat-icon-button (click)=\"clickToggleShowAdvancedFilters()\">\n            <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"(hasParameters$ | async) !== true && (shouldShowAdvancedFilters$ | async) !== true\">\n        <button mat-icon-button niceAdvancedFiltersTrigger (advancedFilterSelected)=\"onSelectedFilter($event)\">\n            <mat-icon [svgIcon]=\"icons.queryBuilder.svgIcon\">{{ icons.queryBuilder.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n</div>\n", styles: ["nice-advanced-filters-button{width:40px;height:40px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: AdvancedFiltersTriggerDirective, selector: "[niceAdvancedFiltersTrigger]", inputs: ["position"], outputs: ["advancedFilterSelected"], exportAs: ["niceAdvancedFiltersTrigger"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceAdvancedFiltersButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: "nice-advanced-filters-button", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative\">\n    <ng-container *ngIf=\"(hasParameters$ | async) && (shouldShowAdvancedFilters$ | async) !== true\">\n        <div class=\"absolute top-2 right-2 w-1 h-1 rounded bg-accent\"></div>\n\n        <button mat-icon-button (click)=\"clickToggleShowAdvancedFilters()\">\n            <mat-icon [svgIcon]=\"icons.queryBuilder.svgIcon\">{{ icons.queryBuilder.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"shouldShowAdvancedFilters$ | async\">\n        <button mat-icon-button (click)=\"clickToggleShowAdvancedFilters()\">\n            <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"(hasParameters$ | async) !== true && (shouldShowAdvancedFilters$ | async) !== true\">\n        <button mat-icon-button niceAdvancedFiltersTrigger (advancedFilterSelected)=\"onSelectedFilter($event)\">\n            <mat-icon [svgIcon]=\"icons.queryBuilder.svgIcon\">{{ icons.queryBuilder.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n</div>\n", styles: ["nice-advanced-filters-button{width:40px;height:40px}\n"] }]
+            args: [{ selector: "nice-advanced-filters-button", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative\">\n    <ng-container *ngIf=\"(hasParameters$ | async) && (shouldShowAdvancedFilters$ | async) !== true\">\n        <div class=\"absolute top-1 right-1 w-2 h-2 z-10 rounded bg-accent\"></div>\n\n        <button mat-icon-button (click)=\"clickToggleShowAdvancedFilters()\">\n            <mat-icon [svgIcon]=\"icons.queryBuilder.svgIcon\">{{ icons.queryBuilder.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"shouldShowAdvancedFilters$ | async\">\n        <button mat-icon-button (click)=\"clickToggleShowAdvancedFilters()\">\n            <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"(hasParameters$ | async) !== true && (shouldShowAdvancedFilters$ | async) !== true\">\n        <button mat-icon-button niceAdvancedFiltersTrigger (advancedFilterSelected)=\"onSelectedFilter($event)\">\n            <mat-icon [svgIcon]=\"icons.queryBuilder.svgIcon\">{{ icons.queryBuilder.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n</div>\n", styles: ["nice-advanced-filters-button{width:40px;height:40px}\n"] }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Optional
@@ -3885,6 +3917,7 @@ class NiceAdvancedFiltersComponent {
         }
     }
     onClose() {
+        this.removeEmptyRules();
         this.service.updateSubState("showAdvancedFilters", false);
     }
     onRefresh() {
@@ -3892,6 +3925,28 @@ class NiceAdvancedFiltersComponent {
         this.service.resetResult(true);
         this.service.filter();
     }
+    removeEmptyRules() {
+        if (this.rulesFormArray.length !== 1) {
+            return;
+        }
+        const values = this.rulesFormArray.get([0, "values"]).getRawValue();
+        if (values.length !== 1) {
+            return;
+        }
+        const value = values[0];
+        if (value.value || value.value === false || value.secondValue || value.secondValue === true) {
+            return;
+        }
+        this.rulesFormArray.removeAt(0);
+        const { filterParameters } = this.query.getValue();
+        if (!filterParameters.rules.length || !filterParameters.rules[0].rules.length) {
+            return;
+        }
+        this.service.setRules([]);
+        if (filterParameters.rules[0].rules[0].value) {
+            this.service.filter();
+        }
+    }
 }
 NiceAdvancedFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceAdvancedFiltersComponent, deps: [{ token: ADVANCED_FILTER_ICONS, optional: true }, { token: i1$3.GeneratedFormGroup }, { token: NiceFilterViewQuery }, { token: NiceFilterViewService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 NiceAdvancedFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceAdvancedFiltersComponent, selector: "nice-advanced-filters", providers: [
@@ -4406,11 +4461,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
     } });
 
 class NiceFilterExportButtonsComponent {
-    constructor(icons, exportsSettings, niceFilterViewQuery, niceFilterViewService, selectableListService, query, service, bottomSheet) {
+    constructor(icons, exportsSettings, niceFilterViewQuery, selectableListService, query, service, bottomSheet) {
         this.icons = icons;
         this.exportsSettings = exportsSettings;
         this.niceFilterViewQuery = niceFilterViewQuery;
-        this.niceFilterViewService = niceFilterViewService;
         this.selectableListService = selectableListService;
         this.query = query;
         this.service = service;
@@ -4485,7 +4539,7 @@ class NiceFilterExportButtonsComponent {
         this.service.downloadData("pdf", this.downloadFileName, ids);
     }
 }
-NiceFilterExportButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceFilterExportButtonsComponent, deps: [{ token: FILTER_VIEW_ICONS }, { token: EXPORTS_SETTINGS }, { token: NiceFilterViewQuery }, { token: NiceFilterViewService }, { token: NiceSelectableListService }, { token: NiceFilterViewQuery }, { token: NiceFilterViewService }, { token: i4$1.MatBottomSheet }], target: i0.ɵɵFactoryTarget.Component });
+NiceFilterExportButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceFilterExportButtonsComponent, deps: [{ token: FILTER_VIEW_ICONS }, { token: EXPORTS_SETTINGS }, { token: NiceFilterViewQuery }, { token: NiceSelectableListService }, { token: NiceFilterViewQuery }, { token: NiceFilterViewService }, { token: i4$1.MatBottomSheet }], target: i0.ɵɵFactoryTarget.Component });
 NiceFilterExportButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceFilterExportButtonsComponent, selector: "nice-filter-export-buttons, div[nice-filter-export-buttons]", inputs: { customExport: "customExport", downloadFileName: "downloadFileName", canPrint: "canPrint" }, ngImport: i0, template: "<button\n    *ngIf=\"canPrint\"\n    (click)=\"clickPrint()\"\n    [disabled]=\"loading$ | async\"\n    [matTooltip]=\"'general.print' | translate\"\n    class=\"export-button\"\n    mat-mini-fab\n>\n    <mat-icon [svgIcon]=\"icons.print.svgIcon\">{{ icons.print.matIcon }}</mat-icon>\n</button>\n\n<button\n    (click)=\"clickExport()\"\n    [disabled]=\"loading$ | async\"\n    [matTooltip]=\"'general.export' | translate\"\n    class=\"export-button\"\n    mat-mini-fab\n>\n    <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i8.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceFilterExportButtonsComponent, decorators: [{
             type: Component,
@@ -4497,7 +4551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     }] }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [EXPORTS_SETTINGS]
-                    }] }, { type: NiceFilterViewQuery }, { type: NiceFilterViewService }, { type: NiceSelectableListService }, { type: NiceFilterViewQuery }, { type: NiceFilterViewService }, { type: i4$1.MatBottomSheet }];
+                    }] }, { type: NiceFilterViewQuery }, { type: NiceSelectableListService }, { type: NiceFilterViewQuery }, { type: NiceFilterViewService }, { type: i4$1.MatBottomSheet }];
     }, propDecorators: { customExport: [{
                 type: Input
             }], downloadFileName: [{
@@ -4602,103 +4656,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }] } });
 
-class NiceFilterMatPaginatorPaginationDirective {
-    constructor(query, service, paginator) {
-        this.query = query;
-        this.service = service;
-        this.paginator = paginator;
-        this.unsubscribeAll$ = new Subject();
-    }
-    ngOnInit() {
-        this.query.selectFilterResult().pipe(takeUntil(this.unsubscribeAll$)).subscribe((res) => {
-            if (!res) {
-                return;
-            }
-            const { page, total } = res;
-            this.paginator.pageIndex = page.number;
-            this.paginator.pageSize = page.size;
-            this.paginator.length = total;
-        });
-        this.paginator.page.pipe(takeUntil(this.unsubscribeAll$)).subscribe((page) => {
-            const { filterParameters } = this.query.getValue();
-            this.service.setParameters(Object.assign(Object.assign({}, filterParameters), { start: page.pageIndex * page.pageSize, length: page.pageSize }));
-            this.service.filter();
-        });
-    }
-    ngOnDestroy() {
-        this.unsubscribeAll$.next();
-        this.unsubscribeAll$.complete();
-    }
-}
-NiceFilterMatPaginatorPaginationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceFilterMatPaginatorPaginationDirective, deps: [{ token: NiceFilterViewQuery }, { token: NiceFilterViewService }, { token: i12.MatPaginator }], target: i0.ɵɵFactoryTarget.Directive });
-NiceFilterMatPaginatorPaginationDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NiceFilterMatPaginatorPaginationDirective, selector: "mat-paginator[niceFilterPagination]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceFilterMatPaginatorPaginationDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: "mat-paginator[niceFilterPagination]" }]
-        }], ctorParameters: function () { return [{ type: NiceFilterViewQuery }, { type: NiceFilterViewService }, { type: i12.MatPaginator }]; } });
-
-class NiceFilterMatSortSortingDirective {
-    constructor(query, service, sort) {
-        this.query = query;
-        this.service = service;
-        this.sort = sort;
-        this.unsubscribeAll$ = new Subject();
-    }
-    ngOnInit() {
-        this.query.selectFilterParameters().pipe(takeUntil(this.unsubscribeAll$)).subscribe((res) => {
-            if (!res) {
-                return;
-            }
-            const { order } = res;
-            if (!order) {
-                return;
-            }
-            this.sort.direction = order.direction;
-            this.sort.active = order.column;
-        });
-        this.sort.sortChange.pipe(takeUntil(this.unsubscribeAll$)).subscribe((sort) => {
-            const { filterParameters } = this.query.getValue();
-            if (!sort.direction) {
-                const { order } = filterParameters, values = __rest(filterParameters, ["order"]);
-                this.service.setParameters(Object.assign(Object.assign({}, values), { order: {} }));
-            }
-            else {
-                this.service.setParameters(Object.assign(Object.assign({}, filterParameters), { order: {
-                        column: sort.active,
-                        direction: sort.direction
-                    } }));
-            }
-            this.service.filter();
-        });
-    }
-    ngOnDestroy() {
-        this.unsubscribeAll$.next();
-        this.unsubscribeAll$.complete();
-    }
-}
-NiceFilterMatSortSortingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceFilterMatSortSortingDirective, deps: [{ token: NiceFilterViewQuery }, { token: NiceFilterViewService }, { token: i14.MatSort }], target: i0.ɵɵFactoryTarget.Directive });
-NiceFilterMatSortSortingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NiceFilterMatSortSortingDirective, selector: "mat-table[matSort][niceFilterSorting]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceFilterMatSortSortingDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: "mat-table[matSort][niceFilterSorting]" }]
-        }], ctorParameters: function () { return [{ type: NiceFilterViewQuery }, { type: NiceFilterViewService }, { type: i14.MatSort }]; } });
-
-class NiceFilterMatTableViewDirective {
-    constructor(query, table) {
-        this.query = query;
-        this.table = table;
-    }
-    ngOnInit() {
-        this.table.dataSource = this.query.selectAll();
-    }
-}
-NiceFilterMatTableViewDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceFilterMatTableViewDirective, deps: [{ token: NiceFilterViewQuery }, { token: i13.MatTable }], target: i0.ɵɵFactoryTarget.Directive });
-NiceFilterMatTableViewDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NiceFilterMatTableViewDirective, selector: "mat-table[niceFilterDataView]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceFilterMatTableViewDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: "mat-table[niceFilterDataView]" }]
-        }], ctorParameters: function () { return [{ type: NiceFilterViewQuery }, { type: i13.MatTable }]; } });
-
 class NiceFilterQueryParamsDirective {
     get initialized() {
         return this._initialized;
@@ -4775,33 +4732,138 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Output
             }] } });
 
-class NiceFilterViewComponent {
-    constructor(service) {
-        this.service = service;
-        this.queryParams = {};
+class NiceNestedFilterView {
+    constructor() {
+        this._afterQueryParamHooks = new Set();
+        this.unsubscribeAll$ = new Subject();
+        this.filterViewService = inject(NiceFilterViewService);
+        this.filterViewQuery = inject(NiceFilterViewQuery);
+        this.queryParams = inject(NiceFilterQueryParamsDirective, { optional: true });
     }
-    ngOnChanges(changes) {
-        if ("queryParams" in changes) {
-            this.service.setQueryParams(this.queryParams);
+    ngOnInit() {
+        var _a;
+        this.filterViewLoading$ = this.filterViewQuery.selectLoading();
+        this.filterViewCount$ = this.filterViewQuery.selectCount();
+        if (!this.queryParams || ((_a = this.queryParams) === null || _a === void 0 ? void 0 : _a.initialized)) {
+            this.onInit();
+            return;
+        }
+        this.queryParams.init.pipe(take(1)).subscribe(() => this.onInit());
+    }
+    ngOnDestroy() {
+        this.unsubscribeAll$.next();
+        this.unsubscribeAll$.complete();
+    }
+    afterInit(fn) {
+        var _a;
+        if (!this.queryParams || ((_a = this.queryParams) === null || _a === void 0 ? void 0 : _a.initialized)) {
+            fn.bind(this)();
+            return;
+        }
+        this._afterQueryParamHooks.add(fn);
+    }
+    onInit() {
+        for (const hook of this._afterQueryParamHooks) {
+            hook.bind(this)();
         }
     }
 }
-NiceFilterViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceFilterViewComponent, deps: [{ token: NiceFilterViewService }], target: i0.ɵɵFactoryTarget.Component });
-NiceFilterViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceFilterViewComponent, selector: "nice-filter-view", inputs: { queryParams: "queryParams" }, providers: [
-        NiceFilterViewQuery,
-        NiceFilterViewService,
-        NiceFilterViewStore
-    ], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceFilterViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "nice-filter-view", encapsulation: ViewEncapsulation.None, providers: [
-                        NiceFilterViewQuery,
-                        NiceFilterViewService,
-                        NiceFilterViewStore
-                    ], template: "<ng-content></ng-content>\n" }]
-        }], ctorParameters: function () { return [{ type: NiceFilterViewService }]; }, propDecorators: { queryParams: [{
-                type: Input
-            }] } });
+NiceNestedFilterView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceNestedFilterView, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+NiceNestedFilterView.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NiceNestedFilterView, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceNestedFilterView, decorators: [{
+            type: Directive
+        }] });
+
+class NiceFilterMatPaginatorPaginationDirective extends NiceNestedFilterView {
+    constructor(paginator) {
+        super();
+        this.paginator = paginator;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.filterViewQuery.selectFilterResult().pipe(takeUntil(this.unsubscribeAll$)).subscribe((res) => {
+            if (!res) {
+                return;
+            }
+            const { page, total } = res;
+            this.paginator.pageIndex = page.number;
+            this.paginator.pageSize = page.size;
+            this.paginator.length = total;
+        });
+        this.paginator.page.pipe(takeUntil(this.unsubscribeAll$)).subscribe((page) => {
+            this.filterViewService.patchParameters({
+                start: page.pageIndex * page.pageSize,
+                length: page.pageSize
+            });
+            this.filterViewService.filter();
+        });
+    }
+}
+NiceFilterMatPaginatorPaginationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceFilterMatPaginatorPaginationDirective, deps: [{ token: i12.MatPaginator }], target: i0.ɵɵFactoryTarget.Directive });
+NiceFilterMatPaginatorPaginationDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NiceFilterMatPaginatorPaginationDirective, selector: "mat-paginator[niceFilterPagination]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceFilterMatPaginatorPaginationDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "mat-paginator[niceFilterPagination]" }]
+        }], ctorParameters: function () { return [{ type: i12.MatPaginator }]; } });
+
+class NiceFilterMatSortSortingDirective extends NiceNestedFilterView {
+    constructor(sort) {
+        super();
+        this.sort = sort;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.filterViewQuery.selectFilterParameters().pipe(takeUntil(this.unsubscribeAll$)).subscribe((res) => {
+            if (!res) {
+                return;
+            }
+            const { order } = res;
+            if (!order) {
+                return;
+            }
+            this.sort.direction = order.direction;
+            this.sort.active = order.column;
+        });
+        this.sort.sortChange.pipe(takeUntil(this.unsubscribeAll$)).subscribe((sort) => {
+            if (!sort.direction) {
+                this.filterViewService.patchParameters({
+                    order: null
+                });
+            }
+            else {
+                this.filterViewService.patchParameters({
+                    order: {
+                        column: sort.active,
+                        direction: sort.direction
+                    }
+                });
+            }
+            this.filterViewService.filter();
+        });
+    }
+}
+NiceFilterMatSortSortingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceFilterMatSortSortingDirective, deps: [{ token: i14.MatSort }], target: i0.ɵɵFactoryTarget.Directive });
+NiceFilterMatSortSortingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NiceFilterMatSortSortingDirective, selector: "mat-table[matSort][niceFilterSorting]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceFilterMatSortSortingDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "mat-table[matSort][niceFilterSorting]" }]
+        }], ctorParameters: function () { return [{ type: i14.MatSort }]; } });
+
+class NiceFilterMatTableViewDirective {
+    constructor(query, table) {
+        this.query = query;
+        this.table = table;
+    }
+    ngOnInit() {
+        this.table.dataSource = this.query.selectAll();
+    }
+}
+NiceFilterMatTableViewDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceFilterMatTableViewDirective, deps: [{ token: NiceFilterViewQuery }, { token: i13.MatTable }], target: i0.ɵɵFactoryTarget.Directive });
+NiceFilterMatTableViewDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NiceFilterMatTableViewDirective, selector: "mat-table[niceFilterDataView]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceFilterMatTableViewDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "mat-table[niceFilterDataView]" }]
+        }], ctorParameters: function () { return [{ type: NiceFilterViewQuery }, { type: i13.MatTable }]; } });
 
 class NiceSelectableListContentService {
     constructor() {
@@ -5044,8 +5106,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: [NiceSelectableListCheckboxDirective, { descendants: true }]
             }] } });
 
+class NiceFilterViewComponent {
+    constructor(service) {
+        this.service = service;
+        this.queryParams = {};
+    }
+    ngOnChanges(changes) {
+        if ("queryParams" in changes) {
+            this.service.setQueryParams(this.queryParams);
+        }
+    }
+}
+NiceFilterViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceFilterViewComponent, deps: [{ token: NiceFilterViewService }], target: i0.ɵɵFactoryTarget.Component });
+NiceFilterViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceFilterViewComponent, selector: "nice-filter-view", inputs: { queryParams: "queryParams" }, providers: [
+        NiceFilterViewQuery,
+        NiceFilterViewService,
+        NiceFilterViewStore
+    ], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceFilterViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-filter-view", encapsulation: ViewEncapsulation.None, providers: [
+                        NiceFilterViewQuery,
+                        NiceFilterViewService,
+                        NiceFilterViewStore
+                    ], template: "<ng-content></ng-content>\n" }]
+        }], ctorParameters: function () { return [{ type: NiceFilterViewService }]; }, propDecorators: { queryParams: [{
+                type: Input
+            }] } });
+
 class NiceBaseFilterViewComponent {
+    constructor() {
+        this._afterQueryParamHooks = new Set();
+    }
     ngOnInit(autoLoad = true, { mode, loadConfig, configQueryParams } = {}) {
+        var _a;
         if (mode) {
             this.filterViewService.setMode(mode);
         }
@@ -5056,6 +5150,11 @@ class NiceBaseFilterViewComponent {
         if (this.selectableListDirective) {
             this.filterViewService.updateSubState("selectable", { stateName: this.selectableListDirective.state });
         }
+        if (!this.queryParams || ((_a = this.queryParams) === null || _a === void 0 ? void 0 : _a.initialized)) {
+            this.onInit();
+            return;
+        }
+        this.queryParams.init.pipe(take(1)).subscribe(() => this.onInit());
     }
     /**
      * Call the filter endpoint with the current filter parameters.
@@ -5088,6 +5187,27 @@ class NiceBaseFilterViewComponent {
     setBaseRules(rule, reload = true) {
         this.filterViewService.setBaseRules(rule, reload);
     }
+    /**
+     * Add a rule to the set of rules that won't be saved in the current filterParameters config.
+     * NOTE: These rules will be injected in each filter request.
+     */
+    addBaseRule(rule, reload = true) {
+        this.filterViewService.addBaseRule(rule, reload);
+    }
+    /**
+     * Add a rule to the set of rules that won't be saved in the current filterParameters config.
+     * NOTE: These rules will be injected in each filter request.
+     */
+    upsertBaseRule(rule, reload = true) {
+        this.filterViewService.upsertBaseRules(rule, reload);
+    }
+    /**
+     * Remove a rule to the set of rules that won't be saved in the current filterParameters config.
+     * NOTE: These rules will be injected in each filter request.
+     */
+    removeBaseRule(id, reload = true) {
+        this.filterViewService.removeBaseRules(id, reload);
+    }
     /**
      * Reset all rules with a new set of rules.
      */
@@ -5117,6 +5237,14 @@ class NiceBaseFilterViewComponent {
             this.filterViewService.filter();
         }
     }
+    afterInit(fn) {
+        var _a;
+        if (!this.queryParams || ((_a = this.queryParams) === null || _a === void 0 ? void 0 : _a.initialized)) {
+            fn.bind(this)();
+            return;
+        }
+        this._afterQueryParamHooks.add(fn);
+    }
     autoLoad(autoLoad) {
         const { autoLoad: defaultAutoLoad } = this.filterViewQuery.getValue();
         if (!this.queryParams) {
@@ -5146,6 +5274,11 @@ class NiceBaseFilterViewComponent {
             this.filterViewService.loadConfig(configQueryParams);
         }
     }
+    onInit() {
+        for (const hook of this._afterQueryParamHooks) {
+            hook.bind(this)();
+        }
+    }
 }
 NiceBaseFilterViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceBaseFilterViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 NiceBaseFilterViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceBaseFilterViewComponent, selector: "ng-component", viewQueries: [{ propertyName: "filterViewService", first: true, predicate: NiceFilterViewComponent, descendants: true, read: NiceFilterViewService, static: true }, { propertyName: "filterViewQuery", first: true, predicate: NiceFilterViewComponent, descendants: true, read: NiceFilterViewQuery, static: true }, { propertyName: "queryParams", first: true, predicate: NiceFilterQueryParamsDirective, descendants: true, static: true }, { propertyName: "advancedFiltersButton", first: true, predicate: NiceAdvancedFiltersButtonComponent, descendants: true, static: true }, { propertyName: "advancedFilters", first: true, predicate: NiceAdvancedFiltersComponent, descendants: true, static: true }, { propertyName: "selectableListDirective", first: true, predicate: NiceSelectableListDirective, descendants: true, static: true }], ngImport: i0, template: ``, isInline: true });
@@ -5428,5 +5561,5 @@ String.prototype.toTableColumn = function (sortableOrOptions, nullLast) {
  * Generated bundle index. Do not edit.
  */
 
-export { AdvancedFiltersForm, AdvancedFiltersTriggerDirective, DateFilterComponent, FilterComponent$1 as FilterComponent, FilterForm, FilterFormValues, FilterGroupIconPipe, FilterOperatorTypes, FilterSelectionComponent, FilterType, FilterUtils, LayoutContent, NiceAdvancedFiltersButtonComponent, NiceAdvancedFiltersComponent, NiceAdvancedFiltersModule, NiceBaseFilterViewComponent, NiceBaseListButtonsDirective, NiceBaseListCardsDirective, NiceBaseListComponent, NiceBaseListCustomContentDirective, NiceBaseListDirectiveModule, NiceBaseListEmptySearchResultStateDirective, NiceBaseListEmptyStateDirective, NiceBaseListFiltersDirective, NiceBaseListModule, NiceBaseListQuery, NiceBaseListService, NiceBaseListStore, NiceBaseListTableDirective, NiceBaseListTitleDirective, NiceCustomDateAdapter, NiceFilterApi, NiceFilterCustomDataViewComponent, NiceFilterDataDirective, NiceFilterExportButtonsComponent, NiceFilterExportDirective, NiceFilterGroupService, NiceFilterInfiniteScrollDataViewComponent, NiceFilterMatPaginatorPaginationDirective, NiceFilterMatSortSortingDirective, NiceFilterMatTableViewDirective, NiceFilterQueryParamsDirective, NiceFilterSearchComponent, NiceFilterService, NiceFilterViewComponent, NiceFilterViewModule, NiceFilterViewQuery, NiceFilterViewService, NiceListState, NiceMultiStateFilterService, NiceMultiStateListComponent, NiceMultiStateListModule, NiceMultiStateListQuery, NiceMultiStateListService, NiceMultiStateListStore, NicePreloadSelectedEntitiesProvider, NiceQueryBuilderComponent, NiceQueryBuilderModule, NiceSavedReportService, NiceSelectableListCheckboxDirective, NiceSelectableListDirective, NiceSelectableListIsEmptyDirective, NiceSelectableListModule, NiceSelectableListSelectAllDirective, NiceSelectableListService, NiceSelectableListStateQuery, NiceSelectableListStateService, NumberFilterComponent, OrderUtils, QBFilterUtils, QueryBuilderTriggerDirective, RadioFilterComponent, RuleComponent, SelectFilterComponent, StringUtils, TableColumns, TextFilterComponent, defaultLayout, initialBaseListState, initialValue$1 as initialValue, mixinNiceFilterApi };
+export { AdvancedFiltersForm, AdvancedFiltersTriggerDirective, DateFilterComponent, FilterComponent$1 as FilterComponent, FilterForm, FilterFormValues, FilterGroupIconPipe, FilterOperatorTypes, FilterSelectionComponent, FilterType, FilterUtils, LayoutContent, NiceAdvancedFiltersButtonComponent, NiceAdvancedFiltersComponent, NiceAdvancedFiltersModule, NiceBaseFilterViewComponent, NiceBaseListButtonsDirective, NiceBaseListCardsDirective, NiceBaseListComponent, NiceBaseListCustomContentDirective, NiceBaseListDirectiveModule, NiceBaseListEmptySearchResultStateDirective, NiceBaseListEmptyStateDirective, NiceBaseListFiltersDirective, NiceBaseListModule, NiceBaseListQuery, NiceBaseListService, NiceBaseListStore, NiceBaseListTableDirective, NiceBaseListTitleDirective, NiceCustomDateAdapter, NiceFilterApi, NiceFilterCustomDataViewComponent, NiceFilterDataDirective, NiceFilterExportButtonsComponent, NiceFilterExportDirective, NiceFilterGroupService, NiceFilterInfiniteScrollDataViewComponent, NiceFilterMatPaginatorPaginationDirective, NiceFilterMatSortSortingDirective, NiceFilterMatTableViewDirective, NiceFilterQueryParamsDirective, NiceFilterSearchComponent, NiceFilterService, NiceFilterViewComponent, NiceFilterViewModule, NiceFilterViewQuery, NiceFilterViewService, NiceListState, NiceMultiStateFilterService, NiceMultiStateListComponent, NiceMultiStateListModule, NiceMultiStateListQuery, NiceMultiStateListService, NiceMultiStateListStore, NiceNestedFilterView, NicePreloadSelectedEntitiesProvider, NiceQueryBuilderComponent, NiceQueryBuilderModule, NiceSavedReportService, NiceSelectableListCheckboxDirective, NiceSelectableListDirective, NiceSelectableListIsEmptyDirective, NiceSelectableListModule, NiceSelectableListSelectAllDirective, NiceSelectableListService, NiceSelectableListStateQuery, NiceSelectableListStateService, NumberFilterComponent, OrderUtils, QBFilterUtils, QueryBuilderTriggerDirective, RadioFilterComponent, RuleComponent, SelectFilterComponent, StringUtils, TableColumns, TextFilterComponent, defaultLayout, initialBaseListState, initialValue$1 as initialValue, mixinNiceFilterApi };
 //# sourceMappingURL=recursyve-nice-data-filter-kit.mjs.map