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

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

@@ -1,10 +1,10 @@
 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 } from 'tslib';
@@ -2789,6 +2789,14 @@ class NiceFilterViewStore extends EntityStore {
     setParameters(filterParameters) {
         this.update({ filterParameters });
     }
+    patchParameters(filterParameters) {
+        this.update(({ filterParameters: currentFilterParameters }) => ({
+            filterParameters: {
+                ...currentFilterParameters,
+                ...filterParameters
+            }
+        }));
+    }
     setResult(filterResult) {
         const { mode, resetResult, initialLoadCompleted } = this.getValue();
         if (mode === "accumulated") {
@@ -2854,24 +2862,20 @@ class NiceFilterViewStore extends EntityStore {
         this.update({
             filterResult: {
                 ...filterResult,
-                values: arrayUpsert(filterResult.values, value[idKey], value, key)
+                values: arrayUpsert(filterResult.values, value[idKey], value, idKey)
             }
         });
         this.upsert(value[idKey], value);
     }
     upsertValues(values, key) {
-        const { filterResult } = this.getValue();
-        if (!filterResult) {
-            return;
-        }
         const idKey = key ?? this.idKey;
         for (const value of values) {
-            this.update({
+            this.update(({ filterResult }) => ({
                 filterResult: {
-                    ...filterResult,
-                    values: arrayUpsert(filterResult.values, value[idKey], value, key)
+                    ...(filterResult ?? { values: [] }),
+                    values: arrayUpsert(filterResult?.values ?? [], value[idKey], value, idKey)
                 }
-            });
+            }));
             this.upsert(value[idKey], value);
         }
     }
@@ -2884,7 +2888,7 @@ class NiceFilterViewStore extends EntityStore {
         this.update({
             filterResult: {
                 ...filterResult,
-                values: arrayRemove(filterResult.values, value[idKey], key)
+                values: arrayRemove(filterResult.values, value[idKey], idKey)
             }
         });
         this.remove(value[idKey]);
@@ -3133,6 +3137,9 @@ class NiceFilterViewService {
             this.filter();
         }
     }
+    patchParameters(filterParameters) {
+        this.store.patchParameters(filterParameters);
+    }
     resetPaging() {
         const { filterParameters } = this.store.getValue();
         this.setParameters({
@@ -3152,6 +3159,30 @@ class NiceFilterViewService {
             this.filter();
         }
     }
+    addBaseRule(rule, reload) {
+        this.store.update(({ baseRules }) => ({
+            baseRules: arrayAdd(baseRules ?? [], rule)
+        }));
+        if (reload) {
+            this.filter();
+        }
+    }
+    upsertBaseRules(rule, reload) {
+        this.store.update(({ baseRules }) => ({
+            baseRules: arrayUpsert(baseRules ?? [], rule.id, rule)
+        }));
+        if (reload) {
+            this.filter();
+        }
+    }
+    removeBaseRules(key, reload) {
+        this.store.update(({ baseRules }) => ({
+            baseRules: arrayRemove(baseRules ?? [], key)
+        }));
+        if (reload) {
+            this.filter();
+        }
+    }
     setRules(rules) {
         if (!Array.isArray(rules)) {
             rules = [rules];
@@ -3482,7 +3513,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]) => !!parameter
+        this.hasParameters$ = this.query.selectFilterParameters().pipe(combineLatestWith(this.query.selectFilterConfig()), map(([parameter, config]) => !!parameter
             .rules
             ?.filter((rule) => config.some((conf) => conf?.id === rule.rules[0]?.id))
             ?.length));
@@ -3497,10 +3528,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
                 }, {
@@ -3901,6 +3932,7 @@ class NiceAdvancedFiltersComponent {
         }
     }
     onClose() {
+        this.removeEmptyRules();
         this.service.updateSubState("showAdvancedFilters", false);
     }
     onRefresh() {
@@ -3908,6 +3940,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: [
@@ -4391,11 +4445,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }] }, { type: i2.ActivatedRoute }, { type: i2.Router }]; } });
 
 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;
@@ -4470,7 +4523,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,
@@ -4481,7 +4534,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 }]; }, propDecorators: { customExport: [{
+                }] }, { type: NiceFilterViewQuery }, { type: NiceSelectableListService }, { type: NiceFilterViewQuery }, { type: NiceFilterViewService }, { type: i4$1.MatBottomSheet }]; }, propDecorators: { customExport: [{
                 type: Input
             }], downloadFileName: [{
                 type: Input
@@ -4587,113 +4640,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({
-                ...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, ...values } = filterParameters;
-                this.service.setParameters({
-                    ...values,
-                    order: {}
-                });
-            }
-            else {
-                this.service.setParameters({
-                    ...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;
@@ -4773,35 +4719,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() {
+        this.filterViewLoading$ = this.filterViewQuery.selectLoading();
+        this.filterViewCount$ = this.filterViewQuery.selectCount();
+        if (!this.queryParams || this.queryParams?.initialized) {
+            this.onInit();
+            return;
+        }
+        this.queryParams.init.pipe(take(1)).subscribe(() => this.onInit());
+    }
+    ngOnDestroy() {
+        this.unsubscribeAll$.next();
+        this.unsubscribeAll$.complete();
+    }
+    afterInit(fn) {
+        if (!this.queryParams || this.queryParams?.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 SelectableListContentService {
+class NiceSelectableListContentService {
     constructor() {
         this._state = null;
         this._checkboxes = new QueryList();
@@ -4829,10 +4878,11 @@ class SelectableListContentService {
         this._checkboxes = checkboxes;
     }
 }
-SelectableListContentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectableListContentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SelectableListContentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectableListContentService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectableListContentService, decorators: [{
-            type: Injectable
+NiceSelectableListContentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSelectableListContentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NiceSelectableListContentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSelectableListContentService, providedIn: "any" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSelectableListContentService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "any" }]
         }] });
 
 // tslint:disable-next-line:directive-class-suffix
@@ -4947,14 +4997,14 @@ class NiceSelectableListCheckboxDirective {
         }
     }
 }
-NiceSelectableListCheckboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSelectableListCheckboxDirective, deps: [{ token: i1$4.MatCheckbox }, { token: SelectableListContentService }, { token: NiceSelectableListService }], target: i0.ɵɵFactoryTarget.Directive });
+NiceSelectableListCheckboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSelectableListCheckboxDirective, deps: [{ token: i1$4.MatCheckbox }, { token: NiceSelectableListContentService }, { token: NiceSelectableListService }], target: i0.ɵɵFactoryTarget.Directive });
 NiceSelectableListCheckboxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NiceSelectableListCheckboxDirective, selector: "mat-checkbox[niceSelectableListCheckbox]", inputs: { selectableEntity: "selectableEntity", selectPage: "selectPage" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSelectableListCheckboxDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "mat-checkbox[niceSelectableListCheckbox]"
                 }]
-        }], ctorParameters: function () { return [{ type: i1$4.MatCheckbox }, { type: SelectableListContentService }, { type: NiceSelectableListService }]; }, propDecorators: { selectableEntity: [{
+        }], ctorParameters: function () { return [{ type: i1$4.MatCheckbox }, { type: NiceSelectableListContentService }, { type: NiceSelectableListService }]; }, propDecorators: { selectableEntity: [{
                 type: Input
             }], selectPage: [{
                 type: Input
@@ -5025,15 +5075,15 @@ class NiceSelectableListDirective {
         this.stateQuery.selectActiveId().pipe(takeUntil(this.unsubscribeQuerySub$)).subscribe(() => this.stateService.setQueryParams());
     }
 }
-NiceSelectableListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSelectableListDirective, deps: [{ token: SelectableListContentService }, { token: NiceSelectableListService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Directive });
-NiceSelectableListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NiceSelectableListDirective, selector: "[niceSelectableList]", inputs: { state: "state", options: "options" }, providers: [SelectableListContentService], queries: [{ propertyName: "checkboxes", predicate: NiceSelectableListCheckboxDirective, descendants: true }], usesOnChanges: true, ngImport: i0 });
+NiceSelectableListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSelectableListDirective, deps: [{ token: NiceSelectableListContentService }, { token: NiceSelectableListService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Directive });
+NiceSelectableListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NiceSelectableListDirective, selector: "[niceSelectableList]", inputs: { state: "state", options: "options" }, providers: [NiceSelectableListContentService], queries: [{ propertyName: "checkboxes", predicate: NiceSelectableListCheckboxDirective, descendants: true }], usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSelectableListDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[niceSelectableList]",
-                    providers: [SelectableListContentService]
+                    providers: [NiceSelectableListContentService]
                 }]
-        }], ctorParameters: function () { return [{ type: SelectableListContentService }, { type: NiceSelectableListService }, { type: i2.ActivatedRoute }]; }, propDecorators: { state: [{
+        }], ctorParameters: function () { return [{ type: NiceSelectableListContentService }, { type: NiceSelectableListService }, { type: i2.ActivatedRoute }]; }, propDecorators: { state: [{
                 type: Input
             }], options: [{
                 type: Input
@@ -5042,7 +5092,38 @@ 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 } = {}) {
         if (mode) {
             this.filterViewService.setMode(mode);
@@ -5054,6 +5135,11 @@ class NiceBaseFilterViewComponent {
         if (this.selectableListDirective) {
             this.filterViewService.updateSubState("selectable", { stateName: this.selectableListDirective.state });
         }
+        if (!this.queryParams || this.queryParams?.initialized) {
+            this.onInit();
+            return;
+        }
+        this.queryParams.init.pipe(take(1)).subscribe(() => this.onInit());
     }
     /**
      * Call the filter endpoint with the current filter parameters.
@@ -5086,6 +5172,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.
      */
@@ -5115,6 +5222,13 @@ class NiceBaseFilterViewComponent {
             this.filterViewService.filter();
         }
     }
+    afterInit(fn) {
+        if (!this.queryParams || this.queryParams?.initialized) {
+            fn.bind(this)();
+            return;
+        }
+        this._afterQueryParamHooks.add(fn);
+    }
     autoLoad(autoLoad) {
         const { autoLoad: defaultAutoLoad } = this.filterViewQuery.getValue();
         if (!this.queryParams) {
@@ -5144,6 +5258,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 });
@@ -5326,7 +5445,7 @@ class NiceSelectableListSelectAllDirective {
         }
     }
 }
-NiceSelectableListSelectAllDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSelectableListSelectAllDirective, deps: [{ token: NiceFilterViewQuery, optional: true }, { token: SelectableListContentService }, { token: NiceSelectableListService }], target: i0.ɵɵFactoryTarget.Directive });
+NiceSelectableListSelectAllDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSelectableListSelectAllDirective, deps: [{ token: NiceFilterViewQuery, optional: true }, { token: NiceSelectableListContentService }, { token: NiceSelectableListService }], target: i0.ɵɵFactoryTarget.Directive });
 NiceSelectableListSelectAllDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NiceSelectableListSelectAllDirective, selector: "button[niceSelectableListSelectAll]", inputs: { action: "action" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSelectableListSelectAllDirective, decorators: [{
             type: Directive,
@@ -5335,13 +5454,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: NiceFilterViewQuery, decorators: [{
                     type: Optional
-                }] }, { type: SelectableListContentService }, { type: NiceSelectableListService }]; }, propDecorators: { action: [{
+                }] }, { type: NiceSelectableListContentService }, { type: NiceSelectableListService }]; }, propDecorators: { action: [{
                 type: Input
             }], onClick: [{
                 type: HostListener,
                 args: ["click"]
             }] } });
 
+class NiceSelectableListIsEmptyDirectiveContext {
+}
+// tslint:disable-next-line:directive-selector
+class NiceSelectableListIsEmptyDirective {
+    constructor(templateRef, viewContainerRef, contentService, selectableListService) {
+        this.templateRef = templateRef;
+        this.viewContainerRef = viewContainerRef;
+        this.contentService = contentService;
+        this.selectableListService = selectableListService;
+        this.context = new NiceSelectableListIsEmptyDirectiveContext();
+        this.embeddedViewRef = null;
+        this.unsubscribeAll$ = new Subject();
+    }
+    static ngTemplateContextGuard(directive, ctx) {
+        return true;
+    }
+    ngOnInit() {
+        const state = this.contentService.state;
+        const query = this.selectableListService.query(state);
+        this.context.$implicit = this.context.isEmpty = (query.getCount() === 0);
+        if (!this.embeddedViewRef) {
+            this.viewContainerRef.clear();
+            this.embeddedViewRef = this.viewContainerRef.createEmbeddedView(this.templateRef, this.context);
+        }
+        query.selectCount().pipe(takeUntil(this.unsubscribeAll$), map((count) => count === 0), distinctUntilChanged()).subscribe((isEmpty) => {
+            this.context.$implicit = this.context.isEmpty = isEmpty;
+            this.embeddedViewRef.context = this.context;
+            this.embeddedViewRef.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        this.unsubscribeAll$.next();
+        this.unsubscribeAll$.complete();
+    }
+}
+NiceSelectableListIsEmptyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSelectableListIsEmptyDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: NiceSelectableListContentService }, { token: NiceSelectableListService }], target: i0.ɵɵFactoryTarget.Directive });
+NiceSelectableListIsEmptyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NiceSelectableListIsEmptyDirective, selector: "[niceSelectableListIsEmpty]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSelectableListIsEmptyDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[niceSelectableListIsEmpty]" }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: NiceSelectableListContentService }, { type: NiceSelectableListService }]; } });
+
 class NiceSelectableListModule {
     static register(...providers) {
         return {
@@ -5355,14 +5516,14 @@ class NiceSelectableListModule {
     }
 }
 NiceSelectableListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSelectableListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NiceSelectableListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NiceSelectableListModule, declarations: [NiceSelectableListDirective, NiceSelectableListCheckboxDirective, NiceSelectableListSelectAllDirective], exports: [NiceSelectableListDirective, NiceSelectableListCheckboxDirective, NiceSelectableListSelectAllDirective] });
+NiceSelectableListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NiceSelectableListModule, declarations: [NiceSelectableListDirective, NiceSelectableListCheckboxDirective, NiceSelectableListSelectAllDirective, NiceSelectableListIsEmptyDirective], exports: [NiceSelectableListDirective, NiceSelectableListCheckboxDirective, NiceSelectableListSelectAllDirective, NiceSelectableListIsEmptyDirective] });
 NiceSelectableListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSelectableListModule });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSelectableListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
-                    declarations: [NiceSelectableListDirective, NiceSelectableListCheckboxDirective, NiceSelectableListSelectAllDirective],
-                    exports: [NiceSelectableListDirective, NiceSelectableListCheckboxDirective, NiceSelectableListSelectAllDirective]
+                    declarations: [NiceSelectableListDirective, NiceSelectableListCheckboxDirective, NiceSelectableListSelectAllDirective, NiceSelectableListIsEmptyDirective],
+                    exports: [NiceSelectableListDirective, NiceSelectableListCheckboxDirective, NiceSelectableListSelectAllDirective, NiceSelectableListIsEmptyDirective]
                 }]
         }] });
 
@@ -5382,5 +5543,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, 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