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

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

@@ -1,24 +1,24 @@
 import { plainToInstance } from 'class-transformer';
 import { map, takeUntil, debounceTime, switchMap, distinctUntilChanged } from 'rxjs/operators';
 import { HttpParams } from '@angular/common/http';
-import * as i5$1 from '@recursyve/nice-ui-kit.v2';
-import { isNullOrUndefined, ObjectUtils, FileUtils, ArrayUtils, ExportBottomSheetComponent, NiceLoadingSpinnerModule, NiceTypeaheadModule, NiceExportBottomSheetModule } from '@recursyve/nice-ui-kit.v2';
+import * as i5 from '@recursyve/nice-ui-kit.v2';
+import { isNullOrUndefined, ObjectUtils, FileUtils, ArrayUtils, ExportBottomSheetComponent, NiceLoadingSpinnerModule, NiceTypeaheadModule, NiceExportBottomSheetModule, NiceAsyncTypeaheadProvider, NICE_ASYNC_TYPEAHEAD_PROVIDER, NiceAsyncTypeaheadModule } from '@recursyve/nice-ui-kit.v2';
 import * as i0 from '@angular/core';
 import { Directive, Input, NgModule, Injectable, Inject, InjectionToken, Optional, Pipe, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Output, HostListener, forwardRef, TemplateRef, ContentChild, ContentChildren, ViewChild, QueryList } from '@angular/core';
 import { Store, StoreConfig, Query, arrayAdd, arrayUpsert, arrayRemove, EntityStore, QueryEntity, EntityActions } from '@datorama/akita';
-import { combineLatest, Subject, firstValueFrom, of, tap } from 'rxjs';
+import { combineLatest, Subject, firstValueFrom, of, lastValueFrom, startWith, tap, distinct, take } from 'rxjs';
 import { __decorate, __metadata } from 'tslib';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i3$3 from '@angular/material/bottom-sheet';
+import * as i3$4 from '@angular/material/bottom-sheet';
 import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
-import * as i6 from '@angular/common';
+import * as i2$1 from '@angular/common';
 import { CommonModule, AsyncPipe, NgIf, NgTemplateOutlet } from '@angular/common';
 import * as i1$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import * as i8 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i5 from '@angular/material/icon';
+import * as i4$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i10 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -31,30 +31,33 @@ import { MatTableModule } from '@angular/material/table';
 import * as i14 from '@angular/material/sort';
 import { MatSortModule } from '@angular/material/sort';
 import * as i4 from '@angular/material/core';
-import { NativeDateAdapter, MAT_DATE_LOCALE, MatRippleModule, DateAdapter } from '@angular/material/core';
+import { NativeDateAdapter, MAT_DATE_LOCALE, MatRippleModule, DateAdapter, MatOptionModule } from '@angular/material/core';
 import * as i1$3 from '@recursyve/ngx-form-generator';
-import { Control, Required, Array as Array$1, GeneratedFormGroup, ngxFormGeneratorFactory } from '@recursyve/ngx-form-generator';
+import { Control, Required, Array as Array$1, GeneratedFormGroup, ngxFormGeneratorFactory, AddValidatorIf, NgxFormGeneratorProvider } from '@recursyve/ngx-form-generator';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
-import * as i2$1 from '@angular/cdk/platform';
+import * as i2$2 from '@angular/cdk/platform';
 import { ComponentPortal } from '@angular/cdk/portal';
 import * as i3 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import * as i2$2 from '@angular/material/form-field';
-import * as i6$1 from '@angular/material/select';
+import * as i3$1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i6 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i3$1 from '@angular/material/input';
+import * as i3$2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i4$1 from 'ngx-mask';
+import * as i4$2 from 'ngx-mask';
 import { NgxMaskModule } from 'ngx-mask';
-import * as i3$2 from '@angular/material/radio';
+import * as i3$3 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i5$2 from '@angular/material/datepicker';
+import * as i5$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i1$2 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i18 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
+import * as i8$1 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i1$4 from '@angular/material/checkbox';
 
 class QueryParamsUtils {
@@ -1402,6 +1405,9 @@ class FilterGroupIconPipe {
         this.service = service;
     }
     transform(value) {
+        if (!this.service) {
+            return null;
+        }
         const icon = this.service.getFilterGroupIconClass(value);
         if (typeof icon === "string") {
             return {
@@ -1411,14 +1417,16 @@ class FilterGroupIconPipe {
         return icon;
     }
 }
-FilterGroupIconPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: FilterGroupIconPipe, deps: [{ token: NiceFilterGroupService }], target: i0.ɵɵFactoryTarget.Pipe });
+FilterGroupIconPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: FilterGroupIconPipe, deps: [{ token: NiceFilterGroupService, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
 FilterGroupIconPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.3", ngImport: i0, type: FilterGroupIconPipe, name: "filterGroupIcon" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: FilterGroupIconPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: "filterGroupIcon"
                 }]
-        }], ctorParameters: function () { return [{ type: NiceFilterGroupService }]; } });
+        }], ctorParameters: function () { return [{ type: NiceFilterGroupService, decorators: [{
+                    type: Optional
+                }] }]; } });
 
 class FilterSelectionComponent {
     constructor() {
@@ -1440,7 +1448,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: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.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 });
+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 });
 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" }]
@@ -1507,12 +1515,12 @@ class QueryBuilderTriggerDirective {
         return this.platform.ANDROID || this.platform.IOS;
     }
 }
-QueryBuilderTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: QueryBuilderTriggerDirective, deps: [{ token: i1.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1.Overlay }, { token: i2$1.Platform }], target: i0.ɵɵFactoryTarget.Directive });
+QueryBuilderTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: QueryBuilderTriggerDirective, deps: [{ token: i1.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1.Overlay }, { token: i2$2.Platform }], target: i0.ɵɵFactoryTarget.Directive });
 QueryBuilderTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.3", type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: { queryBuilderFilters: "queryBuilderFilters", queryBuilderFiltersLoading: "queryBuilderFiltersLoading" }, outputs: { queryBuilderFilterSelected: "queryBuilderFilterSelected" }, host: { listeners: { "click": "click()" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: QueryBuilderTriggerDirective, decorators: [{
             type: Directive,
             args: [{ selector: "[niceQueryBuilderTrigger]" }]
-        }], ctorParameters: function () { return [{ type: i1.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1.Overlay }, { type: i2$1.Platform }]; }, propDecorators: { queryBuilderFilters: [{
+        }], ctorParameters: function () { return [{ type: i1.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1.Overlay }, { type: i2$2.Platform }]; }, propDecorators: { queryBuilderFilters: [{
                 type: Input
             }], queryBuilderFiltersLoading: [{
                 type: Input
@@ -1523,7 +1531,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                 args: ["click"]
             }] } });
 
-class FilterComponent {
+class FilterComponent$1 {
     constructor() {
         this.propagateChanges = (_) => { };
     }
@@ -1543,14 +1551,14 @@ class FilterComponent {
         this.propagateChanges(value);
     }
 }
-FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: FilterComponent, selector: "ng-component", ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: FilterComponent, decorators: [{
+FilterComponent$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: FilterComponent$1, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FilterComponent$1.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: FilterComponent$1, selector: "ng-component", ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: FilterComponent$1, decorators: [{
             type: Component,
             args: [{ template: `` }]
         }] });
 
-class SelectFilterComponent extends FilterComponent {
+class SelectFilterComponent extends FilterComponent$1 {
     constructor(filterService) {
         super();
         this.filterService = filterService;
@@ -1609,7 +1617,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: i6.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: i2$2.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 });
+    ], 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 });
 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: [
@@ -1625,7 +1633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                 type: Input
             }] } });
 
-class TextFilterComponent extends FilterComponent {
+class TextFilterComponent extends FilterComponent$1 {
 }
 TextFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: TextFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 TextFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: TextFilterComponent, selector: "nice-text-filter", inputs: { filterConfig: "filterConfig" }, providers: [
@@ -1634,7 +1642,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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.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 });
+    ], 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 });
 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: [
@@ -1648,7 +1656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                 type: Input
             }] } });
 
-class NumberFilterComponent extends FilterComponent {
+class NumberFilterComponent extends FilterComponent$1 {
 }
 NumberFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NumberFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 NumberFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NumberFilterComponent, selector: "nice-number-filter", providers: [
@@ -1657,7 +1665,7 @@ NumberFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             useExisting: forwardRef(() => NumberFilterComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"flex-auto\">\n    <input matInput [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" type=\"number\" />\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.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"] }], encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"flex-auto\">\n    <input matInput [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" type=\"number\" />\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NumberFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-number-filter", encapsulation: ViewEncapsulation.None, providers: [
@@ -1669,7 +1677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                     ], template: "<mat-form-field class=\"flex-auto\">\n    <input matInput [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" type=\"number\" />\n</mat-form-field>\n" }]
         }] });
 
-class RadioFilterComponent extends FilterComponent {
+class RadioFilterComponent extends FilterComponent$1 {
 }
 RadioFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: RadioFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 RadioFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: RadioFilterComponent, selector: "nice-radio-filter", inputs: { filterConfig: "filterConfig" }, providers: [
@@ -1678,7 +1686,7 @@ RadioFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             useExisting: forwardRef(() => RadioFilterComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, template: "<mat-radio-group class=\"flex-auto\" [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\">\n    <mat-radio-button class=\"mx-4\" *ngFor=\"let option of filterConfig.options\" [value]=\"option?.key\">\n        {{ option?.name }}\n    </mat-radio-button>\n</mat-radio-group>\n", dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "directive", type: i3$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, template: "<mat-radio-group class=\"flex-auto\" [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\">\n    <mat-radio-button class=\"mx-4\" *ngFor=\"let option of filterConfig.options\" [value]=\"option?.key\">\n        {{ option?.name }}\n    </mat-radio-button>\n</mat-radio-group>\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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: RadioFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-radio-filter", encapsulation: ViewEncapsulation.None, providers: [
@@ -1692,7 +1700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                 type: Input
             }] } });
 
-class DateFilterComponent extends FilterComponent {
+class DateFilterComponent extends FilterComponent$1 {
     constructor(icons) {
         super();
         this.icons = icons;
@@ -1705,7 +1713,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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i3$1.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 });
+    ], 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 });
 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: [
@@ -1773,7 +1781,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: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i6.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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i6$1.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: 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 });
 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" }]
@@ -1840,7 +1848,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: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.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 });
+    ], 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 });
 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: [
@@ -2086,12 +2094,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$3.MatBottomSheet }, { token: i2.Router }, { token: i5$1.NiceMediaWatcherService }], target: i0.ɵɵFactoryTarget.Component });
+NiceBaseListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceBaseListComponent, deps: [{ token: ENABLE_QUERY_BUILDER, optional: true }, { token: BASE_LIST_ICONS }, { token: BASE_LIST_LAYOUT }, { token: TABLE_COLUMNS }, { token: EXPORTS_SETTINGS$1 }, { token: NiceBaseListQuery }, { token: NiceBaseListService }, { token: i2.ActivatedRoute }, { token: i3$4.MatBottomSheet }, { token: i2.Router }, { token: i5.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: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: i6.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: 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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceBaseListComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-base-list", providers: [
@@ -2116,7 +2124,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$3.MatBottomSheet }, { type: i2.Router }, { type: i5$1.NiceMediaWatcherService }]; }, propDecorators: { title: [{
+                }] }, { type: NiceBaseListQuery }, { type: NiceBaseListService }, { type: i2.ActivatedRoute }, { type: i3$4.MatBottomSheet }, { type: i2.Router }, { type: i5.NiceMediaWatcherService }]; }, propDecorators: { title: [{
                 type: ContentChild,
                 args: [NiceBaseListTitleDirective, { read: TemplateRef }]
             }], buttons: [{
@@ -2195,16 +2203,16 @@ class NiceCustomDateAdapter extends NativeDateAdapter {
         return date.getUTCFullYear();
     }
 }
-NiceCustomDateAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceCustomDateAdapter, deps: [{ token: i1$2.TranslateService }, { token: MAT_DATE_LOCALE }, { token: i2$1.Platform }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceCustomDateAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceCustomDateAdapter, deps: [{ token: i1$2.TranslateService }, { token: MAT_DATE_LOCALE }, { token: i2$2.Platform }], target: i0.ɵɵFactoryTarget.Injectable });
 NiceCustomDateAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceCustomDateAdapter });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceCustomDateAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$2.TranslateService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DATE_LOCALE]
-                }] }, { type: i2$1.Platform }]; } });
+                }] }, { type: i2$2.Platform }]; } });
 
-const defaultIcons$1 = {
+const defaultIcons$2 = {
     add: {
         matIcon: "add"
     },
@@ -2230,7 +2238,7 @@ class NiceQueryBuilderModule {
                 {
                     provide: QUERY_BUILDER_ICONS,
                     useValue: {
-                        ...defaultIcons$1,
+                        ...defaultIcons$2,
                         ...(options?.icons ?? {})
                     }
                 }
@@ -2321,7 +2329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                 }]
         }] });
 
-const defaultIcons = {
+const defaultIcons$1 = {
     search: {
         matIcon: "search"
     },
@@ -2351,7 +2359,7 @@ class NiceBaseListModule {
                 {
                     provide: BASE_LIST_ICONS,
                     useValue: {
-                        ...defaultIcons,
+                        ...defaultIcons$1,
                         ...(options?.icons ?? {})
                     }
                 },
@@ -2592,12 +2600,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$3.MatBottomSheet }, { token: i2.Router }, { token: i5$1.NiceMediaWatcherService }, { token: NiceMultiStateListService }], target: i0.ɵɵFactoryTarget.Component });
+NiceMultiStateListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceMultiStateListComponent, deps: [{ token: ENABLE_QUERY_BUILDER, optional: true }, { token: BASE_LIST_ICONS }, { token: BASE_LIST_LAYOUT }, { token: EXPORTS_SETTINGS$1 }, { token: NiceMultiStateListQuery }, { token: i2.ActivatedRoute }, { token: i3$4.MatBottomSheet }, { token: i2.Router }, { token: i5.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: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: i6.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: 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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceMultiStateListComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-multi-state-list", providers: [
@@ -2619,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$3.MatBottomSheet }, { type: i2.Router }, { type: i5$1.NiceMediaWatcherService }, { type: NiceMultiStateListService }]; }, propDecorators: { state: [{
+                }] }, { type: NiceMultiStateListQuery }, { type: i2.ActivatedRoute }, { type: i3$4.MatBottomSheet }, { type: i2.Router }, { type: i5.NiceMediaWatcherService }, { type: NiceMultiStateListService }]; }, propDecorators: { state: [{
                 type: Input
             }] } });
 
@@ -2738,18 +2746,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                 }]
         }] });
 
-class NiceFilterDataDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-NiceFilterDataDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterDataDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-NiceFilterDataDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.3", type: NiceFilterDataDirective, selector: "[niceFilterData]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterDataDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: "[niceFilterData]" }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
-
 const EXPORTS_SETTINGS = new InjectionToken("exports_settings");
 const FILTER_VIEW_ICONS = new InjectionToken("filter_view_icons");
 const FILTER_VIEW_STATE = new InjectionToken("filter_view_state");
@@ -2874,6 +2870,10 @@ class NiceFilterViewStore extends EntityStore {
         }
         return parameters;
     }
+    getSubState(name) {
+        const { subStates } = this.getValue();
+        return subStates[name];
+    }
 }
 NiceFilterViewStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterViewStore, deps: [{ token: FILTER_VIEW_STATE }, { token: FILTER_VIEW_STORE }], target: i0.ɵɵFactoryTarget.Injectable });
 NiceFilterViewStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterViewStore });
@@ -2892,6 +2892,9 @@ class NiceFilterViewQuery extends QueryEntity {
         super(store);
         this.store = store;
     }
+    selectSubState(name) {
+        return this.select((state) => state.subStates[name]);
+    }
     selectFilterConfigLoading() {
         return this.select("filterConfigLoading");
     }
@@ -2907,6 +2910,9 @@ class NiceFilterViewQuery extends QueryEntity {
     getParameters() {
         return this.store.getParameters(this.store.getValue().filterParameters);
     }
+    getSubState(name) {
+        return this.store.getSubState(name);
+    }
 }
 NiceFilterViewQuery.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterViewQuery, deps: [{ token: NiceFilterViewStore }], target: i0.ɵɵFactoryTarget.Injectable });
 NiceFilterViewQuery.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterViewQuery });
@@ -2914,22 +2920,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: NiceFilterViewStore }]; } });
 
-class NiceFilterCustomDataViewComponent {
-    constructor(query) {
-        this.query = query;
-        this.data$ = this.query.selectAll();
-    }
-}
-NiceFilterCustomDataViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterCustomDataViewComponent, deps: [{ token: NiceFilterViewQuery }], target: i0.ɵɵFactoryTarget.Component });
-NiceFilterCustomDataViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceFilterCustomDataViewComponent, selector: "nice-filter-custom-data-view, div[nice-filter-custom-data-view]", queries: [{ propertyName: "content", first: true, predicate: NiceFilterDataDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"content\">\n    <ng-container *ngTemplateOutlet=\"content; context: { $implicit: data$ | async }\"></ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterCustomDataViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "nice-filter-custom-data-view, div[nice-filter-custom-data-view]", encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"content\">\n    <ng-container *ngTemplateOutlet=\"content; context: { $implicit: data$ | async }\"></ng-container>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: NiceFilterViewQuery }]; }, propDecorators: { content: [{
-                type: ContentChild,
-                args: [NiceFilterDataDirective, { read: TemplateRef }]
-            }] } });
-
 class NiceFilterViewService {
     constructor(store, filterService) {
         this.store = store;
@@ -2943,6 +2933,14 @@ class NiceFilterViewService {
             disabled: true
         });
     }
+    updateSubState(name, value) {
+        this.store.update((state) => ({
+            subStates: {
+                ...state.subStates,
+                [name]: value
+            }
+        }));
+    }
     enable() {
         this.store.update({
             disabled: false
@@ -3055,6 +3053,8 @@ class NiceFilterViewService {
         const { filterParameters } = this.store.getValue();
         const newRules = {
             order: filterParameters.order,
+            start: 0,
+            length: filterParameters.length,
             rules
         };
         this.setParameters(newRules, reload);
@@ -3138,116 +3138,962 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                     args: [NiceFilterService]
                 }] }]; } });
 
-class NiceFilterExportButtonsComponent {
-    constructor(icons, exportsSettings, query, service, bottomSheet) {
-        this.icons = icons;
-        this.exportsSettings = exportsSettings;
-        this.query = query;
-        this.service = service;
-        this.bottomSheet = bottomSheet;
-        this.customExport = [];
-        this.downloadFileName = "data";
-        this.loading$ = this.query.selectLoading();
+class AdvancedFiltersUtils {
+    static isSingleInput(filterOperator) {
+        if (!filterOperator) {
+            return false;
+        }
+        return AdvancedFiltersUtils.singleInputOperators.includes(filterOperator);
     }
-    clickExport() {
-        const exports = [];
-        if (this.exportsSettings.xlsx) {
-            exports.push({
-                type: "xlsx",
-                onClickExport: () => this.clickXlsx()
-            });
+    static isDoubleInput(filterOperator) {
+        if (!filterOperator) {
+            return false;
         }
-        if (this.exportsSettings.csv) {
-            exports.push({
-                type: "csv",
-                onClickExport: () => this.clickCsv()
-            });
+        return AdvancedFiltersUtils.doubleInputOperators.includes(filterOperator);
+    }
+    static isNoInput(filterOperator) {
+        if (!filterOperator) {
+            return false;
         }
-        if (this.exportsSettings.pdf) {
-            exports.push({
-                type: "pdf",
-                onClickExport: () => this.clickPdf()
-            });
+        return AdvancedFiltersUtils.noInputOperators.includes(filterOperator);
+    }
+    static createRule(config, operator) {
+        const base = {
+            id: config.id,
+            operation: operator || config.operators[0].id
+        };
+        switch (config.type) {
+            case FilterType.Text:
+                return {
+                    ...base,
+                    value: AdvancedFiltersUtils.isDoubleInput(operator) ? ["", ""] : ""
+                };
+            case FilterType.Select:
+                return {
+                    ...base,
+                    value: AdvancedFiltersUtils.isDoubleInput(operator) ? [null, null] : null
+                };
+            case FilterType.Date:
+                return {
+                    ...base,
+                    value: AdvancedFiltersUtils.isDoubleInput(operator) ? [new Date(), new Date()] : new Date()
+                };
+            case FilterType.Radio:
+                return {
+                    ...base,
+                    value: AdvancedFiltersUtils.isDoubleInput(operator)
+                        ? [config.options?.[0].key, config.options?.[0].key]
+                        : config.options?.[0].key
+                };
+            case FilterType.Number:
+                return {
+                    ...base,
+                    value: AdvancedFiltersUtils.isDoubleInput(operator) ? [0, 0] : 0
+                };
         }
-        this.bottomSheet.open(ExportBottomSheetComponent, {
-            data: {
-                exportStrategies: [
-                    ...exports,
-                    ...this.customExport
-                ]
-            }
-        });
     }
-    clickXlsx() {
-        this.service.downloadData("xlsx", this.downloadFileName);
+}
+AdvancedFiltersUtils.noInputOperators = [
+    FilterOperatorTypes.IsEmpty,
+    FilterOperatorTypes.IsNotEmpty,
+    FilterOperatorTypes.IsNull,
+    FilterOperatorTypes.IsNotNull,
+    FilterOperatorTypes.None
+];
+AdvancedFiltersUtils.singleInputOperators = [
+    FilterOperatorTypes.Equal,
+    FilterOperatorTypes.NotEqual,
+    FilterOperatorTypes.Less,
+    FilterOperatorTypes.LessOrEqual,
+    FilterOperatorTypes.Greater,
+    FilterOperatorTypes.GreaterOrEqual,
+    FilterOperatorTypes.BeginsWith,
+    FilterOperatorTypes.NotBeginsWith,
+    FilterOperatorTypes.EndsWith,
+    FilterOperatorTypes.NotEndsWith,
+    FilterOperatorTypes.Contains,
+    FilterOperatorTypes.NotContains
+];
+AdvancedFiltersUtils.doubleInputOperators = [
+    FilterOperatorTypes.Between,
+    FilterOperatorTypes.NotBetween
+];
+
+const ADVANCED_FILTER_ICONS = new InjectionToken("advanced_filter_icons");
+
+class NiceFilterGroupIconPipe {
+    constructor(service) {
+        this.service = service;
     }
-    clickCsv() {
-        this.service.downloadData("csv", this.downloadFileName);
+    transform(value) {
+        if (!this.service) {
+            return null;
+        }
+        const icon = this.service.getFilterGroupIconClass(value);
+        if (typeof icon === "string") {
+            return {
+                class: icon
+            };
+        }
+        return icon;
     }
-    clickPrint() {
-        this.service.printData();
+}
+NiceFilterGroupIconPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterGroupIconPipe, deps: [{ token: NiceFilterGroupService, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
+NiceFilterGroupIconPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterGroupIconPipe, name: "niceFilterGroupIcon" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterGroupIconPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "niceFilterGroupIcon"
+                }]
+        }], ctorParameters: function () { return [{ type: NiceFilterGroupService, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+class NiceAdvancedFilterSelectionComponent {
+    constructor(query) {
+        this.query = query;
+        this.filterSelected = new EventEmitter();
+        this.loading$ = this.query.selectFilterConfigLoading();
+        this.filterGroups$ = this.query.selectFilterConfig().pipe(map((config) => {
+            const groups = ArrayUtils.uniqueObjects(config.map(x => x.group), x => x?.key);
+            const result = [];
+            for (const group of groups) {
+                if (!group) {
+                    continue;
+                }
+                result.push([group, config.filter(x => x.group?.key === group.key)]);
+            }
+            return result.sort(([, a], [, b]) => b.length - a.length);
+        }));
     }
-    clickPdf() {
-        this.service.downloadData("pdf", this.downloadFileName);
+    selectFilter(filterConfigurationModel) {
+        this.filterSelected.emit(filterConfigurationModel);
+    }
+    trackGroups(index, value) {
+        return value[0]?.key ?? index;
+    }
+    trackFilter(index, value) {
+        return value.id ?? index;
     }
 }
-NiceFilterExportButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterExportButtonsComponent, deps: [{ token: FILTER_VIEW_ICONS }, { token: EXPORTS_SETTINGS }, { token: NiceFilterViewQuery }, { token: NiceFilterViewService }, { token: i3$3.MatBottomSheet }], target: i0.ɵɵFactoryTarget.Component });
-NiceFilterExportButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceFilterExportButtonsComponent, selector: "nice-filter-export-buttons, div[nice-filter-export-buttons]", inputs: { customExport: "customExport", downloadFileName: "downloadFileName" }, ngImport: i0, template: "<button\n    (click)=\"clickPrint()\"\n    [disabled]=\"loading$ | async\"\n    [matTooltip]=\"'general.print' | translate\"\n    class=\"export-button\"\n    mat-mini-fab\n>\n    <mat-icon [svgIcon]=\"icons.print.svgIcon\">{{ icons.print.matIcon }}</mat-icon>\n</button>\n\n<button\n    (click)=\"clickExport()\"\n    [disabled]=\"loading$ | async\"\n    [matTooltip]=\"'general.export' | translate\"\n    class=\"export-button\"\n    mat-mini-fab\n>\n    <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterExportButtonsComponent, decorators: [{
+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=\"grid grid-cols-1 md:grid-cols-2 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedFilterSelectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: "nice-filter-export-buttons, div[nice-filter-export-buttons]", encapsulation: ViewEncapsulation.None, template: "<button\n    (click)=\"clickPrint()\"\n    [disabled]=\"loading$ | async\"\n    [matTooltip]=\"'general.print' | translate\"\n    class=\"export-button\"\n    mat-mini-fab\n>\n    <mat-icon [svgIcon]=\"icons.print.svgIcon\">{{ icons.print.matIcon }}</mat-icon>\n</button>\n\n<button\n    (click)=\"clickExport()\"\n    [disabled]=\"loading$ | async\"\n    [matTooltip]=\"'general.export' | translate\"\n    class=\"export-button\"\n    mat-mini-fab\n>\n    <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n</button>\n" }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FILTER_VIEW_ICONS]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [EXPORTS_SETTINGS]
-                }] }, { type: NiceFilterViewQuery }, { type: NiceFilterViewService }, { type: i3$3.MatBottomSheet }]; }, propDecorators: { customExport: [{
-                type: Input
-            }], downloadFileName: [{
-                type: Input
+            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=\"grid grid-cols-1 md:grid-cols-2 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" }]
+        }], ctorParameters: function () { return [{ type: NiceFilterViewQuery }]; }, propDecorators: { filterSelected: [{
+                type: Output
             }] } });
 
-class NiceFilterExportDirective {
-    constructor(service) {
+class AdvancedFiltersTriggerDirective {
+    constructor(query, service, overlayPositionBuilder, elementRef, overlay, platform, injector) {
+        this.query = query;
         this.service = service;
-        this.downloadFileName = "data";
+        this.overlayPositionBuilder = overlayPositionBuilder;
+        this.elementRef = elementRef;
+        this.overlay = overlay;
+        this.platform = platform;
+        this.injector = injector;
+        this.position = "bottomCenter";
+        this.advancedFilterSelected = new EventEmitter();
     }
-    onClick() {
-        this.service.downloadData(this.type, this.downloadFileName);
+    get connectedPosition() {
+        if (this.position === "topRight") {
+            return {
+                originX: "end",
+                originY: "top",
+                overlayX: "start",
+                overlayY: "top",
+                offsetX: 15
+            };
+        }
+        return {
+            originX: "center",
+            originY: "bottom",
+            overlayX: "center",
+            overlayY: "top"
+        };
+    }
+    click() {
+        const positionStrategy = this.overlayPositionBuilder.flexibleConnectedTo(this.elementRef).withPositions([
+            this.connectedPosition
+        ]);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            hasBackdrop: true,
+            backdropClass: "cdk-overlay-transparent-backdrop",
+            scrollStrategy: this.overlay.scrollStrategies.block()
+        });
+        const filterSelectionPortal = new ComponentPortal(NiceAdvancedFilterSelectionComponent, null, this.injector);
+        this.filterSelectionRef = this.overlayRef.attach(filterSelectionPortal);
+        this.updateFilterSelectionComponent();
+        this.overlayRef.backdropClick().subscribe(() => this.close());
+    }
+    close() {
+        this.overlayRef.dispose();
+    }
+    updateFilterSelectionComponent() {
+        if (!this.filterSelectionRef) {
+            return;
+        }
+        this.filterSelectionRef.instance.filterSelected.subscribe((filter) => {
+            this.advancedFilterSelected.emit(filter);
+            this.close();
+        });
     }
 }
-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: [{
+AdvancedFiltersTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: AdvancedFiltersTriggerDirective, deps: [{ token: NiceFilterViewQuery }, { token: NiceFilterViewService }, { token: i1.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1.Overlay }, { token: i2$2.Platform }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+AdvancedFiltersTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.3", type: AdvancedFiltersTriggerDirective, selector: "[niceAdvancedFiltersTrigger]", inputs: { position: "position" }, outputs: { advancedFilterSelected: "advancedFilterSelected" }, host: { listeners: { "click": "click()" } }, exportAs: ["niceAdvancedFiltersTrigger"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: AdvancedFiltersTriggerDirective, decorators: [{
             type: Directive,
-            args: [{ selector: "[niceFilterExport]" }]
-        }], ctorParameters: function () { return [{ type: NiceFilterViewService }]; }, propDecorators: { type: [{
-                type: Input
-            }], downloadFileName: [{
+            args: [{ selector: "[niceAdvancedFiltersTrigger]", exportAs: "niceAdvancedFiltersTrigger" }]
+        }], ctorParameters: function () { return [{ type: NiceFilterViewQuery }, { type: NiceFilterViewService }, { type: i1.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1.Overlay }, { type: i2$2.Platform }, { type: i0.Injector }]; }, propDecorators: { position: [{
                 type: Input
-            }], onClick: [{
+            }], advancedFilterSelected: [{
+                type: Output
+            }], click: [{
                 type: HostListener,
                 args: ["click"]
             }] } });
 
-class NiceFilterInfiniteScrollDataViewComponent {
-    constructor(query, service) {
+class NiceAdvancedFiltersButtonComponent {
+    constructor(icons, query, service) {
+        this.icons = icons;
         this.query = query;
         this.service = service;
-        this.data$ = this.query.selectAll();
+        this.shouldShowAdvancedFilters$ = this.query.selectSubState("showAdvancedFilters");
+        this.hasParameters$ = this.query.selectFilterParameters().pipe(map((parameter) => !!parameter.rules?.length));
     }
-    async loadNextPage() {
-        const { filterParameters } = this.query.getValue();
-        this.service.setMode("accumulated");
-        await this.service.setParameters({
-            ...filterParameters,
-            start: filterParameters.start + filterParameters.length
-        }, true);
+    clickToggleShowAdvancedFilters() {
+        this.service.updateSubState("showAdvancedFilters", !this.query.getSubState("showAdvancedFilters"));
+    }
+    onSelectedFilter(filter) {
+        const rule = AdvancedFiltersUtils.createRule(filter);
+        this.service.setRules([{ condition: "and", rules: [rule] }], false);
+        this.service.updateSubState("showAdvancedFilters", true);
+    }
+}
+NiceAdvancedFiltersButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedFiltersButtonComponent, deps: [{ token: ADVANCED_FILTER_ICONS, optional: true }, { token: NiceFilterViewQuery }, { token: NiceFilterViewService }], target: i0.ɵɵFactoryTarget.Component });
+NiceAdvancedFiltersButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceAdvancedFiltersButtonComponent, selector: "nice-advanced-filters-button", ngImport: i0, template: "<div class=\"relative\">\n    <ng-container *ngIf=\"(hasParameters$ | async) && (shouldShowAdvancedFilters$ | async) !== true\">\n        <div class=\"absolute top-2 right-2 w-1 h-1 rounded bg-accent\"></div>\n\n        <button mat-icon-button (click)=\"clickToggleShowAdvancedFilters()\">\n            <mat-icon [svgIcon]=\"icons.queryBuilder.svgIcon\">{{ icons.queryBuilder.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"shouldShowAdvancedFilters$ | async\">\n        <button mat-icon-button (click)=\"clickToggleShowAdvancedFilters()\">\n            <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"(hasParameters$ | async) !== true && (shouldShowAdvancedFilters$ | async) !== true\">\n        <button mat-icon-button niceAdvancedFiltersTrigger (advancedFilterSelected)=\"onSelectedFilter($event)\">\n            <mat-icon [svgIcon]=\"icons.queryBuilder.svgIcon\">{{ icons.queryBuilder.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n</div>\n", styles: ["nice-advanced-filters-button{width:40px;height:40px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: AdvancedFiltersTriggerDirective, selector: "[niceAdvancedFiltersTrigger]", inputs: ["position"], outputs: ["advancedFilterSelected"], exportAs: ["niceAdvancedFiltersTrigger"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedFiltersButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-advanced-filters-button", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative\">\n    <ng-container *ngIf=\"(hasParameters$ | async) && (shouldShowAdvancedFilters$ | async) !== true\">\n        <div class=\"absolute top-2 right-2 w-1 h-1 rounded bg-accent\"></div>\n\n        <button mat-icon-button (click)=\"clickToggleShowAdvancedFilters()\">\n            <mat-icon [svgIcon]=\"icons.queryBuilder.svgIcon\">{{ icons.queryBuilder.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"shouldShowAdvancedFilters$ | async\">\n        <button mat-icon-button (click)=\"clickToggleShowAdvancedFilters()\">\n            <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"(hasParameters$ | async) !== true && (shouldShowAdvancedFilters$ | async) !== true\">\n        <button mat-icon-button niceAdvancedFiltersTrigger (advancedFilterSelected)=\"onSelectedFilter($event)\">\n            <mat-icon [svgIcon]=\"icons.queryBuilder.svgIcon\">{{ icons.queryBuilder.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n</div>\n", styles: ["nice-advanced-filters-button{width:40px;height:40px}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ADVANCED_FILTER_ICONS]
+                }] }, { type: NiceFilterViewQuery }, { type: NiceFilterViewService }]; } });
+
+class FilterFormValues {
+}
+__decorate([
+    Control(),
+    Required(),
+    __metadata("design:type", Object)
+], FilterFormValues.prototype, "value", void 0);
+__decorate([
+    Control(),
+    AddValidatorIf(({ parent }) => parent.needsTwoValues, Validators.required),
+    __metadata("design:type", Object)
+], FilterFormValues.prototype, "secondValue", void 0);
+class FilterForm {
+    constructor(value) {
+        if (!value) {
+            return;
+        }
+        if (value.id) {
+            const rule = value;
+            const needsTwoValues = QBFilterUtils.isDoubleInput(rule.operation);
+            Object.assign(this, {
+                id: rule.id,
+                operation: rule.operation,
+                condition: "or",
+                needsTwoValues,
+                values: [
+                    {
+                        value: needsTwoValues ? rule.value[0] : rule.value,
+                        secondValue: needsTwoValues ? rule.value[1] : undefined
+                    }
+                ]
+            });
+            return;
+        }
+        const query = value;
+        const firstRule = query.rules[0];
+        if (!query.rules.every((rule) => rule.id === firstRule.id)) {
+            return;
+        }
+        const firstRuleNeedsTwoValues = QBFilterUtils.isDoubleInput(firstRule.operation);
+        Object.assign(this, {
+            id: firstRule.id,
+            operation: firstRule.operation,
+            condition: query.condition,
+            needsTwoValues: firstRuleNeedsTwoValues,
+            values: query.rules.map((rule) => ({
+                value: firstRuleNeedsTwoValues ? rule.value[0] : rule.value,
+                secondValue: firstRuleNeedsTwoValues ? rule.value[1] : undefined
+            }))
+        });
+        return;
+    }
+    transform() {
+        if (this.values.length === 1) {
+            const value = this.values[0];
+            return {
+                id: this.id,
+                operation: this.operation,
+                value: this.needsTwoValues ? [value.value, value.secondValue] : value.value
+            };
+        }
+        return {
+            condition: this.condition,
+            rules: this.values.map((value) => ({
+                id: this.id,
+                operation: this.operation,
+                value: this.needsTwoValues ? [value.value, value.secondValue] : value.value
+            }))
+        };
+    }
+}
+__decorate([
+    Control(),
+    Required(),
+    __metadata("design:type", String)
+], FilterForm.prototype, "id", void 0);
+__decorate([
+    Control(),
+    Required(),
+    __metadata("design:type", String)
+], FilterForm.prototype, "operation", void 0);
+__decorate([
+    Control(),
+    __metadata("design:type", Boolean)
+], FilterForm.prototype, "needsTwoValues", void 0);
+__decorate([
+    Control(),
+    Required(),
+    __metadata("design:type", String)
+], FilterForm.prototype, "condition", void 0);
+__decorate([
+    Array$1(FilterFormValues),
+    __metadata("design:type", Array$1)
+], FilterForm.prototype, "values", void 0);
+class AdvancedFiltersForm {
+    constructor(query) {
+        if (!query) {
+            return;
+        }
+        if (!query?.rules) {
+            this.rules = [];
+            this.condition = "and";
+        }
+        this.condition = query.condition;
+        this.rules = query.rules.map(x => new FilterForm(x));
+    }
+    transform() {
+        return {
+            condition: this.condition,
+            rules: this.rules.map((rule) => rule.transform())
+        };
+    }
+}
+__decorate([
+    Array$1(FilterForm),
+    __metadata("design:type", Array$1)
+], AdvancedFiltersForm.prototype, "rules", void 0);
+__decorate([
+    Control({ defaultValue: "and" }),
+    Required(),
+    __metadata("design:type", String)
+], AdvancedFiltersForm.prototype, "condition", void 0);
+
+class AdvancedFiltersAsyncTypeaheadProvider extends NiceAsyncTypeaheadProvider {
+    constructor(filterService) {
+        super();
+        this.filterService = filterService;
+        this.resource = "advancedFilter";
+    }
+    getById(id, options) {
+        return lastValueFrom(this.filterService.searchFilterResourceValue(options.filterConfig, id));
+    }
+    async search(searchQuery, page, options) {
+        const res = await lastValueFrom(this.filterService.searchFilterValue(options.filterConfig, searchQuery));
+        return {
+            items: res,
+            nextPage: null
+        };
+    }
+    format(item) {
+        return item.name;
+    }
+}
+AdvancedFiltersAsyncTypeaheadProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: AdvancedFiltersAsyncTypeaheadProvider, deps: [{ token: NiceFilterService }], target: i0.ɵɵFactoryTarget.Injectable });
+AdvancedFiltersAsyncTypeaheadProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: AdvancedFiltersAsyncTypeaheadProvider });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: AdvancedFiltersAsyncTypeaheadProvider, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: NiceFilterService }]; } });
+
+class FilterComponent {
+    constructor() {
+        this.propagateChanges = (_) => { };
+    }
+    get value() {
+        return this._value;
+    }
+    registerOnTouched(fn) {
+        // NO-OP
+    }
+    registerOnChange(fn) {
+        this.propagateChanges = fn;
+    }
+    writeValue(value) {
+        this._value = value;
+    }
+    onValueChange(value) {
+        this.propagateChanges(value);
+    }
+}
+FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: FilterComponent, selector: "ng-component", ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: FilterComponent, decorators: [{
+            type: Component,
+            args: [{ template: `` }]
+        }] });
+
+class NiceAdvancedDateFilterComponent extends FilterComponent {
+    constructor(icons) {
+        super();
+        this.icons = icons;
+    }
+}
+NiceAdvancedDateFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedDateFilterComponent, deps: [{ token: ADVANCED_FILTER_ICONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+NiceAdvancedDateFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceAdvancedDateFilterComponent, selector: "nice-advanced-date-filter", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            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 });
+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: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NiceAdvancedDateFilterComponent),
+                            multi: true
+                        }
+                    ], 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" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ADVANCED_FILTER_ICONS]
+                }] }]; } });
+
+class NiceAdvancedNumberFilterComponent extends FilterComponent {
+}
+NiceAdvancedNumberFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedNumberFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NiceAdvancedNumberFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceAdvancedNumberFilterComponent, selector: "nice-advanced-number-filter", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => NiceAdvancedNumberFilterComponent),
+            multi: true
+        }
+    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\" class=\"flex-auto\">\n    <input matInput [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" type=\"number\" />\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedNumberFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-advanced-number-filter", encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NiceAdvancedNumberFilterComponent),
+                            multi: true
+                        }
+                    ], template: "<mat-form-field appearance=\"outline\" class=\"flex-auto\">\n    <input matInput [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" type=\"number\" />\n</mat-form-field>\n" }]
+        }] });
+
+class NiceAdvancedRadioFilterComponent extends FilterComponent {
+}
+NiceAdvancedRadioFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedRadioFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NiceAdvancedRadioFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceAdvancedRadioFilterComponent, selector: "nice-advanced-radio-filter", inputs: { filterConfig: "filterConfig" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => NiceAdvancedRadioFilterComponent),
+            multi: true
+        }
+    ], usesInheritance: true, ngImport: i0, template: "<mat-radio-group appearance=\"outline\" class=\"flex-auto\" [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\">\n    <mat-radio-button class=\"mx-4\" *ngFor=\"let option of filterConfig.options\" [value]=\"option?.key\">\n        {{ option?.name }}\n    </mat-radio-button>\n</mat-radio-group>\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: 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: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedRadioFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-advanced-radio-filter", encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NiceAdvancedRadioFilterComponent),
+                            multi: true
+                        }
+                    ], template: "<mat-radio-group appearance=\"outline\" class=\"flex-auto\" [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\">\n    <mat-radio-button class=\"mx-4\" *ngFor=\"let option of filterConfig.options\" [value]=\"option?.key\">\n        {{ option?.name }}\n    </mat-radio-button>\n</mat-radio-group>\n" }]
+        }], propDecorators: { filterConfig: [{
+                type: Input
+            }] } });
+
+class NiceAdvancedSelectFilterComponent extends FilterComponent {
+    constructor() {
+        super(...arguments);
+        this.values = [];
+    }
+    async ngOnInit() {
+        if (!this.filterConfig.lazyLoading) {
+            this.values = this.filterConfig.values;
+        }
+    }
+    ngOnChanges(changes) {
+        if ("filterConfig" in changes) {
+            if (!this.filterConfig.lazyLoading) {
+                this.values = this.filterConfig.values;
+            }
+            else {
+                this.values = [];
+            }
+        }
+    }
+    onValueChange(value) {
+        super.onValueChange(value);
+    }
+    writeValue(value) {
+        super.writeValue(value);
+    }
+}
+NiceAdvancedSelectFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedSelectFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NiceAdvancedSelectFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceAdvancedSelectFilterComponent, selector: "nice-advanced-select-filter", inputs: { filterConfig: "filterConfig" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => NiceAdvancedSelectFilterComponent),
+            multi: true
+        }
+    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\" class=\"flex-auto\">\n    <nice-typeahead\n        *ngIf=\"!filterConfig.lazyLoading\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"onValueChange($event)\"\n        [items]=\"values\"\n        bindValue=\"id\"\n        bindLabel=\"name\"\n    ></nice-typeahead>\n\n    <nice-async-typeahead\n        *ngIf=\"filterConfig.lazyLoading\"\n        resource=\"advancedFilter\"\n        [searchOptions]=\"{ filterConfig }\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"onValueChange($event)\"\n    ></nice-async-typeahead>\n</mat-form-field>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NiceTypeaheadComponent, selector: "nice-typeahead", inputs: ["items", "labelFormatFn", "required", "disabled", "placeholder", "emptyPlaceholder", "allowNotFoundItems", "panelClass", "bindValue", "bindLabel", "typeahead", "page$", "loading", "loadingPage", "searchFn", "optionTemplate"], outputs: ["change"] }, { kind: "component", type: i5.NiceAsyncTypeaheadComponent, selector: "nice-async-typeahead", inputs: ["resource", "searchOptions", "preloadResource", "allowNotFoundItems", "panelClass", "bindValue", "bindLabel", "placeholder", "emptyPlaceholder", "optionTemplate", "filterFn", "labelFormatFn", "disabled", "value", "required"], outputs: ["entityRemoved", "selected"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedSelectFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-advanced-select-filter", encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NiceAdvancedSelectFilterComponent),
+                            multi: true
+                        }
+                    ], template: "<mat-form-field appearance=\"outline\" class=\"flex-auto\">\n    <nice-typeahead\n        *ngIf=\"!filterConfig.lazyLoading\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"onValueChange($event)\"\n        [items]=\"values\"\n        bindValue=\"id\"\n        bindLabel=\"name\"\n    ></nice-typeahead>\n\n    <nice-async-typeahead\n        *ngIf=\"filterConfig.lazyLoading\"\n        resource=\"advancedFilter\"\n        [searchOptions]=\"{ filterConfig }\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"onValueChange($event)\"\n    ></nice-async-typeahead>\n</mat-form-field>\n" }]
+        }], propDecorators: { filterConfig: [{
+                type: Input
+            }] } });
+
+class NiceAdvancedTextFilterComponent extends FilterComponent {
+}
+NiceAdvancedTextFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedTextFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NiceAdvancedTextFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceAdvancedTextFilterComponent, selector: "nice-advanced-text-filter", inputs: { filterConfig: "filterConfig" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            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 });
+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: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NiceAdvancedTextFilterComponent),
+                            multi: true
+                        }
+                    ], 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" }]
+        }], propDecorators: { filterConfig: [{
+                type: Input
+            }] } });
+
+class NiceAdvancedRuleComponent {
+    constructor(icons, formGroupName) {
+        this.icons = icons;
+        this.formGroupName = formGroupName;
+        this.remove = new EventEmitter();
+    }
+    get filterConfig() {
+        const ruleId = this.formGroup.get("id").value;
+        return this.filterConfigs?.find(f => f.id === ruleId);
+    }
+    ngOnInit() {
+        this.formGroup = this.formGroupName.control;
+        this.valuesFormArray = this.formGroup.get("values");
+        const operationFormControl = this.formGroup.get("operation");
+        this.isSingleInput$ = operationFormControl.valueChanges.pipe(startWith(operationFormControl.value), map((operation) => !AdvancedFiltersUtils.isDoubleInput(operation) && !AdvancedFiltersUtils.isNoInput(operation)));
+        this.isDoubleInput$ = operationFormControl.valueChanges.pipe(startWith(operationFormControl.value), map((operation) => AdvancedFiltersUtils.isDoubleInput(operation)));
+    }
+    onUpdateFilterConfig(config) {
+        const rule = AdvancedFiltersUtils.createRule(config);
+        this.valuesFormArray.clear({ emitEvent: false });
+        this.formGroup.patchValue(new FilterForm(rule));
+    }
+    addValue(index) {
+        this.valuesFormArray.insert(index, {});
+    }
+    removeValue(i) {
+        this.valuesFormArray.removeAt(i);
+        if (!this.valuesFormArray.length) {
+            this.remove.emit();
+        }
+    }
+}
+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 });
+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" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ADVANCED_FILTER_ICONS]
+                }] }, { type: i1$1.FormGroupName }]; }, propDecorators: { filterConfigs: [{
+                type: Input
+            }], remove: [{
+                type: Output
+            }] } });
+
+class NiceAdvancedFiltersComponent {
+    constructor(icons, formGroup, query, service, changeDetectorRef) {
+        this.icons = icons;
+        this.formGroup = formGroup;
+        this.query = query;
+        this.service = service;
+        this.changeDetectorRef = changeDetectorRef;
+        this.config$ = this.query.selectFilterConfig();
+        this.rulesFormArray = this.formGroup.get("rules");
+        this.rules$ = this.rulesFormArray.valueChanges.pipe(startWith(this.rulesFormArray.value));
+    }
+    ngOnInit() {
+        const { filterParameters } = this.query.getValue();
+        if (filterParameters.rules?.length) {
+            this.formGroup.patchValue(new AdvancedFiltersForm(filterParameters.rules[0]));
+        }
+    }
+    onClickAddRule(filterConfigurationModel) {
+        this.rulesFormArray.push(new FilterForm(AdvancedFiltersUtils.createRule(filterConfigurationModel)));
+        this.changeDetectorRef.markForCheck();
+    }
+    onClickDeleteRule(index) {
+        this.rulesFormArray.removeAt(index);
+        if (!this.rulesFormArray.length) {
+            this.service.setRules([], true);
+            this.onClose();
+        }
+    }
+    onClose() {
+        this.service.updateSubState("showAdvancedFilters", false);
+    }
+    onRefresh() {
+        this.service.setRules(this.formGroup.getRawValue().transform(), true);
+    }
+}
+NiceAdvancedFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedFiltersComponent, deps: [{ token: ADVANCED_FILTER_ICONS, optional: true }, { token: i1$3.GeneratedFormGroup }, { token: NiceFilterViewQuery }, { token: NiceFilterViewService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+NiceAdvancedFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceAdvancedFiltersComponent, selector: "nice-advanced-filters", providers: [
+        NgxFormGeneratorProvider.forFeature([AdvancedFiltersForm]),
+        {
+            provide: NICE_ASYNC_TYPEAHEAD_PROVIDER,
+            useClass: AdvancedFiltersAsyncTypeaheadProvider,
+            multi: true
+        }
+    ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" [formGroup]=\"formGroup\">\n    <div class=\"advanced-filter-title\">{{ \"components.nice_advanced_filters.title\" | translate }}</div>\n\n    <div class=\"flex flex-row gap-12\">\n        <div class=\"advanced-filter-condition\">{{ \"components.nice_advanced_filters.conditions.should_match\" | translate }}</div>\n\n        <mat-radio-group formControlName=\"condition\">\n            <mat-radio-button value=\"and\"><span class=\"ml-4 mr-8\">{{ \"components.nice_advanced_filters.conditions.every\" | translate }}</span></mat-radio-button>\n            <mat-radio-button value=\"or\"><span class=\"ml-4 mr-8\">{{ \"components.nice_advanced_filters.conditions.some\" | translate }}</span></mat-radio-button>\n        </mat-radio-group>\n    </div>\n\n    <div class=\"flex flex-col gap-4\" formArrayName=\"rules\" *ngFor=\"let _ of rulesFormArray.controls; let i = index\">\n        <nice-advanced-rule [filterConfigs]=\"config$ | async\" [formGroupName]=\"i\" (remove)=\"onClickDeleteRule(i)\"></nice-advanced-rule>\n    </div>\n\n    <div>\n        <button class=\"add-condition\" mat-stroked-button color=\"accent\" niceAdvancedFiltersTrigger position=\"topRight\" (advancedFilterSelected)=\"onClickAddRule($event)\">\n            <div class=\"flex items-center gap-4\">\n                <mat-icon [svgIcon]=\"icons.add.svgIcon\">{{ icons.add.matIcon }}</mat-icon>\n\n                <div>{{ \"components.nice_advanced_filters.add_condition\" | translate }}</div>\n            </div>\n        </button>\n    </div>\n\n    <div class=\"flex gap-6 justify-end pt-4\">\n        <button class=\"close-button\" mat-button color=\"accent\" (click)=\"onClose()\">\n            <div class=\"flex items-center gap-4\">\n                <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n\n                <div>{{ \"components.nice_advanced_filters.close\" | translate }}</div>\n            </div>\n        </button>\n\n        <button class=\"refresh-button\" mat-flat-button color=\"accent\" (click)=\"onRefresh()\">\n            <div class=\"flex items-center gap-4\">\n                <mat-icon [svgIcon]=\"icons.refresh.svgIcon\">{{ icons.refresh.matIcon }}</mat-icon>\n\n                <div>{{ \"components.nice_advanced_filters.refresh\" | translate }}</div>\n            </div>\n        </button>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3$3.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$3.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: NiceAdvancedRuleComponent, selector: "nice-advanced-rule", inputs: ["filterConfigs"], outputs: ["remove"] }, { kind: "directive", type: AdvancedFiltersTriggerDirective, selector: "[niceAdvancedFiltersTrigger]", inputs: ["position"], outputs: ["advancedFilterSelected"], exportAs: ["niceAdvancedFiltersTrigger"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedFiltersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-advanced-filters", encapsulation: ViewEncapsulation.None, providers: [
+                        NgxFormGeneratorProvider.forFeature([AdvancedFiltersForm]),
+                        {
+                            provide: NICE_ASYNC_TYPEAHEAD_PROVIDER,
+                            useClass: AdvancedFiltersAsyncTypeaheadProvider,
+                            multi: true
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-4\" [formGroup]=\"formGroup\">\n    <div class=\"advanced-filter-title\">{{ \"components.nice_advanced_filters.title\" | translate }}</div>\n\n    <div class=\"flex flex-row gap-12\">\n        <div class=\"advanced-filter-condition\">{{ \"components.nice_advanced_filters.conditions.should_match\" | translate }}</div>\n\n        <mat-radio-group formControlName=\"condition\">\n            <mat-radio-button value=\"and\"><span class=\"ml-4 mr-8\">{{ \"components.nice_advanced_filters.conditions.every\" | translate }}</span></mat-radio-button>\n            <mat-radio-button value=\"or\"><span class=\"ml-4 mr-8\">{{ \"components.nice_advanced_filters.conditions.some\" | translate }}</span></mat-radio-button>\n        </mat-radio-group>\n    </div>\n\n    <div class=\"flex flex-col gap-4\" formArrayName=\"rules\" *ngFor=\"let _ of rulesFormArray.controls; let i = index\">\n        <nice-advanced-rule [filterConfigs]=\"config$ | async\" [formGroupName]=\"i\" (remove)=\"onClickDeleteRule(i)\"></nice-advanced-rule>\n    </div>\n\n    <div>\n        <button class=\"add-condition\" mat-stroked-button color=\"accent\" niceAdvancedFiltersTrigger position=\"topRight\" (advancedFilterSelected)=\"onClickAddRule($event)\">\n            <div class=\"flex items-center gap-4\">\n                <mat-icon [svgIcon]=\"icons.add.svgIcon\">{{ icons.add.matIcon }}</mat-icon>\n\n                <div>{{ \"components.nice_advanced_filters.add_condition\" | translate }}</div>\n            </div>\n        </button>\n    </div>\n\n    <div class=\"flex gap-6 justify-end pt-4\">\n        <button class=\"close-button\" mat-button color=\"accent\" (click)=\"onClose()\">\n            <div class=\"flex items-center gap-4\">\n                <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n\n                <div>{{ \"components.nice_advanced_filters.close\" | translate }}</div>\n            </div>\n        </button>\n\n        <button class=\"refresh-button\" mat-flat-button color=\"accent\" (click)=\"onRefresh()\">\n            <div class=\"flex items-center gap-4\">\n                <mat-icon [svgIcon]=\"icons.refresh.svgIcon\">{{ icons.refresh.matIcon }}</mat-icon>\n\n                <div>{{ \"components.nice_advanced_filters.refresh\" | translate }}</div>\n            </div>\n        </button>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ADVANCED_FILTER_ICONS]
+                }] }, { type: i1$3.GeneratedFormGroup }, { type: NiceFilterViewQuery }, { type: NiceFilterViewService }, { type: i0.ChangeDetectorRef }]; } });
+
+const defaultIcons = {
+    add: {
+        matIcon: "add"
+    },
+    close: {
+        matIcon: "close"
+    },
+    refresh: {
+        matIcon: "refresh"
+    },
+    delete: {
+        matIcon: "delete"
+    },
+    arrowDown: {
+        matIcon: "arrow_drop_down"
+    },
+    datePicker: {
+        matIcon: "today"
+    },
+    queryBuilder: {
+        matIcon: "filter_list"
+    }
+};
+
+class NiceAdvancedFiltersModule {
+    static forRoot(options) {
+        return {
+            ngModule: NiceAdvancedFiltersModule,
+            providers: [
+                {
+                    provide: ADVANCED_FILTER_ICONS,
+                    useValue: {
+                        ...defaultIcons,
+                        ...(options?.icons ?? {})
+                    }
+                },
+                options?.filterGroupService ? {
+                    provide: NiceFilterGroupService,
+                    useClass: options.filterGroupService
+                } : undefined
+            ].filter((provider) => !!provider)
+        };
+    }
+}
+NiceAdvancedFiltersModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedFiltersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NiceAdvancedFiltersModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedFiltersModule, declarations: [NiceAdvancedFiltersComponent,
+        NiceAdvancedFiltersButtonComponent,
+        NiceAdvancedFilterSelectionComponent,
+        NiceAdvancedRuleComponent,
+        NiceAdvancedDateFilterComponent,
+        NiceAdvancedNumberFilterComponent,
+        NiceAdvancedRadioFilterComponent,
+        NiceAdvancedSelectFilterComponent,
+        NiceAdvancedTextFilterComponent,
+        AdvancedFiltersTriggerDirective,
+        NiceFilterGroupIconPipe], imports: [CommonModule,
+        ReactiveFormsModule,
+        MatRadioModule,
+        MatCardModule,
+        MatListModule,
+        NiceLoadingSpinnerModule,
+        MatIconModule,
+        MatRippleModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatOptionModule,
+        MatSelectModule,
+        FormsModule,
+        MatInputModule,
+        MatButtonToggleModule,
+        TranslateModule,
+        MatDatepickerModule,
+        NiceTypeaheadModule,
+        NgxMaskModule,
+        NiceAsyncTypeaheadModule], exports: [NiceAdvancedFiltersComponent, NiceAdvancedFiltersButtonComponent, AdvancedFiltersTriggerDirective] });
+NiceAdvancedFiltersModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedFiltersModule, imports: [CommonModule,
+        ReactiveFormsModule,
+        MatRadioModule,
+        MatCardModule,
+        MatListModule,
+        NiceLoadingSpinnerModule,
+        MatIconModule,
+        MatRippleModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatOptionModule,
+        MatSelectModule,
+        FormsModule,
+        MatInputModule,
+        MatButtonToggleModule,
+        TranslateModule,
+        MatDatepickerModule,
+        NiceTypeaheadModule,
+        NgxMaskModule,
+        NiceAsyncTypeaheadModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedFiltersModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatRadioModule,
+                        MatCardModule,
+                        MatListModule,
+                        NiceLoadingSpinnerModule,
+                        MatIconModule,
+                        MatRippleModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatOptionModule,
+                        MatSelectModule,
+                        FormsModule,
+                        MatInputModule,
+                        MatButtonToggleModule,
+                        TranslateModule,
+                        MatDatepickerModule,
+                        NiceTypeaheadModule,
+                        NgxMaskModule,
+                        NiceAsyncTypeaheadModule
+                    ],
+                    declarations: [
+                        NiceAdvancedFiltersComponent,
+                        NiceAdvancedFiltersButtonComponent,
+                        NiceAdvancedFilterSelectionComponent,
+                        NiceAdvancedRuleComponent,
+                        NiceAdvancedDateFilterComponent,
+                        NiceAdvancedNumberFilterComponent,
+                        NiceAdvancedRadioFilterComponent,
+                        NiceAdvancedSelectFilterComponent,
+                        NiceAdvancedTextFilterComponent,
+                        AdvancedFiltersTriggerDirective,
+                        NiceFilterGroupIconPipe
+                    ],
+                    providers: [],
+                    exports: [NiceAdvancedFiltersComponent, NiceAdvancedFiltersButtonComponent, AdvancedFiltersTriggerDirective],
+                }]
+        }] });
+
+class NiceFilterDataDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+NiceFilterDataDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterDataDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NiceFilterDataDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.3", type: NiceFilterDataDirective, selector: "[niceFilterData]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterDataDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[niceFilterData]" }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+class NiceFilterCustomDataViewComponent {
+    constructor(query) {
+        this.query = query;
+        this.data$ = this.query.selectAll();
+    }
+}
+NiceFilterCustomDataViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterCustomDataViewComponent, deps: [{ token: NiceFilterViewQuery }], target: i0.ɵɵFactoryTarget.Component });
+NiceFilterCustomDataViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceFilterCustomDataViewComponent, selector: "nice-filter-custom-data-view, div[nice-filter-custom-data-view]", queries: [{ propertyName: "content", first: true, predicate: NiceFilterDataDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"content\">\n    <ng-container *ngTemplateOutlet=\"content; context: { $implicit: data$ | async }\"></ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: 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: NiceFilterCustomDataViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-filter-custom-data-view, div[nice-filter-custom-data-view]", encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"content\">\n    <ng-container *ngTemplateOutlet=\"content; context: { $implicit: data$ | async }\"></ng-container>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: NiceFilterViewQuery }]; }, propDecorators: { content: [{
+                type: ContentChild,
+                args: [NiceFilterDataDirective, { read: TemplateRef }]
+            }] } });
+
+class 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();
+    }
+    clickExport() {
+        const exports = [];
+        if (this.exportsSettings.xlsx) {
+            exports.push({
+                type: "xlsx",
+                onClickExport: () => this.clickXlsx()
+            });
+        }
+        if (this.exportsSettings.csv) {
+            exports.push({
+                type: "csv",
+                onClickExport: () => this.clickCsv()
+            });
+        }
+        if (this.exportsSettings.pdf) {
+            exports.push({
+                type: "pdf",
+                onClickExport: () => this.clickPdf()
+            });
+        }
+        this.bottomSheet.open(ExportBottomSheetComponent, {
+            data: {
+                exportStrategies: [
+                    ...exports,
+                    ...this.customExport
+                ]
+            }
+        });
+    }
+    clickXlsx() {
+        this.service.downloadData("xlsx", this.downloadFileName);
+    }
+    clickCsv() {
+        this.service.downloadData("csv", this.downloadFileName);
+    }
+    clickPrint() {
+        this.service.printData();
+    }
+    clickPdf() {
+        this.service.downloadData("pdf", this.downloadFileName);
+    }
+}
+NiceFilterExportButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterExportButtonsComponent, deps: [{ token: FILTER_VIEW_ICONS }, { token: EXPORTS_SETTINGS }, { token: NiceFilterViewQuery }, { token: NiceFilterViewService }, { token: i3$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";
+    }
+    onClick() {
+        this.service.downloadData(this.type, this.downloadFileName);
+    }
+}
+NiceFilterExportDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterExportDirective, deps: [{ token: NiceFilterViewService }], target: i0.ɵɵFactoryTarget.Directive });
+NiceFilterExportDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.3", type: NiceFilterExportDirective, selector: "[niceFilterExport]", inputs: { type: "type", downloadFileName: "downloadFileName" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterExportDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[niceFilterExport]" }]
+        }], ctorParameters: function () { return [{ type: NiceFilterViewService }]; }, propDecorators: { type: [{
+                type: Input
+            }], downloadFileName: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ["click"]
+            }] } });
+
+class NiceFilterInfiniteScrollDataViewComponent {
+    constructor(query, service) {
+        this.query = query;
+        this.service = service;
+        this.data$ = this.query.selectAll();
+    }
+    async loadNextPage() {
+        const { filterParameters } = this.query.getValue();
+        this.service.setMode("accumulated");
+        await this.service.setParameters({
+            ...filterParameters,
+            start: filterParameters.start + filterParameters.length
+        }, true);
     }
 }
 NiceFilterInfiniteScrollDataViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterInfiniteScrollDataViewComponent, deps: [{ token: NiceFilterViewQuery }, { token: NiceFilterViewService }], target: i0.ɵɵFactoryTarget.Component });
-NiceFilterInfiniteScrollDataViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceFilterInfiniteScrollDataViewComponent, selector: "nice-filter-infinite-scroll-data-view, div[nice-filter-infinite-scroll-data-view]", queries: [{ propertyName: "content", first: true, predicate: NiceFilterDataDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"content\">\n    <ng-container *ngTemplateOutlet=\"content; context: { $implicit: data$ | async }\"></ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+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" }]
@@ -3290,7 +4136,7 @@ class NiceFilterSearchComponent {
     }
 }
 NiceFilterSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterSearchComponent, deps: [{ token: FILTER_VIEW_ICONS }, { token: NiceFilterViewQuery }, { token: NiceFilterViewService }], target: i0.ɵɵFactoryTarget.Component });
-NiceFilterSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceFilterSearchComponent, selector: "nice-filter-search", inputs: { appearance: "appearance" }, ngImport: i0, template: "<div\n    class=\"search-wrapper mx-md-0\"\n    [class.nice-search-default]=\"appearance === 'default'\"\n    [class.nice-search-outlined]=\"appearance === 'outlined'\"\n    [class.nice-search-legacy]=\"appearance === 'legacy'\"\n    [class.nice-search-custom]=\"appearance === 'custom'\"\n>\n    <div class=\"search flex flex-auto justify-start items-center\">\n        <mat-icon [svgIcon]=\"icons.search.svgIcon\">{{ icons.search.matIcon }}</mat-icon>\n        <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n\n        <ng-content select=\"[niceFilterSearchButtons]\"></ng-content>\n    </div>\n</div>\n", styles: ["nice-filter-search .search-wrapper{width:100%;max-width:480px;overflow:hidden}nice-filter-search .search-wrapper.nice-search-default{box-shadow:0 4px 12px #0000001f;border-radius:5px}nice-filter-search .search-wrapper.nice-search-outlined{border-radius:5px}nice-filter-search .search-wrapper.nice-search-legacy{box-shadow:0 3px 3px -2px #0000000f,0 3px 4px #0000000b,0 1px 8px #00000009;border-radius:28px}nice-filter-search .search-wrapper .search{width:100%;height:48px;line-height:48px;padding:0 18px}nice-filter-search .search-wrapper .search input{width:100%;height:48px;min-height:48px;max-height:48px;padding:0 16px;border:none;outline:none}\n"], dependencies: [{ kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+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"] }]
@@ -3352,6 +4198,9 @@ class NiceFilterMatSortSortingDirective {
                 return;
             }
             const { order } = res;
+            if (!order) {
+                return;
+            }
             this.sort.direction = order.direction;
             this.sort.active = order.column;
         });
@@ -3411,7 +4260,10 @@ class NiceFilterQueryParamsDirective {
         this.router = router;
         this.init = new EventEmitter();
         this.unsubscribeAll$ = new Subject();
-        this.initialized = false;
+        this._initialized = false;
+    }
+    get initialized() {
+        return this._initialized;
     }
     ngOnInit() {
         this.query.selectFilterParameters().pipe(takeUntil(this.unsubscribeAll$)).subscribe((parameters) => {
@@ -3440,13 +4292,18 @@ class NiceFilterQueryParamsDirective {
         });
     }
     loadQueryParams() {
-        this.route.queryParams
-            .pipe(takeUntil(this.unsubscribeAll$), map((params) => {
+        combineLatest([
+            this.route.queryParams.pipe(map((params) => params.start), distinct()),
+            this.route.queryParams.pipe(map((params) => params.length), distinct()),
+            this.route.queryParams.pipe(map((params) => params.order), distinct()),
+            this.route.queryParams.pipe(map((params) => params.search), distinct()),
+            this.route.queryParams.pipe(map((params) => params.rules), distinct()),
+        ]).pipe(takeUntil(this.unsubscribeAll$), map(() => {
+            const params = this.route.snapshot.queryParams;
             return {
                 params: QueryParamsUtils.extractFilterParameters(params)
             };
-        }))
-            .subscribe(({ params }) => {
+        })).subscribe(({ params }) => {
             if (!QueryParamsUtils.hasFilterParameters(params) || Object.keys(params).length === 0) {
                 params = { ...this.query.getValue().filterParameters };
             }
@@ -3455,10 +4312,9 @@ class NiceFilterQueryParamsDirective {
                 !filterResult) {
                 this.service.setParameters(params, false);
             }
-            if (!this.initialized) {
-                this.initialized = true;
+            if (!this._initialized) {
+                this._initialized = true;
                 this.init.emit();
-                this.service.filter();
             }
         });
     }
@@ -3505,16 +4361,8 @@ class NiceBaseFilterViewComponent {
         if (mode) {
             this.filterViewService.setMode(mode);
         }
-        const { autoLoad: defaultAutoLoad } = this.filterViewQuery.getValue();
-        if (autoLoad && defaultAutoLoad) {
-            this.filterViewService.filter();
-        }
-        else {
-            this.filterViewService.setAutoLoad(autoLoad);
-        }
-        if (loadConfig) {
-            this.filterViewService.loadConfig(configQueryParams);
-        }
+        this.autoLoad(autoLoad);
+        this.loadConfig(loadConfig, configQueryParams);
         this.filterViewLoading$ = this.filterViewQuery.selectLoading();
     }
     /**
@@ -3568,9 +4416,38 @@ class NiceBaseFilterViewComponent {
     removeRule(id, reload = true) {
         this.filterViewService.removeRule(id, reload);
     }
+    autoLoad(autoLoad) {
+        const { autoLoad: defaultAutoLoad } = this.filterViewQuery.getValue();
+        if (!this.queryParams) {
+            if (autoLoad && defaultAutoLoad) {
+                this.filterViewService.filter();
+            }
+            else {
+                this.filterViewService.setAutoLoad(autoLoad);
+            }
+            return;
+        }
+        if (!autoLoad && defaultAutoLoad) {
+            this.filterViewService.setAutoLoad(autoLoad);
+            return;
+        }
+        this.queryParams.init.pipe(take(1)).subscribe(() => this.loadData());
+    }
+    loadConfig(loadConfig, configQueryParams) {
+        if (loadConfig === true) {
+            this.filterViewService.loadConfig(configQueryParams);
+            return;
+        }
+        if (loadConfig === false) {
+            return;
+        }
+        if (this.advancedFiltersButton || this.advancedFilters) {
+            this.filterViewService.loadConfig(configQueryParams);
+        }
+    }
 }
 NiceBaseFilterViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceBaseFilterViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NiceBaseFilterViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceBaseFilterViewComponent, selector: "ng-component", viewQueries: [{ propertyName: "filterViewService", first: true, predicate: NiceFilterViewComponent, descendants: true, read: NiceFilterViewService, static: true }, { propertyName: "filterViewQuery", first: true, predicate: NiceFilterViewComponent, descendants: true, read: NiceFilterViewQuery, static: true }], ngImport: i0, template: ``, isInline: true });
+NiceBaseFilterViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceBaseFilterViewComponent, selector: "ng-component", viewQueries: [{ propertyName: "filterViewService", first: true, predicate: NiceFilterViewComponent, descendants: true, read: NiceFilterViewService, static: true }, { propertyName: "filterViewQuery", first: true, predicate: NiceFilterViewComponent, descendants: true, read: NiceFilterViewQuery, static: true }, { propertyName: "queryParams", first: true, predicate: NiceFilterQueryParamsDirective, descendants: true, static: true }, { propertyName: "advancedFiltersButton", first: true, predicate: NiceAdvancedFiltersButtonComponent, descendants: true, static: true }, { propertyName: "advancedFilters", first: true, predicate: NiceAdvancedFiltersComponent, descendants: true, static: true }], ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceBaseFilterViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -3582,6 +4459,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
             }], filterViewQuery: [{
                 type: ViewChild,
                 args: [NiceFilterViewComponent, { read: NiceFilterViewQuery, static: true }]
+            }], queryParams: [{
+                type: ViewChild,
+                args: [NiceFilterQueryParamsDirective, { static: true }]
+            }], advancedFiltersButton: [{
+                type: ViewChild,
+                args: [NiceAdvancedFiltersButtonComponent, { static: true }]
+            }], advancedFilters: [{
+                type: ViewChild,
+                args: [NiceAdvancedFiltersComponent, { static: true }]
             }] } });
 
 class NiceFilterViewModule {
@@ -3592,7 +4478,7 @@ class NiceFilterViewModule {
                 {
                     provide: FILTER_VIEW_ICONS,
                     useValue: {
-                        ...defaultIcons,
+                        ...defaultIcons$1,
                         ...(options?.icons ?? {})
                     }
                 }
@@ -3746,8 +4632,10 @@ class SelectableListStateQuery extends QueryEntity {
 }
 
 class SelectableListStateService {
-    constructor(store, preloadService, options) {
+    constructor(store, route, router, preloadService, options) {
         this.store = store;
+        this.route = route;
+        this.router = router;
         this.preloadService = preloadService;
         this.options = options;
     }
@@ -3784,34 +4672,44 @@ class SelectableListStateService {
         this.store.update((state) => ({
             unselectedEntity: arrayRemove(state.unselectedEntity, id)
         }));
-        if (!this.preloadService) {
-            this.store.add({
-                [this.idKey]: id,
-                loaded: false
+        this.store.add({
+            [this.idKey]: id,
+            loaded: false
+        });
+        if (this.preloadService) {
+            const entity = await this.preloadService.loadEntityById(id);
+            this.store.upsert(id, {
+                ...entity,
+                loaded: true
             });
         }
-        const entity = await this.preloadService.loadEntityById(id);
-        return this.store.add({
-            ...entity,
-            loaded: true
-        });
+    }
+    async selectMany(ids, active) {
+        this.store.add(ids.map((id) => ({
+            [this.idKey]: id,
+            loaded: false
+        })));
+        if (active) {
+            this.store.setActive(active);
+            await this.loadEntities(true);
+        }
     }
     async selectEntity(entity) {
         this.store.update((state) => ({
             unselectedEntity: arrayRemove(state.unselectedEntity, entity[this.idKey])
         }));
-        if (!this.preloadService) {
-            return this.store.upsert(entity[this.idKey], { ...entity, loaded: true });
+        this.store.upsert(entity[this.idKey], { ...entity, loaded: true });
+        if (this.preloadService) {
+            const preloadedEntity = await this.preloadService.reloadEntity(entity);
+            this.store.upsert(preloadedEntity[this.idKey], { ...preloadedEntity, loaded: true });
         }
-        const preloadedEntity = await this.preloadService.reloadEntity(entity);
-        return this.store.upsert(preloadedEntity[this.idKey], { ...preloadedEntity, loaded: true });
     }
     async selectManyEntities(entities) {
         if (!this.preloadService) {
             return this.store.upsertMany(entities.map((entity) => ({ ...entity, loaded: true })));
         }
         const preloadedEntities = await this.preloadService.reloadEntities(entities);
-        return this.store.upsertMany(preloadedEntities.map((preloadedEntity) => ({ ...preloadedEntity, loaded: true })));
+        this.store.upsertMany(preloadedEntities.map((preloadedEntity) => ({ ...preloadedEntity, loaded: true })));
     }
     unselectAll() {
         this.store.set([]);
@@ -3835,6 +4733,9 @@ class SelectableListStateService {
     unselectManyEntities(entities) {
         this.store.remove(entities.map((entity) => entity[this.idKey]));
     }
+    updateEntity(entity) {
+        this.store.update(entity[this.idKey], entity);
+    }
     async setEntities(ids, activeId) {
         this.store.update({
             unselectedEntity: [],
@@ -3847,6 +4748,7 @@ class SelectableListStateService {
         if (activeId) {
             this.store.setActive(activeId);
         }
+        await this.loadEntities(true);
     }
     async next() {
         const { ids, active } = this.store.getValue();
@@ -3923,11 +4825,26 @@ class SelectableListStateService {
         }
         return toLoad;
     }
+    generateQueryParams() {
+        const { ids, active } = this.store.getValue();
+        return {
+            selection: ids.length ? ids : null,
+            selected: active ?? null
+        };
+    }
+    setQueryParams() {
+        this.router.navigate([], {
+            queryParams: this.generateQueryParams(),
+            queryParamsHandling: "merge"
+        });
+    }
 }
 
 class SelectableListService {
-    constructor(providers) {
+    constructor(providers, route, router) {
         this.providers = providers;
+        this.route = route;
+        this.router = router;
         this.stores = new Map();
     }
     createState(name, options) {
@@ -3944,10 +4861,10 @@ class SelectableListService {
         const provider = this.providers?.find((p) => p.state === stateName);
         const state = this.getState(stateName);
         if (state) {
-            return new SelectableListStateService(state.store, provider, options);
+            return new SelectableListStateService(state.store, this.route, this.router, provider, options);
         }
         const newState = this.createState(stateName, options);
-        return new SelectableListStateService(newState.store, provider, options);
+        return new SelectableListStateService(newState.store, this.route, this.router, provider, options);
     }
     query(stateName) {
         const state = this.getState(stateName);
@@ -3957,7 +4874,7 @@ class SelectableListService {
         return state.query;
     }
 }
-SelectableListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: SelectableListService, deps: [{ token: NICE_PRELOAD_SELECTED_ENTITIES_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+SelectableListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: SelectableListService, deps: [{ token: NICE_PRELOAD_SELECTED_ENTITIES_PROVIDER, optional: true }, { token: i2.ActivatedRoute }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
 SelectableListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: SelectableListService, providedIn: "root" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: SelectableListService, decorators: [{
             type: Injectable,
@@ -3967,12 +4884,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                 }, {
                     type: Inject,
                     args: [NICE_PRELOAD_SELECTED_ENTITIES_PROVIDER]
-                }] }]; } });
+                }] }, { type: i2.ActivatedRoute }, { type: i2.Router }]; } });
 
 class SelectableListContentService {
     constructor() {
         this._state = null;
         this._checkboxes = new QueryList();
+        this.defaultOptions = { idKey: "id", preloadWindow: 2 };
+    }
+    get options() {
+        return this._options ?? this.defaultOptions;
     }
     get state() {
         return this._state;
@@ -3980,6 +4901,12 @@ class SelectableListContentService {
     get checkboxes() {
         return this._checkboxes;
     }
+    setOptions(options) {
+        this._options = {
+            ...this.defaultOptions,
+            ...options
+        };
+    }
     setState(state) {
         this._state = state;
     }
@@ -4000,6 +4927,7 @@ class NiceSelectableListCheckboxDirective {
         this.service = service;
         this.selectableListService = selectableListService;
         this.unsubscribeAll$ = new Subject();
+        this.initialized = false;
     }
     get currentId() {
         if (!this.selectableEntity || !this.selectableListStateService) {
@@ -4020,6 +4948,12 @@ class NiceSelectableListCheckboxDirective {
     ngOnDestroy() {
         this.unsubscribeAll$.next();
         this.unsubscribeAll$.complete();
+        this.initialized = false;
+    }
+    ngDoCheck() {
+        if (this.selectPage && !this.initialized) {
+            this.updateCheckboxState();
+        }
     }
     handleSelectableEntity() {
         if (this.checkbox.checked) {
@@ -4058,7 +4992,6 @@ class NiceSelectableListCheckboxDirective {
     }
     handleSelectPage() {
         this.selectableListStateQuery.selectCount().subscribe(() => this.updateCheckboxState());
-        this.service.checkboxes.changes.pipe(takeUntil(this.unsubscribeAll$)).subscribe(() => this.updateCheckboxState());
         this.checkbox.change.pipe(takeUntil(this.unsubscribeAll$)).subscribe((value) => {
             for (const checkbox of this.service.checkboxes) {
                 if (checkbox.selectPage) {
@@ -4070,11 +5003,19 @@ class NiceSelectableListCheckboxDirective {
         });
     }
     updateCheckboxState() {
+        const count = this.selectableListStateQuery.getCount();
         const checkboxes = this.service.checkboxes.filter((checkbox) => !checkbox.selectPage);
         if (!checkboxes.length) {
+            if (!count) {
+                this.checkbox.indeterminate = false;
+                this.checkbox.checked = false;
+                return;
+            }
+            this.checkbox.indeterminate = true;
+            this.checkbox.checked = false;
             return;
         }
-        const count = this.selectableListStateQuery.getCount();
+        this.initialized = true;
         if (!count) {
             this.checkbox.indeterminate = false;
             this.checkbox.checked = false;
@@ -4145,31 +5086,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
 
 // tslint:disable-next-line:directive-class-suffix
 class NiceSelectableListDirective {
-    constructor(service) {
+    constructor(service, selectableListService, route) {
         this.service = service;
-        this.defaultOptions = { idKey: "id", preloadWindow: 2 };
+        this.selectableListService = selectableListService;
+        this.route = route;
+        this.unsubscribeAll$ = new Subject();
+        this.unsubscribeQuerySub$ = new Subject();
     }
     ngOnInit() {
-        if (!this.options) {
-            this.options = { ...this.defaultOptions };
-        }
+        combineLatest([
+            this.route.queryParams.pipe(map((params) => params.selection), distinct()),
+            this.route.queryParams.pipe(map((params) => params.selected), distinct())
+        ]).pipe(takeUntil(this.unsubscribeAll$)).subscribe(([selection, selected]) => {
+            if (!selection) {
+                this.stateService.setQueryParams();
+                return;
+            }
+            const newSelection = typeof selection === "string" ? [+selection] : selection.map((s) => +s);
+            const newSelected = selected ? +selected : null;
+            const { ids, active } = this.stateQuery.getValue();
+            if (!ids.length || !ids.every((id) => newSelection.includes(id))) {
+                this.stateService.setEntities(newSelection, newSelected);
+                return;
+            }
+            if (newSelected && active !== newSelected) {
+                this.stateService.setActive(newSelected);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.unsubscribeAll$.next();
+        this.unsubscribeAll$.complete();
+        this.unsubscribeQuerySub$.next();
+        this.unsubscribeQuerySub$.complete();
     }
     ngOnChanges(changes) {
         if ("options" in changes) {
-            this.options = {
-                ...this.defaultOptions,
-                ...changes.options.currentValue
-            };
+            this.service.setOptions(this.options);
         }
         if ("state" in changes) {
             this.service.setState(this.state);
+            this.stateService = this.selectableListService.withState(this.state);
+            this.stateQuery = this.selectableListService.query(this.state);
+            this.listenOnStateChanges();
         }
     }
     ngAfterContentInit() {
         this.service.setCheckboxes(this.checkboxes);
     }
+    listenOnStateChanges() {
+        this.unsubscribeQuerySub$.next();
+        this.stateQuery.selectEntityAction([
+            EntityActions.Add,
+            EntityActions.Remove,
+            EntityActions.Set
+        ]).pipe(takeUntil(this.unsubscribeQuerySub$)).subscribe(() => {
+            this.stateService.setQueryParams();
+        });
+        this.stateQuery.selectActiveId().pipe(takeUntil(this.unsubscribeQuerySub$)).subscribe(() => this.stateService.setQueryParams());
+    }
 }
-NiceSelectableListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceSelectableListDirective, deps: [{ token: SelectableListContentService }], target: i0.ɵɵFactoryTarget.Directive });
+NiceSelectableListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceSelectableListDirective, deps: [{ token: SelectableListContentService }, { token: SelectableListService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Directive });
 NiceSelectableListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.3", type: NiceSelectableListDirective, selector: "[niceSelectableList]", inputs: { state: "state", options: "options" }, providers: [SelectableListContentService], queries: [{ propertyName: "checkboxes", predicate: NiceSelectableListCheckboxDirective, descendants: true }], usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceSelectableListDirective, decorators: [{
             type: Directive,
@@ -4177,7 +5154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                     selector: "[niceSelectableList]",
                     providers: [SelectableListContentService]
                 }]
-        }], ctorParameters: function () { return [{ type: SelectableListContentService }]; }, propDecorators: { state: [{
+        }], ctorParameters: function () { return [{ type: SelectableListContentService }, { type: SelectableListService }, { type: i2.ActivatedRoute }]; }, propDecorators: { state: [{
                 type: Input
             }], options: [{
                 type: Input
@@ -4227,5 +5204,5 @@ String.prototype.toTableColumn = function (sortableOrOptions, nullLast) {
  * Generated bundle index. Do not edit.
  */
 
-export { DateFilterComponent, FilterComponent, FilterGroupIconPipe, FilterOperatorTypes, FilterSelectionComponent, FilterType, FilterUtils, LayoutContent, NiceBaseFilterViewComponent, NiceBaseListButtonsDirective, NiceBaseListCardsDirective, NiceBaseListComponent, NiceBaseListCustomContentDirective, NiceBaseListDirectiveModule, NiceBaseListEmptySearchResultStateDirective, NiceBaseListEmptyStateDirective, NiceBaseListFiltersDirective, NiceBaseListModule, NiceBaseListQuery, NiceBaseListService, NiceBaseListStore, NiceBaseListTableDirective, NiceBaseListTitleDirective, NiceCustomDateAdapter, NiceFilterApi, NiceFilterCustomDataViewComponent, NiceFilterDataDirective, NiceFilterExportButtonsComponent, NiceFilterExportDirective, NiceFilterGroupService, NiceFilterInfiniteScrollDataViewComponent, NiceFilterMatPaginatorPaginationDirective, NiceFilterMatSortSortingDirective, NiceFilterMatTableViewDirective, NiceFilterQueryParamsDirective, NiceFilterSearchComponent, NiceFilterService, NiceFilterViewComponent, NiceFilterViewModule, NiceFilterViewQuery, NiceFilterViewService, NiceListState, NiceMultiStateFilterService, NiceMultiStateListComponent, NiceMultiStateListModule, NiceMultiStateListQuery, NiceMultiStateListService, NiceMultiStateListStore, NicePreloadSelectedEntitiesProvider, NiceQueryBuilderComponent, NiceQueryBuilderModule, NiceSavedReportService, NiceSelectableListCheckboxDirective, NiceSelectableListDirective, NiceSelectableListModule, NiceSelectableListSelectAllDirective, NumberFilterComponent, OrderUtils, QBFilterUtils, QueryBuilderTriggerDirective, RadioFilterComponent, RuleComponent, SelectFilterComponent, SelectableListService, SelectableListStateQuery, SelectableListStateService, StringUtils, TableColumns, TextFilterComponent, defaultLayout, initialBaseListState, initialValue$1 as initialValue, mixinNiceFilterApi };
+export { AdvancedFiltersForm, AdvancedFiltersTriggerDirective, DateFilterComponent, FilterComponent$1 as FilterComponent, FilterForm, FilterFormValues, FilterGroupIconPipe, FilterOperatorTypes, FilterSelectionComponent, FilterType, FilterUtils, LayoutContent, NiceAdvancedFiltersButtonComponent, NiceAdvancedFiltersComponent, NiceAdvancedFiltersModule, NiceBaseFilterViewComponent, NiceBaseListButtonsDirective, NiceBaseListCardsDirective, NiceBaseListComponent, NiceBaseListCustomContentDirective, NiceBaseListDirectiveModule, NiceBaseListEmptySearchResultStateDirective, NiceBaseListEmptyStateDirective, NiceBaseListFiltersDirective, NiceBaseListModule, NiceBaseListQuery, NiceBaseListService, NiceBaseListStore, NiceBaseListTableDirective, NiceBaseListTitleDirective, NiceCustomDateAdapter, NiceFilterApi, NiceFilterCustomDataViewComponent, NiceFilterDataDirective, NiceFilterExportButtonsComponent, NiceFilterExportDirective, NiceFilterGroupService, NiceFilterInfiniteScrollDataViewComponent, NiceFilterMatPaginatorPaginationDirective, NiceFilterMatSortSortingDirective, NiceFilterMatTableViewDirective, NiceFilterQueryParamsDirective, NiceFilterSearchComponent, NiceFilterService, NiceFilterViewComponent, NiceFilterViewModule, NiceFilterViewQuery, NiceFilterViewService, NiceListState, NiceMultiStateFilterService, NiceMultiStateListComponent, NiceMultiStateListModule, NiceMultiStateListQuery, NiceMultiStateListService, NiceMultiStateListStore, NicePreloadSelectedEntitiesProvider, NiceQueryBuilderComponent, NiceQueryBuilderModule, NiceSavedReportService, NiceSelectableListCheckboxDirective, NiceSelectableListDirective, NiceSelectableListModule, NiceSelectableListSelectAllDirective, NumberFilterComponent, OrderUtils, QBFilterUtils, QueryBuilderTriggerDirective, RadioFilterComponent, RuleComponent, SelectFilterComponent, SelectableListService, SelectableListStateQuery, SelectableListStateService, StringUtils, TableColumns, TextFilterComponent, defaultLayout, initialBaseListState, initialValue$1 as initialValue, mixinNiceFilterApi };
 //# sourceMappingURL=recursyve-nice-data-filter-kit.mjs.map