@recursyve/nice-data-filter-kit 14.0.6 → 14.1.0

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

@@ -4,16 +4,16 @@ 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 } 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 } from '@angular/core';
-import { Store, StoreConfig, Query, arrayAdd, arrayUpsert, arrayRemove } from '@datorama/akita';
-import { combineLatest, Subject, firstValueFrom, of } from 'rxjs';
-import { __decorate, __metadata, __awaiter } from 'tslib';
+import { Directive, Input, NgModule, Injectable, Inject, InjectionToken, Optional, Pipe, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Output, HostListener, forwardRef, TemplateRef, ContentChild, ContentChildren, ViewChild } from '@angular/core';
+import { Store, StoreConfig, Query, arrayAdd, arrayUpsert, arrayRemove, EntityStore, QueryEntity } from '@datorama/akita';
+import { combineLatest, Subject, firstValueFrom, of, tap } from 'rxjs';
+import { __decorate, __metadata, __awaiter, __rest } from 'tslib';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i4$2 from '@angular/material/bottom-sheet';
+import * as i3$3 from '@angular/material/bottom-sheet';
 import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
 import * as i6 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, AsyncPipe, NgIf, NgTemplateOutlet } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i8 from '@angular/material/button';
@@ -57,6 +57,10 @@ import * as i18 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
 
 class QueryParamsUtils {
+    static hasFilterParameters(params) {
+        const keys = ["start", "length", "order", "search", "rules"];
+        return Object.keys(params).some(key => keys.includes(key));
+    }
     static extractFilterParameters(params) {
         const filters = {};
         if (!isNullOrUndefined(params.start)) {
@@ -704,7 +708,7 @@ const DEFAULT_RULES = new InjectionToken("default_rules");
 const DEFAULT_PARAMETERS = new InjectionToken("default_parameters");
 const LIST_TABLE = new InjectionToken("list_table");
 const TABLE_COLUMNS = new InjectionToken("table_columns");
-const EXPORTS_SETTINGS = new InjectionToken("exports_settings");
+const EXPORTS_SETTINGS$1 = new InjectionToken("exports_settings");
 const ENABLE_QUERY_BUILDER = new InjectionToken("enable_query_builder");
 const DISABLE_QUERY_PARAMS = new InjectionToken("disable_query_param");
 
@@ -2075,7 +2079,7 @@ class NiceBaseListComponent {
         }
     }
 }
-NiceBaseListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceBaseListComponent, deps: [{ token: ENABLE_QUERY_BUILDER, optional: true }, { token: BASE_LIST_ICONS }, { token: BASE_LIST_LAYOUT }, { token: TABLE_COLUMNS }, { token: EXPORTS_SETTINGS }, { token: NiceBaseListQuery }, { token: NiceBaseListService }, { token: i2.ActivatedRoute }, { token: i4$2.MatBottomSheet }, { token: i2.Router }, { token: i5$1.NiceMediaWatcherService }], target: i0.ɵɵFactoryTarget.Component });
+NiceBaseListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceBaseListComponent, deps: [{ token: ENABLE_QUERY_BUILDER, optional: true }, { token: BASE_LIST_ICONS }, { token: BASE_LIST_LAYOUT }, { token: TABLE_COLUMNS }, { token: EXPORTS_SETTINGS$1 }, { token: NiceBaseListQuery }, { token: NiceBaseListService }, { token: i2.ActivatedRoute }, { token: i3$3.MatBottomSheet }, { token: i2.Router }, { token: i5$1.NiceMediaWatcherService }], target: i0.ɵɵFactoryTarget.Component });
 NiceBaseListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceBaseListComponent, selector: "nice-base-list", inputs: { mode: "mode", layout: "layout", layoutContent: "layoutContent", autoChangeLayout: "autoChangeLayout", baseRoute: "baseRoute", routeFn: "routeFn", navigateFn: "navigateFn", autoLoad: "autoLoad", pageTitle: "pageTitle", canExport: "canExport", disableRouting: "disableRouting", customExport: "customExport", queryParams: "queryParams", configQueryParams: "configQueryParams" }, outputs: { newPage: "newPage" }, providers: [
         NiceBaseListQuery,
         NiceBaseListService,
@@ -2105,8 +2109,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                         args: [TABLE_COLUMNS]
                     }] }, { type: undefined, decorators: [{
                         type: Inject,
-                        args: [EXPORTS_SETTINGS]
-                    }] }, { type: NiceBaseListQuery }, { type: NiceBaseListService }, { type: i2.ActivatedRoute }, { type: i4$2.MatBottomSheet }, { type: i2.Router }, { type: i5$1.NiceMediaWatcherService }];
+                        args: [EXPORTS_SETTINGS$1]
+                    }] }, { type: NiceBaseListQuery }, { type: NiceBaseListService }, { type: i2.ActivatedRoute }, { type: i3$3.MatBottomSheet }, { type: i2.Router }, { type: i5$1.NiceMediaWatcherService }];
     }, propDecorators: { title: [{
                 type: ContentChild,
                 args: [NiceBaseListTitleDirective, { read: TemplateRef }]
@@ -2389,7 +2393,7 @@ class NiceBaseListModule {
                 useValue: options.layout
             } : undefined,
             {
-                provide: EXPORTS_SETTINGS,
+                provide: EXPORTS_SETTINGS$1,
                 useValue: (_a = options.exports) !== null && _a !== void 0 ? _a : {
                     pdf: true,
                     xlsx: true,
@@ -2501,7 +2505,7 @@ class NiceMultiStateFilterService extends NiceFilterService {
     }
 }
 
-const initialValue = Object.assign({}, initialBaseListState);
+const initialValue$1 = Object.assign({}, initialBaseListState);
 let NiceMultiStateListStore = class NiceMultiStateListStore extends NiceBaseListStore {
     constructor() {
         super(null, []);
@@ -2583,7 +2587,7 @@ class NiceMultiStateListComponent extends NiceBaseListComponent {
         this.setColumns(columns);
     }
 }
-NiceMultiStateListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceMultiStateListComponent, deps: [{ token: ENABLE_QUERY_BUILDER, optional: true }, { token: BASE_LIST_ICONS }, { token: BASE_LIST_LAYOUT }, { token: EXPORTS_SETTINGS }, { token: NiceMultiStateListQuery }, { token: i2.ActivatedRoute }, { token: i4$2.MatBottomSheet }, { token: i2.Router }, { token: i5$1.NiceMediaWatcherService }, { token: NiceMultiStateListService }], target: i0.ɵɵFactoryTarget.Component });
+NiceMultiStateListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceMultiStateListComponent, deps: [{ token: ENABLE_QUERY_BUILDER, optional: true }, { token: BASE_LIST_ICONS }, { token: BASE_LIST_LAYOUT }, { token: EXPORTS_SETTINGS$1 }, { token: NiceMultiStateListQuery }, { token: i2.ActivatedRoute }, { token: i3$3.MatBottomSheet }, { token: i2.Router }, { token: i5$1.NiceMediaWatcherService }, { token: NiceMultiStateListService }], target: i0.ɵɵFactoryTarget.Component });
 NiceMultiStateListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceMultiStateListComponent, selector: "nice-multi-state-list", inputs: { state: "state" }, providers: [
         NiceMultiStateListQuery,
         NiceMultiStateListService,
@@ -2610,15 +2614,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                         args: [BASE_LIST_LAYOUT]
                     }] }, { type: undefined, decorators: [{
                         type: Inject,
-                        args: [EXPORTS_SETTINGS]
-                    }] }, { type: NiceMultiStateListQuery }, { type: i2.ActivatedRoute }, { type: i4$2.MatBottomSheet }, { type: i2.Router }, { type: i5$1.NiceMediaWatcherService }, { type: NiceMultiStateListService }];
+                        args: [EXPORTS_SETTINGS$1]
+                    }] }, { type: NiceMultiStateListQuery }, { type: i2.ActivatedRoute }, { type: i3$3.MatBottomSheet }, { type: i2.Router }, { type: i5$1.NiceMediaWatcherService }, { type: NiceMultiStateListService }];
     }, propDecorators: { state: [{
                 type: Input
             }] } });
 
 class NiceMultiStateListModule {
     static providerFactory(options) {
-        var _a;
+        var _a, _b;
         return [
             {
                 provide: NiceMultiStateFilterService,
@@ -2633,18 +2637,22 @@ class NiceMultiStateListModule {
                 useValue: options.layout
             } : undefined,
             {
-                provide: EXPORTS_SETTINGS,
+                provide: EXPORTS_SETTINGS$1,
                 useValue: (_a = options.exports) !== null && _a !== void 0 ? _a : {
                     pdf: true,
                     xlsx: true,
                     csv: true
                 }
             },
+            {
+                provide: DISABLE_QUERY_PARAMS,
+                useValue: (_b = options.disableQueryParams) !== null && _b !== void 0 ? _b : false
+            },
+            options.disableQueryBuilder !== undefined ? {
+                provide: ENABLE_QUERY_BUILDER,
+                useValue: !options.disableQueryBuilder
+            } : null,
             ...(options.queryBuilder ? [
-                {
-                    provide: ENABLE_QUERY_BUILDER,
-                    useValue: true
-                },
                 {
                     provide: NiceFilterGroupService,
                     useClass: options.queryBuilder.filterGroupService
@@ -2728,6 +2736,943 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                 }]
         }] });
 
+class NiceFilterDataDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+NiceFilterDataDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterDataDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NiceFilterDataDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.3", type: NiceFilterDataDirective, selector: "[niceFilterData]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterDataDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[niceFilterData]" }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+const EXPORTS_SETTINGS = new InjectionToken("exports_settings");
+const FILTER_VIEW_ICONS = new InjectionToken("filter_view_icons");
+const FILTER_VIEW_STATE = new InjectionToken("filter_view_state");
+
+const initialValue = {
+    subStates: {},
+    mode: "paginated",
+    autoLoad: true,
+    disabled: false,
+    filterConfigLoading: false,
+    filterConfig: [],
+    filterResult: null,
+    filterParameters: {
+        start: 0,
+        length: 10,
+        order: {},
+        search: "",
+        rules: [],
+        data: {}
+    },
+    baseRules: [],
+    queryParams: null,
+    resetResult: false
+};
+let NiceFilterViewStore = class NiceFilterViewStore extends EntityStore {
+    constructor(state) {
+        super(Object.assign(Object.assign({}, initialValue), state));
+    }
+    setFilterConfigLoading(loading) {
+        this.update({ filterConfigLoading: loading });
+    }
+    setParameters(filterParameters) {
+        this.update({ filterParameters });
+    }
+    setResult(filterResult) {
+        const { mode, resetResult } = this.getValue();
+        if (mode === "accumulated") {
+            this.update((state) => {
+                var _a, _b;
+                return ({
+                    filterResult: {
+                        page: filterResult.page,
+                        total: filterResult.total,
+                        values: [
+                            ...(resetResult ? [] : (_b = (_a = state.filterResult) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : []),
+                            ...filterResult.values
+                        ]
+                    },
+                    resetResult: false
+                });
+            });
+        }
+        else {
+            this.update({
+                filterResult
+            });
+        }
+        if (mode === "accumulated") {
+            this.add(filterResult.values);
+        }
+        else {
+            this.set(filterResult.values);
+        }
+    }
+    addValue(value, opts) {
+        const { filterResult } = this.getValue();
+        if (!filterResult) {
+            return;
+        }
+        this.update({
+            filterResult: Object.assign(Object.assign({}, filterResult), { values: arrayAdd(filterResult.values, value, opts) })
+        });
+        this.add(value, opts);
+    }
+    upsertValue(value, key = "id") {
+        const { filterResult } = this.getValue();
+        if (!filterResult) {
+            return;
+        }
+        this.update({
+            filterResult: Object.assign(Object.assign({}, filterResult), { values: arrayUpsert(filterResult.values, value[key], value) })
+        });
+        this.upsert(value[key], value);
+    }
+    removeValue(value, key = "id") {
+        const { filterResult } = this.getValue();
+        if (!filterResult) {
+            return;
+        }
+        this.update({
+            filterResult: Object.assign(Object.assign({}, filterResult), { values: arrayRemove(filterResult.values, value[key]) })
+        });
+        this.remove(value[key]);
+    }
+};
+NiceFilterViewStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterViewStore, deps: [{ token: FILTER_VIEW_STATE }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceFilterViewStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterViewStore });
+NiceFilterViewStore = __decorate([
+    StoreConfig({ name: "nice-filter-view", resettable: true }),
+    __metadata("design:paramtypes", [Object])
+], NiceFilterViewStore);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterViewStore, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [FILTER_VIEW_STATE]
+                    }] }];
+    } });
+
+class NiceFilterViewQuery extends QueryEntity {
+    constructor(store) {
+        super(store);
+        this.store = store;
+    }
+    selectFilterConfigLoading() {
+        return this.select("filterConfigLoading");
+    }
+    selectFilterConfig() {
+        return this.select("filterConfig");
+    }
+    selectFilterParameters() {
+        return this.select("filterParameters");
+    }
+    selectFilterResult() {
+        return this.select("filterResult");
+    }
+}
+NiceFilterViewQuery.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterViewQuery, deps: [{ token: NiceFilterViewStore }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceFilterViewQuery.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterViewQuery });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterViewQuery, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: NiceFilterViewStore }]; } });
+
+class NiceFilterCustomDataViewComponent {
+    constructor(query) {
+        this.query = query;
+        this.data$ = this.query.selectAll();
+    }
+}
+NiceFilterCustomDataViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterCustomDataViewComponent, deps: [{ token: NiceFilterViewQuery }], target: i0.ɵɵFactoryTarget.Component });
+NiceFilterCustomDataViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceFilterCustomDataViewComponent, selector: "nice-filter-custom-data-view, div[nice-filter-custom-data-view]", queries: [{ propertyName: "content", first: true, predicate: NiceFilterDataDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"content\">\n    <ng-container *ngTemplateOutlet=\"content; context: { $implicit: data$ | async }\"></ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterCustomDataViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-filter-custom-data-view, div[nice-filter-custom-data-view]", encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"content\">\n    <ng-container *ngTemplateOutlet=\"content; context: { $implicit: data$ | async }\"></ng-container>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: NiceFilterViewQuery }]; }, propDecorators: { content: [{
+                type: ContentChild,
+                args: [NiceFilterDataDirective, { read: TemplateRef }]
+            }] } });
+
+class NiceFilterViewService {
+    constructor(store, filterService) {
+        this.store = store;
+        this.filterService = filterService;
+    }
+    reset() {
+        this.store.reset();
+    }
+    disable() {
+        this.store.update({
+            disabled: true
+        });
+    }
+    enable() {
+        this.store.update({
+            disabled: false
+        });
+    }
+    setAutoLoad(autoLoad) {
+        this.store.update({ autoLoad });
+    }
+    setLoading(loading) {
+        this.store.setLoading(loading);
+    }
+    setMode(mode) {
+        this.store.update({ mode });
+    }
+    loadConfig(configQueryParams = {}) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.store.setFilterConfigLoading(true);
+            try {
+                const filterConfig = yield firstValueFrom(this.filterService.getFilterConfig({ params: configQueryParams }));
+                this.store.update({
+                    filterConfig
+                });
+            }
+            catch (e) {
+                this.store.setError(e);
+            }
+            finally {
+                this.store.setFilterConfigLoading(false);
+            }
+        });
+    }
+    filter() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { filterParameters, disabled } = this.store.getValue();
+            if (disabled) {
+                return;
+            }
+            try {
+                this.store.setLoading(true);
+                const result = yield firstValueFrom(this.filterService.filter(this.getParameters(filterParameters)));
+                this.store.setResult(result);
+            }
+            catch (e) {
+                this.store.setError(e);
+            }
+            finally {
+                this.store.setLoading(false);
+            }
+        });
+    }
+    downloadData(type, downloadFileName) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { filterParameters, disabled } = this.store.getValue();
+            if (disabled) {
+                return;
+            }
+            try {
+                this.store.setLoading(true);
+                const result = yield firstValueFrom(this.filterService.getFile(type, this.getParameters(filterParameters)));
+                FileUtils.downloadFile(`${downloadFileName}.${type}`, result);
+            }
+            catch (e) {
+                this.store.setError(e);
+            }
+            finally {
+                this.store.setLoading(false);
+            }
+        });
+    }
+    printData() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { filterParameters, disabled } = this.store.getValue();
+            if (disabled) {
+                return;
+            }
+            try {
+                this.store.setLoading(true);
+                const result = yield firstValueFrom(this.filterService.getPrintableHtml(this.getParameters(filterParameters)));
+                FileUtils.openPrintableWindow(result);
+            }
+            catch (e) {
+                this.store.setError(e);
+            }
+            finally {
+                this.store.setLoading(false);
+            }
+        });
+    }
+    setParameters(filterParameters, reload = false) {
+        this.store.setParameters(filterParameters);
+        if (reload) {
+            this.filter();
+        }
+    }
+    resetPaging() {
+        const { filterParameters } = this.store.getValue();
+        this.setParameters(Object.assign(Object.assign({}, filterParameters), { start: 0 }), false);
+        this.resetResult(true);
+    }
+    setQueryParams(queryParams) {
+        this.store.update({ queryParams });
+    }
+    setBaseRules(rule, reload) {
+        this.store.update({
+            baseRules: rule
+        });
+        if (reload) {
+            this.filter();
+        }
+    }
+    setRules(rules, reload) {
+        if (!Array.isArray(rules)) {
+            rules = [rules];
+        }
+        const { filterParameters } = this.store.getValue();
+        const newRules = {
+            order: filterParameters.order,
+            rules
+        };
+        this.setParameters(newRules, reload);
+    }
+    upsertRule(id, newRule, reload) {
+        var _a;
+        const { filterParameters } = this.store.getValue();
+        const currentQuery = (_a = filterParameters.rules) === null || _a === void 0 ? void 0 : _a[0];
+        const rule = Object.assign({ id }, newRule);
+        const query = { rules: [rule], condition: "and" };
+        if (!currentQuery || currentQuery.rules.length === 0) {
+            this.setRules(query, reload);
+            return;
+        }
+        const oldRule = currentQuery.rules.find((r) => r.id === id);
+        let newRules = currentQuery.rules;
+        if (oldRule) {
+            if (newRule) {
+                // Array replace
+                newRules = [
+                    ...currentQuery.rules.slice(0, currentQuery.rules.indexOf(oldRule)),
+                    query,
+                    ...currentQuery.rules.slice(currentQuery.rules.indexOf(oldRule) + 1, currentQuery.rules.length)
+                ];
+            }
+            else {
+                newRules = currentQuery.rules.filter((r) => r.id !== id);
+            }
+        }
+        else {
+            newRules = [...newRules, query];
+        }
+        this.setRules({
+            condition: currentQuery.condition,
+            rules: newRules
+        }, reload);
+    }
+    removeRule(id, reload) {
+        var _a;
+        const { filterParameters } = this.store.getValue();
+        const currentQuery = (_a = filterParameters.rules) === null || _a === void 0 ? void 0 : _a[0];
+        const oldRule = currentQuery.rules.find((r) => r.id === id);
+        if (!oldRule) {
+            return;
+        }
+        const newRules = currentQuery.rules.filter((r) => r.id !== id);
+        this.setRules({
+            condition: currentQuery.condition,
+            rules: newRules
+        }, reload);
+    }
+    addValue(value, opts) {
+        this.store.addValue(value, opts);
+    }
+    upsertValue(value, key = "id") {
+        this.store.upsertValue(value, key);
+    }
+    removeValue(value, key = "id") {
+        this.store.removeValue(value, key);
+    }
+    resetResult(waitForNextFilter) {
+        if (!waitForNextFilter) {
+            this.store.update({
+                filterResult: null
+            });
+        }
+        else {
+            this.store.update({
+                resetResult: true
+            });
+        }
+    }
+    getParameters(filterParameters) {
+        const { baseRules } = this.store.getValue();
+        const parameters = Object.assign(Object.assign({}, filterParameters), { rules: (filterParameters === null || filterParameters === void 0 ? void 0 : filterParameters.rules) ? [...filterParameters.rules] : [] });
+        if (baseRules === null || baseRules === void 0 ? void 0 : baseRules.length) {
+            parameters.rules.push({
+                condition: "and",
+                rules: baseRules
+            });
+        }
+        return parameters;
+    }
+}
+NiceFilterViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterViewService, deps: [{ token: NiceFilterViewStore }, { token: NiceFilterService }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceFilterViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterViewService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterViewService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: NiceFilterViewStore }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [NiceFilterService]
+                    }] }];
+    } });
+
+class NiceFilterExportButtonsComponent {
+    constructor(icons, exportsSettings, query, service, bottomSheet) {
+        this.icons = icons;
+        this.exportsSettings = exportsSettings;
+        this.query = query;
+        this.service = service;
+        this.bottomSheet = bottomSheet;
+        this.customExport = [];
+        this.downloadFileName = "data";
+        this.loading$ = this.query.selectLoading();
+    }
+    clickExport() {
+        const exports = [];
+        if (this.exportsSettings.xlsx) {
+            exports.push({
+                type: "xlsx",
+                onClickExport: () => this.clickXlsx()
+            });
+        }
+        if (this.exportsSettings.csv) {
+            exports.push({
+                type: "csv",
+                onClickExport: () => this.clickCsv()
+            });
+        }
+        if (this.exportsSettings.pdf) {
+            exports.push({
+                type: "pdf",
+                onClickExport: () => this.clickPdf()
+            });
+        }
+        this.bottomSheet.open(ExportBottomSheetComponent, {
+            data: {
+                exportStrategies: [
+                    ...exports,
+                    ...this.customExport
+                ]
+            }
+        });
+    }
+    clickXlsx() {
+        this.service.downloadData("xlsx", this.downloadFileName);
+    }
+    clickCsv() {
+        this.service.downloadData("csv", this.downloadFileName);
+    }
+    clickPrint() {
+        this.service.printData();
+    }
+    clickPdf() {
+        this.service.downloadData("pdf", this.downloadFileName);
+    }
+}
+NiceFilterExportButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterExportButtonsComponent, deps: [{ token: FILTER_VIEW_ICONS }, { token: EXPORTS_SETTINGS }, { token: NiceFilterViewQuery }, { token: NiceFilterViewService }, { token: i3$3.MatBottomSheet }], target: i0.ɵɵFactoryTarget.Component });
+NiceFilterExportButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceFilterExportButtonsComponent, selector: "nice-filter-export-buttons, div[nice-filter-export-buttons]", inputs: { customExport: "customExport", downloadFileName: "downloadFileName" }, ngImport: i0, template: "<button\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: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterExportButtonsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-filter-export-buttons, div[nice-filter-export-buttons]", encapsulation: ViewEncapsulation.None, template: "<button\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" }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [FILTER_VIEW_ICONS]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [EXPORTS_SETTINGS]
+                    }] }, { type: NiceFilterViewQuery }, { type: NiceFilterViewService }, { type: i3$3.MatBottomSheet }];
+    }, propDecorators: { customExport: [{
+                type: Input
+            }], downloadFileName: [{
+                type: Input
+            }] } });
+
+class NiceFilterExportDirective {
+    constructor(service) {
+        this.service = service;
+        this.downloadFileName = "data";
+    }
+    onClick() {
+        this.service.downloadData(this.type, this.downloadFileName);
+    }
+}
+NiceFilterExportDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterExportDirective, deps: [{ token: NiceFilterViewService }], target: i0.ɵɵFactoryTarget.Directive });
+NiceFilterExportDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.3", type: NiceFilterExportDirective, selector: "[niceFilterExport]", inputs: { type: "type", downloadFileName: "downloadFileName" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterExportDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[niceFilterExport]" }]
+        }], ctorParameters: function () { return [{ type: NiceFilterViewService }]; }, propDecorators: { type: [{
+                type: Input
+            }], downloadFileName: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ["click"]
+            }] } });
+
+class NiceFilterInfiniteScrollDataViewComponent {
+    constructor(query, service) {
+        this.query = query;
+        this.service = service;
+        this.data$ = this.query.selectAll();
+    }
+    loadNextPage() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { filterParameters } = this.query.getValue();
+            this.service.setMode("paginated");
+            yield this.service.setParameters(Object.assign(Object.assign({}, filterParameters), { start: filterParameters.start + filterParameters.length }), true);
+        });
+    }
+}
+NiceFilterInfiniteScrollDataViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterInfiniteScrollDataViewComponent, deps: [{ token: NiceFilterViewQuery }, { token: NiceFilterViewService }], target: i0.ɵɵFactoryTarget.Component });
+NiceFilterInfiniteScrollDataViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceFilterInfiniteScrollDataViewComponent, selector: "nice-filter-infinite-scroll-data-view, div[nice-filter-infinite-scroll-data-view]", queries: [{ propertyName: "content", first: true, predicate: NiceFilterDataDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"content\">\n    <ng-container *ngTemplateOutlet=\"content; context: { $implicit: data$ | async }\"></ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterInfiniteScrollDataViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-filter-infinite-scroll-data-view, div[nice-filter-infinite-scroll-data-view]", encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"content\">\n    <ng-container *ngTemplateOutlet=\"content; context: { $implicit: data$ | async }\"></ng-container>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: NiceFilterViewQuery }, { type: NiceFilterViewService }]; }, propDecorators: { content: [{
+                type: ContentChild,
+                args: [NiceFilterDataDirective, { read: TemplateRef }]
+            }] } });
+
+class NiceFilterSearchComponent {
+    constructor(icons, query, service) {
+        this.icons = icons;
+        this.query = query;
+        this.service = service;
+        this.appearance = "default";
+        this.searchQuery$ = this.query.selectFilterParameters().pipe(map(f => f.search));
+        this.unsubscribeAll$ = new Subject();
+        this.searchText$ = new Subject();
+    }
+    ngOnInit() {
+        this.searchText$
+            .pipe(takeUntil(this.unsubscribeAll$), debounceTime(300), distinctUntilChanged(), tap((search) => {
+            const { filterParameters } = this.query.getValue();
+            this.service.setParameters(Object.assign(Object.assign({}, filterParameters), { search }), true);
+        }))
+            .subscribe();
+    }
+    ngOnDestroy() {
+        this.unsubscribeAll$.next();
+        this.unsubscribeAll$.complete();
+    }
+    onUpdateSearch(search) {
+        this.searchText$.next(search);
+    }
+}
+NiceFilterSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterSearchComponent, deps: [{ token: FILTER_VIEW_ICONS }, { token: NiceFilterViewQuery }, { token: NiceFilterViewService }], target: i0.ɵɵFactoryTarget.Component });
+NiceFilterSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceFilterSearchComponent, selector: "nice-filter-search", inputs: { appearance: "appearance" }, ngImport: i0, template: "<div\n    class=\"search-wrapper mx-md-0\"\n    [class.nice-search-default]=\"appearance === 'default'\"\n    [class.nice-search-outlined]=\"appearance === 'outlined'\"\n    [class.nice-search-legacy]=\"appearance === 'legacy'\"\n    [class.nice-search-custom]=\"appearance === 'custom'\"\n>\n    <div class=\"search flex flex-auto justify-start items-center\">\n        <mat-icon [svgIcon]=\"icons.search.svgIcon\">{{ icons.search.matIcon }}</mat-icon>\n        <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n\n        <ng-content select=\"[niceFilterSearchButtons]\"></ng-content>\n    </div>\n</div>\n", styles: ["nice-filter-search .search-wrapper{width:100%;max-width:480px;overflow:hidden}nice-filter-search .search-wrapper.nice-search-default{box-shadow:0 4px 12px #0000001f;border-radius:5px}nice-filter-search .search-wrapper.nice-search-outlined{border-radius:5px}nice-filter-search .search-wrapper.nice-search-legacy{box-shadow:0 3px 3px -2px #0000000f,0 3px 4px #0000000b,0 1px 8px #00000009;border-radius:28px}nice-filter-search .search-wrapper .search{width:100%;height:48px;line-height:48px;padding:0 18px}nice-filter-search .search-wrapper .search input{width:100%;height:48px;min-height:48px;max-height:48px;padding:0 16px;border:none;outline:none}\n"], dependencies: [{ kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-filter-search", encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"search-wrapper mx-md-0\"\n    [class.nice-search-default]=\"appearance === 'default'\"\n    [class.nice-search-outlined]=\"appearance === 'outlined'\"\n    [class.nice-search-legacy]=\"appearance === 'legacy'\"\n    [class.nice-search-custom]=\"appearance === 'custom'\"\n>\n    <div class=\"search flex flex-auto justify-start items-center\">\n        <mat-icon [svgIcon]=\"icons.search.svgIcon\">{{ icons.search.matIcon }}</mat-icon>\n        <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n\n        <ng-content select=\"[niceFilterSearchButtons]\"></ng-content>\n    </div>\n</div>\n", styles: ["nice-filter-search .search-wrapper{width:100%;max-width:480px;overflow:hidden}nice-filter-search .search-wrapper.nice-search-default{box-shadow:0 4px 12px #0000001f;border-radius:5px}nice-filter-search .search-wrapper.nice-search-outlined{border-radius:5px}nice-filter-search .search-wrapper.nice-search-legacy{box-shadow:0 3px 3px -2px #0000000f,0 3px 4px #0000000b,0 1px 8px #00000009;border-radius:28px}nice-filter-search .search-wrapper .search{width:100%;height:48px;line-height:48px;padding:0 18px}nice-filter-search .search-wrapper .search input{width:100%;height:48px;min-height:48px;max-height:48px;padding:0 16px;border:none;outline:none}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [FILTER_VIEW_ICONS]
+                    }] }, { type: NiceFilterViewQuery }, { type: NiceFilterViewService }];
+    }, propDecorators: { appearance: [{
+                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, length: page.pageSize }), true);
+        });
+    }
+    ngOnDestroy() {
+        this.unsubscribeAll$.next();
+        this.unsubscribeAll$.complete();
+    }
+}
+NiceFilterMatPaginatorPaginationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", 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: "14.2.3", type: NiceFilterMatPaginatorPaginationDirective, selector: "mat-paginator[niceFilterPagination]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", 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;
+            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: {} }), true);
+            }
+            else {
+                this.service.setParameters(Object.assign(Object.assign({}, filterParameters), { order: {
+                        column: sort.active,
+                        direction: sort.direction
+                    } }), true);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.unsubscribeAll$.next();
+        this.unsubscribeAll$.complete();
+    }
+}
+NiceFilterMatSortSortingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", 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: "14.2.3", type: NiceFilterMatSortSortingDirective, selector: "mat-table[matSort][niceFilterSorting]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", 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: "14.2.3", ngImport: i0, type: NiceFilterMatTableViewDirective, deps: [{ token: NiceFilterViewQuery }, { token: i13.MatTable }], target: i0.ɵɵFactoryTarget.Directive });
+NiceFilterMatTableViewDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.3", type: NiceFilterMatTableViewDirective, selector: "mat-table[niceFilterDataView]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterMatTableViewDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "mat-table[niceFilterDataView]" }]
+        }], ctorParameters: function () { return [{ type: NiceFilterViewQuery }, { type: i13.MatTable }]; } });
+
+class NiceFilterQueryParamsDirective {
+    constructor(query, service, route, router) {
+        this.query = query;
+        this.service = service;
+        this.route = route;
+        this.router = router;
+        this.init = new EventEmitter();
+        this.unsubscribeAll$ = new Subject();
+        this.initialized = false;
+    }
+    ngOnInit() {
+        this.query.selectFilterParameters().pipe(takeUntil(this.unsubscribeAll$)).subscribe((parameters) => {
+            this.updateQueryParams(parameters);
+        });
+        this.loadQueryParams();
+    }
+    ngOnDestroy() {
+        this.unsubscribeAll$.next();
+        this.unsubscribeAll$.complete();
+    }
+    updateQueryParams(parameters) {
+        if (!this.route) {
+            return;
+        }
+        const params = Object.assign({}, parameters);
+        const { mode } = this.query.getValue();
+        if (mode === "accumulated") {
+            delete params.start;
+            delete params.length;
+        }
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: QueryParamsUtils.filterParametersToParamsMap(params),
+            queryParamsHandling: "merge"
+        });
+    }
+    loadQueryParams() {
+        this.route.queryParams
+            .pipe(takeUntil(this.unsubscribeAll$), map((params) => {
+            return {
+                params: QueryParamsUtils.extractFilterParameters(params)
+            };
+        }))
+            .subscribe(({ params }) => {
+            if (!QueryParamsUtils.hasFilterParameters(params) || Object.keys(params).length === 0) {
+                params = Object.assign({}, this.query.getValue().filterParameters);
+            }
+            const { filterParameters, filterResult } = this.query.getValue();
+            if (FilterUtils.filterChangeNeedsRefresh(filterParameters, params) ||
+                !filterResult) {
+                this.service.setParameters(params, false);
+            }
+            if (!this.initialized) {
+                this.initialized = true;
+                this.init.emit();
+                this.service.filter();
+            }
+        });
+    }
+}
+NiceFilterQueryParamsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterQueryParamsDirective, deps: [{ token: NiceFilterViewQuery }, { token: NiceFilterViewService }, { token: i2.ActivatedRoute }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Directive });
+NiceFilterQueryParamsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.3", type: NiceFilterQueryParamsDirective, selector: "nice-filter-view[niceFilterQueryParams]", outputs: { init: "init" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterQueryParamsDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "nice-filter-view[niceFilterQueryParams]" }]
+        }], ctorParameters: function () { return [{ type: NiceFilterViewQuery }, { type: NiceFilterViewService }, { type: i2.ActivatedRoute }, { type: i2.Router }]; }, propDecorators: { init: [{
+                type: Output
+            }] } });
+
+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: "14.2.3", ngImport: i0, type: NiceFilterViewComponent, deps: [{ token: NiceFilterViewService }], target: i0.ɵɵFactoryTarget.Component });
+NiceFilterViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", 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: "14.2.3", 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 {
+    ngOnInit(autoLoad = true, { mode, loadConfig, configQueryParams } = {}) {
+        if (mode) {
+            this.filterViewService.setMode(mode);
+        }
+        const { autoLoad: defaultAutoLoad } = this.filterViewQuery.getValue();
+        if (autoLoad && defaultAutoLoad) {
+            this.filterViewService.filter();
+        }
+        else {
+            this.filterViewService.setAutoLoad(autoLoad);
+        }
+        if (loadConfig) {
+            this.filterViewService.loadConfig(configQueryParams);
+        }
+        this.filterViewLoading$ = this.filterViewQuery.selectLoading();
+    }
+    /**
+     * Call the filter endpoint with the current filter parameters.
+     */
+    loadData() {
+        this.filterViewService.filter();
+    }
+    /**
+     * Disable the filter view. This will stop calling any api routes.
+     */
+    disable() {
+        this.filterViewService.disable();
+    }
+    /**
+     * Enable the filter view. This will resume calling any api routes.
+     */
+    enable() {
+        this.filterViewService.enable();
+    }
+    /**
+     * Update the loading state
+     */
+    setLoading(loading) {
+        this.filterViewService.setLoading(loading);
+    }
+    /**
+     * Set a set of rules that won't be saved in the current filterParameters config.
+     * NOTE: These rules will be injected in each filter request.
+     */
+    setBaseRules(rule, reload = true) {
+        this.filterViewService.setBaseRules(rule, reload);
+    }
+    /**
+     * Reset all rules with a new set of rules.
+     */
+    setRules(rules, reload = true) {
+        this.filterViewService.setRules(rules, reload);
+    }
+    /**
+     * Add or update a rule.
+     * NOTE: This will only check for rules in the first element of the rules array in the current filterParameters.
+     */
+    upsertRule(id, newRule, reload = true) {
+        this.filterViewService.upsertRule(id, newRule, reload);
+    }
+    /**
+     * Remove a rule.
+     * NOTE: This will only check for rules in the first element of the rules array in the current filterParameters.
+     */
+    removeRule(id, reload = true) {
+        this.filterViewService.removeRule(id, reload);
+    }
+}
+NiceBaseFilterViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceBaseFilterViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NiceBaseFilterViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", 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 }], ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceBaseFilterViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``
+                }]
+        }], propDecorators: { filterViewService: [{
+                type: ViewChild,
+                args: [NiceFilterViewComponent, { read: NiceFilterViewService, static: true }]
+            }], filterViewQuery: [{
+                type: ViewChild,
+                args: [NiceFilterViewComponent, { read: NiceFilterViewQuery, static: true }]
+            }] } });
+
+class NiceFilterViewModule {
+    static forRoot(options) {
+        var _a;
+        return {
+            ngModule: NiceFilterViewModule,
+            providers: [
+                {
+                    provide: FILTER_VIEW_ICONS,
+                    useValue: Object.assign(Object.assign({}, defaultIcons), ((_a = options === null || options === void 0 ? void 0 : options.icons) !== null && _a !== void 0 ? _a : {}))
+                }
+            ].filter(x => !!x)
+        };
+    }
+    static providerFactory(options) {
+        var _a, _b;
+        return [
+            {
+                provide: NiceFilterService,
+                useClass: options.filterService
+            },
+            {
+                provide: EXPORTS_SETTINGS,
+                useValue: (_a = options.exports) !== null && _a !== void 0 ? _a : {
+                    pdf: true,
+                    xlsx: true,
+                    csv: true
+                }
+            },
+            {
+                provide: FILTER_VIEW_STATE,
+                useValue: (_b = options.state) !== null && _b !== void 0 ? _b : {}
+            }
+        ].filter(x => !!x);
+    }
+}
+NiceFilterViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NiceFilterViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterViewModule, declarations: [NiceFilterViewComponent,
+        NiceFilterCustomDataViewComponent,
+        NiceFilterExportButtonsComponent,
+        NiceFilterInfiniteScrollDataViewComponent,
+        NiceFilterSearchComponent,
+        NiceFilterDataDirective,
+        NiceFilterExportDirective,
+        NiceFilterMatTableViewDirective,
+        NiceFilterMatSortSortingDirective,
+        NiceFilterMatPaginatorPaginationDirective,
+        NiceFilterQueryParamsDirective], imports: [TranslateModule,
+        MatIconModule,
+        FormsModule,
+        AsyncPipe,
+        NgIf,
+        NgTemplateOutlet,
+        MatTooltipModule,
+        MatButtonModule,
+        MatBottomSheetModule,
+        NiceExportBottomSheetModule], exports: [NiceFilterViewComponent,
+        NiceFilterCustomDataViewComponent,
+        NiceFilterExportButtonsComponent,
+        NiceFilterInfiniteScrollDataViewComponent,
+        NiceFilterSearchComponent,
+        NiceFilterDataDirective,
+        NiceFilterExportDirective,
+        NiceFilterMatTableViewDirective,
+        NiceFilterMatSortSortingDirective,
+        NiceFilterMatPaginatorPaginationDirective,
+        NiceFilterQueryParamsDirective] });
+NiceFilterViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterViewModule, imports: [TranslateModule,
+        MatIconModule,
+        FormsModule,
+        MatTooltipModule,
+        MatButtonModule,
+        MatBottomSheetModule,
+        NiceExportBottomSheetModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterViewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        TranslateModule,
+                        MatIconModule,
+                        FormsModule,
+                        AsyncPipe,
+                        NgIf,
+                        NgTemplateOutlet,
+                        MatTooltipModule,
+                        MatButtonModule,
+                        MatBottomSheetModule,
+                        NiceExportBottomSheetModule
+                    ],
+                    declarations: [
+                        NiceFilterViewComponent,
+                        NiceFilterCustomDataViewComponent,
+                        NiceFilterExportButtonsComponent,
+                        NiceFilterInfiniteScrollDataViewComponent,
+                        NiceFilterSearchComponent,
+                        NiceFilterDataDirective,
+                        NiceFilterExportDirective,
+                        NiceFilterMatTableViewDirective,
+                        NiceFilterMatSortSortingDirective,
+                        NiceFilterMatPaginatorPaginationDirective,
+                        NiceFilterQueryParamsDirective
+                    ],
+                    providers: [],
+                    exports: [
+                        NiceFilterViewComponent,
+                        NiceFilterCustomDataViewComponent,
+                        NiceFilterExportButtonsComponent,
+                        NiceFilterInfiniteScrollDataViewComponent,
+                        NiceFilterSearchComponent,
+                        NiceFilterDataDirective,
+                        NiceFilterExportDirective,
+                        NiceFilterMatTableViewDirective,
+                        NiceFilterMatSortSortingDirective,
+                        NiceFilterMatPaginatorPaginationDirective,
+                        NiceFilterQueryParamsDirective
+                    ],
+                }]
+        }] });
+
 class StringUtils {
 }
 // tslint:disable-next-line:max-line-length
@@ -2744,5 +3689,5 @@ String.prototype.toTableColumn = function (sortableOrOptions, nullLast) {
  * Generated bundle index. Do not edit.
  */
 
-export { DateFilterComponent, FilterComponent, FilterGroupIconPipe, FilterOperatorTypes, FilterSelectionComponent, FilterType, FilterUtils, LayoutContent, NiceBaseListButtonsDirective, NiceBaseListCardsDirective, NiceBaseListComponent, NiceBaseListCustomContentDirective, NiceBaseListDirectiveModule, NiceBaseListEmptySearchResultStateDirective, NiceBaseListEmptyStateDirective, NiceBaseListFiltersDirective, NiceBaseListModule, NiceBaseListQuery, NiceBaseListService, NiceBaseListStore, NiceBaseListTableDirective, NiceBaseListTitleDirective, NiceCustomDateAdapter, NiceFilterApi, NiceFilterGroupService, NiceFilterService, NiceListState, NiceMultiStateFilterService, NiceMultiStateListComponent, NiceMultiStateListModule, NiceMultiStateListQuery, NiceMultiStateListService, NiceMultiStateListStore, NiceQueryBuilderComponent, NiceQueryBuilderModule, NiceSavedReportService, NumberFilterComponent, OrderUtils, QBFilterUtils, QueryBuilderTriggerDirective, RadioFilterComponent, RuleComponent, SelectFilterComponent, StringUtils, TableColumns, TextFilterComponent, defaultLayout, initialBaseListState, initialValue, mixinNiceFilterApi };
+export { DateFilterComponent, FilterComponent, FilterGroupIconPipe, FilterOperatorTypes, FilterSelectionComponent, FilterType, FilterUtils, LayoutContent, 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, NiceQueryBuilderComponent, NiceQueryBuilderModule, NiceSavedReportService, 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