@recursyve/nice-data-filter-kit 13.1.8 → 13.1.9

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

@@ -300,6 +300,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             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: "13.0.3", ngImport: i0, type: NiceBaseListEmptySearchResultStateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NiceBaseListEmptySearchResultStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NiceBaseListEmptySearchResultStateDirective, selector: "[niceListEmptySearchResultState]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.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 });
@@ -309,13 +321,15 @@ NiceBaseListDirectiveModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0
         NiceBaseListCardsDirective,
         NiceBaseListCustomContentDirective,
         NiceBaseListEmptyStateDirective,
-        NiceBaseListFiltersDirective], exports: [NiceBaseListButtonsDirective,
+        NiceBaseListFiltersDirective,
+        NiceBaseListEmptySearchResultStateDirective], exports: [NiceBaseListButtonsDirective,
         NiceBaseListTitleDirective,
         NiceBaseListTableDirective,
         NiceBaseListCardsDirective,
         NiceBaseListCustomContentDirective,
         NiceBaseListEmptyStateDirective,
-        NiceBaseListFiltersDirective] });
+        NiceBaseListFiltersDirective,
+        NiceBaseListEmptySearchResultStateDirective] });
 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: [{
             type: NgModule,
@@ -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
                     ]
                 }]
         }] });
@@ -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 ?? []);
     }
@@ -1833,6 +1856,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))));
@@ -2019,14 +2043,14 @@ NiceBaseListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         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: i6.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: i5.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: i5$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "async": i13.AsyncPipe, "translate": i1$4.TranslatePipe } });
+    ], 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", components: [{ type: i6.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: i5.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: i5$1.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: [{
             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
                 }, {
@@ -2065,6 +2089,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: [{
@@ -2487,14 +2514,14 @@ NiceMultiStateListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
         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: i6.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: i5.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: i5$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "async": i13.AsyncPipe, "translate": i1$4.TranslatePipe } });
+    ], 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", components: [{ type: i6.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: i5.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: i5$1.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: [{
             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
                 }, {
@@ -2642,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