@recursyve/nice-data-filter-kit 14.4.0 → 14.4.2

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

@@ -1,16 +1,16 @@
 import { plainToInstance } from 'class-transformer';
 import { map, takeUntil, debounceTime, switchMap, distinctUntilChanged, withLatestFrom } from 'rxjs/operators';
 import { HttpParams } from '@angular/common/http';
-import * as i5 from '@recursyve/nice-ui-kit.v2';
+import * as i5$1 from '@recursyve/nice-ui-kit.v2';
 import { isNullOrUndefined, ObjectUtils, FileUtils, ArrayUtils, ExportBottomSheetComponent, NiceLoadingSpinnerModule, NiceTypeaheadModule, NiceExportBottomSheetModule, NiceAsyncTypeaheadProvider, NICE_ASYNC_TYPEAHEAD_PROVIDER, NiceAsyncTypeaheadModule } from '@recursyve/nice-ui-kit.v2';
 import * as i0 from '@angular/core';
-import { Directive, Input, NgModule, Injectable, Inject, InjectionToken, Optional, Pipe, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Output, HostListener, forwardRef, TemplateRef, ContentChild, ContentChildren, ViewChild, QueryList } from '@angular/core';
+import { Directive, Input, NgModule, Injectable, Inject, InjectionToken, Optional, Pipe, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Output, HostListener, forwardRef, TemplateRef, ContentChild, ContentChildren, QueryList, ViewChild } from '@angular/core';
 import { Store, StoreConfig, Query, arrayAdd, arrayUpsert, arrayRemove, EntityStore, QueryEntity, EntityActions } from '@datorama/akita';
 import { combineLatest, Subject, firstValueFrom, of, lastValueFrom, startWith, tap, distinct, take } from 'rxjs';
 import { __decorate, __metadata, __awaiter, __rest } from 'tslib';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i3$4 from '@angular/material/bottom-sheet';
+import * as i4$2 from '@angular/material/bottom-sheet';
 import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
 import * as i2$1 from '@angular/common';
 import { CommonModule, AsyncPipe, NgIf, NgTemplateOutlet } from '@angular/common';
@@ -18,7 +18,7 @@ import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import * as i8 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i4$1 from '@angular/material/icon';
+import * as i5 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i10 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -46,11 +46,11 @@ import * as i6 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i3$2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i4$2 from 'ngx-mask';
+import * as i4$1 from 'ngx-mask';
 import { NgxMaskModule } from 'ngx-mask';
 import * as i3$3 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i5$1 from '@angular/material/datepicker';
+import * as i5$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i1$2 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
@@ -566,7 +566,8 @@ class FilterUtils {
                 rules: (_e = filterParameters.rules) !== null && _e !== void 0 ? _e : []
             },
             order: OrderUtils.combineOrders(filterParameters.order, filterParameters.fallbackOrder),
-            data: filterParameters.data
+            data: filterParameters.data,
+            groupBy: filterParameters.groupBy
         };
     }
     static filterChangeNeedsRefresh(currentFilters, newFilters) {
@@ -1424,7 +1425,7 @@ class FilterSelectionComponent {
     }
 }
 FilterSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: FilterSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilterSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: FilterSelectionComponent, selector: "nice-filter-selection", inputs: { filterConfigs: "filterConfigs", loading: "loading" }, outputs: { filterSelected: "filterSelected" }, ngImport: i0, template: "<mat-card class=\"flex flex-row flex-wrap filter-selection-container\" [niceLoadingOverlay]=\"loading\">\n    <mat-list class=\"flex flex-col flex-full\" [class.double-groups]=\"filterGroups.length > 1\" *ngFor=\"let group of filterGroups\">\n        <mat-list-item *ngIf=\"group[0].key | filterGroupIcon as icon\">\n            <i mat-list-icon class=\"text-accent fal\" [ngClass]=\"icon.class\" *ngIf=\"icon.class\"></i>\n            <mat-icon mat-list-icon class=\"text-accent\" [svgIcon]=\"icon.svgIcon\" *ngIf=\"icon.svgIcon\"></mat-icon>\n            <mat-icon mat-list-icon class=\"text-accent\" *ngIf=\"icon.matIcon\">{{ icon.matIcon }}</mat-icon>\n            <strong mat-line>{{ group[0].name }}</strong>\n        </mat-list-item>\n        <mat-list-item (click)=\"selectFilter(filter)\" mat-ripple class=\"filter\" *ngFor=\"let filter of group[1]\">\n            {{ filter?.name }}\n        </mat-list-item>\n    </mat-list>\n</mat-card>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i11.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i3.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { kind: "component", type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "directive", type: i4.MatLine, selector: "[mat-line], [matLine]" }, { kind: "directive", type: i3.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { kind: "pipe", type: FilterGroupIconPipe, name: "filterGroupIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+FilterSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: FilterSelectionComponent, selector: "nice-filter-selection", inputs: { filterConfigs: "filterConfigs", loading: "loading" }, outputs: { filterSelected: "filterSelected" }, ngImport: i0, template: "<mat-card class=\"flex flex-row flex-wrap filter-selection-container\" [niceLoadingOverlay]=\"loading\">\n    <mat-list class=\"flex flex-col flex-full\" [class.double-groups]=\"filterGroups.length > 1\" *ngFor=\"let group of filterGroups\">\n        <mat-list-item *ngIf=\"group[0].key | filterGroupIcon as icon\">\n            <i mat-list-icon class=\"text-accent fal\" [ngClass]=\"icon.class\" *ngIf=\"icon.class\"></i>\n            <mat-icon mat-list-icon class=\"text-accent\" [svgIcon]=\"icon.svgIcon\" *ngIf=\"icon.svgIcon\"></mat-icon>\n            <mat-icon mat-list-icon class=\"text-accent\" *ngIf=\"icon.matIcon\">{{ icon.matIcon }}</mat-icon>\n            <strong mat-line>{{ group[0].name }}</strong>\n        </mat-list-item>\n        <mat-list-item (click)=\"selectFilter(filter)\" mat-ripple class=\"filter\" *ngFor=\"let filter of group[1]\">\n            {{ filter?.name }}\n        </mat-list-item>\n    </mat-list>\n</mat-card>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i11.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i3.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { kind: "component", type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "directive", type: i4.MatLine, selector: "[mat-line], [matLine]" }, { kind: "directive", type: i3.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { kind: "pipe", type: FilterGroupIconPipe, name: "filterGroupIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: FilterSelectionComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-filter-selection", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"flex flex-row flex-wrap filter-selection-container\" [niceLoadingOverlay]=\"loading\">\n    <mat-list class=\"flex flex-col flex-full\" [class.double-groups]=\"filterGroups.length > 1\" *ngFor=\"let group of filterGroups\">\n        <mat-list-item *ngIf=\"group[0].key | filterGroupIcon as icon\">\n            <i mat-list-icon class=\"text-accent fal\" [ngClass]=\"icon.class\" *ngIf=\"icon.class\"></i>\n            <mat-icon mat-list-icon class=\"text-accent\" [svgIcon]=\"icon.svgIcon\" *ngIf=\"icon.svgIcon\"></mat-icon>\n            <mat-icon mat-list-icon class=\"text-accent\" *ngIf=\"icon.matIcon\">{{ icon.matIcon }}</mat-icon>\n            <strong mat-line>{{ group[0].name }}</strong>\n        </mat-list-item>\n        <mat-list-item (click)=\"selectFilter(filter)\" mat-ripple class=\"filter\" *ngFor=\"let filter of group[1]\">\n            {{ filter?.name }}\n        </mat-list-item>\n    </mat-list>\n</mat-card>\n" }]
@@ -1597,7 +1598,7 @@ SelectFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             useExisting: forwardRef(() => SelectFilterComponent),
             multi: true
         }
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field 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: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { 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 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: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5$1.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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: SelectFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-select-filter", encapsulation: ViewEncapsulation.None, providers: [
@@ -1624,7 +1625,7 @@ TextFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             useExisting: forwardRef(() => TextFilterComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"flex-auto\">\n    <input matInput [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" [mask]=\"(filterConfig?.mask) || ''\" [validation]=\"false\" type=\"text\" />\n</mat-form-field>\n", dependencies: [{ 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: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4$2.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"flex-auto\">\n    <input matInput [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" [mask]=\"(filterConfig?.mask) || ''\" [validation]=\"false\" type=\"text\" />\n</mat-form-field>\n", dependencies: [{ 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: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4$1.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: TextFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-text-filter", encapsulation: ViewEncapsulation.None, providers: [
@@ -1695,7 +1696,7 @@ DateFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             useExisting: forwardRef(() => DateFilterComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"flex-auto\">\n    <input matInput [matDatepicker]=\"picker\" [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" />\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\n        <mat-icon matDatepickerToggleIcon [svgIcon]=\"icons.datePicker.svgIcon\">{{ icons.datePicker.matIcon }}</mat-icon>\n    </mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n", dependencies: [{ 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: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$1.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }], encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"flex-auto\">\n    <input matInput [matDatepicker]=\"picker\" [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" />\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\n        <mat-icon matDatepickerToggleIcon [svgIcon]=\"icons.datePicker.svgIcon\">{{ icons.datePicker.matIcon }}</mat-icon>\n    </mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n", dependencies: [{ 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: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: DateFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-date-filter", encapsulation: ViewEncapsulation.None, providers: [
@@ -1767,7 +1768,7 @@ class RuleComponent {
     }
 }
 RuleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: RuleComponent, deps: [{ token: QUERY_BUILDER_ICONS, optional: true }, { token: i1$1.FormGroupName }], target: i0.ɵɵFactoryTarget.Component });
-RuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: RuleComponent, selector: "nice-rule", inputs: { filterConfigs: "filterConfigs" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"flex flex-row justify-start items-center gap-2.5\">\n    <button\n        class=\"select-filter\"\n        mat-raised-button\n        color=\"accent\"\n        niceQueryBuilderTrigger\n        [queryBuilderFilters]=\"filterConfigs\"\n        (queryBuilderFilterSelected)=\"onUpdateFilterConfig($event)\"\n    >\n        <div class=\"flex flex-row justify-between items-center\">\n            <div class=\"config-name\">{{ filterConfig?.name }}</div>\n            <mat-icon [svgIcon]=\"icons.arrowDown.svgIcon\">{{ icons.arrowDown.matIcon }}</mat-icon>\n        </div>\n    </button>\n    <div class=\"flex flex-col md:flex-row flex-auto justify-start items-center gap-2.5\">\n        <mat-form-field class=\"rule-form-field\">\n            <mat-select\n                class=\"rule-operator\"\n                [ngModel]=\"filterOperator\"\n                (ngModelChange)=\"onUpdateFilterOperator($event)\"\n            >\n                <mat-option *ngFor=\"let operator of filterConfig?.operators\" [value]=\"operator.id\">\n                    {{ operator?.name }}\n                </mat-option>\n            </mat-select>\n        </mat-form-field>\n        <div class=\"flex flex-col flex-grow flex-shrink md:flex-row flex-wrap\" [formGroup]=\"formGroup\">\n            <ng-container formArrayName=\"rules\">\n                <div\n                    class=\"rule-container flex flex-col md:flex-row flex-full justify-start items-center gap-2.5\"\n                    [class.is-double-input]=\"!!isDoubleInput\"\n                    [class.is-single-input]=\"!isDoubleInput\"\n                    [formGroupName]=\"i\"\n                    *ngFor=\"let rule of rules.controls; let i = index\"\n                >\n                    <ng-container *ngIf=\"isSingleInput\">\n                        <ng-container [ngSwitch]=\"filterConfig?.type\">\n                            <nice-text-filter *ngSwitchCase=\"'text'\" class=\"flex flex-auto\" formControlName=\"value\" [filterConfig]=\"filterConfig\"></nice-text-filter>\n                            <nice-number-filter *ngSwitchCase=\"'number'\" class=\"flex flex-auto\" formControlName=\"value\"></nice-number-filter>\n                            <nice-radio-filter\n                                *ngSwitchCase=\"'radio'\"\n                                class=\"flex flex-auto mb-4\"\n                                formControlName=\"value\"\n                                [filterConfig]=\"filterConfig\"\n                            ></nice-radio-filter>\n                            <nice-select-filter\n                                *ngSwitchCase=\"'select'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                                [filterConfig]=\"filterConfig\"\n                            ></nice-select-filter>\n                            <nice-date-filter *ngSwitchCase=\"'date'\" class=\"flex flex-auto\" formControlName=\"value\"></nice-date-filter>\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngIf=\"isDoubleInput\">\n                        <ng-container [ngSwitch]=\"filterConfig?.type\">\n                            <nice-text-filter\n                                *ngSwitchCase=\"'text'\"\n                                [filterConfig]=\"filterConfig\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                            ></nice-text-filter>\n                            <nice-number-filter\n                                *ngSwitchCase=\"'number'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                            ></nice-number-filter>\n                            <nice-radio-filter\n                                *ngSwitchCase=\"'radio'\"\n                                class=\"flex flex-auto mb-4\"\n                                formControlName=\"value\"\n                                [filterConfig]=\"filterConfig\"\n                            ></nice-radio-filter>\n                            <nice-select-filter\n                                *ngSwitchCase=\"'select'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                                [filterConfig]=\"filterConfig\"\n                            ></nice-select-filter>\n                            <nice-date-filter\n                                *ngSwitchCase=\"'date'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                            ></nice-date-filter>\n                        </ng-container>\n                        <h3 class=\"aligned-text\">\n                            {{ \"components.query_builder.rule.conditions.and\" | translate }}\n                        </h3>\n                        <ng-container [ngSwitch]=\"filterConfig?.type\">\n                            <nice-text-filter\n                                *ngSwitchCase=\"'text'\"\n                                [filterConfig]=\"filterConfig\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"secondValue\"\n                            ></nice-text-filter>\n                            <nice-number-filter\n                                *ngSwitchCase=\"'number'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"secondValue\"\n                            ></nice-number-filter>\n                            <nice-radio-filter\n                                *ngSwitchCase=\"'radio'\"\n                                class=\"flex flex-auto mb-4\"\n                                formControlName=\"secondValue\"\n                                [filterConfig]=\"filterConfig\"\n                            ></nice-radio-filter>\n                            <nice-select-filter\n                                *ngSwitchCase=\"'select'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"secondValue\"\n                                [filterConfig]=\"filterConfig\"\n                            ></nice-select-filter>\n                            <nice-date-filter\n                                *ngSwitchCase=\"'date'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"secondValue\"\n                            ></nice-date-filter>\n                        </ng-container>\n                    </ng-container>\n                    <div class=\"rule-buttons flex flex-row gap-2\">\n                        <button mat-mini-fab class=\"or-button aligned-button\" (click)=\"onClickOr()\">\n                            {{ \"components.query_builder.rule.conditions.or\" | translate }}\n                        </button>\n                        <button class=\"aligned-button\" mat-icon-button color=\"warn\" (click)=\"onClickDelete(i)\">\n                            <mat-icon [svgIcon]=\"icons.delete.svgIcon\">{{ icons.delete.matIcon }}</mat-icon>\n                        </button>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { 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: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }, { kind: "component", type: SelectFilterComponent, selector: "nice-select-filter", inputs: ["filterConfig"] }, { kind: "component", type: TextFilterComponent, selector: "nice-text-filter", inputs: ["filterConfig"] }, { kind: "component", type: NumberFilterComponent, selector: "nice-number-filter" }, { kind: "component", type: RadioFilterComponent, selector: "nice-radio-filter", inputs: ["filterConfig"] }, { kind: "component", type: DateFilterComponent, selector: "nice-date-filter" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+RuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: RuleComponent, selector: "nice-rule", inputs: { filterConfigs: "filterConfigs" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"flex flex-row justify-start items-center gap-2.5\">\n    <button\n        class=\"select-filter\"\n        mat-raised-button\n        color=\"accent\"\n        niceQueryBuilderTrigger\n        [queryBuilderFilters]=\"filterConfigs\"\n        (queryBuilderFilterSelected)=\"onUpdateFilterConfig($event)\"\n    >\n        <div class=\"flex flex-row justify-between items-center\">\n            <div class=\"config-name\">{{ filterConfig?.name }}</div>\n            <mat-icon [svgIcon]=\"icons.arrowDown.svgIcon\">{{ icons.arrowDown.matIcon }}</mat-icon>\n        </div>\n    </button>\n    <div class=\"flex flex-col md:flex-row flex-auto justify-start items-center gap-2.5\">\n        <mat-form-field class=\"rule-form-field\">\n            <mat-select\n                class=\"rule-operator\"\n                [ngModel]=\"filterOperator\"\n                (ngModelChange)=\"onUpdateFilterOperator($event)\"\n            >\n                <mat-option *ngFor=\"let operator of filterConfig?.operators\" [value]=\"operator.id\">\n                    {{ operator?.name }}\n                </mat-option>\n            </mat-select>\n        </mat-form-field>\n        <div class=\"flex flex-col flex-grow flex-shrink md:flex-row flex-wrap\" [formGroup]=\"formGroup\">\n            <ng-container formArrayName=\"rules\">\n                <div\n                    class=\"rule-container flex flex-col md:flex-row flex-full justify-start items-center gap-2.5\"\n                    [class.is-double-input]=\"!!isDoubleInput\"\n                    [class.is-single-input]=\"!isDoubleInput\"\n                    [formGroupName]=\"i\"\n                    *ngFor=\"let rule of rules.controls; let i = index\"\n                >\n                    <ng-container *ngIf=\"isSingleInput\">\n                        <ng-container [ngSwitch]=\"filterConfig?.type\">\n                            <nice-text-filter *ngSwitchCase=\"'text'\" class=\"flex flex-auto\" formControlName=\"value\" [filterConfig]=\"filterConfig\"></nice-text-filter>\n                            <nice-number-filter *ngSwitchCase=\"'number'\" class=\"flex flex-auto\" formControlName=\"value\"></nice-number-filter>\n                            <nice-radio-filter\n                                *ngSwitchCase=\"'radio'\"\n                                class=\"flex flex-auto mb-4\"\n                                formControlName=\"value\"\n                                [filterConfig]=\"filterConfig\"\n                            ></nice-radio-filter>\n                            <nice-select-filter\n                                *ngSwitchCase=\"'select'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                                [filterConfig]=\"filterConfig\"\n                            ></nice-select-filter>\n                            <nice-date-filter *ngSwitchCase=\"'date'\" class=\"flex flex-auto\" formControlName=\"value\"></nice-date-filter>\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngIf=\"isDoubleInput\">\n                        <ng-container [ngSwitch]=\"filterConfig?.type\">\n                            <nice-text-filter\n                                *ngSwitchCase=\"'text'\"\n                                [filterConfig]=\"filterConfig\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                            ></nice-text-filter>\n                            <nice-number-filter\n                                *ngSwitchCase=\"'number'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                            ></nice-number-filter>\n                            <nice-radio-filter\n                                *ngSwitchCase=\"'radio'\"\n                                class=\"flex flex-auto mb-4\"\n                                formControlName=\"value\"\n                                [filterConfig]=\"filterConfig\"\n                            ></nice-radio-filter>\n                            <nice-select-filter\n                                *ngSwitchCase=\"'select'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                                [filterConfig]=\"filterConfig\"\n                            ></nice-select-filter>\n                            <nice-date-filter\n                                *ngSwitchCase=\"'date'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                            ></nice-date-filter>\n                        </ng-container>\n                        <h3 class=\"aligned-text\">\n                            {{ \"components.query_builder.rule.conditions.and\" | translate }}\n                        </h3>\n                        <ng-container [ngSwitch]=\"filterConfig?.type\">\n                            <nice-text-filter\n                                *ngSwitchCase=\"'text'\"\n                                [filterConfig]=\"filterConfig\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"secondValue\"\n                            ></nice-text-filter>\n                            <nice-number-filter\n                                *ngSwitchCase=\"'number'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"secondValue\"\n                            ></nice-number-filter>\n                            <nice-radio-filter\n                                *ngSwitchCase=\"'radio'\"\n                                class=\"flex flex-auto mb-4\"\n                                formControlName=\"secondValue\"\n                                [filterConfig]=\"filterConfig\"\n                            ></nice-radio-filter>\n                            <nice-select-filter\n                                *ngSwitchCase=\"'select'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"secondValue\"\n                                [filterConfig]=\"filterConfig\"\n                            ></nice-select-filter>\n                            <nice-date-filter\n                                *ngSwitchCase=\"'date'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"secondValue\"\n                            ></nice-date-filter>\n                        </ng-container>\n                    </ng-container>\n                    <div class=\"rule-buttons flex flex-row gap-2\">\n                        <button mat-mini-fab class=\"or-button aligned-button\" (click)=\"onClickOr()\">\n                            {{ \"components.query_builder.rule.conditions.or\" | translate }}\n                        </button>\n                        <button class=\"aligned-button\" mat-icon-button color=\"warn\" (click)=\"onClickDelete(i)\">\n                            <mat-icon [svgIcon]=\"icons.delete.svgIcon\">{{ icons.delete.matIcon }}</mat-icon>\n                        </button>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { 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: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }, { kind: "component", type: SelectFilterComponent, selector: "nice-select-filter", inputs: ["filterConfig"] }, { kind: "component", type: TextFilterComponent, selector: "nice-text-filter", inputs: ["filterConfig"] }, { kind: "component", type: NumberFilterComponent, selector: "nice-number-filter" }, { kind: "component", type: RadioFilterComponent, selector: "nice-radio-filter", inputs: ["filterConfig"] }, { kind: "component", type: DateFilterComponent, selector: "nice-date-filter" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: RuleComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-rule", encapsulation: ViewEncapsulation.None, template: "<div class=\"flex flex-row justify-start items-center gap-2.5\">\n    <button\n        class=\"select-filter\"\n        mat-raised-button\n        color=\"accent\"\n        niceQueryBuilderTrigger\n        [queryBuilderFilters]=\"filterConfigs\"\n        (queryBuilderFilterSelected)=\"onUpdateFilterConfig($event)\"\n    >\n        <div class=\"flex flex-row justify-between items-center\">\n            <div class=\"config-name\">{{ filterConfig?.name }}</div>\n            <mat-icon [svgIcon]=\"icons.arrowDown.svgIcon\">{{ icons.arrowDown.matIcon }}</mat-icon>\n        </div>\n    </button>\n    <div class=\"flex flex-col md:flex-row flex-auto justify-start items-center gap-2.5\">\n        <mat-form-field class=\"rule-form-field\">\n            <mat-select\n                class=\"rule-operator\"\n                [ngModel]=\"filterOperator\"\n                (ngModelChange)=\"onUpdateFilterOperator($event)\"\n            >\n                <mat-option *ngFor=\"let operator of filterConfig?.operators\" [value]=\"operator.id\">\n                    {{ operator?.name }}\n                </mat-option>\n            </mat-select>\n        </mat-form-field>\n        <div class=\"flex flex-col flex-grow flex-shrink md:flex-row flex-wrap\" [formGroup]=\"formGroup\">\n            <ng-container formArrayName=\"rules\">\n                <div\n                    class=\"rule-container flex flex-col md:flex-row flex-full justify-start items-center gap-2.5\"\n                    [class.is-double-input]=\"!!isDoubleInput\"\n                    [class.is-single-input]=\"!isDoubleInput\"\n                    [formGroupName]=\"i\"\n                    *ngFor=\"let rule of rules.controls; let i = index\"\n                >\n                    <ng-container *ngIf=\"isSingleInput\">\n                        <ng-container [ngSwitch]=\"filterConfig?.type\">\n                            <nice-text-filter *ngSwitchCase=\"'text'\" class=\"flex flex-auto\" formControlName=\"value\" [filterConfig]=\"filterConfig\"></nice-text-filter>\n                            <nice-number-filter *ngSwitchCase=\"'number'\" class=\"flex flex-auto\" formControlName=\"value\"></nice-number-filter>\n                            <nice-radio-filter\n                                *ngSwitchCase=\"'radio'\"\n                                class=\"flex flex-auto mb-4\"\n                                formControlName=\"value\"\n                                [filterConfig]=\"filterConfig\"\n                            ></nice-radio-filter>\n                            <nice-select-filter\n                                *ngSwitchCase=\"'select'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                                [filterConfig]=\"filterConfig\"\n                            ></nice-select-filter>\n                            <nice-date-filter *ngSwitchCase=\"'date'\" class=\"flex flex-auto\" formControlName=\"value\"></nice-date-filter>\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngIf=\"isDoubleInput\">\n                        <ng-container [ngSwitch]=\"filterConfig?.type\">\n                            <nice-text-filter\n                                *ngSwitchCase=\"'text'\"\n                                [filterConfig]=\"filterConfig\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                            ></nice-text-filter>\n                            <nice-number-filter\n                                *ngSwitchCase=\"'number'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                            ></nice-number-filter>\n                            <nice-radio-filter\n                                *ngSwitchCase=\"'radio'\"\n                                class=\"flex flex-auto mb-4\"\n                                formControlName=\"value\"\n                                [filterConfig]=\"filterConfig\"\n                            ></nice-radio-filter>\n                            <nice-select-filter\n                                *ngSwitchCase=\"'select'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                                [filterConfig]=\"filterConfig\"\n                            ></nice-select-filter>\n                            <nice-date-filter\n                                *ngSwitchCase=\"'date'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                            ></nice-date-filter>\n                        </ng-container>\n                        <h3 class=\"aligned-text\">\n                            {{ \"components.query_builder.rule.conditions.and\" | translate }}\n                        </h3>\n                        <ng-container [ngSwitch]=\"filterConfig?.type\">\n                            <nice-text-filter\n                                *ngSwitchCase=\"'text'\"\n                                [filterConfig]=\"filterConfig\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"secondValue\"\n                            ></nice-text-filter>\n                            <nice-number-filter\n                                *ngSwitchCase=\"'number'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"secondValue\"\n                            ></nice-number-filter>\n                            <nice-radio-filter\n                                *ngSwitchCase=\"'radio'\"\n                                class=\"flex flex-auto mb-4\"\n                                formControlName=\"secondValue\"\n                                [filterConfig]=\"filterConfig\"\n                            ></nice-radio-filter>\n                            <nice-select-filter\n                                *ngSwitchCase=\"'select'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"secondValue\"\n                                [filterConfig]=\"filterConfig\"\n                            ></nice-select-filter>\n                            <nice-date-filter\n                                *ngSwitchCase=\"'date'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"secondValue\"\n                            ></nice-date-filter>\n                        </ng-container>\n                    </ng-container>\n                    <div class=\"rule-buttons flex flex-row gap-2\">\n                        <button mat-mini-fab class=\"or-button aligned-button\" (click)=\"onClickOr()\">\n                            {{ \"components.query_builder.rule.conditions.or\" | translate }}\n                        </button>\n                        <button class=\"aligned-button\" mat-icon-button color=\"warn\" (click)=\"onClickDelete(i)\">\n                            <mat-icon [svgIcon]=\"icons.delete.svgIcon\">{{ icons.delete.matIcon }}</mat-icon>\n                        </button>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n" }]
@@ -1836,7 +1837,7 @@ NiceQueryBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             provide: GeneratedFormGroup,
             useFactory: ngxFormGeneratorFactory(QueryBuilderForm)
         }
-    ], ngImport: i0, template: "<div class=\"rules-container flex flex-col\" *ngIf=\"!loading\" [formGroup]=\"formGroup\">\n    <ng-container formArrayName=\"rules\">\n        <nice-rule\n            *ngFor=\"let rule of rules.controls; let i = index\"\n            (remove)=\"onClickDeleteRule(i)\"\n            [filterConfigs]=\"filterConfigs\"\n            [formGroupName]=\"i\"\n        ></nice-rule>\n    </ng-container>\n    <div class=\"flex justify-between\">\n        <button\n            class=\"add-button add-rule-button\"\n            mat-mini-fab\n            niceQueryBuilderTrigger\n            [queryBuilderFilters]=\"filterConfigs\"\n            (queryBuilderFilterSelected)=\"onClickAddRule($event)\"\n        >\n            <mat-icon [svgIcon]=\"icons.add.svgIcon\">{{ icons.add.matIcon }}</mat-icon>\n        </button>\n        <div class=\"flex flex-col md:flex-row gap-4\">\n            <!-- TODO: Support saved reports -->\n            <!--<button mat-button color=\"primary\" (click)=\"onClickSaveReport()\" *ngIf=\"canSave\">\n                <mat-icon class=\"mr-8\" fxHide.lt-md>save</mat-icon>\n                {{ \"components.query_builder.save_report\" | translate }}\n            </button>\n            <button mat-button color=\"primary\" (click)=\"onClickUpdateReport()\" *ngIf=\"!canSave\">\n                <mat-icon class=\"mr-8\" fxHide.lt-md>save</mat-icon>\n                {{ \"components.query_builder.update_report\" | translate }}\n            </button>-->\n            <button mat-stroked-button color=\"accent\" (click)=\"onClickApply()\">\n                {{ \"components.query_builder.update\" | translate }}\n                <mat-icon [svgIcon]=\"icons.refresh.svgIcon\">{{ icons.refresh.matIcon }}</mat-icon>\n            </button>\n        </div>\n    </div>\n</div>\n", styles: ["nice-query-builder .rules-container{position:relative}nice-query-builder .rules-container:before{content:\"\";position:absolute;top:32px;bottom:32px;left:46px;width:4px;background:rgba(0,0,0,.12)}nice-query-builder .save-report-button{height:36px}nice-query-builder .add-rule-button{margin-left:28px;margin-right:28px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }, { kind: "component", type: RuleComponent, selector: "nice-rule", inputs: ["filterConfigs"], outputs: ["remove"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    ], ngImport: i0, template: "<div class=\"rules-container flex flex-col\" *ngIf=\"!loading\" [formGroup]=\"formGroup\">\n    <ng-container formArrayName=\"rules\">\n        <nice-rule\n            *ngFor=\"let rule of rules.controls; let i = index\"\n            (remove)=\"onClickDeleteRule(i)\"\n            [filterConfigs]=\"filterConfigs\"\n            [formGroupName]=\"i\"\n        ></nice-rule>\n    </ng-container>\n    <div class=\"flex justify-between\">\n        <button\n            class=\"add-button add-rule-button\"\n            mat-mini-fab\n            niceQueryBuilderTrigger\n            [queryBuilderFilters]=\"filterConfigs\"\n            (queryBuilderFilterSelected)=\"onClickAddRule($event)\"\n        >\n            <mat-icon [svgIcon]=\"icons.add.svgIcon\">{{ icons.add.matIcon }}</mat-icon>\n        </button>\n        <div class=\"flex flex-col md:flex-row gap-4\">\n            <!-- TODO: Support saved reports -->\n            <!--<button mat-button color=\"primary\" (click)=\"onClickSaveReport()\" *ngIf=\"canSave\">\n                <mat-icon class=\"mr-8\" fxHide.lt-md>save</mat-icon>\n                {{ \"components.query_builder.save_report\" | translate }}\n            </button>\n            <button mat-button color=\"primary\" (click)=\"onClickUpdateReport()\" *ngIf=\"!canSave\">\n                <mat-icon class=\"mr-8\" fxHide.lt-md>save</mat-icon>\n                {{ \"components.query_builder.update_report\" | translate }}\n            </button>-->\n            <button mat-stroked-button color=\"accent\" (click)=\"onClickApply()\">\n                {{ \"components.query_builder.update\" | translate }}\n                <mat-icon [svgIcon]=\"icons.refresh.svgIcon\">{{ icons.refresh.matIcon }}</mat-icon>\n            </button>\n        </div>\n    </div>\n</div>\n", styles: ["nice-query-builder .rules-container{position:relative}nice-query-builder .rules-container:before{content:\"\";position:absolute;top:32px;bottom:32px;left:46px;width:4px;background:rgba(0,0,0,.12)}nice-query-builder .save-report-button{height:36px}nice-query-builder .add-rule-button{margin-left:28px;margin-right:28px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }, { kind: "component", type: RuleComponent, selector: "nice-rule", inputs: ["filterConfigs"], outputs: ["remove"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceQueryBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-query-builder", encapsulation: ViewEncapsulation.None, providers: [
@@ -2090,12 +2091,12 @@ 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$1 }, { token: NiceBaseListQuery }, { token: NiceBaseListService }, { token: i2.ActivatedRoute }, { token: i3$4.MatBottomSheet }, { token: i2.Router }, { token: i5.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: i4$2.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,
         NiceBaseListStore
-    ], queries: [{ propertyName: "title", first: true, predicate: NiceBaseListTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "table", first: true, predicate: NiceBaseListTableDirective, descendants: true }, { propertyName: "cards", first: true, predicate: NiceBaseListCardsDirective, descendants: true, read: TemplateRef }, { propertyName: "customContent", first: true, predicate: NiceBaseListCustomContentDirective, descendants: true, read: TemplateRef }, { propertyName: "filters", first: true, predicate: NiceBaseListFiltersDirective, descendants: true, read: TemplateRef }, { propertyName: "emptyState", first: true, predicate: NiceBaseListEmptyStateDirective, descendants: true, read: TemplateRef }, { propertyName: "emptySearchResultState", first: true, predicate: NiceBaseListEmptySearchResultStateDirective, descendants: true, read: TemplateRef }, { propertyName: "buttons", predicate: NiceBaseListButtonsDirective }], usesOnChanges: true, ngImport: i0, template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n    <div class=\"center\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n</div>\n\n<ng-template #content>\n    <ng-container *ngIf=\"listLayout.xl\">\n        <div class=\"hidden xl:block\">\n            <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl, active: xlActive$ | async }\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"listLayout.lg\">\n        <div class=\"hidden lg:block xl:hidden\">\n            <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg, active: lgActive$ | async }\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"listLayout.md\">\n        <div class=\"hidden md:block lg:hidden\">\n            <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md, active: mdActive$ | async }\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"listLayout.sm\">\n        <div class=\"hidden sm:block md:hidden\">\n            <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm, active: smActive$ | async }\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"listLayout.xs\">\n        <div class=\"block sm:hidden\">\n            <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs, active: xsActive$ | async }\"></ng-container>\n        </div>\n    </ng-container>\n\n    <div\n        [class.hidden]=\"!!listLayout.xs\"\n        [class.block]=\"!listLayout.xs\"\n        [class.sm:hidden]=\"!!listLayout.sm\"\n        [class.sm:block]=\"!listLayout.sm\"\n        [class.md:hidden]=\"!!listLayout.md\"\n        [class.md:block]=\"!listLayout.md\"\n        [class.lg:hidden]=\"!!listLayout.lg\"\n        [class.lg:block]=\"!listLayout.lg\"\n        [class.xl:hidden]=\"!!listLayout.xl\"\n        [class.xl:block]=\"!listLayout.xl\"\n    >\n        <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default, active: defaultActive$ | async }\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\" let-active=\"active\">\n    <ng-container *ngIf=\"layout?.length; else isObject\">\n        <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout }, active }\"></ng-container>\n    </ng-container>\n\n    <ng-template #isObject>\n        <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout, active }\"></ng-container>\n    </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\" let-active=\"active\">\n    <div [ngClass]=\"layout.classes\">\n        <ng-container *ngFor=\"let item of layout.items\">\n            <ng-container *ngIf=\"item.name; else childIsLayout\">\n                <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item, active }\"></ng-container>\n            </ng-container>\n            <ng-template #childIsLayout>\n                <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item, active }\"></ng-container>\n            </ng-template>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\" let-active=\"active\">\n    <ng-container *ngIf=\"item.name === 'title' && title\">\n        <div [ngClass]=\"item.classes\">\n            <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'search'\">\n        <div [ngClass]=\"item.classes\">\n            <div class=\"search-wrapper mx-md-0\">\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-container *ngIf=\"searchButtons\">\n                        <div [ngClass]=\"item.classes\">\n                            <ng-container *ngTemplateOutlet=\"searchButtons\"></ng-container>\n                        </div>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"enableQueryBuilder\">\n                        <button\n                                *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async) && (filterConfig$ | async).length > 0\"\n                                mat-icon-button\n                                niceQueryBuilderTrigger\n                                [queryBuilderFilters]=\"filterConfig$ | async\"\n                                [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n                                (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n                                [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n                        >\n                            <mat-icon\n                                [svgIcon]=\"icons.queryBuilder.svgIcon\"\n                                [matBadge]=\"rulesCount$ | async\"\n                                [matBadgeHidden]=\"!(rulesCount$ | async)\"\n                                matBadgeColor=\"accent\"\n                            >\n                                {{ icons.queryBuilder.matIcon }}\n                            </mat-icon>\n                        </button>\n                        <button\n                                mat-icon-button\n                                *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n                                [disabled]=\"filterConfigLoading$ | async\"\n                                (click)=\"clickToggleShowQueryBuilder()\"\n                                [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n                        >\n                            <mat-icon\n                                [svgIcon]=\"icons.queryBuilder.svgIcon\"\n                                [matBadge]=\"rulesCount$ | async\"\n                                [matBadgeHidden]=\"!(rulesCount$ | async)\"\n                                matBadgeColor=\"accent\"\n                            >\n                                {{ icons.queryBuilder.matIcon }}\n                            </mat-icon>\n                        </button>\n                        <button\n                            mat-icon-button\n                            *ngIf=\"showQueryBuilder$ | async\"\n                            (click)=\"clickToggleShowQueryBuilder()\"\n                            [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n                        >\n                            <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n                        </button>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n        <div [ngClass]=\"item.classes\">\n            <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n        <div [ngClass]=\"item.classes\">\n            <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n        <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n            <button\n                    (click)=\"clickPrint()\"\n                    [disabled]=\"loading$ | async\"\n                    [matTooltip]=\"'general.print' | translate\"\n                    class=\"list-button mr-2\"\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=\"list-button mr-2\"\n                    mat-mini-fab\n            >\n                <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n            </button>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'content'\">\n        <ng-container *ngIf=\"((isEmpty$ | async)  && emptyState) || ((isSearchResultEmpty$ | async) && emptySearchResultState); else showData\">\n\n            <ng-container *ngIf=\"(isSearchResultEmpty$ | async)\">\n                <ng-container *ngTemplateOutlet=\"emptySearchResultState\"></ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"isEmpty$ | async\">\n                <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n            </ng-container>\n\n        </ng-container>\n        <ng-template #showData>\n            <ng-container *ngIf=\"layoutContent === 'table' && table\">\n                <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item, active }\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n                <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item, active }\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n                <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item, active }\"></ng-container>\n            </ng-container>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n        <div [ngClass]=\"item.classes\">\n            <mat-paginator\n                (page)=\"onUpdatePage($event)\"\n                [length]=\"recordsFiltered$ | async\"\n                [pageIndex]=\"index$ | async\"\n                [pageSizeOptions]=\"defaultPageSizeOptions\"\n                [pageSize]=\"length$ | async\"\n                [showFirstLastButtons]=\"true\"\n            >\n            </mat-paginator>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n        <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n            <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n                <mat-card-content class=\"flex flex-col\">\n                    <div class=\"flex-auto\">\n                        <nice-query-builder\n                            [filterConfigs]=\"filterConfig$ | async\"\n                            [ngModel]=\"rules$ | async\"\n                            (ngModelChange)=\"onUpdateRules($event)\"\n                            (close)=\"clickToggleShowQueryBuilder()\"\n                        ></nice-query-builder>\n                    </div>\n                </mat-card-content>\n            </mat-card>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'filters' && filters\">\n        <div [ngClass]=\"item.classes\">\n            <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n    <div [ngClass]=\"item.classes\">\n        <div\n                [niceLoadingOverlay]=\"loading$ | async\"\n                class=\"content-card base-list flex flex-col justify-between\"\n        >\n            <mat-table\n                    (matSortChange)=\"onUpdateSort($event)\"\n                    [dataSource]=\"data$\"\n                    [matSortActive]=\"(sortColumn$ | async) || ''\"\n                    [matSortDirection]=\"(sortDirection$ | async) || ''\"\n                    class=\"flex flex-col flex-auto\"\n                    matSort\n            >\n                <mat-header-row *matHeaderRowDef=\"columnNames; sticky: table.stickyHeader\"></mat-header-row>\n\n                <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n                    <ng-container *ngIf=\"column.sortable\">\n                        <mat-header-cell *matHeaderCellDef mat-sort-header>\n                            <ng-container\n                                    *ngTemplateOutlet=\"table.template; context: { column: column.id, header: true }\"\n                            ></ng-container>\n                        </mat-header-cell>\n                    </ng-container>\n                    <ng-container *ngIf=\"!column.sortable\">\n                        <mat-header-cell *matHeaderCellDef>\n                            <ng-container\n                                    *ngTemplateOutlet=\"table.template; context: { column: column.id, header: true }\"\n                            ></ng-container>\n                        </mat-header-cell>\n                    </ng-container>\n\n                    <mat-cell *matCellDef=\"let item\">\n                        <ng-container\n                                *ngTemplateOutlet=\"table.template; context: { column: column.id, data: true, item: item }\"\n                        ></ng-container>\n                    </mat-cell>\n                </ng-container>\n\n                <ng-container *ngIf=\"disableRouting; else withRouting\">\n                    <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n                </ng-container>\n\n                <ng-template #withRouting>\n                    <mat-row\n                            *matRowDef=\"let item; columns: columnNames;\"\n                            (click)=\"navigate(item)\"\n                            class=\"item clickable\"\n                            matRipple\n                    >\n                    </mat-row>\n                </ng-template>\n            </mat-table>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\" let-active=\"active\">\n    <div [ngClass]=\"item.classes\">\n        <ng-container *ngFor=\"let data of data$ | async\">\n            <ng-container *ngTemplateOutlet=\"cards; context: { item: data, active }\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\" let-active=\"active\">\n    <div [ngClass]=\"item.classes\">\n        <ng-container *ngTemplateOutlet=\"customContent; context: { $implicit: data$ | async, data: data$ | async, total: recordsFiltered$ | async, active }\"></ng-container>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "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: 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: i11.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i11.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i5.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i14.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i14.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: NiceQueryBuilderComponent, selector: "nice-query-builder", inputs: ["filterConfigs", "currentSavedReport", "loading"], outputs: ["close", "createReport", "updateReport"] }, { kind: "directive", type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }, { kind: "directive", type: i18.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
+    ], queries: [{ propertyName: "title", first: true, predicate: NiceBaseListTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "table", first: true, predicate: NiceBaseListTableDirective, descendants: true }, { propertyName: "cards", first: true, predicate: NiceBaseListCardsDirective, descendants: true, read: TemplateRef }, { propertyName: "customContent", first: true, predicate: NiceBaseListCustomContentDirective, descendants: true, read: TemplateRef }, { propertyName: "filters", first: true, predicate: NiceBaseListFiltersDirective, descendants: true, read: TemplateRef }, { propertyName: "emptyState", first: true, predicate: NiceBaseListEmptyStateDirective, descendants: true, read: TemplateRef }, { propertyName: "emptySearchResultState", first: true, predicate: NiceBaseListEmptySearchResultStateDirective, descendants: true, read: TemplateRef }, { propertyName: "buttons", predicate: NiceBaseListButtonsDirective }], usesOnChanges: true, ngImport: i0, template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n    <div class=\"center\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n</div>\n\n<ng-template #content>\n    <ng-container *ngIf=\"listLayout.xl\">\n        <div class=\"hidden xl:block\">\n            <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl, active: xlActive$ | async }\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"listLayout.lg\">\n        <div class=\"hidden lg:block xl:hidden\">\n            <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg, active: lgActive$ | async }\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"listLayout.md\">\n        <div class=\"hidden md:block lg:hidden\">\n            <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md, active: mdActive$ | async }\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"listLayout.sm\">\n        <div class=\"hidden sm:block md:hidden\">\n            <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm, active: smActive$ | async }\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"listLayout.xs\">\n        <div class=\"block sm:hidden\">\n            <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs, active: xsActive$ | async }\"></ng-container>\n        </div>\n    </ng-container>\n\n    <div\n        [class.hidden]=\"!!listLayout.xs\"\n        [class.block]=\"!listLayout.xs\"\n        [class.sm:hidden]=\"!!listLayout.sm\"\n        [class.sm:block]=\"!listLayout.sm\"\n        [class.md:hidden]=\"!!listLayout.md\"\n        [class.md:block]=\"!listLayout.md\"\n        [class.lg:hidden]=\"!!listLayout.lg\"\n        [class.lg:block]=\"!listLayout.lg\"\n        [class.xl:hidden]=\"!!listLayout.xl\"\n        [class.xl:block]=\"!listLayout.xl\"\n    >\n        <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default, active: defaultActive$ | async }\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\" let-active=\"active\">\n    <ng-container *ngIf=\"layout?.length; else isObject\">\n        <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout }, active }\"></ng-container>\n    </ng-container>\n\n    <ng-template #isObject>\n        <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout, active }\"></ng-container>\n    </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\" let-active=\"active\">\n    <div [ngClass]=\"layout.classes\">\n        <ng-container *ngFor=\"let item of layout.items\">\n            <ng-container *ngIf=\"item.name; else childIsLayout\">\n                <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item, active }\"></ng-container>\n            </ng-container>\n            <ng-template #childIsLayout>\n                <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item, active }\"></ng-container>\n            </ng-template>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\" let-active=\"active\">\n    <ng-container *ngIf=\"item.name === 'title' && title\">\n        <div [ngClass]=\"item.classes\">\n            <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'search'\">\n        <div [ngClass]=\"item.classes\">\n            <div class=\"search-wrapper mx-md-0\">\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-container *ngIf=\"searchButtons\">\n                        <div [ngClass]=\"item.classes\">\n                            <ng-container *ngTemplateOutlet=\"searchButtons\"></ng-container>\n                        </div>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"enableQueryBuilder\">\n                        <button\n                                *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async) && (filterConfig$ | async).length > 0\"\n                                mat-icon-button\n                                niceQueryBuilderTrigger\n                                [queryBuilderFilters]=\"filterConfig$ | async\"\n                                [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n                                (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n                                [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n                        >\n                            <mat-icon\n                                [svgIcon]=\"icons.queryBuilder.svgIcon\"\n                                [matBadge]=\"rulesCount$ | async\"\n                                [matBadgeHidden]=\"!(rulesCount$ | async)\"\n                                matBadgeColor=\"accent\"\n                            >\n                                {{ icons.queryBuilder.matIcon }}\n                            </mat-icon>\n                        </button>\n                        <button\n                                mat-icon-button\n                                *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n                                [disabled]=\"filterConfigLoading$ | async\"\n                                (click)=\"clickToggleShowQueryBuilder()\"\n                                [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n                        >\n                            <mat-icon\n                                [svgIcon]=\"icons.queryBuilder.svgIcon\"\n                                [matBadge]=\"rulesCount$ | async\"\n                                [matBadgeHidden]=\"!(rulesCount$ | async)\"\n                                matBadgeColor=\"accent\"\n                            >\n                                {{ icons.queryBuilder.matIcon }}\n                            </mat-icon>\n                        </button>\n                        <button\n                            mat-icon-button\n                            *ngIf=\"showQueryBuilder$ | async\"\n                            (click)=\"clickToggleShowQueryBuilder()\"\n                            [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n                        >\n                            <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n                        </button>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n        <div [ngClass]=\"item.classes\">\n            <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n        <div [ngClass]=\"item.classes\">\n            <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n        <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n            <button\n                    (click)=\"clickPrint()\"\n                    [disabled]=\"loading$ | async\"\n                    [matTooltip]=\"'general.print' | translate\"\n                    class=\"list-button mr-2\"\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=\"list-button mr-2\"\n                    mat-mini-fab\n            >\n                <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n            </button>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'content'\">\n        <ng-container *ngIf=\"((isEmpty$ | async)  && emptyState) || ((isSearchResultEmpty$ | async) && emptySearchResultState); else showData\">\n\n            <ng-container *ngIf=\"(isSearchResultEmpty$ | async)\">\n                <ng-container *ngTemplateOutlet=\"emptySearchResultState\"></ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"isEmpty$ | async\">\n                <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n            </ng-container>\n\n        </ng-container>\n        <ng-template #showData>\n            <ng-container *ngIf=\"layoutContent === 'table' && table\">\n                <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item, active }\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n                <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item, active }\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n                <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item, active }\"></ng-container>\n            </ng-container>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n        <div [ngClass]=\"item.classes\">\n            <mat-paginator\n                (page)=\"onUpdatePage($event)\"\n                [length]=\"recordsFiltered$ | async\"\n                [pageIndex]=\"index$ | async\"\n                [pageSizeOptions]=\"defaultPageSizeOptions\"\n                [pageSize]=\"length$ | async\"\n                [showFirstLastButtons]=\"true\"\n            >\n            </mat-paginator>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n        <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n            <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n                <mat-card-content class=\"flex flex-col\">\n                    <div class=\"flex-auto\">\n                        <nice-query-builder\n                            [filterConfigs]=\"filterConfig$ | async\"\n                            [ngModel]=\"rules$ | async\"\n                            (ngModelChange)=\"onUpdateRules($event)\"\n                            (close)=\"clickToggleShowQueryBuilder()\"\n                        ></nice-query-builder>\n                    </div>\n                </mat-card-content>\n            </mat-card>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'filters' && filters\">\n        <div [ngClass]=\"item.classes\">\n            <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n    <div [ngClass]=\"item.classes\">\n        <div\n                [niceLoadingOverlay]=\"loading$ | async\"\n                class=\"content-card base-list flex flex-col justify-between\"\n        >\n            <mat-table\n                    (matSortChange)=\"onUpdateSort($event)\"\n                    [dataSource]=\"data$\"\n                    [matSortActive]=\"(sortColumn$ | async) || ''\"\n                    [matSortDirection]=\"(sortDirection$ | async) || ''\"\n                    class=\"flex flex-col flex-auto\"\n                    matSort\n            >\n                <mat-header-row *matHeaderRowDef=\"columnNames; sticky: table.stickyHeader\"></mat-header-row>\n\n                <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n                    <ng-container *ngIf=\"column.sortable\">\n                        <mat-header-cell *matHeaderCellDef mat-sort-header>\n                            <ng-container\n                                    *ngTemplateOutlet=\"table.template; context: { column: column.id, header: true }\"\n                            ></ng-container>\n                        </mat-header-cell>\n                    </ng-container>\n                    <ng-container *ngIf=\"!column.sortable\">\n                        <mat-header-cell *matHeaderCellDef>\n                            <ng-container\n                                    *ngTemplateOutlet=\"table.template; context: { column: column.id, header: true }\"\n                            ></ng-container>\n                        </mat-header-cell>\n                    </ng-container>\n\n                    <mat-cell *matCellDef=\"let item\">\n                        <ng-container\n                                *ngTemplateOutlet=\"table.template; context: { column: column.id, data: true, item: item }\"\n                        ></ng-container>\n                    </mat-cell>\n                </ng-container>\n\n                <ng-container *ngIf=\"disableRouting; else withRouting\">\n                    <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n                </ng-container>\n\n                <ng-template #withRouting>\n                    <mat-row\n                            *matRowDef=\"let item; columns: columnNames;\"\n                            (click)=\"navigate(item)\"\n                            class=\"item clickable\"\n                            matRipple\n                    >\n                    </mat-row>\n                </ng-template>\n            </mat-table>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\" let-active=\"active\">\n    <div [ngClass]=\"item.classes\">\n        <ng-container *ngFor=\"let data of data$ | async\">\n            <ng-container *ngTemplateOutlet=\"cards; context: { item: data, active }\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\" let-active=\"active\">\n    <div [ngClass]=\"item.classes\">\n        <ng-container *ngTemplateOutlet=\"customContent; context: { $implicit: data$ | async, data: data$ | async, total: recordsFiltered$ | async, active }\"></ng-container>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "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: 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: i11.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i11.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i5$1.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i14.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i14.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: NiceQueryBuilderComponent, selector: "nice-query-builder", inputs: ["filterConfigs", "currentSavedReport", "loading"], outputs: ["close", "createReport", "updateReport"] }, { kind: "directive", type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }, { kind: "directive", type: i18.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceBaseListComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-base-list", providers: [
@@ -2121,7 +2122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                     }] }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [EXPORTS_SETTINGS$1]
-                    }] }, { type: NiceBaseListQuery }, { type: NiceBaseListService }, { type: i2.ActivatedRoute }, { type: i3$4.MatBottomSheet }, { type: i2.Router }, { type: i5.NiceMediaWatcherService }];
+                    }] }, { type: NiceBaseListQuery }, { type: NiceBaseListService }, { type: i2.ActivatedRoute }, { type: i4$2.MatBottomSheet }, { type: i2.Router }, { type: i5$1.NiceMediaWatcherService }];
     }, propDecorators: { title: [{
                 type: ContentChild,
                 args: [NiceBaseListTitleDirective, { read: TemplateRef }]
@@ -2598,12 +2599,12 @@ 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$1 }, { token: NiceMultiStateListQuery }, { token: i2.ActivatedRoute }, { token: i3$4.MatBottomSheet }, { token: i2.Router }, { token: i5.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: i4$2.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,
         NiceMultiStateListStore
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n    <div class=\"center\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n</div>\n\n<ng-template #content>\n    <ng-container *ngIf=\"listLayout.xl\">\n        <div class=\"hidden xl:block\">\n            <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl, active: xlActive$ | async }\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"listLayout.lg\">\n        <div class=\"hidden lg:block xl:hidden\">\n            <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg, active: lgActive$ | async }\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"listLayout.md\">\n        <div class=\"hidden md:block lg:hidden\">\n            <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md, active: mdActive$ | async }\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"listLayout.sm\">\n        <div class=\"hidden sm:block md:hidden\">\n            <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm, active: smActive$ | async }\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"listLayout.xs\">\n        <div class=\"block sm:hidden\">\n            <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs, active: xsActive$ | async }\"></ng-container>\n        </div>\n    </ng-container>\n\n    <div\n        [class.hidden]=\"!!listLayout.xs\"\n        [class.block]=\"!listLayout.xs\"\n        [class.sm:hidden]=\"!!listLayout.sm\"\n        [class.sm:block]=\"!listLayout.sm\"\n        [class.md:hidden]=\"!!listLayout.md\"\n        [class.md:block]=\"!listLayout.md\"\n        [class.lg:hidden]=\"!!listLayout.lg\"\n        [class.lg:block]=\"!listLayout.lg\"\n        [class.xl:hidden]=\"!!listLayout.xl\"\n        [class.xl:block]=\"!listLayout.xl\"\n    >\n        <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default, active: defaultActive$ | async }\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\" let-active=\"active\">\n    <ng-container *ngIf=\"layout?.length; else isObject\">\n        <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout }, active }\"></ng-container>\n    </ng-container>\n\n    <ng-template #isObject>\n        <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout, active }\"></ng-container>\n    </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\" let-active=\"active\">\n    <div [ngClass]=\"layout.classes\">\n        <ng-container *ngFor=\"let item of layout.items\">\n            <ng-container *ngIf=\"item.name; else childIsLayout\">\n                <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item, active }\"></ng-container>\n            </ng-container>\n            <ng-template #childIsLayout>\n                <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item, active }\"></ng-container>\n            </ng-template>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\" let-active=\"active\">\n    <ng-container *ngIf=\"item.name === 'title' && title\">\n        <div [ngClass]=\"item.classes\">\n            <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'search'\">\n        <div [ngClass]=\"item.classes\">\n            <div class=\"search-wrapper mx-md-0\">\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-container *ngIf=\"searchButtons\">\n                        <div [ngClass]=\"item.classes\">\n                            <ng-container *ngTemplateOutlet=\"searchButtons\"></ng-container>\n                        </div>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"enableQueryBuilder\">\n                        <button\n                                *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async) && (filterConfig$ | async).length > 0\"\n                                mat-icon-button\n                                niceQueryBuilderTrigger\n                                [queryBuilderFilters]=\"filterConfig$ | async\"\n                                [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n                                (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n                                [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n                        >\n                            <mat-icon\n                                [svgIcon]=\"icons.queryBuilder.svgIcon\"\n                                [matBadge]=\"rulesCount$ | async\"\n                                [matBadgeHidden]=\"!(rulesCount$ | async)\"\n                                matBadgeColor=\"accent\"\n                            >\n                                {{ icons.queryBuilder.matIcon }}\n                            </mat-icon>\n                        </button>\n                        <button\n                                mat-icon-button\n                                *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n                                [disabled]=\"filterConfigLoading$ | async\"\n                                (click)=\"clickToggleShowQueryBuilder()\"\n                                [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n                        >\n                            <mat-icon\n                                [svgIcon]=\"icons.queryBuilder.svgIcon\"\n                                [matBadge]=\"rulesCount$ | async\"\n                                [matBadgeHidden]=\"!(rulesCount$ | async)\"\n                                matBadgeColor=\"accent\"\n                            >\n                                {{ icons.queryBuilder.matIcon }}\n                            </mat-icon>\n                        </button>\n                        <button\n                            mat-icon-button\n                            *ngIf=\"showQueryBuilder$ | async\"\n                            (click)=\"clickToggleShowQueryBuilder()\"\n                            [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n                        >\n                            <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n                        </button>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n        <div [ngClass]=\"item.classes\">\n            <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n        <div [ngClass]=\"item.classes\">\n            <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n        <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n            <button\n                    (click)=\"clickPrint()\"\n                    [disabled]=\"loading$ | async\"\n                    [matTooltip]=\"'general.print' | translate\"\n                    class=\"list-button mr-2\"\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=\"list-button mr-2\"\n                    mat-mini-fab\n            >\n                <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n            </button>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'content'\">\n        <ng-container *ngIf=\"((isEmpty$ | async)  && emptyState) || ((isSearchResultEmpty$ | async) && emptySearchResultState); else showData\">\n\n            <ng-container *ngIf=\"(isSearchResultEmpty$ | async)\">\n                <ng-container *ngTemplateOutlet=\"emptySearchResultState\"></ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"isEmpty$ | async\">\n                <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n            </ng-container>\n\n        </ng-container>\n        <ng-template #showData>\n            <ng-container *ngIf=\"layoutContent === 'table' && table\">\n                <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item, active }\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n                <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item, active }\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n                <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item, active }\"></ng-container>\n            </ng-container>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n        <div [ngClass]=\"item.classes\">\n            <mat-paginator\n                (page)=\"onUpdatePage($event)\"\n                [length]=\"recordsFiltered$ | async\"\n                [pageIndex]=\"index$ | async\"\n                [pageSizeOptions]=\"defaultPageSizeOptions\"\n                [pageSize]=\"length$ | async\"\n                [showFirstLastButtons]=\"true\"\n            >\n            </mat-paginator>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n        <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n            <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n                <mat-card-content class=\"flex flex-col\">\n                    <div class=\"flex-auto\">\n                        <nice-query-builder\n                            [filterConfigs]=\"filterConfig$ | async\"\n                            [ngModel]=\"rules$ | async\"\n                            (ngModelChange)=\"onUpdateRules($event)\"\n                            (close)=\"clickToggleShowQueryBuilder()\"\n                        ></nice-query-builder>\n                    </div>\n                </mat-card-content>\n            </mat-card>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'filters' && filters\">\n        <div [ngClass]=\"item.classes\">\n            <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n    <div [ngClass]=\"item.classes\">\n        <div\n                [niceLoadingOverlay]=\"loading$ | async\"\n                class=\"content-card base-list flex flex-col justify-between\"\n        >\n            <mat-table\n                    (matSortChange)=\"onUpdateSort($event)\"\n                    [dataSource]=\"data$\"\n                    [matSortActive]=\"(sortColumn$ | async) || ''\"\n                    [matSortDirection]=\"(sortDirection$ | async) || ''\"\n                    class=\"flex flex-col flex-auto\"\n                    matSort\n            >\n                <mat-header-row *matHeaderRowDef=\"columnNames; sticky: table.stickyHeader\"></mat-header-row>\n\n                <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n                    <ng-container *ngIf=\"column.sortable\">\n                        <mat-header-cell *matHeaderCellDef mat-sort-header>\n                            <ng-container\n                                    *ngTemplateOutlet=\"table.template; context: { column: column.id, header: true }\"\n                            ></ng-container>\n                        </mat-header-cell>\n                    </ng-container>\n                    <ng-container *ngIf=\"!column.sortable\">\n                        <mat-header-cell *matHeaderCellDef>\n                            <ng-container\n                                    *ngTemplateOutlet=\"table.template; context: { column: column.id, header: true }\"\n                            ></ng-container>\n                        </mat-header-cell>\n                    </ng-container>\n\n                    <mat-cell *matCellDef=\"let item\">\n                        <ng-container\n                                *ngTemplateOutlet=\"table.template; context: { column: column.id, data: true, item: item }\"\n                        ></ng-container>\n                    </mat-cell>\n                </ng-container>\n\n                <ng-container *ngIf=\"disableRouting; else withRouting\">\n                    <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n                </ng-container>\n\n                <ng-template #withRouting>\n                    <mat-row\n                            *matRowDef=\"let item; columns: columnNames;\"\n                            (click)=\"navigate(item)\"\n                            class=\"item clickable\"\n                            matRipple\n                    >\n                    </mat-row>\n                </ng-template>\n            </mat-table>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\" let-active=\"active\">\n    <div [ngClass]=\"item.classes\">\n        <ng-container *ngFor=\"let data of data$ | async\">\n            <ng-container *ngTemplateOutlet=\"cards; context: { item: data, active }\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\" let-active=\"active\">\n    <div [ngClass]=\"item.classes\">\n        <ng-container *ngTemplateOutlet=\"customContent; context: { $implicit: data$ | async, data: data$ | async, total: recordsFiltered$ | async, active }\"></ng-container>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "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: 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: i11.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i11.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i5.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i14.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i14.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: NiceQueryBuilderComponent, selector: "nice-query-builder", inputs: ["filterConfigs", "currentSavedReport", "loading"], outputs: ["close", "createReport", "updateReport"] }, { kind: "directive", type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }, { kind: "directive", type: i18.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n    <div class=\"center\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n</div>\n\n<ng-template #content>\n    <ng-container *ngIf=\"listLayout.xl\">\n        <div class=\"hidden xl:block\">\n            <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl, active: xlActive$ | async }\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"listLayout.lg\">\n        <div class=\"hidden lg:block xl:hidden\">\n            <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg, active: lgActive$ | async }\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"listLayout.md\">\n        <div class=\"hidden md:block lg:hidden\">\n            <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md, active: mdActive$ | async }\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"listLayout.sm\">\n        <div class=\"hidden sm:block md:hidden\">\n            <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm, active: smActive$ | async }\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"listLayout.xs\">\n        <div class=\"block sm:hidden\">\n            <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs, active: xsActive$ | async }\"></ng-container>\n        </div>\n    </ng-container>\n\n    <div\n        [class.hidden]=\"!!listLayout.xs\"\n        [class.block]=\"!listLayout.xs\"\n        [class.sm:hidden]=\"!!listLayout.sm\"\n        [class.sm:block]=\"!listLayout.sm\"\n        [class.md:hidden]=\"!!listLayout.md\"\n        [class.md:block]=\"!listLayout.md\"\n        [class.lg:hidden]=\"!!listLayout.lg\"\n        [class.lg:block]=\"!listLayout.lg\"\n        [class.xl:hidden]=\"!!listLayout.xl\"\n        [class.xl:block]=\"!listLayout.xl\"\n    >\n        <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default, active: defaultActive$ | async }\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\" let-active=\"active\">\n    <ng-container *ngIf=\"layout?.length; else isObject\">\n        <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout }, active }\"></ng-container>\n    </ng-container>\n\n    <ng-template #isObject>\n        <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout, active }\"></ng-container>\n    </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\" let-active=\"active\">\n    <div [ngClass]=\"layout.classes\">\n        <ng-container *ngFor=\"let item of layout.items\">\n            <ng-container *ngIf=\"item.name; else childIsLayout\">\n                <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item, active }\"></ng-container>\n            </ng-container>\n            <ng-template #childIsLayout>\n                <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item, active }\"></ng-container>\n            </ng-template>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\" let-active=\"active\">\n    <ng-container *ngIf=\"item.name === 'title' && title\">\n        <div [ngClass]=\"item.classes\">\n            <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'search'\">\n        <div [ngClass]=\"item.classes\">\n            <div class=\"search-wrapper mx-md-0\">\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-container *ngIf=\"searchButtons\">\n                        <div [ngClass]=\"item.classes\">\n                            <ng-container *ngTemplateOutlet=\"searchButtons\"></ng-container>\n                        </div>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"enableQueryBuilder\">\n                        <button\n                                *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async) && (filterConfig$ | async).length > 0\"\n                                mat-icon-button\n                                niceQueryBuilderTrigger\n                                [queryBuilderFilters]=\"filterConfig$ | async\"\n                                [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n                                (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n                                [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n                        >\n                            <mat-icon\n                                [svgIcon]=\"icons.queryBuilder.svgIcon\"\n                                [matBadge]=\"rulesCount$ | async\"\n                                [matBadgeHidden]=\"!(rulesCount$ | async)\"\n                                matBadgeColor=\"accent\"\n                            >\n                                {{ icons.queryBuilder.matIcon }}\n                            </mat-icon>\n                        </button>\n                        <button\n                                mat-icon-button\n                                *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n                                [disabled]=\"filterConfigLoading$ | async\"\n                                (click)=\"clickToggleShowQueryBuilder()\"\n                                [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n                        >\n                            <mat-icon\n                                [svgIcon]=\"icons.queryBuilder.svgIcon\"\n                                [matBadge]=\"rulesCount$ | async\"\n                                [matBadgeHidden]=\"!(rulesCount$ | async)\"\n                                matBadgeColor=\"accent\"\n                            >\n                                {{ icons.queryBuilder.matIcon }}\n                            </mat-icon>\n                        </button>\n                        <button\n                            mat-icon-button\n                            *ngIf=\"showQueryBuilder$ | async\"\n                            (click)=\"clickToggleShowQueryBuilder()\"\n                            [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n                        >\n                            <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n                        </button>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n        <div [ngClass]=\"item.classes\">\n            <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n        <div [ngClass]=\"item.classes\">\n            <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n        <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n            <button\n                    (click)=\"clickPrint()\"\n                    [disabled]=\"loading$ | async\"\n                    [matTooltip]=\"'general.print' | translate\"\n                    class=\"list-button mr-2\"\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=\"list-button mr-2\"\n                    mat-mini-fab\n            >\n                <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n            </button>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'content'\">\n        <ng-container *ngIf=\"((isEmpty$ | async)  && emptyState) || ((isSearchResultEmpty$ | async) && emptySearchResultState); else showData\">\n\n            <ng-container *ngIf=\"(isSearchResultEmpty$ | async)\">\n                <ng-container *ngTemplateOutlet=\"emptySearchResultState\"></ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"isEmpty$ | async\">\n                <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n            </ng-container>\n\n        </ng-container>\n        <ng-template #showData>\n            <ng-container *ngIf=\"layoutContent === 'table' && table\">\n                <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item, active }\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n                <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item, active }\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n                <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item, active }\"></ng-container>\n            </ng-container>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n        <div [ngClass]=\"item.classes\">\n            <mat-paginator\n                (page)=\"onUpdatePage($event)\"\n                [length]=\"recordsFiltered$ | async\"\n                [pageIndex]=\"index$ | async\"\n                [pageSizeOptions]=\"defaultPageSizeOptions\"\n                [pageSize]=\"length$ | async\"\n                [showFirstLastButtons]=\"true\"\n            >\n            </mat-paginator>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n        <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n            <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n                <mat-card-content class=\"flex flex-col\">\n                    <div class=\"flex-auto\">\n                        <nice-query-builder\n                            [filterConfigs]=\"filterConfig$ | async\"\n                            [ngModel]=\"rules$ | async\"\n                            (ngModelChange)=\"onUpdateRules($event)\"\n                            (close)=\"clickToggleShowQueryBuilder()\"\n                        ></nice-query-builder>\n                    </div>\n                </mat-card-content>\n            </mat-card>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'filters' && filters\">\n        <div [ngClass]=\"item.classes\">\n            <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n    <div [ngClass]=\"item.classes\">\n        <div\n                [niceLoadingOverlay]=\"loading$ | async\"\n                class=\"content-card base-list flex flex-col justify-between\"\n        >\n            <mat-table\n                    (matSortChange)=\"onUpdateSort($event)\"\n                    [dataSource]=\"data$\"\n                    [matSortActive]=\"(sortColumn$ | async) || ''\"\n                    [matSortDirection]=\"(sortDirection$ | async) || ''\"\n                    class=\"flex flex-col flex-auto\"\n                    matSort\n            >\n                <mat-header-row *matHeaderRowDef=\"columnNames; sticky: table.stickyHeader\"></mat-header-row>\n\n                <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n                    <ng-container *ngIf=\"column.sortable\">\n                        <mat-header-cell *matHeaderCellDef mat-sort-header>\n                            <ng-container\n                                    *ngTemplateOutlet=\"table.template; context: { column: column.id, header: true }\"\n                            ></ng-container>\n                        </mat-header-cell>\n                    </ng-container>\n                    <ng-container *ngIf=\"!column.sortable\">\n                        <mat-header-cell *matHeaderCellDef>\n                            <ng-container\n                                    *ngTemplateOutlet=\"table.template; context: { column: column.id, header: true }\"\n                            ></ng-container>\n                        </mat-header-cell>\n                    </ng-container>\n\n                    <mat-cell *matCellDef=\"let item\">\n                        <ng-container\n                                *ngTemplateOutlet=\"table.template; context: { column: column.id, data: true, item: item }\"\n                        ></ng-container>\n                    </mat-cell>\n                </ng-container>\n\n                <ng-container *ngIf=\"disableRouting; else withRouting\">\n                    <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n                </ng-container>\n\n                <ng-template #withRouting>\n                    <mat-row\n                            *matRowDef=\"let item; columns: columnNames;\"\n                            (click)=\"navigate(item)\"\n                            class=\"item clickable\"\n                            matRipple\n                    >\n                    </mat-row>\n                </ng-template>\n            </mat-table>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\" let-active=\"active\">\n    <div [ngClass]=\"item.classes\">\n        <ng-container *ngFor=\"let data of data$ | async\">\n            <ng-container *ngTemplateOutlet=\"cards; context: { item: data, active }\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\" let-active=\"active\">\n    <div [ngClass]=\"item.classes\">\n        <ng-container *ngTemplateOutlet=\"customContent; context: { $implicit: data$ | async, data: data$ | async, total: recordsFiltered$ | async, active }\"></ng-container>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "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: 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: i11.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i11.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i5$1.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i14.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i14.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: NiceQueryBuilderComponent, selector: "nice-query-builder", inputs: ["filterConfigs", "currentSavedReport", "loading"], outputs: ["close", "createReport", "updateReport"] }, { kind: "directive", type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }, { kind: "directive", type: i18.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceMultiStateListComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-multi-state-list", providers: [
@@ -2626,7 +2627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                     }] }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [EXPORTS_SETTINGS$1]
-                    }] }, { type: NiceMultiStateListQuery }, { type: i2.ActivatedRoute }, { type: i3$4.MatBottomSheet }, { type: i2.Router }, { type: i5.NiceMediaWatcherService }, { type: NiceMultiStateListService }];
+                    }] }, { type: NiceMultiStateListQuery }, { type: i2.ActivatedRoute }, { type: i4$2.MatBottomSheet }, { type: i2.Router }, { type: i5$1.NiceMediaWatcherService }, { type: NiceMultiStateListService }];
     }, propDecorators: { state: [{
                 type: Input
             }] } });
@@ -3044,15 +3045,28 @@ class NiceFilterViewService {
             }
         });
     }
-    downloadData(type, downloadFileName) {
+    downloadData(type, downloadFileName, ids) {
         return __awaiter(this, void 0, void 0, function* () {
             const { filterParameters, disabled } = this.store.getValue();
             if (disabled) {
                 return;
             }
+            const parameters = Object.assign(Object.assign({}, filterParameters), { rules: (filterParameters === null || filterParameters === void 0 ? void 0 : filterParameters.rules) ? [...filterParameters.rules] : [] });
+            if (ids === null || ids === void 0 ? void 0 : ids.length) {
+                parameters.rules.push({
+                    condition: "and",
+                    rules: [
+                        {
+                            id: "id",
+                            operation: FilterOperatorTypes.In,
+                            value: ids
+                        }
+                    ]
+                });
+            }
             try {
                 this.store.setLoading(true);
-                const result = yield firstValueFrom(this.filterService.getFile(type, this.store.getParameters(filterParameters)));
+                const result = yield firstValueFrom(this.filterService.getFile(type, this.store.getParameters(parameters)));
                 FileUtils.downloadFile(`${downloadFileName}.${type}`, result);
             }
             catch (e) {
@@ -3259,7 +3273,7 @@ class NiceAdvancedFilterSelectionComponent {
     }
 }
 NiceAdvancedFilterSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedFilterSelectionComponent, deps: [{ token: NiceFilterViewQuery }], target: i0.ɵɵFactoryTarget.Component });
-NiceAdvancedFilterSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceAdvancedFilterSelectionComponent, selector: "nice-advanced-filter-selection", outputs: { filterSelected: "filterSelected" }, ngImport: i0, template: "<mat-card class=\"flex flex-row flex-wrap filter-selection-container\" [niceLoadingOverlay]=\"loading$ | async\">\n    <div [class.md:grid-cols-2]=\"filterGroups.length >= 2\" class=\"grid grid-cols-1 gap-4\" *ngIf=\"filterGroups$ | async as filterGroups\">\n        <div class=\"flex flex-col\" *ngFor=\"let group of filterGroups; trackBy: trackGroups\">\n            <div class=\"filter-group flex items-center gap-4 pb-4\">\n                <ng-container *ngIf=\"group[0].key | niceFilterGroupIcon as icon\">\n                    <i mat-list-icon class=\"group-icon fal\" [ngClass]=\"icon.class\" *ngIf=\"icon.class\"></i>\n                    <mat-icon mat-list-icon class=\"group-icon\" [svgIcon]=\"icon.svgIcon\" *ngIf=\"icon.svgIcon\"></mat-icon>\n                    <mat-icon mat-list-icon class=\"group-icon\" *ngIf=\"icon.matIcon\">{{ icon.matIcon }}</mat-icon>\n                </ng-container>\n\n                <strong class=\"group-name\">{{ group[0].name }}</strong>\n            </div>\n\n            <div class=\"filter-item\" matRipple *ngFor=\"let filter of group[1]; trackBy: trackFilter\"  (click)=\"selectFilter(filter)\">\n                {{ filter?.name }}\n            </div>\n        </div>\n    </div>\n</mat-card>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i11.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i3.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { kind: "directive", type: i5.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: NiceFilterGroupIconPipe, name: "niceFilterGroupIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NiceAdvancedFilterSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceAdvancedFilterSelectionComponent, selector: "nice-advanced-filter-selection", outputs: { filterSelected: "filterSelected" }, ngImport: i0, template: "<mat-card class=\"flex flex-row flex-wrap filter-selection-container\" [niceLoadingOverlay]=\"loading$ | async\">\n    <div [class.md:grid-cols-2]=\"filterGroups.length >= 2\" class=\"grid grid-cols-1 gap-4\" *ngIf=\"filterGroups$ | async as filterGroups\">\n        <div class=\"flex flex-col\" *ngFor=\"let group of filterGroups; trackBy: trackGroups\">\n            <div class=\"filter-group flex items-center gap-4 pb-4\">\n                <ng-container *ngIf=\"group[0].key | niceFilterGroupIcon as icon\">\n                    <i mat-list-icon class=\"group-icon fal\" [ngClass]=\"icon.class\" *ngIf=\"icon.class\"></i>\n                    <mat-icon mat-list-icon class=\"group-icon\" [svgIcon]=\"icon.svgIcon\" *ngIf=\"icon.svgIcon\"></mat-icon>\n                    <mat-icon mat-list-icon class=\"group-icon\" *ngIf=\"icon.matIcon\">{{ icon.matIcon }}</mat-icon>\n                </ng-container>\n\n                <strong class=\"group-name\">{{ group[0].name }}</strong>\n            </div>\n\n            <div class=\"filter-item\" matRipple *ngFor=\"let filter of group[1]; trackBy: trackFilter\"  (click)=\"selectFilter(filter)\">\n                {{ filter?.name }}\n            </div>\n        </div>\n    </div>\n</mat-card>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i11.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i3.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { kind: "directive", type: i5$1.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: NiceFilterGroupIconPipe, name: "niceFilterGroupIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedFilterSelectionComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-advanced-filter-selection", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"flex flex-row flex-wrap filter-selection-container\" [niceLoadingOverlay]=\"loading$ | async\">\n    <div [class.md:grid-cols-2]=\"filterGroups.length >= 2\" class=\"grid grid-cols-1 gap-4\" *ngIf=\"filterGroups$ | async as filterGroups\">\n        <div class=\"flex flex-col\" *ngFor=\"let group of filterGroups; trackBy: trackGroups\">\n            <div class=\"filter-group flex items-center gap-4 pb-4\">\n                <ng-container *ngIf=\"group[0].key | niceFilterGroupIcon as icon\">\n                    <i mat-list-icon class=\"group-icon fal\" [ngClass]=\"icon.class\" *ngIf=\"icon.class\"></i>\n                    <mat-icon mat-list-icon class=\"group-icon\" [svgIcon]=\"icon.svgIcon\" *ngIf=\"icon.svgIcon\"></mat-icon>\n                    <mat-icon mat-list-icon class=\"group-icon\" *ngIf=\"icon.matIcon\">{{ icon.matIcon }}</mat-icon>\n                </ng-container>\n\n                <strong class=\"group-name\">{{ group[0].name }}</strong>\n            </div>\n\n            <div class=\"filter-item\" matRipple *ngFor=\"let filter of group[1]; trackBy: trackFilter\"  (click)=\"selectFilter(filter)\">\n                {{ filter?.name }}\n            </div>\n        </div>\n    </div>\n</mat-card>\n" }]
@@ -3360,7 +3374,7 @@ class NiceAdvancedFiltersButtonComponent {
     }
 }
 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 });
+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: i5.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 [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"] }]
@@ -3558,7 +3572,7 @@ NiceAdvancedDateFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
             useExisting: forwardRef(() => NiceAdvancedDateFilterComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\" class=\"flex-auto\">\n    <input matInput [matDatepicker]=\"picker\" [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" />\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\n        <mat-icon matDatepickerToggleIcon [svgIcon]=\"icons.datePicker.svgIcon\">{{ icons.datePicker.matIcon }}</mat-icon>\n    </mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n", dependencies: [{ 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: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$1.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }], encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\" class=\"flex-auto\">\n    <input matInput [matDatepicker]=\"picker\" [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" />\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\n        <mat-icon matDatepickerToggleIcon [svgIcon]=\"icons.datePicker.svgIcon\">{{ icons.datePicker.matIcon }}</mat-icon>\n    </mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n", dependencies: [{ 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: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedDateFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-advanced-date-filter", encapsulation: ViewEncapsulation.None, providers: [
@@ -3657,7 +3671,7 @@ NiceAdvancedSelectFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
             useExisting: forwardRef(() => NiceAdvancedSelectFilterComponent),
             multi: true
         }
-    ], 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 });
+    ], 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$1.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$1.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: [
@@ -3680,7 +3694,7 @@ NiceAdvancedTextFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
             useExisting: forwardRef(() => NiceAdvancedTextFilterComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\" class=\"flex-auto\">\n    <input matInput [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" [mask]=\"(filterConfig?.mask) || ''\" [validation]=\"false\" type=\"text\" />\n</mat-form-field>\n", dependencies: [{ 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: "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: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4$2.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\" class=\"flex-auto\">\n    <input matInput [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" [mask]=\"(filterConfig?.mask) || ''\" [validation]=\"false\" type=\"text\" />\n</mat-form-field>\n", dependencies: [{ 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: "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: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4$1.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedTextFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-advanced-text-filter", encapsulation: ViewEncapsulation.None, providers: [
@@ -3728,7 +3742,7 @@ class NiceAdvancedRuleComponent {
     }
 }
 NiceAdvancedRuleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedRuleComponent, deps: [{ token: ADVANCED_FILTER_ICONS, optional: true }, { token: i1$1.FormGroupName }], target: i0.ɵɵFactoryTarget.Component });
-NiceAdvancedRuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceAdvancedRuleComponent, selector: "nice-advanced-rule", inputs: { filterConfigs: "filterConfigs" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"flex flex-row gap-4\" [formGroup]=\"formGroup\">\n    <div class=\"basis-80\">\n        <button\n            class=\"select-filter w-full\"\n            mat-stroked-button\n            niceAdvancedFiltersTrigger\n            originX=\"start\"\n            (advancedFilterSelected)=\"onUpdateFilterConfig($event)\"\n        >\n            <div class=\"flex flex-row justify-between items-center w-full\">\n                <div class=\"config-name\">{{ filterConfig?.name }}</div>\n                <mat-icon [svgIcon]=\"icons.arrowDown.svgIcon\">{{ icons.arrowDown.matIcon }}</mat-icon>\n            </div>\n        </button>\n    </div>\n\n    <div class=\"flex flex-col basis-44 gap-4\">\n        <mat-form-field appearance=\"outline\" class=\"rule-form-field\">\n            <mat-select class=\"rule-operator\" formControlName=\"operation\">\n                <mat-option *ngFor=\"let operator of filterConfig?.operators\" [value]=\"operator.id\">\n                    {{ operator?.name }}\n                </mat-option>\n            </mat-select>\n        </mat-form-field>\n\n        <ng-container *ngIf=\"valuesFormArray.controls.length > 1\">\n            <mat-button-toggle-group class=\"condition-toggle\" formControlName=\"condition\">\n                <mat-button-toggle  value=\"and\">{{ \"components.nice_advanced_filters.rule.conditions.and\" | translate }}</mat-button-toggle>\n                <mat-button-toggle value=\"or\">{{ \"components.nice_advanced_filters.rule.conditions.or\" | translate }}</mat-button-toggle>\n            </mat-button-toggle-group>\n        </ng-container>\n    </div>\n\n    <div class=\"flex flex-col flex-auto gap-4\" formArrayName=\"values\">\n        <div class=\"flex items-center gap-4\" [formGroupName]=\"i\" *ngFor=\"let _ of valuesFormArray.controls; let i = index\">\n            <div class=\"rule-container flex flex-col md:flex-row flex-auto justify-start items-center gap-2.5\">\n                <ng-container *ngIf=\"isSingleInput$ | async\">\n                    <ng-container [ngSwitch]=\"filterConfig?.type\">\n                        <nice-advanced-text-filter *ngSwitchCase=\"'text'\" class=\"flex flex-auto\" formControlName=\"value\" [filterConfig]=\"filterConfig\"></nice-advanced-text-filter>\n                        <nice-advanced-number-filter *ngSwitchCase=\"'number'\" class=\"flex flex-auto\" formControlName=\"value\"></nice-advanced-number-filter>\n                        <nice-advanced-radio-filter\n                            *ngSwitchCase=\"'radio'\"\n                            class=\"flex flex-auto mb-4\"\n                            formControlName=\"value\"\n                            [filterConfig]=\"filterConfig\"\n                        ></nice-advanced-radio-filter>\n                        <nice-advanced-select-filter\n                            *ngSwitchCase=\"'select'\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"value\"\n                            [filterConfig]=\"filterConfig\"\n                        ></nice-advanced-select-filter>\n                        <nice-advanced-date-filter *ngSwitchCase=\"'date'\" class=\"flex flex-auto\" formControlName=\"value\"></nice-advanced-date-filter>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"isDoubleInput$ | async\">\n                    <ng-container [ngSwitch]=\"filterConfig?.type\">\n                        <nice-advanced-text-filter\n                            *ngSwitchCase=\"'text'\"\n                            [filterConfig]=\"filterConfig\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"value\"\n                        ></nice-advanced-text-filter>\n                        <nice-advanced-number-filter\n                            *ngSwitchCase=\"'number'\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"value\"\n                        ></nice-advanced-number-filter>\n                        <nice-advanced-radio-filter\n                            *ngSwitchCase=\"'radio'\"\n                            class=\"flex flex-auto mb-4\"\n                            formControlName=\"value\"\n                            [filterConfig]=\"filterConfig\"\n                        ></nice-advanced-radio-filter>\n                        <nice-advanced-select-filter\n                            *ngSwitchCase=\"'select'\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"value\"\n                            [filterConfig]=\"filterConfig\"\n                        ></nice-advanced-select-filter>\n                        <nice-advanced-date-filter\n                            *ngSwitchCase=\"'date'\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"value\"\n                        ></nice-advanced-date-filter>\n                    </ng-container>\n                    <h3 class=\"aligned-text\">\n                        {{ \"components.nice_advanced_filters.rule.conditions.and\" | translate }}\n                    </h3>\n                    <ng-container [ngSwitch]=\"filterConfig?.type\">\n                        <nice-advanced-text-filter\n                            *ngSwitchCase=\"'text'\"\n                            [filterConfig]=\"filterConfig\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"secondValue\"\n                        ></nice-advanced-text-filter>\n                        <nice-advanced-number-filter\n                            *ngSwitchCase=\"'number'\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"secondValue\"\n                        ></nice-advanced-number-filter>\n                        <nice-advanced-radio-filter\n                            *ngSwitchCase=\"'radio'\"\n                            class=\"flex flex-auto mb-4\"\n                            formControlName=\"secondValue\"\n                            [filterConfig]=\"filterConfig\"\n                        ></nice-advanced-radio-filter>\n                        <nice-advanced-select-filter\n                            *ngSwitchCase=\"'select'\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"secondValue\"\n                            [filterConfig]=\"filterConfig\"\n                        ></nice-advanced-select-filter>\n                        <nice-advanced-date-filter\n                            *ngSwitchCase=\"'date'\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"secondValue\"\n                        ></nice-advanced-date-filter>\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"basis-12\">\n                <button class=\"add-button\" mat-icon-button (click)=\"addValue(i + 1)\">\n                    <mat-icon [svgIcon]=\"icons.add.svgIcon\">{{ icons.add.matIcon }}</mat-icon>\n                </button>\n            </div>\n\n            <div class=\"basis-12\">\n                <button class=\"remove-button\" mat-icon-button (click)=\"removeValue(i)\">\n                    <mat-icon [svgIcon]=\"icons.delete.svgIcon\">{{ icons.delete.matIcon }}</mat-icon>\n                </button>\n            </div>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: "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: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i8$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i8$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: NiceAdvancedDateFilterComponent, selector: "nice-advanced-date-filter" }, { kind: "component", type: NiceAdvancedNumberFilterComponent, selector: "nice-advanced-number-filter" }, { kind: "component", type: NiceAdvancedRadioFilterComponent, selector: "nice-advanced-radio-filter", inputs: ["filterConfig"] }, { kind: "component", type: NiceAdvancedSelectFilterComponent, selector: "nice-advanced-select-filter", inputs: ["filterConfig"] }, { kind: "component", type: NiceAdvancedTextFilterComponent, selector: "nice-advanced-text-filter", inputs: ["filterConfig"] }, { 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" }], encapsulation: i0.ViewEncapsulation.None });
+NiceAdvancedRuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceAdvancedRuleComponent, selector: "nice-advanced-rule", inputs: { filterConfigs: "filterConfigs" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"flex flex-row gap-4\" [formGroup]=\"formGroup\">\n    <div class=\"basis-80\">\n        <button\n            class=\"select-filter w-full\"\n            mat-stroked-button\n            niceAdvancedFiltersTrigger\n            originX=\"start\"\n            (advancedFilterSelected)=\"onUpdateFilterConfig($event)\"\n        >\n            <div class=\"flex flex-row justify-between items-center w-full\">\n                <div class=\"config-name\">{{ filterConfig?.name }}</div>\n                <mat-icon [svgIcon]=\"icons.arrowDown.svgIcon\">{{ icons.arrowDown.matIcon }}</mat-icon>\n            </div>\n        </button>\n    </div>\n\n    <div class=\"flex flex-col basis-44 gap-4\">\n        <mat-form-field appearance=\"outline\" class=\"rule-form-field\">\n            <mat-select class=\"rule-operator\" formControlName=\"operation\">\n                <mat-option *ngFor=\"let operator of filterConfig?.operators\" [value]=\"operator.id\">\n                    {{ operator?.name }}\n                </mat-option>\n            </mat-select>\n        </mat-form-field>\n\n        <ng-container *ngIf=\"valuesFormArray.controls.length > 1\">\n            <mat-button-toggle-group class=\"condition-toggle\" formControlName=\"condition\">\n                <mat-button-toggle  value=\"and\">{{ \"components.nice_advanced_filters.rule.conditions.and\" | translate }}</mat-button-toggle>\n                <mat-button-toggle value=\"or\">{{ \"components.nice_advanced_filters.rule.conditions.or\" | translate }}</mat-button-toggle>\n            </mat-button-toggle-group>\n        </ng-container>\n    </div>\n\n    <div class=\"flex flex-col flex-auto gap-4\" formArrayName=\"values\">\n        <div class=\"flex items-center gap-4\" [formGroupName]=\"i\" *ngFor=\"let _ of valuesFormArray.controls; let i = index\">\n            <div class=\"rule-container flex flex-col md:flex-row flex-auto justify-start items-center gap-2.5\">\n                <ng-container *ngIf=\"isSingleInput$ | async\">\n                    <ng-container [ngSwitch]=\"filterConfig?.type\">\n                        <nice-advanced-text-filter *ngSwitchCase=\"'text'\" class=\"flex flex-auto\" formControlName=\"value\" [filterConfig]=\"filterConfig\"></nice-advanced-text-filter>\n                        <nice-advanced-number-filter *ngSwitchCase=\"'number'\" class=\"flex flex-auto\" formControlName=\"value\"></nice-advanced-number-filter>\n                        <nice-advanced-radio-filter\n                            *ngSwitchCase=\"'radio'\"\n                            class=\"flex flex-auto mb-4\"\n                            formControlName=\"value\"\n                            [filterConfig]=\"filterConfig\"\n                        ></nice-advanced-radio-filter>\n                        <nice-advanced-select-filter\n                            *ngSwitchCase=\"'select'\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"value\"\n                            [filterConfig]=\"filterConfig\"\n                        ></nice-advanced-select-filter>\n                        <nice-advanced-date-filter *ngSwitchCase=\"'date'\" class=\"flex flex-auto\" formControlName=\"value\"></nice-advanced-date-filter>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"isDoubleInput$ | async\">\n                    <ng-container [ngSwitch]=\"filterConfig?.type\">\n                        <nice-advanced-text-filter\n                            *ngSwitchCase=\"'text'\"\n                            [filterConfig]=\"filterConfig\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"value\"\n                        ></nice-advanced-text-filter>\n                        <nice-advanced-number-filter\n                            *ngSwitchCase=\"'number'\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"value\"\n                        ></nice-advanced-number-filter>\n                        <nice-advanced-radio-filter\n                            *ngSwitchCase=\"'radio'\"\n                            class=\"flex flex-auto mb-4\"\n                            formControlName=\"value\"\n                            [filterConfig]=\"filterConfig\"\n                        ></nice-advanced-radio-filter>\n                        <nice-advanced-select-filter\n                            *ngSwitchCase=\"'select'\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"value\"\n                            [filterConfig]=\"filterConfig\"\n                        ></nice-advanced-select-filter>\n                        <nice-advanced-date-filter\n                            *ngSwitchCase=\"'date'\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"value\"\n                        ></nice-advanced-date-filter>\n                    </ng-container>\n                    <h3 class=\"aligned-text\">\n                        {{ \"components.nice_advanced_filters.rule.conditions.and\" | translate }}\n                    </h3>\n                    <ng-container [ngSwitch]=\"filterConfig?.type\">\n                        <nice-advanced-text-filter\n                            *ngSwitchCase=\"'text'\"\n                            [filterConfig]=\"filterConfig\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"secondValue\"\n                        ></nice-advanced-text-filter>\n                        <nice-advanced-number-filter\n                            *ngSwitchCase=\"'number'\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"secondValue\"\n                        ></nice-advanced-number-filter>\n                        <nice-advanced-radio-filter\n                            *ngSwitchCase=\"'radio'\"\n                            class=\"flex flex-auto mb-4\"\n                            formControlName=\"secondValue\"\n                            [filterConfig]=\"filterConfig\"\n                        ></nice-advanced-radio-filter>\n                        <nice-advanced-select-filter\n                            *ngSwitchCase=\"'select'\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"secondValue\"\n                            [filterConfig]=\"filterConfig\"\n                        ></nice-advanced-select-filter>\n                        <nice-advanced-date-filter\n                            *ngSwitchCase=\"'date'\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"secondValue\"\n                        ></nice-advanced-date-filter>\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"basis-12\">\n                <button class=\"add-button\" mat-icon-button (click)=\"addValue(i + 1)\">\n                    <mat-icon [svgIcon]=\"icons.add.svgIcon\">{{ icons.add.matIcon }}</mat-icon>\n                </button>\n            </div>\n\n            <div class=\"basis-12\">\n                <button class=\"remove-button\" mat-icon-button (click)=\"removeValue(i)\">\n                    <mat-icon [svgIcon]=\"icons.delete.svgIcon\">{{ icons.delete.matIcon }}</mat-icon>\n                </button>\n            </div>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: "component", type: i5.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: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i8$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i8$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: NiceAdvancedDateFilterComponent, selector: "nice-advanced-date-filter" }, { kind: "component", type: NiceAdvancedNumberFilterComponent, selector: "nice-advanced-number-filter" }, { kind: "component", type: NiceAdvancedRadioFilterComponent, selector: "nice-advanced-radio-filter", inputs: ["filterConfig"] }, { kind: "component", type: NiceAdvancedSelectFilterComponent, selector: "nice-advanced-select-filter", inputs: ["filterConfig"] }, { kind: "component", type: NiceAdvancedTextFilterComponent, selector: "nice-advanced-text-filter", inputs: ["filterConfig"] }, { 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" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedRuleComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-advanced-rule", encapsulation: ViewEncapsulation.None, template: "<div class=\"flex flex-row gap-4\" [formGroup]=\"formGroup\">\n    <div class=\"basis-80\">\n        <button\n            class=\"select-filter w-full\"\n            mat-stroked-button\n            niceAdvancedFiltersTrigger\n            originX=\"start\"\n            (advancedFilterSelected)=\"onUpdateFilterConfig($event)\"\n        >\n            <div class=\"flex flex-row justify-between items-center w-full\">\n                <div class=\"config-name\">{{ filterConfig?.name }}</div>\n                <mat-icon [svgIcon]=\"icons.arrowDown.svgIcon\">{{ icons.arrowDown.matIcon }}</mat-icon>\n            </div>\n        </button>\n    </div>\n\n    <div class=\"flex flex-col basis-44 gap-4\">\n        <mat-form-field appearance=\"outline\" class=\"rule-form-field\">\n            <mat-select class=\"rule-operator\" formControlName=\"operation\">\n                <mat-option *ngFor=\"let operator of filterConfig?.operators\" [value]=\"operator.id\">\n                    {{ operator?.name }}\n                </mat-option>\n            </mat-select>\n        </mat-form-field>\n\n        <ng-container *ngIf=\"valuesFormArray.controls.length > 1\">\n            <mat-button-toggle-group class=\"condition-toggle\" formControlName=\"condition\">\n                <mat-button-toggle  value=\"and\">{{ \"components.nice_advanced_filters.rule.conditions.and\" | translate }}</mat-button-toggle>\n                <mat-button-toggle value=\"or\">{{ \"components.nice_advanced_filters.rule.conditions.or\" | translate }}</mat-button-toggle>\n            </mat-button-toggle-group>\n        </ng-container>\n    </div>\n\n    <div class=\"flex flex-col flex-auto gap-4\" formArrayName=\"values\">\n        <div class=\"flex items-center gap-4\" [formGroupName]=\"i\" *ngFor=\"let _ of valuesFormArray.controls; let i = index\">\n            <div class=\"rule-container flex flex-col md:flex-row flex-auto justify-start items-center gap-2.5\">\n                <ng-container *ngIf=\"isSingleInput$ | async\">\n                    <ng-container [ngSwitch]=\"filterConfig?.type\">\n                        <nice-advanced-text-filter *ngSwitchCase=\"'text'\" class=\"flex flex-auto\" formControlName=\"value\" [filterConfig]=\"filterConfig\"></nice-advanced-text-filter>\n                        <nice-advanced-number-filter *ngSwitchCase=\"'number'\" class=\"flex flex-auto\" formControlName=\"value\"></nice-advanced-number-filter>\n                        <nice-advanced-radio-filter\n                            *ngSwitchCase=\"'radio'\"\n                            class=\"flex flex-auto mb-4\"\n                            formControlName=\"value\"\n                            [filterConfig]=\"filterConfig\"\n                        ></nice-advanced-radio-filter>\n                        <nice-advanced-select-filter\n                            *ngSwitchCase=\"'select'\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"value\"\n                            [filterConfig]=\"filterConfig\"\n                        ></nice-advanced-select-filter>\n                        <nice-advanced-date-filter *ngSwitchCase=\"'date'\" class=\"flex flex-auto\" formControlName=\"value\"></nice-advanced-date-filter>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"isDoubleInput$ | async\">\n                    <ng-container [ngSwitch]=\"filterConfig?.type\">\n                        <nice-advanced-text-filter\n                            *ngSwitchCase=\"'text'\"\n                            [filterConfig]=\"filterConfig\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"value\"\n                        ></nice-advanced-text-filter>\n                        <nice-advanced-number-filter\n                            *ngSwitchCase=\"'number'\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"value\"\n                        ></nice-advanced-number-filter>\n                        <nice-advanced-radio-filter\n                            *ngSwitchCase=\"'radio'\"\n                            class=\"flex flex-auto mb-4\"\n                            formControlName=\"value\"\n                            [filterConfig]=\"filterConfig\"\n                        ></nice-advanced-radio-filter>\n                        <nice-advanced-select-filter\n                            *ngSwitchCase=\"'select'\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"value\"\n                            [filterConfig]=\"filterConfig\"\n                        ></nice-advanced-select-filter>\n                        <nice-advanced-date-filter\n                            *ngSwitchCase=\"'date'\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"value\"\n                        ></nice-advanced-date-filter>\n                    </ng-container>\n                    <h3 class=\"aligned-text\">\n                        {{ \"components.nice_advanced_filters.rule.conditions.and\" | translate }}\n                    </h3>\n                    <ng-container [ngSwitch]=\"filterConfig?.type\">\n                        <nice-advanced-text-filter\n                            *ngSwitchCase=\"'text'\"\n                            [filterConfig]=\"filterConfig\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"secondValue\"\n                        ></nice-advanced-text-filter>\n                        <nice-advanced-number-filter\n                            *ngSwitchCase=\"'number'\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"secondValue\"\n                        ></nice-advanced-number-filter>\n                        <nice-advanced-radio-filter\n                            *ngSwitchCase=\"'radio'\"\n                            class=\"flex flex-auto mb-4\"\n                            formControlName=\"secondValue\"\n                            [filterConfig]=\"filterConfig\"\n                        ></nice-advanced-radio-filter>\n                        <nice-advanced-select-filter\n                            *ngSwitchCase=\"'select'\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"secondValue\"\n                            [filterConfig]=\"filterConfig\"\n                        ></nice-advanced-select-filter>\n                        <nice-advanced-date-filter\n                            *ngSwitchCase=\"'date'\"\n                            class=\"flex flex-auto\"\n                            formControlName=\"secondValue\"\n                        ></nice-advanced-date-filter>\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"basis-12\">\n                <button class=\"add-button\" mat-icon-button (click)=\"addValue(i + 1)\">\n                    <mat-icon [svgIcon]=\"icons.add.svgIcon\">{{ icons.add.matIcon }}</mat-icon>\n                </button>\n            </div>\n\n            <div class=\"basis-12\">\n                <button class=\"remove-button\" mat-icon-button (click)=\"removeValue(i)\">\n                    <mat-icon [svgIcon]=\"icons.delete.svgIcon\">{{ icons.delete.matIcon }}</mat-icon>\n                </button>\n            </div>\n        </div>\n    </div>\n</div>\n" }]
@@ -3792,7 +3806,7 @@ NiceAdvancedFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
             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 });
+    ], 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: i5.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: [
@@ -3976,945 +3990,718 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                 args: [NiceFilterDataDirective, { read: TemplateRef }]
             }] } });
 
-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.canPrint = true;
-        this.loading$ = this.query.selectLoading();
+const NICE_PRELOAD_SELECTED_ENTITIES_PROVIDER = new InjectionToken("nice_preload_selected_entities_provider");
+
+class NiceSelectableListStateQuery extends QueryEntity {
+    constructor(store) {
+        super(store);
     }
-    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
-                ]
+    selectActiveViewIndex() {
+        return this.select(({ ids, active }) => {
+            const index = ids.indexOf(active);
+            return index + 1;
+        });
+    }
+    selectFirstActive() {
+        return this.select(({ ids, active }) => {
+            if (!ids.length) {
+                return true;
             }
+            return ids[0] === active;
         });
     }
-    clickXlsx() {
-        this.service.downloadData("xlsx", this.downloadFileName);
+    selectLastActive() {
+        return this.select(({ ids, active }) => {
+            if (!ids.length) {
+                return true;
+            }
+            return ids[ids.length - 1] === active;
+        });
     }
-    clickCsv() {
-        this.service.downloadData("csv", this.downloadFileName);
+}
+
+class NiceSelectableListStateService {
+    constructor(store, route, router, preloadService, options) {
+        this.store = store;
+        this.route = route;
+        this.router = router;
+        this.preloadService = preloadService;
+        this.options = options;
     }
-    clickPrint() {
-        this.service.printData();
+    get idKey() {
+        var _a, _b;
+        return (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.idKey) !== null && _b !== void 0 ? _b : "id";
     }
-    clickPdf() {
-        this.service.downloadData("pdf", this.downloadFileName);
+    get preloadedWindow() {
+        var _a, _b;
+        return (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.preloadWindow) !== null && _b !== void 0 ? _b : 2;
     }
-}
-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", 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    *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]
-                    }] }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [EXPORTS_SETTINGS]
-                    }] }, { type: NiceFilterViewQuery }, { type: NiceFilterViewService }, { type: i3$4.MatBottomSheet }];
-    }, propDecorators: { customExport: [{
-                type: Input
-            }], downloadFileName: [{
-                type: Input
-            }], canPrint: [{
-                type: Input
-            }] } });
-
-class NiceFilterExportDirective {
-    constructor(service) {
-        this.service = service;
-        this.downloadFileName = "data";
+    setActive(entity) {
+        this.store.setActive(entity[this.idKey]);
     }
-    onClick() {
-        this.service.downloadData(this.type, this.downloadFileName);
+    getIndex(identifier) {
+        const { ids } = this.store.getValue();
+        const index = ids.indexOf(identifier);
+        return index + 1;
     }
-}
-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();
+    selectAll(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.preloadService) {
+                return this.store.update({
+                    allSelected: true
+                });
+            }
+            const ids = yield this.preloadService.loadAllEntities(options);
+            this.store.set(ids.map((id) => ({
+                [this.idKey]: id,
+                loaded: false
+            })));
+            return this.store.update({
+                allSelected: true
+            });
+        });
     }
-    loadNextPage() {
+    select(id) {
         return __awaiter(this, void 0, void 0, function* () {
-            const { filterParameters, filterResult } = this.query.getValue();
-            this.service.setMode("accumulated");
-            if (filterResult && filterResult.values.length >= filterResult.total) {
-                return;
+            this.store.update((state) => ({
+                unselectedEntity: arrayRemove(state.unselectedEntity, id)
+            }));
+            this.store.add({
+                [this.idKey]: id,
+                loaded: false
+            });
+            if (this.preloadService) {
+                const entity = yield this.preloadService.loadEntityById(id);
+                this.store.upsert(id, Object.assign(Object.assign({}, entity), { loaded: true }));
             }
-            this.service.setParameters(Object.assign(Object.assign({}, filterParameters), { start: filterParameters.start + filterParameters.length }));
-            this.service.filter();
         });
     }
-}
-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: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: 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();
+    selectMany(ids, active) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.store.add(ids.map((id) => ({
+                [this.idKey]: id,
+                loaded: false
+            })));
+            if (active) {
+                this.store.setActive(active);
+                yield this.loadEntities(true);
+            }
+        });
     }
-    ngOnInit() {
-        this.searchText$
-            .pipe(takeUntil(this.unsubscribeAll$), debounceTime(300), distinctUntilChanged(), tap((search) => {
-            const { mode } = this.query.getValue();
-            if (mode === "accumulated") {
-                this.service.resetPaging();
+    selectEntity(entity) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.store.update((state) => ({
+                unselectedEntity: arrayRemove(state.unselectedEntity, entity[this.idKey])
+            }));
+            this.store.upsert(entity[this.idKey], Object.assign(Object.assign({}, entity), { loaded: true }));
+            if (this.preloadService) {
+                const preloadedEntity = yield this.preloadService.reloadEntity(entity);
+                this.store.upsert(preloadedEntity[this.idKey], Object.assign(Object.assign({}, preloadedEntity), { loaded: true }));
             }
-            const { filterParameters } = this.query.getValue();
-            this.service.setParameters(Object.assign(Object.assign({}, filterParameters), { search }));
-            this.service.filter();
-        }))
-            .subscribe();
+        });
     }
-    ngOnDestroy() {
-        this.unsubscribeAll$.next();
-        this.unsubscribeAll$.complete();
+    selectManyEntities(entities) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.preloadService) {
+                return this.store.upsertMany(entities.map((entity) => (Object.assign(Object.assign({}, entity), { loaded: true }))));
+            }
+            const preloadedEntities = yield this.preloadService.reloadEntities(entities);
+            this.store.upsertMany(preloadedEntities.map((preloadedEntity) => (Object.assign(Object.assign({}, preloadedEntity), { loaded: true }))));
+        });
     }
-    onUpdateSearch(search) {
-        this.searchText$.next(search);
+    unselectAll() {
+        this.store.set([]);
+        return this.store.update({
+            allSelected: false,
+            unselectedEntity: []
+        });
     }
-}
-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: i4$1.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: i2$1.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();
+    unselect(id) {
+        this.store.update((state) => ({
+            unselectedEntity: arrayAdd(state.unselectedEntity, id)
+        }));
+        this.store.remove(id);
     }
-    ngOnInit() {
-        this.query.selectFilterResult().pipe(takeUntil(this.unsubscribeAll$)).subscribe((res) => {
-            if (!res) {
-                return;
+    unselectEntity(entity) {
+        this.store.update((state) => ({
+            unselectedEntity: arrayAdd(state.unselectedEntity, entity[this.idKey])
+        }));
+        this.store.remove(entity[this.idKey]);
+    }
+    unselectManyEntities(entities) {
+        this.store.remove(entities.map((entity) => entity[this.idKey]));
+    }
+    updateEntity(entity) {
+        this.store.update(entity[this.idKey], entity);
+    }
+    setEntities(ids, activeId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.store.update({
+                unselectedEntity: [],
+                allSelected: false
+            });
+            this.store.set(ids.map((id) => ({
+                [this.idKey]: id,
+                loaded: false
+            })));
+            if (activeId) {
+                this.store.setActive(activeId);
             }
-            const { page, total } = res;
-            this.paginator.pageIndex = page.number;
-            this.paginator.pageSize = page.size;
-            this.paginator.length = total;
+            yield this.loadEntities(true);
         });
-        this.paginator.page.pipe(takeUntil(this.unsubscribeAll$)).subscribe((page) => {
-            const { filterParameters } = this.query.getValue();
-            this.service.setParameters(Object.assign(Object.assign({}, filterParameters), { start: page.pageIndex * page.pageSize, length: page.pageSize }));
-            this.service.filter();
+    }
+    next() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { ids, active } = this.store.getValue();
+            const index = ids.indexOf(active);
+            yield this.loadActiveEntity(ids[index + 1], 1);
         });
     }
-    ngOnDestroy() {
-        this.unsubscribeAll$.next();
-        this.unsubscribeAll$.complete();
+    previous() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { ids, active } = this.store.getValue();
+            const index = ids.indexOf(active);
+            yield this.loadActiveEntity(ids[index - 1], -1);
+        });
     }
-}
-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();
+    first() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { ids } = this.store.getValue();
+            yield this.loadActiveEntity(ids[0], 1);
+        });
     }
-    ngOnInit() {
-        this.query.selectFilterParameters().pipe(takeUntil(this.unsubscribeAll$)).subscribe((res) => {
-            if (!res) {
-                return;
+    last() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { ids } = this.store.getValue();
+            yield this.loadActiveEntity(ids[ids.length - 1], -1);
+        });
+    }
+    removeActive() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { active, ids } = this.store.getValue();
+            const index = ids.indexOf(active);
+            this.store.remove(active);
+            if (index === (ids.length - 1)) {
+                yield this.loadActiveEntity(ids[index - 1], -1);
             }
-            const { order } = res;
-            if (!order) {
-                return;
+            else {
+                yield this.loadActiveEntity(ids[index + 1], 1);
             }
-            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: {} }));
+    }
+    loadActiveEntity(id, direction) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                this.store.setActive(id);
+                const { entities } = this.store.getValue();
+                if (!((_a = entities[+id + direction * this.preloadedWindow]) === null || _a === void 0 ? void 0 : _a.loaded)) {
+                    yield this.loadEntities(false);
+                }
             }
-            else {
-                this.service.setParameters(Object.assign(Object.assign({}, filterParameters), { order: {
-                        column: sort.active,
-                        direction: sort.direction
-                    } }));
+            catch (e) {
+                this.store.setError(e);
             }
-            this.service.filter();
         });
     }
-    ngOnDestroy() {
-        this.unsubscribeAll$.next();
-        this.unsubscribeAll$.complete();
+    loadEntities(loadExtremity) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.preloadService) {
+                return;
+            }
+            const toLoad = this.getListIdToLoad(loadExtremity);
+            if (!toLoad.length) {
+                return;
+            }
+            const entities = yield this.preloadService.loadEntitiesById(toLoad);
+            this.store.upsertMany(entities.map((entity) => (Object.assign(Object.assign({}, entity), { loaded: true }))));
+        });
     }
-}
-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;
+    getListIdToLoad(loadExtremity) {
+        var _a;
+        const { active, ids, entities } = this.store.getValue();
+        const from = ids.indexOf(active) - this.preloadedWindow > 0 ? ids.indexOf(active) - this.preloadedWindow : 0;
+        const to = ids.indexOf(active) + this.preloadedWindow < ids.length - 1
+            ? ids.indexOf(active) + this.preloadedWindow
+            : ids.length - 1;
+        const toLoad = [];
+        if (loadExtremity) {
+            if (ids.length <= 2) {
+                return ids;
+            }
+            toLoad.push(ids[0], ids[ids.length - 1]);
+        }
+        for (let i = from; i <= to; i++) {
+            if (ids[i] === null || ids[0] === undefined) {
+                continue;
+            }
+            if (!toLoad.includes(ids[i]) && !((_a = entities[ids[i]]) === null || _a === void 0 ? void 0 : _a.loaded)) {
+                toLoad.push(ids[i]);
+            }
+        }
+        return toLoad;
     }
-    ngOnInit() {
-        this.table.dataSource = this.query.selectAll();
+    generateQueryParams() {
+        const { ids, active } = this.store.getValue();
+        return {
+            selection: ids.length ? ids : null,
+            selected: active !== null && active !== void 0 ? active : null
+        };
+    }
+    setQueryParams() {
+        this.router.navigate([], {
+            queryParams: this.generateQueryParams(),
+            queryParamsHandling: "merge"
+        });
     }
 }
-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;
+class NiceSelectableListService {
+    constructor(providers, route, router) {
+        this.providers = providers;
         this.route = route;
         this.router = router;
-        this.init = new EventEmitter();
-        this.unsubscribeAll$ = new Subject();
-        this._initialized = false;
-    }
-    get initialized() {
-        return this._initialized;
+        this.stores = new Map();
     }
-    ngOnInit() {
-        this.query.selectFilterParameters().pipe(takeUntil(this.unsubscribeAll$)).subscribe((parameters) => {
-            this.updateQueryParams(parameters);
-        });
-        this.loadQueryParams();
+    createState(name, options) {
+        const store = new EntityStore({ allSelected: false, unselectedEntity: [] }, { name, idKey: options === null || options === void 0 ? void 0 : options.idKey });
+        const query = new NiceSelectableListStateQuery(store);
+        const state = { store, query };
+        this.stores.set(name, state);
+        return state;
     }
-    ngOnDestroy() {
-        this.unsubscribeAll$.next();
-        this.unsubscribeAll$.complete();
+    getState(name) {
+        return this.stores.get(name);
     }
-    updateQueryParams(parameters) {
-        if (!this.route) {
-            return;
+    withState(stateName, options) {
+        var _a;
+        const provider = (_a = this.providers) === null || _a === void 0 ? void 0 : _a.find((p) => p.state === stateName);
+        const state = this.getState(stateName);
+        if (state) {
+            return new NiceSelectableListStateService(state.store, this.route, this.router, provider, options);
         }
-        const params = Object.assign({}, parameters);
-        const { mode } = this.query.getValue();
-        if (mode === "accumulated") {
-            delete params.start;
-            delete params.length;
+        const newState = this.createState(stateName, options);
+        return new NiceSelectableListStateService(newState.store, this.route, this.router, provider, options);
+    }
+    query(stateName) {
+        const state = this.getState(stateName);
+        if (!state) {
+            throw new Error("No state found");
         }
-        this.router.navigate([], {
-            relativeTo: this.route,
-            queryParams: QueryParamsUtils.filterParametersToParamsMap(params),
-            queryParamsHandling: "merge"
-        });
-    }
-    loadQueryParams() {
-        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 }) => {
-            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(Object.assign(Object.assign({}, params), { fallbackOrder: filterParameters.fallbackOrder }));
-            }
-            if (!this._initialized) {
-                this._initialized = true;
-                this.init.emit();
-            }
-        });
-    }
-}
-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);
-        }
-        this.autoLoad(autoLoad);
-        this.loadConfig(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);
-        if (reload) {
-            this.filterViewService.filter();
-        }
-    }
-    /**
-     * 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);
-        if (reload) {
-            this.filterViewService.filter();
-        }
-    }
-    /**
-     * 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);
-        if (reload) {
-            this.filterViewService.filter();
-        }
-    }
-    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 }, { 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: [{
-                    template: ``
-                }]
-        }], propDecorators: { filterViewService: [{
-                type: ViewChild,
-                args: [NiceFilterViewComponent, { read: NiceFilterViewService, static: true }]
-            }], 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 {
-    static forRoot(options) {
-        var _a;
-        return {
-            ngModule: NiceFilterViewModule,
-            providers: [
-                {
-                    provide: FILTER_VIEW_ICONS,
-                    useValue: Object.assign(Object.assign({}, defaultIcons$1), ((_a = options === null || options === void 0 ? void 0 : options.icons) !== null && _a !== void 0 ? _a : {}))
-                }
-            ].filter(x => !!x)
-        };
-    }
-    static providerFactory(options) {
-        var _a, _b, _c;
-        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 : {}
-            },
-            {
-                provide: FILTER_VIEW_STORE,
-                useValue: (_c = options.store) !== null && _c !== void 0 ? _c : { name: "nice-filter-view", resettable: true }
-            }
-        ].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 NicePreloadSelectedEntitiesProvider {
-}
-NicePreloadSelectedEntitiesProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NicePreloadSelectedEntitiesProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NicePreloadSelectedEntitiesProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NicePreloadSelectedEntitiesProvider });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NicePreloadSelectedEntitiesProvider, decorators: [{
-            type: Injectable
-        }] });
-
-const NICE_PRELOAD_SELECTED_ENTITIES_PROVIDER = new InjectionToken("nice_preload_selected_entities_provider");
-
-class NiceSelectableListStateQuery extends QueryEntity {
-    constructor(store) {
-        super(store);
-    }
-    selectActiveViewIndex() {
-        return this.select(({ ids, active }) => {
-            const index = ids.indexOf(active);
-            return index + 1;
-        });
-    }
-    selectFirstActive() {
-        return this.select(({ ids, active }) => {
-            if (!ids.length) {
-                return true;
-            }
-            return ids[0] === active;
-        });
-    }
-    selectLastActive() {
-        return this.select(({ ids, active }) => {
-            if (!ids.length) {
-                return true;
-            }
-            return ids[ids.length - 1] === active;
-        });
+        return state.query;
     }
 }
+NiceSelectableListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceSelectableListService, deps: [{ token: NICE_PRELOAD_SELECTED_ENTITIES_PROVIDER, optional: true }, { token: i2.ActivatedRoute }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceSelectableListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceSelectableListService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceSelectableListService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [NICE_PRELOAD_SELECTED_ENTITIES_PROVIDER]
+                    }] }, { type: i2.ActivatedRoute }, { type: i2.Router }];
+    } });
 
-class NiceSelectableListStateService {
-    constructor(store, route, router, preloadService, options) {
-        this.store = store;
-        this.route = route;
-        this.router = router;
-        this.preloadService = preloadService;
-        this.options = options;
-    }
-    get idKey() {
-        var _a, _b;
-        return (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.idKey) !== null && _b !== void 0 ? _b : "id";
-    }
-    get preloadedWindow() {
-        var _a, _b;
-        return (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.preloadWindow) !== null && _b !== void 0 ? _b : 2;
-    }
-    setActive(entity) {
-        this.store.setActive(entity[this.idKey]);
-    }
-    getIndex(identifier) {
-        const { ids } = this.store.getValue();
-        const index = ids.indexOf(identifier);
-        return index + 1;
+class NiceFilterExportButtonsComponent {
+    constructor(icons, exportsSettings, niceFilterViewQuery, niceFilterViewService, selectableListService, query, service, bottomSheet) {
+        this.icons = icons;
+        this.exportsSettings = exportsSettings;
+        this.niceFilterViewQuery = niceFilterViewQuery;
+        this.niceFilterViewService = niceFilterViewService;
+        this.selectableListService = selectableListService;
+        this.query = query;
+        this.service = service;
+        this.bottomSheet = bottomSheet;
+        this.customExport = [];
+        this.downloadFileName = "data";
+        this.canPrint = true;
+        this.loading$ = this.query.selectLoading();
     }
-    selectAll(options) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.preloadService) {
-                return this.store.update({
-                    allSelected: true
+    clickExport() {
+        const exports = [];
+        const subState = this.niceFilterViewQuery.getSubState("selectable");
+        let selected = [];
+        if (subState === null || subState === void 0 ? void 0 : subState.stateName) {
+            selected = this.selectableListService.query(subState.stateName).getAll().map((entity) => entity.id);
+        }
+        if (this.exportsSettings.xlsx) {
+            exports.push({
+                type: "xlsx",
+                onClickExport: () => this.clickXlsx()
+            });
+            if (selected.length) {
+                exports.push({
+                    type: "selected_xlsx",
+                    onClickExport: () => this.clickXlsx(selected)
                 });
             }
-            const ids = yield this.preloadService.loadAllEntities(options);
-            this.store.set(ids.map((id) => ({
-                [this.idKey]: id,
-                loaded: false
-            })));
-            return this.store.update({
-                allSelected: true
+        }
+        if (this.exportsSettings.csv) {
+            exports.push({
+                type: "csv",
+                onClickExport: () => this.clickCsv()
             });
-        });
-    }
-    select(id) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.store.update((state) => ({
-                unselectedEntity: arrayRemove(state.unselectedEntity, id)
-            }));
-            this.store.add({
-                [this.idKey]: id,
-                loaded: false
+            if (selected.length) {
+                exports.push({
+                    type: "selected_csv",
+                    onClickExport: () => this.clickCsv(selected)
+                });
+            }
+        }
+        if (this.exportsSettings.pdf) {
+            exports.push({
+                type: "pdf",
+                onClickExport: () => this.clickPdf()
             });
-            if (this.preloadService) {
-                const entity = yield this.preloadService.loadEntityById(id);
-                this.store.upsert(id, Object.assign(Object.assign({}, entity), { loaded: true }));
+            if (selected.length) {
+                exports.push({
+                    type: "selected_pdf",
+                    onClickExport: () => this.clickPdf(selected)
+                });
             }
-        });
-    }
-    selectMany(ids, active) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.store.add(ids.map((id) => ({
-                [this.idKey]: id,
-                loaded: false
-            })));
-            if (active) {
-                this.store.setActive(active);
-                yield this.loadEntities(true);
+        }
+        this.bottomSheet.open(ExportBottomSheetComponent, {
+            data: {
+                exportStrategies: [
+                    ...exports,
+                    ...this.customExport
+                ]
             }
         });
     }
-    selectEntity(entity) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.store.update((state) => ({
-                unselectedEntity: arrayRemove(state.unselectedEntity, entity[this.idKey])
-            }));
-            this.store.upsert(entity[this.idKey], Object.assign(Object.assign({}, entity), { loaded: true }));
-            if (this.preloadService) {
-                const preloadedEntity = yield this.preloadService.reloadEntity(entity);
-                this.store.upsert(preloadedEntity[this.idKey], Object.assign(Object.assign({}, preloadedEntity), { loaded: true }));
-            }
-        });
+    clickXlsx(ids) {
+        this.service.downloadData("xlsx", this.downloadFileName, ids);
     }
-    selectManyEntities(entities) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.preloadService) {
-                return this.store.upsertMany(entities.map((entity) => (Object.assign(Object.assign({}, entity), { loaded: true }))));
-            }
-            const preloadedEntities = yield this.preloadService.reloadEntities(entities);
-            this.store.upsertMany(preloadedEntities.map((preloadedEntity) => (Object.assign(Object.assign({}, preloadedEntity), { loaded: true }))));
-        });
+    clickCsv(ids) {
+        this.service.downloadData("csv", this.downloadFileName, ids);
     }
-    unselectAll() {
-        this.store.set([]);
-        return this.store.update({
-            allSelected: false,
-            unselectedEntity: []
-        });
+    clickPrint() {
+        this.service.printData();
     }
-    unselect(id) {
-        this.store.update((state) => ({
-            unselectedEntity: arrayAdd(state.unselectedEntity, id)
-        }));
-        this.store.remove(id);
+    clickPdf(ids) {
+        this.service.downloadData("pdf", this.downloadFileName, ids);
     }
-    unselectEntity(entity) {
-        this.store.update((state) => ({
-            unselectedEntity: arrayAdd(state.unselectedEntity, entity[this.idKey])
-        }));
-        this.store.remove(entity[this.idKey]);
+}
+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: NiceSelectableListService }, { token: NiceFilterViewQuery }, { token: NiceFilterViewService }, { token: i4$2.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", canPrint: "canPrint" }, ngImport: i0, template: "<button\n    *ngIf=\"canPrint\"\n    (click)=\"clickPrint()\"\n    [disabled]=\"loading$ | async\"\n    [matTooltip]=\"'general.print' | translate\"\n    class=\"export-button\"\n    mat-mini-fab\n>\n    <mat-icon [svgIcon]=\"icons.print.svgIcon\">{{ icons.print.matIcon }}</mat-icon>\n</button>\n\n<button\n    (click)=\"clickExport()\"\n    [disabled]=\"loading$ | async\"\n    [matTooltip]=\"'general.export' | translate\"\n    class=\"export-button\"\n    mat-mini-fab\n>\n    <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i8.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    *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]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [EXPORTS_SETTINGS]
+                    }] }, { type: NiceFilterViewQuery }, { type: NiceFilterViewService }, { type: NiceSelectableListService }, { type: NiceFilterViewQuery }, { type: NiceFilterViewService }, { type: i4$2.MatBottomSheet }];
+    }, propDecorators: { customExport: [{
+                type: Input
+            }], downloadFileName: [{
+                type: Input
+            }], canPrint: [{
+                type: Input
+            }] } });
+
+class NiceFilterExportDirective {
+    constructor(service) {
+        this.service = service;
+        this.downloadFileName = "data";
     }
-    unselectManyEntities(entities) {
-        this.store.remove(entities.map((entity) => entity[this.idKey]));
+    onClick() {
+        this.service.downloadData(this.type, this.downloadFileName);
     }
-    updateEntity(entity) {
-        this.store.update(entity[this.idKey], entity);
+}
+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();
     }
-    setEntities(ids, activeId) {
+    loadNextPage() {
         return __awaiter(this, void 0, void 0, function* () {
-            this.store.update({
-                unselectedEntity: [],
-                allSelected: false
-            });
-            this.store.set(ids.map((id) => ({
-                [this.idKey]: id,
-                loaded: false
-            })));
-            if (activeId) {
-                this.store.setActive(activeId);
+            const { filterParameters, filterResult } = this.query.getValue();
+            this.service.setMode("accumulated");
+            if (filterResult && filterResult.values.length >= filterResult.total) {
+                return;
             }
-            yield this.loadEntities(true);
+            this.service.setParameters(Object.assign(Object.assign({}, filterParameters), { start: filterParameters.start + filterParameters.length }));
+            this.service.filter();
         });
     }
-    next() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { ids, active } = this.store.getValue();
-            const index = ids.indexOf(active);
-            yield this.loadActiveEntity(ids[index + 1], 1);
-        });
+}
+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: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: 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 { mode } = this.query.getValue();
+            if (mode === "accumulated") {
+                this.service.resetPaging();
+            }
+            const { filterParameters } = this.query.getValue();
+            this.service.setParameters(Object.assign(Object.assign({}, filterParameters), { search }));
+            this.service.filter();
+        }))
+            .subscribe();
     }
-    previous() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { ids, active } = this.store.getValue();
-            const index = ids.indexOf(active);
-            yield this.loadActiveEntity(ids[index - 1], -1);
-        });
+    ngOnDestroy() {
+        this.unsubscribeAll$.next();
+        this.unsubscribeAll$.complete();
     }
-    first() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { ids } = this.store.getValue();
-            yield this.loadActiveEntity(ids[0], 1);
-        });
+    onUpdateSearch(search) {
+        this.searchText$.next(search);
     }
-    last() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { ids } = this.store.getValue();
-            yield this.loadActiveEntity(ids[ids.length - 1], -1);
-        });
+}
+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: i2$1.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();
     }
-    removeActive() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { active, ids } = this.store.getValue();
-            const index = ids.indexOf(active);
-            this.store.remove(active);
-            if (index === (ids.length - 1)) {
-                yield this.loadActiveEntity(ids[index - 1], -1);
-            }
-            else {
-                yield this.loadActiveEntity(ids[index + 1], 1);
+    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;
         });
-    }
-    loadActiveEntity(id, direction) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                this.store.setActive(id);
-                const { entities } = this.store.getValue();
-                if (!((_a = entities[+id + direction * this.preloadedWindow]) === null || _a === void 0 ? void 0 : _a.loaded)) {
-                    yield this.loadEntities(false);
-                }
-            }
-            catch (e) {
-                this.store.setError(e);
-            }
+        this.paginator.page.pipe(takeUntil(this.unsubscribeAll$)).subscribe((page) => {
+            const { filterParameters } = this.query.getValue();
+            this.service.setParameters(Object.assign(Object.assign({}, filterParameters), { start: page.pageIndex * page.pageSize, length: page.pageSize }));
+            this.service.filter();
         });
     }
-    loadEntities(loadExtremity) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.preloadService) {
+    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 toLoad = this.getListIdToLoad(loadExtremity);
-            if (!toLoad.length) {
+            const { order } = res;
+            if (!order) {
                 return;
             }
-            const entities = yield this.preloadService.loadEntitiesById(toLoad);
-            this.store.upsertMany(entities.map((entity) => (Object.assign(Object.assign({}, entity), { loaded: true }))));
+            this.sort.direction = order.direction;
+            this.sort.active = order.column;
         });
-    }
-    getListIdToLoad(loadExtremity) {
-        var _a;
-        const { active, ids, entities } = this.store.getValue();
-        const from = ids.indexOf(active) - this.preloadedWindow > 0 ? ids.indexOf(active) - this.preloadedWindow : 0;
-        const to = ids.indexOf(active) + this.preloadedWindow < ids.length - 1
-            ? ids.indexOf(active) + this.preloadedWindow
-            : ids.length - 1;
-        const toLoad = [];
-        if (loadExtremity) {
-            if (ids.length <= 2) {
-                return ids;
-            }
-            toLoad.push(ids[0], ids[ids.length - 1]);
-        }
-        for (let i = from; i <= to; i++) {
-            if (ids[i] === null || ids[0] === undefined) {
-                continue;
+        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: {} }));
             }
-            if (!toLoad.includes(ids[i]) && !((_a = entities[ids[i]]) === null || _a === void 0 ? void 0 : _a.loaded)) {
-                toLoad.push(ids[i]);
+            else {
+                this.service.setParameters(Object.assign(Object.assign({}, filterParameters), { order: {
+                        column: sort.active,
+                        direction: sort.direction
+                    } }));
             }
-        }
-        return toLoad;
+            this.service.filter();
+        });
     }
-    generateQueryParams() {
-        const { ids, active } = this.store.getValue();
-        return {
-            selection: ids.length ? ids : null,
-            selected: active !== null && active !== void 0 ? active : null
-        };
+    ngOnDestroy() {
+        this.unsubscribeAll$.next();
+        this.unsubscribeAll$.complete();
     }
-    setQueryParams() {
-        this.router.navigate([], {
-            queryParams: this.generateQueryParams(),
-            queryParamsHandling: "merge"
-        });
+}
+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 NiceSelectableListService {
-    constructor(providers, route, router) {
-        this.providers = providers;
+class NiceFilterQueryParamsDirective {
+    constructor(query, service, route, router) {
+        this.query = query;
+        this.service = service;
         this.route = route;
         this.router = router;
-        this.stores = new Map();
+        this.init = new EventEmitter();
+        this.unsubscribeAll$ = new Subject();
+        this._initialized = false;
     }
-    createState(name, options) {
-        const store = new EntityStore({ allSelected: false, unselectedEntity: [] }, { name, idKey: options === null || options === void 0 ? void 0 : options.idKey });
-        const query = new NiceSelectableListStateQuery(store);
-        const state = { store, query };
-        this.stores.set(name, state);
-        return state;
+    get initialized() {
+        return this._initialized;
     }
-    getState(name) {
-        return this.stores.get(name);
+    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() {
+        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 }) => {
+            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(Object.assign(Object.assign({}, params), { fallbackOrder: filterParameters.fallbackOrder }));
+            }
+            if (!this._initialized) {
+                this._initialized = true;
+                this.init.emit();
+            }
+        });
     }
-    withState(stateName, options) {
-        var _a;
-        const provider = (_a = this.providers) === null || _a === void 0 ? void 0 : _a.find((p) => p.state === stateName);
-        const state = this.getState(stateName);
-        if (state) {
-            return new NiceSelectableListStateService(state.store, this.route, this.router, provider, options);
-        }
-        const newState = this.createState(stateName, options);
-        return new NiceSelectableListStateService(newState.store, this.route, this.router, provider, options);
+}
+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 = {};
     }
-    query(stateName) {
-        const state = this.getState(stateName);
-        if (!state) {
-            throw new Error("No state found");
+    ngOnChanges(changes) {
+        if ("queryParams" in changes) {
+            this.service.setQueryParams(this.queryParams);
         }
-        return state.query;
     }
 }
-NiceSelectableListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceSelectableListService, deps: [{ token: NICE_PRELOAD_SELECTED_ENTITIES_PROVIDER, optional: true }, { token: i2.ActivatedRoute }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-NiceSelectableListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceSelectableListService, providedIn: "root" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceSelectableListService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: "root" }]
-        }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [NICE_PRELOAD_SELECTED_ENTITIES_PROVIDER]
-                    }] }, { type: i2.ActivatedRoute }, { type: i2.Router }];
-    } });
+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 SelectableListContentService {
     constructor() {
@@ -5043,36 +4830,374 @@ class NiceSelectableListCheckboxDirective {
             this.checkbox.checked = false;
             return;
         }
-        this.initialized = true;
-        if (!count) {
-            this.checkbox.indeterminate = false;
-            this.checkbox.checked = false;
+        this.initialized = true;
+        if (!count) {
+            this.checkbox.indeterminate = false;
+            this.checkbox.checked = false;
+            return;
+        }
+        if (count !== checkboxes.length) {
+            this.checkbox.indeterminate = true;
+            this.checkbox.checked = false;
+            return;
+        }
+        if (count === checkboxes.length) {
+            this.checkbox.checked = true;
+            this.checkbox.indeterminate = false;
+        }
+    }
+}
+NiceSelectableListCheckboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceSelectableListCheckboxDirective, deps: [{ token: i1$4.MatCheckbox }, { token: SelectableListContentService }, { token: NiceSelectableListService }], target: i0.ɵɵFactoryTarget.Directive });
+NiceSelectableListCheckboxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.3", type: NiceSelectableListCheckboxDirective, selector: "mat-checkbox[niceSelectableListCheckbox]", inputs: { selectableEntity: "selectableEntity", selectPage: "selectPage" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceSelectableListCheckboxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "mat-checkbox[niceSelectableListCheckbox]"
+                }]
+        }], ctorParameters: function () { return [{ type: i1$4.MatCheckbox }, { type: SelectableListContentService }, { type: NiceSelectableListService }]; }, propDecorators: { selectableEntity: [{
+                type: Input
+            }], selectPage: [{
+                type: Input
+            }] } });
+
+// tslint:disable-next-line:directive-class-suffix
+class NiceSelectableListDirective {
+    constructor(service, selectableListService, route) {
+        this.service = service;
+        this.selectableListService = selectableListService;
+        this.route = route;
+        this.unsubscribeAll$ = new Subject();
+        this.unsubscribeQuerySub$ = new Subject();
+    }
+    ngOnInit() {
+        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.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 }, { token: NiceSelectableListService }, { 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,
+            args: [{
+                    selector: "[niceSelectableList]",
+                    providers: [SelectableListContentService]
+                }]
+        }], ctorParameters: function () { return [{ type: SelectableListContentService }, { type: NiceSelectableListService }, { type: i2.ActivatedRoute }]; }, propDecorators: { state: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], checkboxes: [{
+                type: ContentChildren,
+                args: [NiceSelectableListCheckboxDirective, { descendants: true }]
+            }] } });
+
+class NiceBaseFilterViewComponent {
+    ngOnInit(autoLoad = true, { mode, loadConfig, configQueryParams } = {}) {
+        if (mode) {
+            this.filterViewService.setMode(mode);
+        }
+        this.autoLoad(autoLoad);
+        this.loadConfig(loadConfig, configQueryParams);
+        this.filterViewLoading$ = this.filterViewQuery.selectLoading();
+        if (this.selectableListDirective) {
+            this.filterViewService.updateSubState("selectable", { stateName: this.selectableListDirective.state });
+        }
+    }
+    /**
+     * 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);
+        if (reload) {
+            this.filterViewService.filter();
+        }
+    }
+    /**
+     * 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);
+        if (reload) {
+            this.filterViewService.filter();
+        }
+    }
+    /**
+     * 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);
+        if (reload) {
+            this.filterViewService.filter();
+        }
+    }
+    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 (count !== checkboxes.length) {
-            this.checkbox.indeterminate = true;
-            this.checkbox.checked = false;
+        if (loadConfig === false) {
             return;
         }
-        if (count === checkboxes.length) {
-            this.checkbox.checked = true;
-            this.checkbox.indeterminate = false;
+        if (this.advancedFiltersButton || this.advancedFilters) {
+            this.filterViewService.loadConfig(configQueryParams);
         }
     }
 }
-NiceSelectableListCheckboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceSelectableListCheckboxDirective, deps: [{ token: i1$4.MatCheckbox }, { token: SelectableListContentService }, { token: NiceSelectableListService }], target: i0.ɵɵFactoryTarget.Directive });
-NiceSelectableListCheckboxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.3", type: NiceSelectableListCheckboxDirective, selector: "mat-checkbox[niceSelectableListCheckbox]", inputs: { selectableEntity: "selectableEntity", selectPage: "selectPage" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceSelectableListCheckboxDirective, decorators: [{
-            type: Directive,
+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 }, { propertyName: "queryParams", first: true, predicate: NiceFilterQueryParamsDirective, descendants: true, static: true }, { propertyName: "advancedFiltersButton", first: true, predicate: NiceAdvancedFiltersButtonComponent, descendants: true, static: true }, { propertyName: "advancedFilters", first: true, predicate: NiceAdvancedFiltersComponent, descendants: true, static: true }, { propertyName: "selectableListDirective", first: true, predicate: NiceSelectableListDirective, descendants: true, static: true }], ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceBaseFilterViewComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: "mat-checkbox[niceSelectableListCheckbox]"
+                    template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1$4.MatCheckbox }, { type: SelectableListContentService }, { type: NiceSelectableListService }]; }, propDecorators: { selectableEntity: [{
-                type: Input
-            }], selectPage: [{
-                type: Input
+        }], propDecorators: { filterViewService: [{
+                type: ViewChild,
+                args: [NiceFilterViewComponent, { read: NiceFilterViewService, static: true }]
+            }], 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 }]
+            }], selectableListDirective: [{
+                type: ViewChild,
+                args: [NiceSelectableListDirective, { static: true }]
             }] } });
 
+class NiceFilterViewModule {
+    static forRoot(options) {
+        var _a;
+        return {
+            ngModule: NiceFilterViewModule,
+            providers: [
+                {
+                    provide: FILTER_VIEW_ICONS,
+                    useValue: Object.assign(Object.assign({}, defaultIcons$1), ((_a = options === null || options === void 0 ? void 0 : options.icons) !== null && _a !== void 0 ? _a : {}))
+                }
+            ].filter(x => !!x)
+        };
+    }
+    static providerFactory(options) {
+        var _a, _b, _c;
+        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 : {}
+            },
+            {
+                provide: FILTER_VIEW_STORE,
+                useValue: (_c = options.store) !== null && _c !== void 0 ? _c : { name: "nice-filter-view", resettable: true }
+            }
+        ].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 NicePreloadSelectedEntitiesProvider {
+}
+NicePreloadSelectedEntitiesProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NicePreloadSelectedEntitiesProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NicePreloadSelectedEntitiesProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NicePreloadSelectedEntitiesProvider });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NicePreloadSelectedEntitiesProvider, decorators: [{
+            type: Injectable
+        }] });
+
 // tslint:disable-next-line:directive-class-suffix
 class NiceSelectableListSelectAllDirective {
     constructor(niceFilterViewQuery, service, selectableListService) {
@@ -5115,85 +5240,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                 args: ["click"]
             }] } });
 
-// tslint:disable-next-line:directive-class-suffix
-class NiceSelectableListDirective {
-    constructor(service, selectableListService, route) {
-        this.service = service;
-        this.selectableListService = selectableListService;
-        this.route = route;
-        this.unsubscribeAll$ = new Subject();
-        this.unsubscribeQuerySub$ = new Subject();
-    }
-    ngOnInit() {
-        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.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 }, { token: NiceSelectableListService }, { 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,
-            args: [{
-                    selector: "[niceSelectableList]",
-                    providers: [SelectableListContentService]
-                }]
-        }], ctorParameters: function () { return [{ type: SelectableListContentService }, { type: NiceSelectableListService }, { type: i2.ActivatedRoute }]; }, propDecorators: { state: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], checkboxes: [{
-                type: ContentChildren,
-                args: [NiceSelectableListCheckboxDirective, { descendants: true }]
-            }] } });
-
 class NiceSelectableListModule {
     static register(...providers) {
         return {