@recursyve/nice-data-filter-kit 13.2.0 → 14.0.2

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

@@ -1,58 +1,58 @@
 import { HttpParams } from '@angular/common/http';
-import * as i4$1 from '@recursyve/nice-ui-kit.v2';
+import * as i5$1 from '@recursyve/nice-ui-kit.v2';
 import { isNullOrUndefined, ObjectUtils, FileUtils, ArrayUtils, ExportBottomSheetComponent, NiceLoadingSpinnerModule, NiceTypeaheadModule, NiceExportBottomSheetModule } from '@recursyve/nice-ui-kit.v2';
 import * as i0 from '@angular/core';
-import { Directive, Input, NgModule, Injectable, Inject, InjectionToken, Optional, Component, forwardRef, ViewEncapsulation, Pipe, EventEmitter, ChangeDetectionStrategy, Output, HostListener, TemplateRef, ContentChild, ContentChildren } from '@angular/core';
+import { Directive, Input, NgModule, Injectable, Inject, InjectionToken, Optional, Pipe, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Output, HostListener, forwardRef, TemplateRef, ContentChild, ContentChildren } from '@angular/core';
 import { Store, StoreConfig, Query, arrayAdd, arrayUpsert, arrayRemove } from '@datorama/akita';
 import { combineLatest, Subject, firstValueFrom, of } from 'rxjs';
 import { map, takeUntil, debounceTime, switchMap, distinctUntilChanged } from 'rxjs/operators';
 import { __decorate, __metadata } from 'tslib';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i4$2 from '@angular/material/bottom-sheet';
+import * as i4$3 from '@angular/material/bottom-sheet';
 import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
-import * as i3 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i7 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i8 from '@angular/material/paginator';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import * as i9 from '@angular/material/card';
-import { MatCardModule } from '@angular/material/card';
+import * as i6 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i1$5 from '@recursyve/ngx-form-generator';
+import * as i8 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i5 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i10 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i11 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i12 from '@angular/material/paginator';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import * as i13 from '@angular/material/table';
+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 * as i1$3 from '@recursyve/ngx-form-generator';
 import { Control, Required, Array as Array$1, GeneratedFormGroup, ngxFormGeneratorFactory } from '@recursyve/ngx-form-generator';
-import * as i1 from '@angular/material/form-field';
-import * as i5 from '@angular/material/select';
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i2$1 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 { MatSelectModule } from '@angular/material/select';
-import * as i6 from '@angular/material/core';
-import { NativeDateAdapter, MAT_DATE_LOCALE, MatRippleModule, DateAdapter } from '@angular/material/core';
-import * as i2$1 from '@angular/material/input';
+import * as i3$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i4 from 'ngx-mask';
+import * as i4$1 from 'ngx-mask';
 import { NgxMaskModule } from 'ngx-mask';
-import * as i1$2 from '@angular/material/radio';
+import * as i3$2 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i13 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2$2 from '@angular/material/datepicker';
+import * as i4$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i1$3 from '@angular/cdk/overlay';
-import { OverlayModule } from '@angular/cdk/overlay';
-import * as i2$4 from '@angular/cdk/platform';
-import { ComponentPortal } from '@angular/cdk/portal';
-import * as i2$3 from '@angular/material/list';
-import { MatListModule } from '@angular/material/list';
-import * as i1$4 from '@ngx-translate/core';
+import * as i1$2 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import * as i11 from '@angular/material/table';
-import { MatTableModule } from '@angular/material/table';
-import * as i12 from '@angular/material/sort';
-import { MatSortModule } from '@angular/material/sort';
-import * as i16 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i17 from '@angular/material/badge';
+import * as i18 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
 
 class QueryParamsUtils {
@@ -216,9 +216,9 @@ class NiceBaseListButtonsDirective {
         this.position = "suffix";
     }
 }
-NiceBaseListButtonsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListButtonsDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-NiceBaseListButtonsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NiceBaseListButtonsDirective, selector: "[niceListButton]", inputs: { position: "position" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListButtonsDirective, decorators: [{
+NiceBaseListButtonsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListButtonsDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NiceBaseListButtonsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", type: NiceBaseListButtonsDirective, selector: "[niceListButton]", inputs: { position: "position" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListButtonsDirective, decorators: [{
             type: Directive,
             args: [{ selector: "[niceListButton]" }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { position: [{
@@ -230,9 +230,9 @@ class NiceBaseListCardsDirective {
         this.template = template;
     }
 }
-NiceBaseListCardsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListCardsDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-NiceBaseListCardsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NiceBaseListCardsDirective, selector: "[niceListCards]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListCardsDirective, decorators: [{
+NiceBaseListCardsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListCardsDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NiceBaseListCardsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", type: NiceBaseListCardsDirective, selector: "[niceListCards]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListCardsDirective, decorators: [{
             type: Directive,
             args: [{ selector: "[niceListCards]" }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
@@ -242,9 +242,9 @@ class NiceBaseListCustomContentDirective {
         this.template = template;
     }
 }
-NiceBaseListCustomContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListCustomContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-NiceBaseListCustomContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NiceBaseListCustomContentDirective, selector: "[niceListContent]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListCustomContentDirective, decorators: [{
+NiceBaseListCustomContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListCustomContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NiceBaseListCustomContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", type: NiceBaseListCustomContentDirective, selector: "[niceListContent]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListCustomContentDirective, decorators: [{
             type: Directive,
             args: [{ selector: "[niceListContent]" }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
@@ -254,9 +254,9 @@ class NiceBaseListEmptyStateDirective {
         this.template = template;
     }
 }
-NiceBaseListEmptyStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListEmptyStateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-NiceBaseListEmptyStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NiceBaseListEmptyStateDirective, selector: "[niceListEmptyState]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListEmptyStateDirective, decorators: [{
+NiceBaseListEmptyStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListEmptyStateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NiceBaseListEmptyStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", type: NiceBaseListEmptyStateDirective, selector: "[niceListEmptyState]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListEmptyStateDirective, decorators: [{
             type: Directive,
             args: [{ selector: "[niceListEmptyState]" }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
@@ -266,9 +266,9 @@ class NiceBaseListFiltersDirective {
         this.template = template;
     }
 }
-NiceBaseListFiltersDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListFiltersDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-NiceBaseListFiltersDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NiceBaseListFiltersDirective, selector: "[niceListFilters]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListFiltersDirective, decorators: [{
+NiceBaseListFiltersDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListFiltersDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NiceBaseListFiltersDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", type: NiceBaseListFiltersDirective, selector: "[niceListFilters]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListFiltersDirective, decorators: [{
             type: Directive,
             args: [{ selector: "[niceListFilters]" }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
@@ -279,9 +279,9 @@ class NiceBaseListTableDirective {
         this.stickyHeader = true;
     }
 }
-NiceBaseListTableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListTableDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-NiceBaseListTableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NiceBaseListTableDirective, selector: "[niceListTable]", inputs: { stickyHeader: "stickyHeader" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListTableDirective, decorators: [{
+NiceBaseListTableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListTableDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NiceBaseListTableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", type: NiceBaseListTableDirective, selector: "[niceListTable]", inputs: { stickyHeader: "stickyHeader" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListTableDirective, decorators: [{
             type: Directive,
             args: [{ selector: "[niceListTable]" }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { stickyHeader: [{
@@ -293,31 +293,45 @@ class NiceBaseListTitleDirective {
         this.template = template;
     }
 }
-NiceBaseListTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListTitleDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-NiceBaseListTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NiceBaseListTitleDirective, selector: "[niceListTitle]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListTitleDirective, decorators: [{
+NiceBaseListTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListTitleDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NiceBaseListTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", type: NiceBaseListTitleDirective, selector: "[niceListTitle]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListTitleDirective, decorators: [{
             type: Directive,
             args: [{ selector: "[niceListTitle]" }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
+class NiceBaseListEmptySearchResultStateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+NiceBaseListEmptySearchResultStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListEmptySearchResultStateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NiceBaseListEmptySearchResultStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", type: NiceBaseListEmptySearchResultStateDirective, selector: "[niceListEmptySearchResultState]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListEmptySearchResultStateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[niceListEmptySearchResultState]" }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
 class NiceBaseListDirectiveModule {
 }
-NiceBaseListDirectiveModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NiceBaseListDirectiveModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListDirectiveModule, declarations: [NiceBaseListButtonsDirective,
+NiceBaseListDirectiveModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NiceBaseListDirectiveModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListDirectiveModule, declarations: [NiceBaseListButtonsDirective,
         NiceBaseListTitleDirective,
         NiceBaseListTableDirective,
         NiceBaseListCardsDirective,
         NiceBaseListCustomContentDirective,
         NiceBaseListEmptyStateDirective,
-        NiceBaseListFiltersDirective], exports: [NiceBaseListButtonsDirective,
+        NiceBaseListFiltersDirective,
+        NiceBaseListEmptySearchResultStateDirective], exports: [NiceBaseListButtonsDirective,
         NiceBaseListTitleDirective,
         NiceBaseListTableDirective,
         NiceBaseListCardsDirective,
         NiceBaseListCustomContentDirective,
         NiceBaseListEmptyStateDirective,
-        NiceBaseListFiltersDirective] });
-NiceBaseListDirectiveModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListDirectiveModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListDirectiveModule, decorators: [{
+        NiceBaseListFiltersDirective,
+        NiceBaseListEmptySearchResultStateDirective] });
+NiceBaseListDirectiveModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListDirectiveModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListDirectiveModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -327,7 +341,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         NiceBaseListCardsDirective,
                         NiceBaseListCustomContentDirective,
                         NiceBaseListEmptyStateDirective,
-                        NiceBaseListFiltersDirective
+                        NiceBaseListFiltersDirective,
+                        NiceBaseListEmptySearchResultStateDirective
                     ],
                     exports: [
                         NiceBaseListButtonsDirective,
@@ -336,7 +351,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         NiceBaseListCardsDirective,
                         NiceBaseListCustomContentDirective,
                         NiceBaseListEmptyStateDirective,
-                        NiceBaseListFiltersDirective
+                        NiceBaseListFiltersDirective,
+                        NiceBaseListEmptySearchResultStateDirective
                     ]
                 }]
         }] });
@@ -588,9 +604,9 @@ class NiceFilterService {
         return this.api?.searchFilterResourceValue(filterConfig.id, resourceId);
     }
 }
-NiceFilterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceFilterService, deps: [{ token: NiceFilterApi }], target: i0.ɵɵFactoryTarget.Injectable });
-NiceFilterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceFilterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceFilterService, decorators: [{
+NiceFilterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceFilterService, deps: [{ token: NiceFilterApi }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceFilterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceFilterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceFilterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
@@ -667,9 +683,9 @@ class NiceSavedReportService {
         return this.api.hit(id);
     }
 }
-NiceSavedReportService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceSavedReportService, deps: [{ token: NiceSavedReportsApi }], target: i0.ɵɵFactoryTarget.Injectable });
-NiceSavedReportService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceSavedReportService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceSavedReportService, decorators: [{
+NiceSavedReportService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceSavedReportService, deps: [{ token: NiceSavedReportsApi }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceSavedReportService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceSavedReportService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceSavedReportService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: NiceSavedReportsApi }]; } });
 
@@ -744,13 +760,13 @@ let NiceBaseListStore = class NiceBaseListStore extends Store {
         });
     }
 };
-NiceBaseListStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListStore, deps: [{ token: DEFAULT_PARAMETERS, optional: true }, { token: DEFAULT_RULES, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-NiceBaseListStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListStore });
+NiceBaseListStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListStore, deps: [{ token: DEFAULT_PARAMETERS, optional: true }, { token: DEFAULT_RULES, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceBaseListStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListStore });
 NiceBaseListStore = __decorate([
     StoreConfig({ name: "base-list", resettable: true }),
     __metadata("design:paramtypes", [Object, Array])
 ], NiceBaseListStore);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListStore, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Optional
@@ -776,6 +792,13 @@ class NiceBaseListQuery extends Query {
             this.selectFilterParameters()
         ]).pipe(map(([loading, data, parameter]) => !data?.length && !loading && !parameter?.search));
     }
+    selectSearchResultEmpty() {
+        return combineLatest([
+            this.selectLoading(),
+            this.selectData(),
+            this.selectFilterParameters()
+        ]).pipe(map(([loading, data, parameter]) => !data?.length && !loading && !!parameter?.search));
+    }
     selectData() {
         return this.select(s => s.filterResult?.values ?? []);
     }
@@ -795,9 +818,9 @@ class NiceBaseListQuery extends Query {
         return this.select(s => s.showQueryBuilder);
     }
 }
-NiceBaseListQuery.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListQuery, deps: [{ token: NiceBaseListStore }], target: i0.ɵɵFactoryTarget.Injectable });
-NiceBaseListQuery.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListQuery });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListQuery, decorators: [{
+NiceBaseListQuery.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListQuery, deps: [{ token: NiceBaseListStore }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceBaseListQuery.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListQuery });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListQuery, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: NiceBaseListStore }]; } });
 
@@ -1265,9 +1288,9 @@ class NiceBaseListService {
         }
     }
 }
-NiceBaseListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListService, deps: [{ token: NiceBaseListStore }, { token: NiceFilterService }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
-NiceBaseListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListService, decorators: [{
+NiceBaseListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListService, deps: [{ token: NiceBaseListStore }, { token: NiceFilterService }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceBaseListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: NiceBaseListStore }, { type: undefined, decorators: [{
                     type: Inject,
@@ -1350,196 +1373,6 @@ __decorate([
     __metadata("design:type", Array$1)
 ], QueryBuilderForm.prototype, "rules", void 0);
 
-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: "13.0.3", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: FilterComponent, selector: "ng-component", ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FilterComponent, decorators: [{
-            type: Component,
-            args: [{ template: `` }]
-        }] });
-
-class TextFilterComponent extends FilterComponent {
-}
-TextFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TextFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TextFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TextFilterComponent, selector: "nice-text-filter", inputs: { filterConfig: "filterConfig" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            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", components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { 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]" }, { type: i4.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"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "13.0.3", ngImport: i0, type: TextFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "nice-text-filter", encapsulation: ViewEncapsulation.None, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => TextFilterComponent),
-                            multi: true
-                        }
-                    ], 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" }]
-        }], propDecorators: { filterConfig: [{
-                type: Input
-            }] } });
-
-class NumberFilterComponent extends FilterComponent {
-}
-NumberFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NumberFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NumberFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NumberFilterComponent, selector: "nice-number-filter", providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            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", components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "13.0.3", ngImport: i0, type: NumberFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "nice-number-filter", encapsulation: ViewEncapsulation.None, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => NumberFilterComponent),
-                            multi: true
-                        }
-                    ], 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 {
-}
-RadioFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RadioFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RadioFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: RadioFilterComponent, selector: "nice-radio-filter", inputs: { filterConfig: "filterConfig" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            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", components: [{ type: i1$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i1$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RadioFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "nice-radio-filter", encapsulation: ViewEncapsulation.None, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => RadioFilterComponent),
-                            multi: true
-                        }
-                    ], 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" }]
-        }], propDecorators: { filterConfig: [{
-                type: Input
-            }] } });
-
-class SelectFilterComponent extends FilterComponent {
-    constructor(filterService) {
-        super();
-        this.filterService = filterService;
-        this.values = [];
-        this.search$ = new Subject();
-    }
-    async ngOnInit() {
-        if (!this.filterConfig.lazyLoading) {
-            this.values = this.filterConfig.values;
-        }
-        this.searchSub$ = this.search$
-            .pipe(debounceTime(300), switchMap(value => {
-            if (this.filterConfig.lazyLoading) {
-                return this.filterService.searchFilterValue(this.filterConfig, value);
-            }
-            return of(this.filterConfig.values);
-        }))
-            .subscribe(values => {
-            this.values = values;
-        });
-    }
-    ngOnChanges(changes) {
-        if ("filterConfig" in changes) {
-            if (!this.filterConfig.lazyLoading) {
-                this.values = this.filterConfig.values;
-            }
-            else {
-                this.values = [];
-            }
-        }
-    }
-    async searchValue() {
-        if (this.value && !this.values.find(v => v.id === this.value)) {
-            const value = await this.filterService
-                .searchFilterResourceValue(this.filterConfig, this.value)
-                .toPromise();
-            this.values = [...this.values, value];
-        }
-    }
-    onValueChange(value) {
-        super.onValueChange(value);
-        this.searchValue();
-    }
-    ngOnDestroy() {
-        this.searchSub$.unsubscribe();
-    }
-    writeValue(value) {
-        super.writeValue(value);
-        this.searchValue();
-    }
-}
-SelectFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SelectFilterComponent, deps: [{ token: NiceFilterService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SelectFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SelectFilterComponent, selector: "nice-select-filter", inputs: { filterConfig: "filterConfig" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            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", components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$1.NiceTypeaheadComponent, selector: "nice-typeahead", inputs: ["items", "labelFormatFn", "required", "disabled", "placeholder", "emptyPlaceholder", "allowNotFoundItems", "panelClass", "bindValue", "bindLabel", "typeahead", "page$", "loading", "loadingPage", "searchFn", "optionTemplate"], outputs: ["change"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "13.0.3", ngImport: i0, type: SelectFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "nice-select-filter", encapsulation: ViewEncapsulation.None, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => SelectFilterComponent),
-                            multi: true
-                        }
-                    ], 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" }]
-        }], ctorParameters: function () { return [{ type: NiceFilterService, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { filterConfig: [{
-                type: Input
-            }] } });
-
-class DateFilterComponent extends FilterComponent {
-}
-DateFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DateFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DateFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DateFilterComponent, selector: "nice-date-filter", providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            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\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n", components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { 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]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.MatSuffix, selector: "[matSuffix]" }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DateFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "nice-date-filter", encapsulation: ViewEncapsulation.None, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => DateFilterComponent),
-                            multi: true
-                        }
-                    ], template: "<mat-form-field class=\"flex-auto\">\n    <input matInput [matDatepicker]=\"picker\" [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" />\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n" }]
-        }] });
-
 class NiceFilterGroupService {
 }
 
@@ -1557,9 +1390,9 @@ class FilterGroupIconPipe {
         return icon;
     }
 }
-FilterGroupIconPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FilterGroupIconPipe, deps: [{ token: NiceFilterGroupService }], target: i0.ɵɵFactoryTarget.Pipe });
-FilterGroupIconPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FilterGroupIconPipe, name: "filterGroupIcon" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FilterGroupIconPipe, decorators: [{
+FilterGroupIconPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: FilterGroupIconPipe, deps: [{ token: NiceFilterGroupService }], target: i0.ɵɵFactoryTarget.Pipe });
+FilterGroupIconPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.3", ngImport: i0, type: FilterGroupIconPipe, name: "filterGroupIcon" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: FilterGroupIconPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: "filterGroupIcon"
@@ -1585,9 +1418,9 @@ class FilterSelectionComponent {
         this.filterSelected.emit(filterConfigurationModel);
     }
 }
-FilterSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FilterSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilterSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.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", components: [{ type: i9.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2$3.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i2$3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$3.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.MatLine, selector: "[mat-line], [matLine]" }, { type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "filterGroupIcon": FilterGroupIconPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FilterSelectionComponent, decorators: [{
+FilterSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: FilterSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FilterSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.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" }]
         }], propDecorators: { filterConfigs: [{
@@ -1653,12 +1486,12 @@ class QueryBuilderTriggerDirective {
         return this.platform.ANDROID || this.platform.IOS;
     }
 }
-QueryBuilderTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QueryBuilderTriggerDirective, deps: [{ token: i1$3.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1$3.Overlay }, { token: i2$4.Platform }], target: i0.ɵɵFactoryTarget.Directive });
-QueryBuilderTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.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: "13.0.3", ngImport: i0, type: QueryBuilderTriggerDirective, decorators: [{
+QueryBuilderTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: QueryBuilderTriggerDirective, deps: [{ token: i1.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1.Overlay }, { token: i2$1.Platform }], target: i0.ɵɵFactoryTarget.Directive });
+QueryBuilderTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.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.0.3", ngImport: i0, type: QueryBuilderTriggerDirective, decorators: [{
             type: Directive,
             args: [{ selector: "[niceQueryBuilderTrigger]" }]
-        }], ctorParameters: function () { return [{ type: i1$3.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$3.Overlay }, { type: i2$4.Platform }]; }, propDecorators: { queryBuilderFilters: [{
+        }], ctorParameters: function () { return [{ type: i1.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1.Overlay }, { type: i2$1.Platform }]; }, propDecorators: { queryBuilderFilters: [{
                 type: Input
             }], queryBuilderFiltersLoading: [{
                 type: Input
@@ -1669,6 +1502,196 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 args: ["click"]
             }] } });
 
+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.0.3", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: FilterComponent, selector: "ng-component", ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: FilterComponent, decorators: [{
+            type: Component,
+            args: [{ template: `` }]
+        }] });
+
+class SelectFilterComponent extends FilterComponent {
+    constructor(filterService) {
+        super();
+        this.filterService = filterService;
+        this.values = [];
+        this.search$ = new Subject();
+    }
+    async ngOnInit() {
+        if (!this.filterConfig.lazyLoading) {
+            this.values = this.filterConfig.values;
+        }
+        this.searchSub$ = this.search$
+            .pipe(debounceTime(300), switchMap(value => {
+            if (this.filterConfig.lazyLoading) {
+                return this.filterService.searchFilterValue(this.filterConfig, value);
+            }
+            return of(this.filterConfig.values);
+        }))
+            .subscribe(values => {
+            this.values = values;
+        });
+    }
+    ngOnChanges(changes) {
+        if ("filterConfig" in changes) {
+            if (!this.filterConfig.lazyLoading) {
+                this.values = this.filterConfig.values;
+            }
+            else {
+                this.values = [];
+            }
+        }
+    }
+    async searchValue() {
+        if (this.value && !this.values.find(v => v.id === this.value)) {
+            const value = await this.filterService
+                .searchFilterResourceValue(this.filterConfig, this.value)
+                .toPromise();
+            this.values = [...this.values, value];
+        }
+    }
+    onValueChange(value) {
+        super.onValueChange(value);
+        this.searchValue();
+    }
+    ngOnDestroy() {
+        this.searchSub$.unsubscribe();
+    }
+    writeValue(value) {
+        super.writeValue(value);
+        this.searchValue();
+    }
+}
+SelectFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SelectFilterComponent, deps: [{ token: NiceFilterService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SelectFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: SelectFilterComponent, selector: "nice-select-filter", inputs: { filterConfig: "filterConfig" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SelectFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-select-filter", encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectFilterComponent),
+                            multi: true
+                        }
+                    ], 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" }]
+        }], ctorParameters: function () { return [{ type: NiceFilterService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { filterConfig: [{
+                type: Input
+            }] } });
+
+class TextFilterComponent extends FilterComponent {
+}
+TextFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: TextFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TextFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: TextFilterComponent, selector: "nice-text-filter", inputs: { filterConfig: "filterConfig" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: TextFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-text-filter", encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TextFilterComponent),
+                            multi: true
+                        }
+                    ], 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" }]
+        }], propDecorators: { filterConfig: [{
+                type: Input
+            }] } });
+
+class NumberFilterComponent extends FilterComponent {
+}
+NumberFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NumberFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NumberFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: NumberFilterComponent, selector: "nice-number-filter", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NumberFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-number-filter", encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NumberFilterComponent),
+                            multi: true
+                        }
+                    ], 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 {
+}
+RadioFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: RadioFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+RadioFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: RadioFilterComponent, selector: "nice-radio-filter", inputs: { filterConfig: "filterConfig" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: RadioFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-radio-filter", encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RadioFilterComponent),
+                            multi: true
+                        }
+                    ], 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" }]
+        }], propDecorators: { filterConfig: [{
+                type: Input
+            }] } });
+
+class DateFilterComponent extends FilterComponent {
+}
+DateFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DateFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DateFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: DateFilterComponent, selector: "nice-date-filter", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            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\"></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: 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: i4$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DateFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-date-filter", encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DateFilterComponent),
+                            multi: true
+                        }
+                    ], template: "<mat-form-field class=\"flex-auto\">\n    <input matInput [matDatepicker]=\"picker\" [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" />\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n" }]
+        }] });
+
 class RuleComponent {
     constructor(formGroupName) {
         this.formGroupName = formGroupName;
@@ -1718,9 +1741,9 @@ class RuleComponent {
         }
     }
 }
-RuleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RuleComponent, deps: [{ token: i1$1.FormGroupName }], target: i0.ɵɵFactoryTarget.Component });
-RuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.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 class=\"config-name-icon\">arrow_drop_down</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=\"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>delete</mat-icon>\n                        </button>\n                    </div>\n\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n", components: [{ type: i7.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"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: TextFilterComponent, selector: "nice-text-filter", inputs: ["filterConfig"] }, { type: NumberFilterComponent, selector: "nice-number-filter" }, { type: RadioFilterComponent, selector: "nice-radio-filter", inputs: ["filterConfig"] }, { type: SelectFilterComponent, selector: "nice-select-filter", inputs: ["filterConfig"] }, { type: DateFilterComponent, selector: "nice-date-filter" }], directives: [{ type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i13.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1$4.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RuleComponent, decorators: [{
+RuleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: RuleComponent, deps: [{ token: i1$1.FormGroupName }], target: i0.ɵɵFactoryTarget.Component });
+RuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.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 class=\"config-name-icon\">arrow_drop_down</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=\"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>delete</mat-icon>\n                        </button>\n                    </div>\n\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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.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 class=\"config-name-icon\">arrow_drop_down</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=\"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>delete</mat-icon>\n                        </button>\n                    </div>\n\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.FormGroupName }]; }, propDecorators: { filterConfigs: [{
@@ -1769,8 +1792,8 @@ class NiceQueryBuilderComponent {
         this.updateReport.emit();
     }
 }
-NiceQueryBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceQueryBuilderComponent, deps: [{ token: i1$5.GeneratedFormGroup }], target: i0.ɵɵFactoryTarget.Component });
-NiceQueryBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceQueryBuilderComponent, selector: "nice-query-builder", inputs: { filterConfigs: "filterConfigs", currentSavedReport: "currentSavedReport", loading: "loading" }, outputs: { close: "close", createReport: "createReport", updateReport: "updateReport" }, providers: [
+NiceQueryBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceQueryBuilderComponent, deps: [{ token: i1$3.GeneratedFormGroup }], target: i0.ɵɵFactoryTarget.Component });
+NiceQueryBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: NiceQueryBuilderComponent, selector: "nice-query-builder", inputs: { filterConfigs: "filterConfigs", currentSavedReport: "currentSavedReport", loading: "loading" }, outputs: { close: "close", createReport: "createReport", updateReport: "updateReport" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => NiceQueryBuilderComponent),
@@ -1780,8 +1803,8 @@ NiceQueryBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.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>add</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 class=\"ml-8\">refresh</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"], components: [{ type: RuleComponent, selector: "nice-rule", inputs: ["filterConfigs"], outputs: ["remove"] }, { type: i7.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"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }], pipes: { "translate": i1$4.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceQueryBuilderComponent, decorators: [{
+    ], 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>add</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 class=\"ml-8\">refresh</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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceQueryBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-query-builder", encapsulation: ViewEncapsulation.None, providers: [
                         {
@@ -1794,7 +1817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                             useFactory: ngxFormGeneratorFactory(QueryBuilderForm)
                         }
                     ], 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>add</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 class=\"ml-8\">refresh</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"] }]
-        }], ctorParameters: function () { return [{ type: i1$5.GeneratedFormGroup }]; }, propDecorators: { filterConfigs: [{
+        }], ctorParameters: function () { return [{ type: i1$3.GeneratedFormGroup }]; }, propDecorators: { filterConfigs: [{
                 type: Input
             }], currentSavedReport: [{
                 type: Input
@@ -1839,6 +1862,7 @@ class NiceBaseListComponent {
         this.data$ = this.query.selectData();
         this.recordsFiltered$ = this.filterResult$.pipe(map(f => f && f.total));
         this.isEmpty$ = this.query.selectEmpty();
+        this.isSearchResultEmpty$ = this.query.selectSearchResultEmpty();
         this.showQueryBuilder$ = this.query.selectShowQueryBuilder();
         this.filterParameters$ = this.query.selectFilterParameters();
         this.index$ = this.filterParameters$.pipe(map(f => Math.floor((f.start ?? 0) / (f.length ?? 1))));
@@ -2020,19 +2044,19 @@ class NiceBaseListComponent {
         }
     }
 }
-NiceBaseListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListComponent, deps: [{ token: ENABLE_QUERY_BUILDER, optional: true }, { token: BASE_LIST_ICONS }, { token: BASE_LIST_LAYOUT }, { token: TABLE_COLUMNS }, { token: EXPORTS_SETTINGS }, { token: NiceBaseListQuery }, { token: NiceBaseListService }, { token: i2.ActivatedRoute }, { token: i4$2.MatBottomSheet }, { token: i2.Router }, { token: i4$1.NiceMediaWatcherService }], target: i0.ɵɵFactoryTarget.Component });
-NiceBaseListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.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: [
+NiceBaseListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListComponent, deps: [{ token: ENABLE_QUERY_BUILDER, optional: true }, { token: BASE_LIST_ICONS }, { token: BASE_LIST_LAYOUT }, { token: TABLE_COLUMNS }, { token: EXPORTS_SETTINGS }, { token: NiceBaseListQuery }, { token: NiceBaseListService }, { token: i2.ActivatedRoute }, { token: i4$3.MatBottomSheet }, { token: i2.Router }, { token: i5$1.NiceMediaWatcherService }], target: i0.ɵɵFactoryTarget.Component });
+NiceBaseListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.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: "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; else showData\">\n            <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\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", components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.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"] }, { type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { type: i9.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: NiceQueryBuilderComponent, selector: "nice-query-builder", inputs: ["filterConfigs", "currentSavedReport", "loading"], outputs: ["close", "createReport", "updateReport"] }, { type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }, { type: i16.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i17.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { type: i4$1.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { type: i9.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i11.MatCellDef, selector: "[matCellDef]" }, { type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "async": i13.AsyncPipe, "translate": i1$4.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListComponent, decorators: [{
+    ], 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" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-base-list", providers: [
                         NiceBaseListQuery,
                         NiceBaseListService,
                         NiceBaseListStore
-                    ], 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; else showData\">\n            <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\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" }]
+                    ], 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" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -2050,7 +2074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [EXPORTS_SETTINGS]
-                }] }, { type: NiceBaseListQuery }, { type: NiceBaseListService }, { type: i2.ActivatedRoute }, { type: i4$2.MatBottomSheet }, { type: i2.Router }, { type: i4$1.NiceMediaWatcherService }]; }, propDecorators: { title: [{
+                }] }, { type: NiceBaseListQuery }, { type: NiceBaseListService }, { type: i2.ActivatedRoute }, { type: i4$3.MatBottomSheet }, { type: i2.Router }, { type: i5$1.NiceMediaWatcherService }]; }, propDecorators: { title: [{
                 type: ContentChild,
                 args: [NiceBaseListTitleDirective, { read: TemplateRef }]
             }], buttons: [{
@@ -2071,6 +2095,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             }], emptyState: [{
                 type: ContentChild,
                 args: [NiceBaseListEmptyStateDirective, { read: TemplateRef }]
+            }], emptySearchResultState: [{
+                type: ContentChild,
+                args: [NiceBaseListEmptySearchResultStateDirective, { read: TemplateRef }]
             }], mode: [{
                 type: Input
             }], layout: [{
@@ -2126,19 +2153,19 @@ class NiceCustomDateAdapter extends NativeDateAdapter {
         return date.getUTCFullYear();
     }
 }
-NiceCustomDateAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceCustomDateAdapter, deps: [{ token: i1$4.TranslateService }, { token: MAT_DATE_LOCALE }, { token: i2$4.Platform }], target: i0.ɵɵFactoryTarget.Injectable });
-NiceCustomDateAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceCustomDateAdapter });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceCustomDateAdapter, decorators: [{
+NiceCustomDateAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceCustomDateAdapter, deps: [{ token: i1$2.TranslateService }, { token: MAT_DATE_LOCALE }, { token: i2$1.Platform }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceCustomDateAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceCustomDateAdapter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceCustomDateAdapter, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$4.TranslateService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DATE_LOCALE]
-                }] }, { type: i2$4.Platform }]; } });
+                }] }, { type: i2$1.Platform }]; } });
 
 class NiceQueryBuilderModule {
 }
-NiceQueryBuilderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceQueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NiceQueryBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceQueryBuilderModule, declarations: [NiceQueryBuilderComponent,
+NiceQueryBuilderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceQueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NiceQueryBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.3", ngImport: i0, type: NiceQueryBuilderModule, declarations: [NiceQueryBuilderComponent,
         QueryBuilderTriggerDirective,
         FilterSelectionComponent,
         RuleComponent,
@@ -2164,26 +2191,24 @@ NiceQueryBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         NiceTypeaheadModule,
         ReactiveFormsModule,
         NgxMaskModule], exports: [NiceQueryBuilderComponent, QueryBuilderTriggerDirective] });
-NiceQueryBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceQueryBuilderModule, providers: [{ provide: DateAdapter, useClass: NiceCustomDateAdapter }], imports: [[
-            CommonModule,
-            FormsModule,
-            TranslateModule,
-            OverlayModule,
-            MatCardModule,
-            MatListModule,
-            MatButtonModule,
-            MatRippleModule,
-            MatIconModule,
-            MatSelectModule,
-            MatInputModule,
-            MatDatepickerModule,
-            MatRadioModule,
-            NiceLoadingSpinnerModule,
-            NiceTypeaheadModule,
-            ReactiveFormsModule,
-            NgxMaskModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceQueryBuilderModule, decorators: [{
+NiceQueryBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceQueryBuilderModule, providers: [{ provide: DateAdapter, useClass: NiceCustomDateAdapter }], imports: [CommonModule,
+        FormsModule,
+        TranslateModule,
+        OverlayModule,
+        MatCardModule,
+        MatListModule,
+        MatButtonModule,
+        MatRippleModule,
+        MatIconModule,
+        MatSelectModule,
+        MatInputModule,
+        MatDatepickerModule,
+        MatRadioModule,
+        NiceLoadingSpinnerModule,
+        NiceTypeaheadModule,
+        ReactiveFormsModule,
+        NgxMaskModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceQueryBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2324,8 +2349,8 @@ class NiceBaseListModule {
         ].filter(x => !!x);
     }
 }
-NiceBaseListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NiceBaseListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListModule, declarations: [NiceBaseListComponent], imports: [NiceExportBottomSheetModule,
+NiceBaseListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NiceBaseListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListModule, declarations: [NiceBaseListComponent], imports: [NiceExportBottomSheetModule,
         NiceBaseListDirectiveModule,
         CommonModule,
         FormsModule,
@@ -2344,27 +2369,25 @@ NiceBaseListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         NiceQueryBuilderModule,
         MatBadgeModule], exports: [NiceBaseListComponent,
         NiceBaseListDirectiveModule] });
-NiceBaseListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListModule, imports: [[
-            NiceExportBottomSheetModule,
-            NiceBaseListDirectiveModule,
-            CommonModule,
-            FormsModule,
-            RouterModule,
-            MatButtonModule,
-            MatIconModule,
-            MatTooltipModule,
-            MatCardModule,
-            MatPaginatorModule,
-            TranslateModule,
-            NiceLoadingSpinnerModule,
-            MatTableModule,
-            MatSortModule,
-            MatRippleModule,
-            MatBottomSheetModule,
-            NiceQueryBuilderModule,
-            MatBadgeModule
-        ], NiceBaseListDirectiveModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListModule, decorators: [{
+NiceBaseListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListModule, imports: [NiceExportBottomSheetModule,
+        NiceBaseListDirectiveModule,
+        CommonModule,
+        FormsModule,
+        RouterModule,
+        MatButtonModule,
+        MatIconModule,
+        MatTooltipModule,
+        MatCardModule,
+        MatPaginatorModule,
+        TranslateModule,
+        NiceLoadingSpinnerModule,
+        MatTableModule,
+        MatSortModule,
+        MatRippleModule,
+        MatBottomSheetModule,
+        NiceQueryBuilderModule,
+        MatBadgeModule, NiceBaseListDirectiveModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceBaseListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2418,13 +2441,13 @@ let NiceMultiStateListStore = class NiceMultiStateListStore extends NiceBaseList
         super(null, []);
     }
 };
-NiceMultiStateListStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NiceMultiStateListStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListStore });
+NiceMultiStateListStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceMultiStateListStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NiceMultiStateListStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceMultiStateListStore });
 NiceMultiStateListStore = __decorate([
     StoreConfig({ name: "multi-state-list", resettable: true }),
     __metadata("design:paramtypes", [])
 ], NiceMultiStateListStore);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceMultiStateListStore, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -2434,9 +2457,9 @@ class NiceMultiStateListQuery extends NiceBaseListQuery {
         this.store = store;
     }
 }
-NiceMultiStateListQuery.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListQuery, deps: [{ token: NiceMultiStateListStore }], target: i0.ɵɵFactoryTarget.Injectable });
-NiceMultiStateListQuery.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListQuery });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListQuery, decorators: [{
+NiceMultiStateListQuery.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceMultiStateListQuery, deps: [{ token: NiceMultiStateListStore }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceMultiStateListQuery.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceMultiStateListQuery });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceMultiStateListQuery, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: NiceMultiStateListStore }]; } });
 
@@ -2466,9 +2489,9 @@ class NiceMultiStateListService extends NiceBaseListService {
         return newState.columns;
     }
 }
-NiceMultiStateListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListService, deps: [{ token: LIST_STATES }, { token: NiceMultiStateListStore }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: i0.ApplicationRef }, { token: NiceMultiStateFilterService }], target: i0.ɵɵFactoryTarget.Injectable });
-NiceMultiStateListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListService, decorators: [{
+NiceMultiStateListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceMultiStateListService, deps: [{ token: LIST_STATES }, { token: NiceMultiStateListStore }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: i0.ApplicationRef }, { token: NiceMultiStateFilterService }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceMultiStateListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceMultiStateListService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceMultiStateListService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
@@ -2488,19 +2511,19 @@ class NiceMultiStateListComponent extends NiceBaseListComponent {
         this.setColumns(columns);
     }
 }
-NiceMultiStateListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListComponent, deps: [{ token: ENABLE_QUERY_BUILDER, optional: true }, { token: BASE_LIST_ICONS }, { token: BASE_LIST_LAYOUT }, { token: EXPORTS_SETTINGS }, { token: NiceMultiStateListQuery }, { token: i2.ActivatedRoute }, { token: i4$2.MatBottomSheet }, { token: i2.Router }, { token: i4$1.NiceMediaWatcherService }, { token: NiceMultiStateListService }], target: i0.ɵɵFactoryTarget.Component });
-NiceMultiStateListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceMultiStateListComponent, selector: "nice-multi-state-list", inputs: { state: "state" }, providers: [
+NiceMultiStateListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceMultiStateListComponent, deps: [{ token: ENABLE_QUERY_BUILDER, optional: true }, { token: BASE_LIST_ICONS }, { token: BASE_LIST_LAYOUT }, { token: EXPORTS_SETTINGS }, { token: NiceMultiStateListQuery }, { token: i2.ActivatedRoute }, { token: i4$3.MatBottomSheet }, { token: i2.Router }, { token: i5$1.NiceMediaWatcherService }, { token: NiceMultiStateListService }], target: i0.ɵɵFactoryTarget.Component });
+NiceMultiStateListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.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; else showData\">\n            <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\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", components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.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"] }, { type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { type: i9.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: NiceQueryBuilderComponent, selector: "nice-query-builder", inputs: ["filterConfigs", "currentSavedReport", "loading"], outputs: ["close", "createReport", "updateReport"] }, { type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }, { type: i16.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i17.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { type: i4$1.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { type: i9.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i11.MatCellDef, selector: "[matCellDef]" }, { type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "async": i13.AsyncPipe, "translate": i1$4.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListComponent, decorators: [{
+    ], 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" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceMultiStateListComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-multi-state-list", providers: [
                         NiceMultiStateListQuery,
                         NiceMultiStateListService,
                         NiceMultiStateListStore
-                    ], 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; else showData\">\n            <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\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" }]
+                    ], 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" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -2515,7 +2538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [EXPORTS_SETTINGS]
-                }] }, { type: NiceMultiStateListQuery }, { type: i2.ActivatedRoute }, { type: i4$2.MatBottomSheet }, { type: i2.Router }, { type: i4$1.NiceMediaWatcherService }, { type: NiceMultiStateListService }]; }, propDecorators: { state: [{
+                }] }, { type: NiceMultiStateListQuery }, { type: i2.ActivatedRoute }, { type: i4$3.MatBottomSheet }, { type: i2.Router }, { type: i5$1.NiceMediaWatcherService }, { type: NiceMultiStateListService }]; }, propDecorators: { state: [{
                 type: Input
             }] } });
 
@@ -2559,8 +2582,8 @@ class NiceMultiStateListModule {
         ].filter(x => !!x);
     }
 }
-NiceMultiStateListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NiceMultiStateListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListModule, declarations: [NiceMultiStateListComponent], imports: [NiceExportBottomSheetModule,
+NiceMultiStateListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceMultiStateListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NiceMultiStateListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.3", ngImport: i0, type: NiceMultiStateListModule, declarations: [NiceMultiStateListComponent], imports: [NiceExportBottomSheetModule,
         NiceBaseListDirectiveModule,
         CommonModule,
         FormsModule,
@@ -2579,27 +2602,25 @@ NiceMultiStateListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0"
         NiceQueryBuilderModule,
         MatBadgeModule], exports: [NiceMultiStateListComponent,
         NiceBaseListDirectiveModule] });
-NiceMultiStateListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListModule, imports: [[
-            NiceExportBottomSheetModule,
-            NiceBaseListDirectiveModule,
-            CommonModule,
-            FormsModule,
-            RouterModule,
-            MatButtonModule,
-            MatIconModule,
-            MatTooltipModule,
-            MatCardModule,
-            MatPaginatorModule,
-            TranslateModule,
-            NiceLoadingSpinnerModule,
-            MatTableModule,
-            MatSortModule,
-            MatRippleModule,
-            MatBottomSheetModule,
-            NiceQueryBuilderModule,
-            MatBadgeModule
-        ], NiceBaseListDirectiveModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListModule, decorators: [{
+NiceMultiStateListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceMultiStateListModule, imports: [NiceExportBottomSheetModule,
+        NiceBaseListDirectiveModule,
+        CommonModule,
+        FormsModule,
+        RouterModule,
+        MatButtonModule,
+        MatIconModule,
+        MatTooltipModule,
+        MatCardModule,
+        MatPaginatorModule,
+        TranslateModule,
+        NiceLoadingSpinnerModule,
+        MatTableModule,
+        MatSortModule,
+        MatRippleModule,
+        MatBottomSheetModule,
+        NiceQueryBuilderModule,
+        MatBadgeModule, NiceBaseListDirectiveModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: NiceMultiStateListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2648,5 +2669,5 @@ String.prototype.toTableColumn = function (sortableOrOptions, nullLast) {
  * Generated bundle index. Do not edit.
  */
 
-export { DateFilterComponent, FilterComponent, FilterGroupIconPipe, FilterOperatorTypes, FilterSelectionComponent, FilterType, FilterUtils, LayoutContent, NiceBaseListButtonsDirective, NiceBaseListCardsDirective, NiceBaseListComponent, NiceBaseListCustomContentDirective, NiceBaseListDirectiveModule, NiceBaseListEmptyStateDirective, NiceBaseListFiltersDirective, NiceBaseListModule, NiceBaseListQuery, NiceBaseListService, NiceBaseListStore, NiceBaseListTableDirective, NiceBaseListTitleDirective, NiceCustomDateAdapter, NiceFilterApi, NiceFilterGroupService, NiceFilterService, NiceListState, NiceMultiStateFilterService, NiceMultiStateListComponent, NiceMultiStateListModule, NiceMultiStateListQuery, NiceMultiStateListService, NiceMultiStateListStore, NiceQueryBuilderComponent, NiceQueryBuilderModule, NiceSavedReportService, NumberFilterComponent, OrderUtils, QBFilterUtils, QueryBuilderTriggerDirective, RadioFilterComponent, RuleComponent, SelectFilterComponent, StringUtils, TableColumns, TextFilterComponent, defaultLayout, initialBaseListState, initialValue, mixinNiceFilterApi };
+export { DateFilterComponent, FilterComponent, FilterGroupIconPipe, FilterOperatorTypes, FilterSelectionComponent, FilterType, FilterUtils, LayoutContent, NiceBaseListButtonsDirective, NiceBaseListCardsDirective, NiceBaseListComponent, NiceBaseListCustomContentDirective, NiceBaseListDirectiveModule, NiceBaseListEmptySearchResultStateDirective, NiceBaseListEmptyStateDirective, NiceBaseListFiltersDirective, NiceBaseListModule, NiceBaseListQuery, NiceBaseListService, NiceBaseListStore, NiceBaseListTableDirective, NiceBaseListTitleDirective, NiceCustomDateAdapter, NiceFilterApi, NiceFilterGroupService, NiceFilterService, NiceListState, NiceMultiStateFilterService, NiceMultiStateListComponent, NiceMultiStateListModule, NiceMultiStateListQuery, NiceMultiStateListService, NiceMultiStateListStore, NiceQueryBuilderComponent, NiceQueryBuilderModule, NiceSavedReportService, NumberFilterComponent, OrderUtils, QBFilterUtils, QueryBuilderTriggerDirective, RadioFilterComponent, RuleComponent, SelectFilterComponent, StringUtils, TableColumns, TextFilterComponent, defaultLayout, initialBaseListState, initialValue, mixinNiceFilterApi };
 //# sourceMappingURL=recursyve-nice-data-filter-kit.mjs.map