@recursyve/nice-data-filter-kit 14.3.0 → 14.3.1

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

@@ -2,11 +2,11 @@ import { plainToInstance } from 'class-transformer';
 import { map, takeUntil, debounceTime, switchMap, distinctUntilChanged } from 'rxjs/operators';
 import { HttpParams } from '@angular/common/http';
 import * as i5 from '@recursyve/nice-ui-kit.v2';
-import { isNullOrUndefined, ObjectUtils, FileUtils, ArrayUtils, ExportBottomSheetComponent, NiceLoadingSpinnerModule, NiceTypeaheadModule, NiceExportBottomSheetModule } 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, ViewChild, QueryList } from '@angular/core';
 import { Store, StoreConfig, Query, arrayAdd, arrayUpsert, arrayRemove, EntityStore, QueryEntity, EntityActions } from '@datorama/akita';
-import { combineLatest, Subject, firstValueFrom, of, startWith, tap } from 'rxjs';
+import { combineLatest, Subject, firstValueFrom, of, lastValueFrom, startWith, tap, distinct, take } from 'rxjs';
 import { __decorate, __metadata } from 'tslib';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
@@ -3219,6 +3219,8 @@ AdvancedFiltersUtils.doubleInputOperators = [
     FilterOperatorTypes.NotBetween
 ];
 
+const ADVANCED_FILTER_ICONS = new InjectionToken("advanced_filter_icons");
+
 class NiceFilterGroupIconPipe {
     constructor(service) {
         this.service = service;
@@ -3371,20 +3373,18 @@ class NiceAdvancedFiltersButtonComponent {
         this.service.updateSubState("showAdvancedFilters", true);
     }
 }
-NiceAdvancedFiltersButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedFiltersButtonComponent, deps: [{ token: FILTER_VIEW_ICONS, optional: true }, { token: NiceFilterViewQuery }, { token: NiceFilterViewService }], target: i0.ɵɵFactoryTarget.Component });
-NiceAdvancedFiltersButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", 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>filter_list</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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", 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: "14.2.3", 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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "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: "14.2.3", 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>filter_list</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-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"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
-                    args: [FILTER_VIEW_ICONS]
+                    args: [ADVANCED_FILTER_ICONS]
                 }] }, { type: NiceFilterViewQuery }, { type: NiceFilterViewService }]; } });
 
-const ADVANCED_FILTER_ICONS = new InjectionToken("advanced_filter_icons");
-
 class FilterFormValues {
 }
 __decorate([
@@ -3508,6 +3508,32 @@ __decorate([
     __metadata("design:type", String)
 ], AdvancedFiltersForm.prototype, "condition", void 0);
 
+class AdvancedFiltersAsyncTypeaheadProvider extends NiceAsyncTypeaheadProvider {
+    constructor(filterService) {
+        super();
+        this.filterService = filterService;
+        this.resource = "advancedFilter";
+    }
+    getById(id, options) {
+        return lastValueFrom(this.filterService.searchFilterResourceValue(options.filterConfig, id));
+    }
+    async search(searchQuery, page, options) {
+        const res = await lastValueFrom(this.filterService.searchFilterValue(options.filterConfig, searchQuery));
+        return {
+            items: res,
+            nextPage: null
+        };
+    }
+    format(item) {
+        return item.name;
+    }
+}
+AdvancedFiltersAsyncTypeaheadProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: AdvancedFiltersAsyncTypeaheadProvider, deps: [{ token: NiceFilterService }], target: i0.ɵɵFactoryTarget.Injectable });
+AdvancedFiltersAsyncTypeaheadProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: AdvancedFiltersAsyncTypeaheadProvider });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: AdvancedFiltersAsyncTypeaheadProvider, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: NiceFilterService }]; } });
+
 class FilterComponent {
     constructor() {
         this.propagateChanges = (_) => { };
@@ -3610,26 +3636,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
             }] } });
 
 class NiceAdvancedSelectFilterComponent extends FilterComponent {
-    constructor(filterService) {
-        super();
-        this.filterService = filterService;
+    constructor() {
+        super(...arguments);
         this.values = [];
-        this.search$ = new Subject();
     }
     async ngOnInit() {
         if (!this.filterConfig.lazyLoading) {
             this.values = this.filterConfig.values;
         }
-        this.searchSub$ = this.search$
-            .pipe(debounceTime(300), switchMap(value => {
-            if (this.filterConfig.lazyLoading) {
-                return this.filterService.searchFilterValue(this.filterConfig, value);
-            }
-            return of(this.filterConfig.values);
-        }))
-            .subscribe(values => {
-            this.values = values;
-        });
     }
     ngOnChanges(changes) {
         if ("filterConfig" in changes) {
@@ -3641,34 +3655,21 @@ class NiceAdvancedSelectFilterComponent extends FilterComponent {
             }
         }
     }
-    async searchValue() {
-        if (this.value && !this.values.find(v => v.id === this.value)) {
-            const value = await this.filterService
-                .searchFilterResourceValue(this.filterConfig, this.value)
-                .toPromise();
-            this.values = [...this.values, value];
-        }
-    }
     onValueChange(value) {
         super.onValueChange(value);
-        this.searchValue();
-    }
-    ngOnDestroy() {
-        this.searchSub$.unsubscribe();
     }
     writeValue(value) {
         super.writeValue(value);
-        this.searchValue();
     }
 }
-NiceAdvancedSelectFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedSelectFilterComponent, deps: [{ token: NiceFilterService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+NiceAdvancedSelectFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedSelectFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 NiceAdvancedSelectFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceAdvancedSelectFilterComponent, selector: "nice-advanced-select-filter", inputs: { filterConfig: "filterConfig" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => NiceAdvancedSelectFilterComponent),
             multi: true
         }
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\" class=\"flex-auto\">\n    <nice-typeahead *ngIf=\"!filterConfig.lazyLoading\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"onValueChange($event)\"\n        [items]=\"values\"\n        bindValue=\"id\"\n        bindLabel=\"name\"\n    ></nice-typeahead>\n\n    <nice-typeahead *ngIf=\"filterConfig.lazyLoading\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"onValueChange($event)\"\n        [items]=\"values\"\n        [typeahead]=\"search$\"\n        bindValue=\"id\"\n        bindLabel=\"name\"\n    ></nice-typeahead>\n</mat-form-field>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NiceTypeaheadComponent, selector: "nice-typeahead", inputs: ["items", "labelFormatFn", "required", "disabled", "placeholder", "emptyPlaceholder", "allowNotFoundItems", "panelClass", "bindValue", "bindLabel", "typeahead", "page$", "loading", "loadingPage", "searchFn", "optionTemplate"], outputs: ["change"] }], encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\" class=\"flex-auto\">\n    <nice-typeahead\n        *ngIf=\"!filterConfig.lazyLoading\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"onValueChange($event)\"\n        [items]=\"values\"\n        bindValue=\"id\"\n        bindLabel=\"name\"\n    ></nice-typeahead>\n\n    <nice-async-typeahead\n        *ngIf=\"filterConfig.lazyLoading\"\n        resource=\"advancedFilter\"\n        [searchOptions]=\"{ filterConfig }\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"onValueChange($event)\"\n    ></nice-async-typeahead>\n</mat-form-field>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NiceTypeaheadComponent, selector: "nice-typeahead", inputs: ["items", "labelFormatFn", "required", "disabled", "placeholder", "emptyPlaceholder", "allowNotFoundItems", "panelClass", "bindValue", "bindLabel", "typeahead", "page$", "loading", "loadingPage", "searchFn", "optionTemplate"], outputs: ["change"] }, { kind: "component", type: i5.NiceAsyncTypeaheadComponent, selector: "nice-async-typeahead", inputs: ["resource", "searchOptions", "preloadResource", "allowNotFoundItems", "panelClass", "bindValue", "bindLabel", "placeholder", "emptyPlaceholder", "optionTemplate", "filterFn", "labelFormatFn", "disabled", "value", "required"], outputs: ["entityRemoved", "selected"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedSelectFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-advanced-select-filter", encapsulation: ViewEncapsulation.None, providers: [
@@ -3677,10 +3678,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                             useExisting: forwardRef(() => NiceAdvancedSelectFilterComponent),
                             multi: true
                         }
-                    ], template: "<mat-form-field appearance=\"outline\" class=\"flex-auto\">\n    <nice-typeahead *ngIf=\"!filterConfig.lazyLoading\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"onValueChange($event)\"\n        [items]=\"values\"\n        bindValue=\"id\"\n        bindLabel=\"name\"\n    ></nice-typeahead>\n\n    <nice-typeahead *ngIf=\"filterConfig.lazyLoading\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"onValueChange($event)\"\n        [items]=\"values\"\n        [typeahead]=\"search$\"\n        bindValue=\"id\"\n        bindLabel=\"name\"\n    ></nice-typeahead>\n</mat-form-field>\n" }]
-        }], ctorParameters: function () { return [{ type: NiceFilterService, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { filterConfig: [{
+                    ], template: "<mat-form-field appearance=\"outline\" class=\"flex-auto\">\n    <nice-typeahead\n        *ngIf=\"!filterConfig.lazyLoading\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"onValueChange($event)\"\n        [items]=\"values\"\n        bindValue=\"id\"\n        bindLabel=\"name\"\n    ></nice-typeahead>\n\n    <nice-async-typeahead\n        *ngIf=\"filterConfig.lazyLoading\"\n        resource=\"advancedFilter\"\n        [searchOptions]=\"{ filterConfig }\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"onValueChange($event)\"\n    ></nice-async-typeahead>\n</mat-form-field>\n" }]
+        }], propDecorators: { filterConfig: [{
                 type: Input
             }] } });
 
@@ -3791,10 +3790,24 @@ class NiceAdvancedFiltersComponent {
     }
 }
 NiceAdvancedFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", 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: "14.2.3", type: NiceAdvancedFiltersComponent, selector: "nice-advanced-filters", providers: [NgxFormGeneratorProvider.forFeature([AdvancedFiltersForm])], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" [formGroup]=\"formGroup\">\n    <div class=\"advanced-filter-title\">{{ \"components.nice_advanced_filters.title\" | translate }}</div>\n\n    <div class=\"flex flex-row gap-12\">\n        <div class=\"advanced-filter-condition\">{{ \"components.nice_advanced_filters.conditions.should_match\" | translate }}</div>\n\n        <mat-radio-group formControlName=\"condition\">\n            <mat-radio-button value=\"and\"><span class=\"ml-4 mr-8\">{{ \"components.nice_advanced_filters.conditions.every\" | translate }}</span></mat-radio-button>\n            <mat-radio-button value=\"or\"><span class=\"ml-4 mr-8\">{{ \"components.nice_advanced_filters.conditions.some\" | translate }}</span></mat-radio-button>\n        </mat-radio-group>\n    </div>\n\n    <div class=\"flex flex-col gap-4\" formArrayName=\"rules\" *ngFor=\"let _ of rulesFormArray.controls; let i = index\">\n        <nice-advanced-rule [filterConfigs]=\"config$ | async\" [formGroupName]=\"i\" (remove)=\"onClickDeleteRule(i)\"></nice-advanced-rule>\n    </div>\n\n    <div>\n        <button class=\"add-condition\" mat-stroked-button color=\"accent\" niceAdvancedFiltersTrigger position=\"topRight\" (advancedFilterSelected)=\"onClickAddRule($event)\">\n            <div class=\"flex items-center gap-4\">\n                <mat-icon [svgIcon]=\"icons.add.svgIcon\">{{ icons.add.matIcon }}</mat-icon>\n\n                <div>{{ \"components.nice_advanced_filters.add_condition\" | translate }}</div>\n            </div>\n        </button>\n    </div>\n\n    <div class=\"flex gap-6 justify-end pt-4\">\n        <button class=\"close-button\" mat-button color=\"accent\" (click)=\"onClose()\">\n            <div class=\"flex items-center gap-4\">\n                <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n\n                <div>{{ \"components.nice_advanced_filters.close\" | translate }}</div>\n            </div>\n        </button>\n\n        <button class=\"refresh-button\" mat-flat-button color=\"accent\" (click)=\"onRefresh()\">\n            <div class=\"flex items-center gap-4\">\n                <mat-icon [svgIcon]=\"icons.refresh.svgIcon\">{{ icons.refresh.matIcon }}</mat-icon>\n\n                <div>{{ \"components.nice_advanced_filters.refresh\" | translate }}</div>\n            </div>\n        </button>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3$3.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$3.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: NiceAdvancedRuleComponent, selector: "nice-advanced-rule", inputs: ["filterConfigs"], outputs: ["remove"] }, { kind: "directive", type: AdvancedFiltersTriggerDirective, selector: "[niceAdvancedFiltersTrigger]", inputs: ["position"], outputs: ["advancedFilterSelected"], exportAs: ["niceAdvancedFiltersTrigger"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NiceAdvancedFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceAdvancedFiltersComponent, selector: "nice-advanced-filters", providers: [
+        NgxFormGeneratorProvider.forFeature([AdvancedFiltersForm]),
+        {
+            provide: NICE_ASYNC_TYPEAHEAD_PROVIDER,
+            useClass: AdvancedFiltersAsyncTypeaheadProvider,
+            multi: true
+        }
+    ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" [formGroup]=\"formGroup\">\n    <div class=\"advanced-filter-title\">{{ \"components.nice_advanced_filters.title\" | translate }}</div>\n\n    <div class=\"flex flex-row gap-12\">\n        <div class=\"advanced-filter-condition\">{{ \"components.nice_advanced_filters.conditions.should_match\" | translate }}</div>\n\n        <mat-radio-group formControlName=\"condition\">\n            <mat-radio-button value=\"and\"><span class=\"ml-4 mr-8\">{{ \"components.nice_advanced_filters.conditions.every\" | translate }}</span></mat-radio-button>\n            <mat-radio-button value=\"or\"><span class=\"ml-4 mr-8\">{{ \"components.nice_advanced_filters.conditions.some\" | translate }}</span></mat-radio-button>\n        </mat-radio-group>\n    </div>\n\n    <div class=\"flex flex-col gap-4\" formArrayName=\"rules\" *ngFor=\"let _ of rulesFormArray.controls; let i = index\">\n        <nice-advanced-rule [filterConfigs]=\"config$ | async\" [formGroupName]=\"i\" (remove)=\"onClickDeleteRule(i)\"></nice-advanced-rule>\n    </div>\n\n    <div>\n        <button class=\"add-condition\" mat-stroked-button color=\"accent\" niceAdvancedFiltersTrigger position=\"topRight\" (advancedFilterSelected)=\"onClickAddRule($event)\">\n            <div class=\"flex items-center gap-4\">\n                <mat-icon [svgIcon]=\"icons.add.svgIcon\">{{ icons.add.matIcon }}</mat-icon>\n\n                <div>{{ \"components.nice_advanced_filters.add_condition\" | translate }}</div>\n            </div>\n        </button>\n    </div>\n\n    <div class=\"flex gap-6 justify-end pt-4\">\n        <button class=\"close-button\" mat-button color=\"accent\" (click)=\"onClose()\">\n            <div class=\"flex items-center gap-4\">\n                <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n\n                <div>{{ \"components.nice_advanced_filters.close\" | translate }}</div>\n            </div>\n        </button>\n\n        <button class=\"refresh-button\" mat-flat-button color=\"accent\" (click)=\"onRefresh()\">\n            <div class=\"flex items-center gap-4\">\n                <mat-icon [svgIcon]=\"icons.refresh.svgIcon\">{{ icons.refresh.matIcon }}</mat-icon>\n\n                <div>{{ \"components.nice_advanced_filters.refresh\" | translate }}</div>\n            </div>\n        </button>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3$3.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$3.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: NiceAdvancedRuleComponent, selector: "nice-advanced-rule", inputs: ["filterConfigs"], outputs: ["remove"] }, { kind: "directive", type: AdvancedFiltersTriggerDirective, selector: "[niceAdvancedFiltersTrigger]", inputs: ["position"], outputs: ["advancedFilterSelected"], exportAs: ["niceAdvancedFiltersTrigger"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedFiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: "nice-advanced-filters", encapsulation: ViewEncapsulation.None, providers: [NgxFormGeneratorProvider.forFeature([AdvancedFiltersForm])], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-4\" [formGroup]=\"formGroup\">\n    <div class=\"advanced-filter-title\">{{ \"components.nice_advanced_filters.title\" | translate }}</div>\n\n    <div class=\"flex flex-row gap-12\">\n        <div class=\"advanced-filter-condition\">{{ \"components.nice_advanced_filters.conditions.should_match\" | translate }}</div>\n\n        <mat-radio-group formControlName=\"condition\">\n            <mat-radio-button value=\"and\"><span class=\"ml-4 mr-8\">{{ \"components.nice_advanced_filters.conditions.every\" | translate }}</span></mat-radio-button>\n            <mat-radio-button value=\"or\"><span class=\"ml-4 mr-8\">{{ \"components.nice_advanced_filters.conditions.some\" | translate }}</span></mat-radio-button>\n        </mat-radio-group>\n    </div>\n\n    <div class=\"flex flex-col gap-4\" formArrayName=\"rules\" *ngFor=\"let _ of rulesFormArray.controls; let i = index\">\n        <nice-advanced-rule [filterConfigs]=\"config$ | async\" [formGroupName]=\"i\" (remove)=\"onClickDeleteRule(i)\"></nice-advanced-rule>\n    </div>\n\n    <div>\n        <button class=\"add-condition\" mat-stroked-button color=\"accent\" niceAdvancedFiltersTrigger position=\"topRight\" (advancedFilterSelected)=\"onClickAddRule($event)\">\n            <div class=\"flex items-center gap-4\">\n                <mat-icon [svgIcon]=\"icons.add.svgIcon\">{{ icons.add.matIcon }}</mat-icon>\n\n                <div>{{ \"components.nice_advanced_filters.add_condition\" | translate }}</div>\n            </div>\n        </button>\n    </div>\n\n    <div class=\"flex gap-6 justify-end pt-4\">\n        <button class=\"close-button\" mat-button color=\"accent\" (click)=\"onClose()\">\n            <div class=\"flex items-center gap-4\">\n                <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n\n                <div>{{ \"components.nice_advanced_filters.close\" | translate }}</div>\n            </div>\n        </button>\n\n        <button class=\"refresh-button\" mat-flat-button color=\"accent\" (click)=\"onRefresh()\">\n            <div class=\"flex items-center gap-4\">\n                <mat-icon [svgIcon]=\"icons.refresh.svgIcon\">{{ icons.refresh.matIcon }}</mat-icon>\n\n                <div>{{ \"components.nice_advanced_filters.refresh\" | translate }}</div>\n            </div>\n        </button>\n    </div>\n</div>\n" }]
+            args: [{ selector: "nice-advanced-filters", encapsulation: ViewEncapsulation.None, providers: [
+                        NgxFormGeneratorProvider.forFeature([AdvancedFiltersForm]),
+                        {
+                            provide: NICE_ASYNC_TYPEAHEAD_PROVIDER,
+                            useClass: AdvancedFiltersAsyncTypeaheadProvider,
+                            multi: true
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-4\" [formGroup]=\"formGroup\">\n    <div class=\"advanced-filter-title\">{{ \"components.nice_advanced_filters.title\" | translate }}</div>\n\n    <div class=\"flex flex-row gap-12\">\n        <div class=\"advanced-filter-condition\">{{ \"components.nice_advanced_filters.conditions.should_match\" | translate }}</div>\n\n        <mat-radio-group formControlName=\"condition\">\n            <mat-radio-button value=\"and\"><span class=\"ml-4 mr-8\">{{ \"components.nice_advanced_filters.conditions.every\" | translate }}</span></mat-radio-button>\n            <mat-radio-button value=\"or\"><span class=\"ml-4 mr-8\">{{ \"components.nice_advanced_filters.conditions.some\" | translate }}</span></mat-radio-button>\n        </mat-radio-group>\n    </div>\n\n    <div class=\"flex flex-col gap-4\" formArrayName=\"rules\" *ngFor=\"let _ of rulesFormArray.controls; let i = index\">\n        <nice-advanced-rule [filterConfigs]=\"config$ | async\" [formGroupName]=\"i\" (remove)=\"onClickDeleteRule(i)\"></nice-advanced-rule>\n    </div>\n\n    <div>\n        <button class=\"add-condition\" mat-stroked-button color=\"accent\" niceAdvancedFiltersTrigger position=\"topRight\" (advancedFilterSelected)=\"onClickAddRule($event)\">\n            <div class=\"flex items-center gap-4\">\n                <mat-icon [svgIcon]=\"icons.add.svgIcon\">{{ icons.add.matIcon }}</mat-icon>\n\n                <div>{{ \"components.nice_advanced_filters.add_condition\" | translate }}</div>\n            </div>\n        </button>\n    </div>\n\n    <div class=\"flex gap-6 justify-end pt-4\">\n        <button class=\"close-button\" mat-button color=\"accent\" (click)=\"onClose()\">\n            <div class=\"flex items-center gap-4\">\n                <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n\n                <div>{{ \"components.nice_advanced_filters.close\" | translate }}</div>\n            </div>\n        </button>\n\n        <button class=\"refresh-button\" mat-flat-button color=\"accent\" (click)=\"onRefresh()\">\n            <div class=\"flex items-center gap-4\">\n                <mat-icon [svgIcon]=\"icons.refresh.svgIcon\">{{ icons.refresh.matIcon }}</mat-icon>\n\n                <div>{{ \"components.nice_advanced_filters.refresh\" | translate }}</div>\n            </div>\n        </button>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -3820,6 +3833,9 @@ const defaultIcons = {
     },
     datePicker: {
         matIcon: "today"
+    },
+    queryBuilder: {
+        matIcon: "filter_list"
     }
 };
 
@@ -3872,7 +3888,8 @@ NiceAdvancedFiltersModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0
         TranslateModule,
         MatDatepickerModule,
         NiceTypeaheadModule,
-        NgxMaskModule], exports: [NiceAdvancedFiltersComponent, NiceAdvancedFiltersButtonComponent, AdvancedFiltersTriggerDirective] });
+        NgxMaskModule,
+        NiceAsyncTypeaheadModule], exports: [NiceAdvancedFiltersComponent, NiceAdvancedFiltersButtonComponent, AdvancedFiltersTriggerDirective] });
 NiceAdvancedFiltersModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedFiltersModule, imports: [CommonModule,
         ReactiveFormsModule,
         MatRadioModule,
@@ -3891,7 +3908,8 @@ NiceAdvancedFiltersModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0
         TranslateModule,
         MatDatepickerModule,
         NiceTypeaheadModule,
-        NgxMaskModule] });
+        NgxMaskModule,
+        NiceAsyncTypeaheadModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedFiltersModule, decorators: [{
             type: NgModule,
             args: [{
@@ -3914,7 +3932,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                         TranslateModule,
                         MatDatepickerModule,
                         NiceTypeaheadModule,
-                        NgxMaskModule
+                        NgxMaskModule,
+                        NiceAsyncTypeaheadModule
                     ],
                     declarations: [
                         NiceAdvancedFiltersComponent,
@@ -3971,6 +3990,7 @@ class NiceFilterExportButtonsComponent {
         this.bottomSheet = bottomSheet;
         this.customExport = [];
         this.downloadFileName = "data";
+        this.canPrint = true;
         this.loading$ = this.query.selectLoading();
     }
     clickExport() {
@@ -4016,10 +4036,10 @@ class NiceFilterExportButtonsComponent {
     }
 }
 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$4.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: i4$1.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: i2$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+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", 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: i4$1.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.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: i2$1.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" }]
+            args: [{ selector: "nice-filter-export-buttons, div[nice-filter-export-buttons]", encapsulation: ViewEncapsulation.None, 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" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [FILTER_VIEW_ICONS]
@@ -4030,6 +4050,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                 type: Input
             }], downloadFileName: [{
                 type: Input
+            }], canPrint: [{
+                type: Input
             }] } });
 
 class NiceFilterExportDirective {
@@ -4238,7 +4260,10 @@ class NiceFilterQueryParamsDirective {
         this.router = router;
         this.init = new EventEmitter();
         this.unsubscribeAll$ = new Subject();
-        this.initialized = false;
+        this._initialized = false;
+    }
+    get initialized() {
+        return this._initialized;
     }
     ngOnInit() {
         this.query.selectFilterParameters().pipe(takeUntil(this.unsubscribeAll$)).subscribe((parameters) => {
@@ -4267,13 +4292,18 @@ class NiceFilterQueryParamsDirective {
         });
     }
     loadQueryParams() {
-        this.route.queryParams
-            .pipe(takeUntil(this.unsubscribeAll$), map((params) => {
+        combineLatest([
+            this.route.queryParams.pipe(map((params) => params.start), distinct()),
+            this.route.queryParams.pipe(map((params) => params.length), distinct()),
+            this.route.queryParams.pipe(map((params) => params.order), distinct()),
+            this.route.queryParams.pipe(map((params) => params.search), distinct()),
+            this.route.queryParams.pipe(map((params) => params.rules), distinct()),
+        ]).pipe(takeUntil(this.unsubscribeAll$), map(() => {
+            const params = this.route.snapshot.queryParams;
             return {
                 params: QueryParamsUtils.extractFilterParameters(params)
             };
-        }))
-            .subscribe(({ params }) => {
+        })).subscribe(({ params }) => {
             if (!QueryParamsUtils.hasFilterParameters(params) || Object.keys(params).length === 0) {
                 params = { ...this.query.getValue().filterParameters };
             }
@@ -4282,10 +4312,9 @@ class NiceFilterQueryParamsDirective {
                 !filterResult) {
                 this.service.setParameters(params, false);
             }
-            if (!this.initialized) {
-                this.initialized = true;
+            if (!this._initialized) {
+                this._initialized = true;
                 this.init.emit();
-                this.service.filter();
             }
         });
     }
@@ -4332,16 +4361,8 @@ class NiceBaseFilterViewComponent {
         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.autoLoad(autoLoad);
+        this.loadConfig(loadConfig, configQueryParams);
         this.filterViewLoading$ = this.filterViewQuery.selectLoading();
     }
     /**
@@ -4395,9 +4416,38 @@ class NiceBaseFilterViewComponent {
     removeRule(id, reload = true) {
         this.filterViewService.removeRule(id, reload);
     }
+    autoLoad(autoLoad) {
+        const { autoLoad: defaultAutoLoad } = this.filterViewQuery.getValue();
+        if (!this.queryParams) {
+            if (autoLoad && defaultAutoLoad) {
+                this.filterViewService.filter();
+            }
+            else {
+                this.filterViewService.setAutoLoad(autoLoad);
+            }
+            return;
+        }
+        if (!autoLoad && defaultAutoLoad) {
+            this.filterViewService.setAutoLoad(autoLoad);
+            return;
+        }
+        this.queryParams.init.pipe(take(1)).subscribe(() => this.loadData());
+    }
+    loadConfig(loadConfig, configQueryParams) {
+        if (loadConfig === true) {
+            this.filterViewService.loadConfig(configQueryParams);
+            return;
+        }
+        if (loadConfig === false) {
+            return;
+        }
+        if (this.advancedFiltersButton || this.advancedFilters) {
+            this.filterViewService.loadConfig(configQueryParams);
+        }
+    }
 }
 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 });
+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 }, { 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 }], ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceBaseFilterViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -4409,6 +4459,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
             }], filterViewQuery: [{
                 type: ViewChild,
                 args: [NiceFilterViewComponent, { read: NiceFilterViewQuery, static: true }]
+            }], queryParams: [{
+                type: ViewChild,
+                args: [NiceFilterQueryParamsDirective, { static: true }]
+            }], advancedFiltersButton: [{
+                type: ViewChild,
+                args: [NiceAdvancedFiltersButtonComponent, { static: true }]
+            }], advancedFilters: [{
+                type: ViewChild,
+                args: [NiceAdvancedFiltersComponent, { static: true }]
             }] } });
 
 class NiceFilterViewModule {
@@ -4573,8 +4632,10 @@ class SelectableListStateQuery extends QueryEntity {
 }
 
 class SelectableListStateService {
-    constructor(store, preloadService, options) {
+    constructor(store, route, router, preloadService, options) {
         this.store = store;
+        this.route = route;
+        this.router = router;
         this.preloadService = preloadService;
         this.options = options;
     }
@@ -4611,34 +4672,44 @@ class SelectableListStateService {
         this.store.update((state) => ({
             unselectedEntity: arrayRemove(state.unselectedEntity, id)
         }));
-        if (!this.preloadService) {
-            this.store.add({
-                [this.idKey]: id,
-                loaded: false
+        this.store.add({
+            [this.idKey]: id,
+            loaded: false
+        });
+        if (this.preloadService) {
+            const entity = await this.preloadService.loadEntityById(id);
+            this.store.upsert(id, {
+                ...entity,
+                loaded: true
             });
         }
-        const entity = await this.preloadService.loadEntityById(id);
-        return this.store.add({
-            ...entity,
-            loaded: true
-        });
+    }
+    async selectMany(ids, active) {
+        this.store.add(ids.map((id) => ({
+            [this.idKey]: id,
+            loaded: false
+        })));
+        if (active) {
+            this.store.setActive(active);
+            await this.loadEntities(true);
+        }
     }
     async selectEntity(entity) {
         this.store.update((state) => ({
             unselectedEntity: arrayRemove(state.unselectedEntity, entity[this.idKey])
         }));
-        if (!this.preloadService) {
-            return this.store.upsert(entity[this.idKey], { ...entity, loaded: true });
+        this.store.upsert(entity[this.idKey], { ...entity, loaded: true });
+        if (this.preloadService) {
+            const preloadedEntity = await this.preloadService.reloadEntity(entity);
+            this.store.upsert(preloadedEntity[this.idKey], { ...preloadedEntity, loaded: true });
         }
-        const preloadedEntity = await this.preloadService.reloadEntity(entity);
-        return this.store.upsert(preloadedEntity[this.idKey], { ...preloadedEntity, loaded: true });
     }
     async selectManyEntities(entities) {
         if (!this.preloadService) {
             return this.store.upsertMany(entities.map((entity) => ({ ...entity, loaded: true })));
         }
         const preloadedEntities = await this.preloadService.reloadEntities(entities);
-        return this.store.upsertMany(preloadedEntities.map((preloadedEntity) => ({ ...preloadedEntity, loaded: true })));
+        this.store.upsertMany(preloadedEntities.map((preloadedEntity) => ({ ...preloadedEntity, loaded: true })));
     }
     unselectAll() {
         this.store.set([]);
@@ -4662,6 +4733,9 @@ class SelectableListStateService {
     unselectManyEntities(entities) {
         this.store.remove(entities.map((entity) => entity[this.idKey]));
     }
+    updateEntity(entity) {
+        this.store.update(entity[this.idKey], entity);
+    }
     async setEntities(ids, activeId) {
         this.store.update({
             unselectedEntity: [],
@@ -4674,6 +4748,7 @@ class SelectableListStateService {
         if (activeId) {
             this.store.setActive(activeId);
         }
+        await this.loadEntities(true);
     }
     async next() {
         const { ids, active } = this.store.getValue();
@@ -4750,11 +4825,26 @@ class SelectableListStateService {
         }
         return toLoad;
     }
+    generateQueryParams() {
+        const { ids, active } = this.store.getValue();
+        return {
+            selection: ids.length ? ids : null,
+            selected: active ?? null
+        };
+    }
+    setQueryParams() {
+        this.router.navigate([], {
+            queryParams: this.generateQueryParams(),
+            queryParamsHandling: "merge"
+        });
+    }
 }
 
 class SelectableListService {
-    constructor(providers) {
+    constructor(providers, route, router) {
         this.providers = providers;
+        this.route = route;
+        this.router = router;
         this.stores = new Map();
     }
     createState(name, options) {
@@ -4771,10 +4861,10 @@ class SelectableListService {
         const provider = this.providers?.find((p) => p.state === stateName);
         const state = this.getState(stateName);
         if (state) {
-            return new SelectableListStateService(state.store, provider, options);
+            return new SelectableListStateService(state.store, this.route, this.router, provider, options);
         }
         const newState = this.createState(stateName, options);
-        return new SelectableListStateService(newState.store, provider, options);
+        return new SelectableListStateService(newState.store, this.route, this.router, provider, options);
     }
     query(stateName) {
         const state = this.getState(stateName);
@@ -4784,7 +4874,7 @@ class SelectableListService {
         return state.query;
     }
 }
-SelectableListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: SelectableListService, deps: [{ token: NICE_PRELOAD_SELECTED_ENTITIES_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+SelectableListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: SelectableListService, deps: [{ token: NICE_PRELOAD_SELECTED_ENTITIES_PROVIDER, optional: true }, { token: i2.ActivatedRoute }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
 SelectableListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: SelectableListService, providedIn: "root" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: SelectableListService, decorators: [{
             type: Injectable,
@@ -4794,12 +4884,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                 }, {
                     type: Inject,
                     args: [NICE_PRELOAD_SELECTED_ENTITIES_PROVIDER]
-                }] }]; } });
+                }] }, { type: i2.ActivatedRoute }, { type: i2.Router }]; } });
 
 class SelectableListContentService {
     constructor() {
         this._state = null;
         this._checkboxes = new QueryList();
+        this.defaultOptions = { idKey: "id", preloadWindow: 2 };
+    }
+    get options() {
+        return this._options ?? this.defaultOptions;
     }
     get state() {
         return this._state;
@@ -4807,6 +4901,12 @@ class SelectableListContentService {
     get checkboxes() {
         return this._checkboxes;
     }
+    setOptions(options) {
+        this._options = {
+            ...this.defaultOptions,
+            ...options
+        };
+    }
     setState(state) {
         this._state = state;
     }
@@ -4848,6 +4948,7 @@ class NiceSelectableListCheckboxDirective {
     ngOnDestroy() {
         this.unsubscribeAll$.next();
         this.unsubscribeAll$.complete();
+        this.initialized = false;
     }
     ngDoCheck() {
         if (this.selectPage && !this.initialized) {
@@ -4902,12 +5003,19 @@ class NiceSelectableListCheckboxDirective {
         });
     }
     updateCheckboxState() {
+        const count = this.selectableListStateQuery.getCount();
         const checkboxes = this.service.checkboxes.filter((checkbox) => !checkbox.selectPage);
         if (!checkboxes.length) {
+            if (!count) {
+                this.checkbox.indeterminate = false;
+                this.checkbox.checked = false;
+                return;
+            }
+            this.checkbox.indeterminate = true;
+            this.checkbox.checked = false;
             return;
         }
         this.initialized = true;
-        const count = this.selectableListStateQuery.getCount();
         if (!count) {
             this.checkbox.indeterminate = false;
             this.checkbox.checked = false;
@@ -4978,31 +5086,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
 
 // tslint:disable-next-line:directive-class-suffix
 class NiceSelectableListDirective {
-    constructor(service) {
+    constructor(service, selectableListService, route) {
         this.service = service;
-        this.defaultOptions = { idKey: "id", preloadWindow: 2 };
+        this.selectableListService = selectableListService;
+        this.route = route;
+        this.unsubscribeAll$ = new Subject();
+        this.unsubscribeQuerySub$ = new Subject();
     }
     ngOnInit() {
-        if (!this.options) {
-            this.options = { ...this.defaultOptions };
-        }
+        combineLatest([
+            this.route.queryParams.pipe(map((params) => params.selection), distinct()),
+            this.route.queryParams.pipe(map((params) => params.selected), distinct())
+        ]).pipe(takeUntil(this.unsubscribeAll$)).subscribe(([selection, selected]) => {
+            if (!selection) {
+                this.stateService.setQueryParams();
+                return;
+            }
+            const newSelection = typeof selection === "string" ? [+selection] : selection.map((s) => +s);
+            const newSelected = selected ? +selected : null;
+            const { ids, active } = this.stateQuery.getValue();
+            if (!ids.length || !ids.every((id) => newSelection.includes(id))) {
+                this.stateService.setEntities(newSelection, newSelected);
+                return;
+            }
+            if (newSelected && active !== newSelected) {
+                this.stateService.setActive(newSelected);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.unsubscribeAll$.next();
+        this.unsubscribeAll$.complete();
+        this.unsubscribeQuerySub$.next();
+        this.unsubscribeQuerySub$.complete();
     }
     ngOnChanges(changes) {
         if ("options" in changes) {
-            this.options = {
-                ...this.defaultOptions,
-                ...changes.options.currentValue
-            };
+            this.service.setOptions(this.options);
         }
         if ("state" in changes) {
             this.service.setState(this.state);
+            this.stateService = this.selectableListService.withState(this.state);
+            this.stateQuery = this.selectableListService.query(this.state);
+            this.listenOnStateChanges();
         }
     }
     ngAfterContentInit() {
         this.service.setCheckboxes(this.checkboxes);
     }
+    listenOnStateChanges() {
+        this.unsubscribeQuerySub$.next();
+        this.stateQuery.selectEntityAction([
+            EntityActions.Add,
+            EntityActions.Remove,
+            EntityActions.Set
+        ]).pipe(takeUntil(this.unsubscribeQuerySub$)).subscribe(() => {
+            this.stateService.setQueryParams();
+        });
+        this.stateQuery.selectActiveId().pipe(takeUntil(this.unsubscribeQuerySub$)).subscribe(() => this.stateService.setQueryParams());
+    }
 }
-NiceSelectableListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceSelectableListDirective, deps: [{ token: SelectableListContentService }], target: i0.ɵɵFactoryTarget.Directive });
+NiceSelectableListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceSelectableListDirective, deps: [{ token: SelectableListContentService }, { token: SelectableListService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Directive });
 NiceSelectableListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.3", type: NiceSelectableListDirective, selector: "[niceSelectableList]", inputs: { state: "state", options: "options" }, providers: [SelectableListContentService], queries: [{ propertyName: "checkboxes", predicate: NiceSelectableListCheckboxDirective, descendants: true }], usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceSelectableListDirective, decorators: [{
             type: Directive,
@@ -5010,7 +5154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                     selector: "[niceSelectableList]",
                     providers: [SelectableListContentService]
                 }]
-        }], ctorParameters: function () { return [{ type: SelectableListContentService }]; }, propDecorators: { state: [{
+        }], ctorParameters: function () { return [{ type: SelectableListContentService }, { type: SelectableListService }, { type: i2.ActivatedRoute }]; }, propDecorators: { state: [{
                 type: Input
             }], options: [{
                 type: Input