@recursyve/nice-data-filter-kit 12.1.27 → 13.0.0

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

@@ -0,0 +1,2448 @@
+import { HttpParams } from '@angular/common/http';
+import * as i3$1 from '@recursyve/nice-ui-kit.v2';
+import { isNullOrUndefined, ObjectUtils, FileUtils, ArrayUtils, ExportBottomSheetComponent, NiceLoadingSpinnerModule, NiceTypeaheadModule, NiceExportBottomSheetModule } from '@recursyve/nice-ui-kit.v2';
+import * as i0 from '@angular/core';
+import { Directive, Input, NgModule, Injectable, InjectionToken, Optional, Inject, Component, forwardRef, ViewEncapsulation, Pipe, EventEmitter, ChangeDetectionStrategy, Output, HostListener, TemplateRef, ContentChild, ContentChildren } from '@angular/core';
+import { Store, StoreConfig, Query, arrayUpsert, arrayRemove } from '@datorama/akita';
+import { __decorate, __metadata, __awaiter } from 'tslib';
+import { Subject, firstValueFrom, of } from 'rxjs';
+import { takeUntil, map, debounceTime, switchMap, distinctUntilChanged } from 'rxjs/operators';
+import * as i3 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i4$1 from '@angular/material/bottom-sheet';
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import * as i5$2 from '@angular/flex-layout';
+import * as i6 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i7 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i8 from '@angular/material/paginator';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import * as i9 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i1$1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1$5 from '@recursyve/ngx-form-generator';
+import { Control, Required, Array as Array$1, GeneratedFormGroup, ngxFormGeneratorFactory } from '@recursyve/ngx-form-generator';
+import * as i1 from '@angular/material/form-field';
+import * as i5$1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i5 from '@angular/material/core';
+import { NativeDateAdapter, MAT_DATE_LOCALE, MatRippleModule, DateAdapter } from '@angular/material/core';
+import * as i2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i4 from 'ngx-mask';
+import { NgxMaskModule } from 'ngx-mask';
+import * as i1$2 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i13 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2$1 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { ComponentPortal } from '@angular/cdk/portal';
+import * as i2$2 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import * as i1$3 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i2$3 from '@angular/cdk/platform';
+import * as i1$4 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i11 from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import * as i12 from '@angular/material/sort';
+import { MatSortModule } from '@angular/material/sort';
+import * as i16 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i17 from '@angular/material/badge';
+import { MatBadgeModule } from '@angular/material/badge';
+
+class QueryParamsUtils {
+    static extractFilterParameters(params) {
+        const filters = {};
+        if (!isNullOrUndefined(params.start)) {
+            filters.start = Number(params.start);
+        }
+        if (!isNullOrUndefined(params.length)) {
+            filters.length = Number(params.length);
+        }
+        if (!isNullOrUndefined(params.order)) {
+            try {
+                filters.order = JSON.parse(params.order);
+            }
+            catch (e) {
+                delete filters.order;
+            }
+        }
+        if (!isNullOrUndefined(params.search)) {
+            filters.search = params.search;
+        }
+        if (!isNullOrUndefined(params.rules)) {
+            try {
+                filters.rules = JSON.parse(params.rules);
+            }
+            catch (e) {
+                delete filters.rules;
+            }
+        }
+        return filters;
+    }
+    static filterParametersToParamsMap(filterParameters) {
+        const params = {};
+        if (!isNullOrUndefined(filterParameters.start)) {
+            params.start = filterParameters.start;
+        }
+        if (!isNullOrUndefined(filterParameters.length)) {
+            params.length = filterParameters.length;
+        }
+        if (!isNullOrUndefined(filterParameters.order)) {
+            params.order = JSON.stringify(filterParameters.order);
+        }
+        else {
+            params.order = null;
+        }
+        if (!isNullOrUndefined(filterParameters.search)) {
+            params.search = filterParameters.search;
+        }
+        if (!isNullOrUndefined(filterParameters.rules)) {
+            params.rules = JSON.stringify(filterParameters.rules);
+        }
+        return params;
+    }
+    static fromObject(obj) {
+        Object.entries(obj).forEach(([key, value]) => {
+            if (value === undefined) {
+                delete obj[key];
+            }
+        });
+        return new HttpParams({
+            fromObject: obj
+        }).toString();
+    }
+}
+
+class NiceFilterApi {
+    constructor(filterApiUrl, path, http) {
+        this.filterApiUrl = filterApiUrl;
+        this.path = path;
+        this.http = http;
+    }
+    filter(queryModel) {
+        return this.http.post(this.url("filter"), queryModel);
+    }
+    filterCount(queryModel) {
+        return this.http.post(this.url("filter-count"), queryModel);
+    }
+    downloadData(type, queryModel) {
+        return this.http.post(this.url(`download/${type}`), queryModel, { responseType: "blob" });
+    }
+    getPrintableHtml(queryModel) {
+        return this.http.post(this.url(`download/html`), queryModel, { responseType: "text" });
+    }
+    getFilterConfig() {
+        return this.http.get(this.url("filter/config"));
+    }
+    searchFilterValue(id, value) {
+        if (value === undefined) {
+            value = "";
+        }
+        return this.http.get(this.url(`filter/config/value?id=${id}&value=${value}`));
+    }
+    searchFilterResourceValue(id, resourceId) {
+        return this.http.get(this.url(`filter/config/id?id=${id}&resourceId=${resourceId}`));
+    }
+    url(...args) {
+        const [route, queryParams] = this.transformUrlArgs(args);
+        const params = queryParams ? `?${QueryParamsUtils.fromObject(queryParams)}` : "";
+        if (route) {
+            return `${this.filterApiUrl}/${this.path}/${route}${params}`;
+        }
+        return `${this.filterApiUrl}/${this.path}${params}`;
+    }
+    transformUrlArgs(args) {
+        const [routeOfQueryParams, query] = args;
+        if (args.length === 1) {
+            if (typeof routeOfQueryParams === "string") {
+                return [routeOfQueryParams];
+            }
+            return ["", routeOfQueryParams];
+        }
+        return [routeOfQueryParams !== null && routeOfQueryParams !== void 0 ? routeOfQueryParams : "", query];
+    }
+}
+
+class NiceBaseListButtonsDirective {
+    constructor(template) {
+        this.template = template;
+        this.position = "suffix";
+    }
+}
+NiceBaseListButtonsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListButtonsDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NiceBaseListButtonsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NiceBaseListButtonsDirective, selector: "[niceListButton]", inputs: { position: "position" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListButtonsDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[niceListButton]" }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { position: [{
+                type: Input
+            }] } });
+
+class NiceBaseListCardsDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+NiceBaseListCardsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListCardsDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NiceBaseListCardsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NiceBaseListCardsDirective, selector: "[niceListCards]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListCardsDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[niceListCards]" }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+class NiceBaseListCustomContentDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+NiceBaseListCustomContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListCustomContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NiceBaseListCustomContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NiceBaseListCustomContentDirective, selector: "[niceListContent]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListCustomContentDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[niceListContent]" }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+class NiceBaseListFiltersDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+NiceBaseListFiltersDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListFiltersDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NiceBaseListFiltersDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NiceBaseListFiltersDirective, selector: "[niceListFilters]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListFiltersDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[niceListFilters]" }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+class NiceBaseListTableDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+NiceBaseListTableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListTableDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NiceBaseListTableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NiceBaseListTableDirective, selector: "[niceListTable]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListTableDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[niceListTable]" }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+class NiceBaseListTitleDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+NiceBaseListTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListTitleDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NiceBaseListTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NiceBaseListTitleDirective, selector: "[niceListTitle]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListTitleDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[niceListTitle]" }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+class NiceBaseListDirectiveModule {
+}
+NiceBaseListDirectiveModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NiceBaseListDirectiveModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListDirectiveModule, declarations: [NiceBaseListButtonsDirective,
+        NiceBaseListTitleDirective,
+        NiceBaseListTableDirective,
+        NiceBaseListCardsDirective,
+        NiceBaseListCustomContentDirective,
+        NiceBaseListFiltersDirective], exports: [NiceBaseListButtonsDirective,
+        NiceBaseListTitleDirective,
+        NiceBaseListTableDirective,
+        NiceBaseListCardsDirective,
+        NiceBaseListCustomContentDirective,
+        NiceBaseListFiltersDirective] });
+NiceBaseListDirectiveModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListDirectiveModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListDirectiveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        NiceBaseListButtonsDirective,
+                        NiceBaseListTitleDirective,
+                        NiceBaseListTableDirective,
+                        NiceBaseListCardsDirective,
+                        NiceBaseListCustomContentDirective,
+                        NiceBaseListFiltersDirective
+                    ],
+                    exports: [
+                        NiceBaseListButtonsDirective,
+                        NiceBaseListTitleDirective,
+                        NiceBaseListTableDirective,
+                        NiceBaseListCardsDirective,
+                        NiceBaseListCustomContentDirective,
+                        NiceBaseListFiltersDirective
+                    ]
+                }]
+        }] });
+
+class TableColumns {
+    constructor(id, sortable = true) {
+        this.id = id;
+        this.sortable = sortable;
+    }
+}
+
+var LayoutContent;
+(function (LayoutContent) {
+    LayoutContent["Table"] = "table";
+    LayoutContent["Cards"] = "cards";
+    LayoutContent["Custom"] = "custom";
+})(LayoutContent || (LayoutContent = {}));
+const defaultLayout = {
+    default: {
+        classes: ["flex flex-col"],
+        items: [
+            {
+                classes: ["flex flex-row mb-8"],
+                items: [
+                    {
+                        name: "title",
+                        classes: ["flex flex-full max-w-1/3"],
+                    },
+                    {
+                        classes: ["flex flex-row flex-auto flex-shrink-0 justify-center items-center"],
+                        items: [
+                            {
+                                name: "search",
+                                classes: ["flex flex-auto flex-shrink-0"],
+                            },
+                            {
+                                classes: ["flex flex-auto flex-shrink-0 justify-end"],
+                                items: [
+                                    {
+                                        name: "prefixButtons",
+                                        classes: ["flex justify-end items-center"],
+                                    },
+                                    {
+                                        name: "exportButtons",
+                                        classes: ["flex justify-end items-center"],
+                                    },
+                                    {
+                                        name: "suffixButtons",
+                                        classes: ["flex justify-end items-center"],
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                name: "queryBuilder"
+            },
+            {
+                name: "filters"
+            },
+            {
+                name: "content"
+            },
+            {
+                name: "pagination"
+            }
+        ]
+    },
+    sm: {
+        classes: ["flex flex-col"],
+        items: [
+            {
+                classes: ["flex flex-row justify-center items-center mb-8"],
+                items: [
+                    {
+                        name: "title",
+                        classes: ["flex flex-full max-w-1/2"]
+                    },
+                    {
+                        classes: ["flex flex-auto flex-shrink-0 justify-end items-center"],
+                        items: [
+                            {
+                                name: "prefixButtons"
+                            },
+                            {
+                                name: "exportButtons"
+                            },
+                            {
+                                name: "suffixButtons"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                name: "search",
+                classes: ["flex justify-center items-center mb-8"]
+            },
+            {
+                name: "queryBuilder"
+            },
+            {
+                name: "filters"
+            },
+            {
+                name: "content"
+            },
+            {
+                name: "pagination"
+            }
+        ]
+    },
+    xs: {
+        classes: ["flex flex-col"],
+        items: [
+            {
+                classes: ["flex flex-row justify-center items-center mb-8"],
+                items: [
+                    {
+                        name: "title",
+                        classes: ["flex flex-full max-w-1/2"]
+                    },
+                    {
+                        classes: ["flex flex-auto flex-shrink-0 justify-end items-center"],
+                        items: [
+                            {
+                                name: "prefixButtons"
+                            },
+                            {
+                                name: "exportButtons"
+                            },
+                            {
+                                name: "suffixButtons"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                name: "search",
+                classes: ["flex justify-center items-center mb-8"]
+            },
+            {
+                name: "queryBuilder"
+            },
+            {
+                name: "filters"
+            },
+            {
+                name: "content"
+            },
+            {
+                name: "pagination"
+            }
+        ]
+    }
+};
+
+class FilterUtils {
+    static parametersToRequest(filterParameters) {
+        var _a, _b, _c, _d, _e, _f;
+        return {
+            page: {
+                number: Math.ceil(((_a = filterParameters.start) !== null && _a !== void 0 ? _a : 0) / ((_b = filterParameters.length) !== null && _b !== void 0 ? _b : 1)),
+                size: (_c = filterParameters.length) !== null && _c !== void 0 ? _c : 0
+            },
+            search: {
+                value: (_d = filterParameters.search) !== null && _d !== void 0 ? _d : ""
+            },
+            query: {
+                condition: "and",
+                rules: (_e = filterParameters.rules) !== null && _e !== void 0 ? _e : []
+            },
+            order: (_f = filterParameters.order) !== null && _f !== void 0 ? _f : undefined,
+            data: filterParameters.data
+        };
+    }
+    static filterChangeNeedsRefresh(currentFilters, newFilters) {
+        const newFilterKeys = Object.keys(newFilters).sort();
+        if (newFilterKeys.length === 0) {
+            return true;
+        }
+        return newFilterKeys.some((key) => {
+            const currentValue = currentFilters[key];
+            const newValue = currentFilters[key];
+            if (Array.isArray(currentValue)) {
+                return !ObjectUtils.areObjectsEqual(currentValue, newValue);
+            }
+            else if (typeof currentValue === "object" && currentValue !== null) {
+                return !ObjectUtils.areObjectsEqual(currentValue, newValue);
+            }
+            else {
+                return currentValue !== newValue;
+            }
+        });
+    }
+}
+
+class NiceFilterService {
+    constructor(api) {
+        this.api = api;
+    }
+    filter(params) {
+        var _a;
+        return (_a = this.api) === null || _a === void 0 ? void 0 : _a.filter(FilterUtils.parametersToRequest(params));
+    }
+    getFile(type, parameters) {
+        var _a;
+        return (_a = this.api) === null || _a === void 0 ? void 0 : _a.downloadData(type, FilterUtils.parametersToRequest(parameters));
+    }
+    getPrintableHtml(parameters) {
+        var _a;
+        return (_a = this.api) === null || _a === void 0 ? void 0 : _a.getPrintableHtml(FilterUtils.parametersToRequest(parameters));
+    }
+    getFilterConfig() {
+        var _a;
+        return (_a = this.api) === null || _a === void 0 ? void 0 : _a.getFilterConfig();
+    }
+    searchFilterValue(filterConfig, value) {
+        var _a;
+        return (_a = this.api) === null || _a === void 0 ? void 0 : _a.searchFilterValue(filterConfig.id, value);
+    }
+    searchFilterResourceValue(filterConfig, resourceId) {
+        var _a;
+        return (_a = this.api) === null || _a === void 0 ? void 0 : _a.searchFilterResourceValue(filterConfig.id, resourceId);
+    }
+}
+NiceFilterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceFilterService, deps: [{ token: NiceFilterApi }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceFilterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceFilterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceFilterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: NiceFilterApi }]; } });
+
+class NiceSavedReportsApi {
+    constructor(filterApiUrl, path, http) {
+        this.filterApiUrl = filterApiUrl;
+        this.path = path;
+        this.http = http;
+    }
+    create(dto) {
+        return this.http.post(this.url(), dto);
+    }
+    getAll() {
+        return this.http.get(this.url());
+    }
+    getByTable(table) {
+        return this.http.get(this.url(`${table}`));
+    }
+    getTopByTable(table) {
+        return this.http.get(this.url(`${table}/top`));
+    }
+    hit(id) {
+        return this.http.put(this.url(`${id}/hit`), null);
+    }
+    update(id, dto) {
+        return this.http.put(this.url(`${id}`), dto);
+    }
+    delete(id) {
+        return this.http.delete(this.url(`${id}`));
+    }
+    url(...args) {
+        const [route, queryParams] = this.transformUrlArgs(args);
+        const params = queryParams ? `?${QueryParamsUtils.fromObject(queryParams)}` : "";
+        if (route) {
+            return `${this.filterApiUrl}/${this.path}/${route}${params}`;
+        }
+        return `${this.filterApiUrl}/${this.path}${params}`;
+    }
+    transformUrlArgs(args) {
+        const [routeOfQueryParams, query] = args;
+        if (args.length === 1) {
+            if (typeof routeOfQueryParams === "string") {
+                return [routeOfQueryParams];
+            }
+            return ["", routeOfQueryParams];
+        }
+        return [routeOfQueryParams !== null && routeOfQueryParams !== void 0 ? routeOfQueryParams : "", query];
+    }
+}
+
+class NiceSavedReportService {
+    constructor(api) {
+        this.api = api;
+    }
+    create(report) {
+        return this.api.create(report);
+    }
+    update(id, report) {
+        return this.api.update(id, report);
+    }
+    remove(id) {
+        return this.api.delete(id);
+    }
+    getByTableName(table) {
+        return this.api.getByTable(table);
+    }
+    getTopByTableName(table) {
+        return this.api.getTopByTable(table);
+    }
+    hit(id) {
+        return this.api.hit(id);
+    }
+}
+NiceSavedReportService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceSavedReportService, deps: [{ token: NiceSavedReportsApi }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceSavedReportService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceSavedReportService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceSavedReportService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: NiceSavedReportsApi }]; } });
+
+const BASE_LIST_LAYOUT = new InjectionToken("base_list_layout");
+const DEFAULT_PARAMETERS = new InjectionToken("default_parameters");
+const LIST_TABLE = new InjectionToken("list_table");
+const TABLE_COLUMNS = new InjectionToken("table_columns");
+const EXPORTS_SETTINGS = new InjectionToken("exports_settings");
+const ENABLE_QUERY_BUILDER = new InjectionToken("enable_query_builder");
+
+const initialBaseListState = {
+    disabled: false,
+    mergePageResults: false,
+    resetPaging: false,
+    filterConfigLoading: false,
+    filterResult: null,
+    filterParameters: {
+        start: 0,
+        length: 10,
+        order: {},
+        search: "",
+        rules: [],
+        data: {}
+    },
+    filterConfig: [],
+    showQueryBuilder: false,
+    defaultRules: []
+};
+let NiceBaseListStore = class NiceBaseListStore extends Store {
+    constructor(parameters) {
+        super(Object.assign(Object.assign({}, initialBaseListState), { filterParameters: Object.assign(Object.assign({}, initialBaseListState.filterParameters), (parameters !== null && parameters !== void 0 ? parameters : {})) }));
+    }
+    setFilterConfigLoading(loading) {
+        this.update({
+            filterConfigLoading: loading
+        });
+    }
+    setResult(filterResult, reset = false) {
+        const { mergePageResults } = this.getValue();
+        if (mergePageResults && !reset) {
+            this.update((state) => {
+                var _a, _b;
+                return ({
+                    filterResult: {
+                        page: filterResult.page,
+                        total: filterResult.total,
+                        values: state.resetPaging ? filterResult.values : [
+                            ...((_b = (_a = state.filterResult) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : []),
+                            ...filterResult.values
+                        ]
+                    },
+                    resetPaging: false
+                });
+            });
+        }
+        else {
+            this.update({
+                filterResult
+            });
+        }
+    }
+    setParameters(filterParameters) {
+        this.update({
+            filterParameters
+        });
+    }
+};
+NiceBaseListStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListStore, deps: [{ token: DEFAULT_PARAMETERS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceBaseListStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListStore });
+NiceBaseListStore = __decorate([
+    StoreConfig({ name: "base-list", resettable: true }),
+    __metadata("design:paramtypes", [Object])
+], NiceBaseListStore);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListStore, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DEFAULT_PARAMETERS]
+                    }] }];
+    } });
+
+class NiceBaseListQuery extends Query {
+    constructor(store) {
+        super(store);
+        this.store = store;
+    }
+    selectData() {
+        return this.select(s => { var _a, _b; return (_b = (_a = s.filterResult) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : []; });
+    }
+    selectFilterParameters() {
+        return this.select(s => s.filterParameters);
+    }
+    selectFilterResult() {
+        return this.select(s => s.filterResult);
+    }
+    selectFilterConfig() {
+        return this.select(s => s.filterConfig);
+    }
+    selectFilterConfigLoading() {
+        return this.select(s => s.filterConfigLoading);
+    }
+    selectShowQueryBuilder() {
+        return this.select(s => s.showQueryBuilder);
+    }
+}
+NiceBaseListQuery.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListQuery, deps: [{ token: NiceBaseListStore }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceBaseListQuery.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListQuery });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListQuery, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: NiceBaseListStore }]; } });
+
+var FilterType;
+(function (FilterType) {
+    FilterType["Text"] = "text";
+    FilterType["Number"] = "number";
+    FilterType["Date"] = "date";
+    FilterType["Select"] = "select";
+    FilterType["Radio"] = "radio";
+})(FilterType || (FilterType = {}));
+
+var FilterOperatorTypes;
+(function (FilterOperatorTypes) {
+    FilterOperatorTypes["Equal"] = "equal";
+    FilterOperatorTypes["NotEqual"] = "not_equal";
+    FilterOperatorTypes["In"] = "in";
+    FilterOperatorTypes["NotIn"] = "not_in";
+    FilterOperatorTypes["Less"] = "less";
+    FilterOperatorTypes["LessOrEqual"] = "less_or_equal";
+    FilterOperatorTypes["Greater"] = "greater";
+    FilterOperatorTypes["GreaterOrEqual"] = "greater_or_equal";
+    FilterOperatorTypes["Between"] = "between";
+    FilterOperatorTypes["NotBetween"] = "not_between";
+    FilterOperatorTypes["IsNull"] = "is_null";
+    FilterOperatorTypes["IsNotNull"] = "is_not_null";
+    FilterOperatorTypes["BeginsWith"] = "begins_with";
+    FilterOperatorTypes["NotBeginsWith"] = "not_begins_with";
+    FilterOperatorTypes["EndsWith"] = "ends_with";
+    FilterOperatorTypes["NotEndsWith"] = "not_ends_with";
+    FilterOperatorTypes["Contains"] = "contains";
+    FilterOperatorTypes["NotContains"] = "not_contains";
+    FilterOperatorTypes["IsEmpty"] = "is_empty";
+    FilterOperatorTypes["IsNotEmpty"] = "is_not_empty";
+    FilterOperatorTypes["None"] = "none";
+})(FilterOperatorTypes || (FilterOperatorTypes = {}));
+
+class QBFilterUtils {
+    static isSingleInput(filterOperator) {
+        if (!filterOperator) {
+            return false;
+        }
+        return QBFilterUtils.singleInputOperators.includes(filterOperator);
+    }
+    static isDoubleInput(filterOperator) {
+        if (!filterOperator) {
+            return false;
+        }
+        return QBFilterUtils.doubleInputOperators.includes(filterOperator);
+    }
+    static isNoInput(filterOperator) {
+        if (!filterOperator) {
+            return false;
+        }
+        return QBFilterUtils.noInputOperators.includes(filterOperator);
+    }
+    static createRule(config, operator) {
+        var _a, _b, _c;
+        const base = {
+            id: config.id,
+            operation: operator || config.operators[0].id
+        };
+        switch (config.type) {
+            case FilterType.Text:
+                return Object.assign(Object.assign({}, base), { value: QBFilterUtils.isDoubleInput(operator) ? ["", ""] : "" });
+            case FilterType.Select:
+                return Object.assign(Object.assign({}, base), { value: QBFilterUtils.isDoubleInput(operator) ? [null, null] : null });
+            case FilterType.Date:
+                return Object.assign(Object.assign({}, base), { value: QBFilterUtils.isDoubleInput(operator) ? [new Date(), new Date()] : new Date() });
+            case FilterType.Radio:
+                return Object.assign(Object.assign({}, base), { value: QBFilterUtils.isDoubleInput(operator)
+                        ? [(_a = config.options) === null || _a === void 0 ? void 0 : _a[0].key, (_b = config.options) === null || _b === void 0 ? void 0 : _b[0].key]
+                        : (_c = config.options) === null || _c === void 0 ? void 0 : _c[0].key });
+            case FilterType.Number:
+                return Object.assign(Object.assign({}, base), { value: QBFilterUtils.isDoubleInput(operator) ? [0, 0] : 0 });
+        }
+    }
+    static createQueryModel(config) {
+        return {
+            condition: "or",
+            rules: [QBFilterUtils.createRule(config)]
+        };
+    }
+}
+QBFilterUtils.noInputOperators = [
+    FilterOperatorTypes.IsEmpty,
+    FilterOperatorTypes.IsNotEmpty,
+    FilterOperatorTypes.IsNull,
+    FilterOperatorTypes.IsNotNull,
+    FilterOperatorTypes.None
+];
+QBFilterUtils.singleInputOperators = [
+    FilterOperatorTypes.Equal,
+    FilterOperatorTypes.NotEqual,
+    FilterOperatorTypes.Less,
+    FilterOperatorTypes.LessOrEqual,
+    FilterOperatorTypes.Greater,
+    FilterOperatorTypes.GreaterOrEqual,
+    FilterOperatorTypes.BeginsWith,
+    FilterOperatorTypes.NotBeginsWith,
+    FilterOperatorTypes.EndsWith,
+    FilterOperatorTypes.NotEndsWith,
+    FilterOperatorTypes.Contains,
+    FilterOperatorTypes.NotContains
+];
+QBFilterUtils.doubleInputOperators = [
+    FilterOperatorTypes.Between,
+    FilterOperatorTypes.NotBetween
+];
+
+class NiceBaseListService {
+    constructor(store, filterService, activatedRoute, router, appRef) {
+        this.store = store;
+        this.filterService = filterService;
+        this.activatedRoute = activatedRoute;
+        this.router = router;
+        this.appRef = appRef;
+        this.queryParamsLoaded$ = new Subject();
+        this.downloadFileName = "data";
+        this.unsubscribeAll$ = new Subject();
+        this.loadingData = false;
+    }
+    init() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.store.setFilterConfigLoading(true);
+            try {
+                const filterConfig = yield firstValueFrom(this.filterService.getFilterConfig());
+                this.store.update({
+                    filterConfig
+                });
+            }
+            catch (e) {
+                this.store.setError(e);
+            }
+            finally {
+                this.store.setFilterConfigLoading(false);
+            }
+        });
+    }
+    resetStore() {
+        this.store.reset();
+    }
+    resetData() {
+        this.store.update({
+            filterResult: null
+        });
+    }
+    closeSubscriptions() {
+        this.unsubscribeAll$.next(null);
+        this.unsubscribeAll$.complete();
+        this.queryParamsLoaded$.complete();
+    }
+    disableList() {
+        this.store.update({
+            disabled: true
+        });
+    }
+    enableList() {
+        this.store.update({
+            disabled: false
+        });
+    }
+    setLoading(loading) {
+        this.store.setLoading(loading);
+    }
+    setMode(mode) {
+        this.store.update({
+            mergePageResults: mode === "infinite-scroll"
+        });
+    }
+    loadQueryParams(autoLoad) {
+        var _a;
+        (_a = this.activatedRoute) === null || _a === void 0 ? void 0 : _a.queryParams.pipe(takeUntil(this.unsubscribeAll$), map((params) => {
+            return {
+                params: QueryParamsUtils.extractFilterParameters(params)
+            };
+        })).subscribe(({ params }) => {
+            if (!params || Object.keys(params).length === 0) {
+                params = this.store.getValue().filterParameters;
+            }
+            const { filterParameters, filterResult } = this.store.getValue();
+            if (FilterUtils.filterChangeNeedsRefresh(filterParameters, params) ||
+                !filterResult) {
+                if (autoLoad) {
+                    this.loadData(params, false);
+                }
+                else {
+                    this.setParameters(params, false);
+                }
+            }
+            this.queryParamsLoaded$.next(null);
+        });
+    }
+    resetAndLoadData(parameters, updateQueryParams = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.loadData(parameters, updateQueryParams, true);
+        });
+    }
+    loadData(parameters, updateQueryParams = true, reset = false) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { disabled } = this.store.getValue();
+            try {
+                const filterParameters = this.mergeParameters(parameters);
+                if (!disabled) {
+                    this.store.setLoading(true);
+                    this.loadingData = true;
+                    const result = yield firstValueFrom(this.filterService.filter(this.getParameters(filterParameters)));
+                    this.store.setResult(result, reset);
+                }
+                if (filterParameters) {
+                    this.setParameters(filterParameters, disabled ? false : updateQueryParams);
+                }
+            }
+            catch (e) {
+                this.store.setError(e);
+            }
+            finally {
+                this.store.setLoading(false);
+                this.loadingData = false;
+            }
+        });
+    }
+    searchData(search) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { filterParameters } = this.store.getValue();
+            yield this.loadData(Object.assign(Object.assign({}, filterParameters), { search }));
+        });
+    }
+    loadNewPage(start, length) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { filterParameters } = this.store.getValue();
+            yield this.loadData(Object.assign(Object.assign({}, filterParameters), { start,
+                length }));
+        });
+    }
+    loadNextPage() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { filterParameters } = this.store.getValue();
+            yield this.loadData(Object.assign(Object.assign({}, filterParameters), { start: filterParameters.start + filterParameters.length }));
+        });
+    }
+    resetPaging() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { filterParameters } = this.store.getValue();
+            this.store.setParameters(Object.assign(Object.assign({}, filterParameters), { start: 0 }));
+            this.store.update({
+                resetPaging: true
+            });
+        });
+    }
+    downloadData(type, parameters, updateQueryParams = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                this.store.setLoading(true);
+                this.loadingData = true;
+                const filterParameters = this.mergeParameters(parameters);
+                if (filterParameters) {
+                    this.setParameters(filterParameters, updateQueryParams);
+                }
+                const result = yield firstValueFrom(this.filterService.getFile(type, this.getParameters(filterParameters)));
+                FileUtils.downloadFile(`${this.downloadFileName}.${type}`, result);
+            }
+            catch (e) {
+                this.store.setError(e);
+            }
+            finally {
+                this.store.setLoading(false);
+                this.loadingData = false;
+            }
+        });
+    }
+    printData(parameters, updateQueryParams = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                this.store.setLoading(true);
+                this.loadingData = true;
+                const filterParameters = this.mergeParameters(parameters);
+                if (filterParameters) {
+                    this.setParameters(filterParameters, updateQueryParams);
+                }
+                const result = yield firstValueFrom(this.filterService.getPrintableHtml(this.getParameters(filterParameters)));
+                FileUtils.openPrintableWindow(result);
+            }
+            catch (e) {
+                this.store.setError(e);
+            }
+            finally {
+                this.store.setLoading(false);
+                this.loadingData = false;
+            }
+        });
+    }
+    updateRule(id, newRule) {
+        var _a;
+        const { filterParameters } = this.store.getValue();
+        const rules = (_a = filterParameters.rules) === null || _a === void 0 ? void 0 : _a[0];
+        if (!rules || rules.rules.length === 0) {
+            this.updateRules([newRule]);
+            return;
+        }
+        const oldRule = rules.rules.find((r) => r.id === id);
+        let newRules = rules.rules;
+        if (oldRule) {
+            if (newRule) {
+                // Array replace
+                newRules = [
+                    ...rules.rules.slice(0, rules.rules.indexOf(oldRule)),
+                    newRule,
+                    ...rules.rules.slice(rules.rules.indexOf(oldRule) + 1, rules.rules.length)
+                ];
+            }
+            else {
+                newRules = rules.rules.filter((r) => r.id !== id);
+            }
+        }
+        else {
+            newRules = [...newRules, newRule];
+        }
+        this.updateRules(newRules);
+    }
+    updateDefaultRules(rule) {
+        this.store.update({
+            defaultRules: rule
+        });
+    }
+    updateGlobalRules(rules, updateQueryParams = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { filterParameters } = this.store.getValue();
+            const newRules = Object.assign(Object.assign({}, filterParameters), { rules });
+            yield this.loadData(newRules, updateQueryParams);
+        });
+    }
+    addRuleFromConfig(config) {
+        const { filterParameters } = this.store.getValue();
+        const newRules = Object.assign(Object.assign({}, filterParameters), { rules: [
+                ...filterParameters.rules,
+                QBFilterUtils.createQueryModel(config)
+            ] });
+        this.store.update({
+            showQueryBuilder: true
+        });
+        this.loadData(newRules, true);
+    }
+    updateRules(rules) {
+        const { filterParameters } = this.store.getValue();
+        const newRules = {
+            order: filterParameters.order,
+            rules: [
+                {
+                    condition: "and",
+                    rules
+                }
+            ]
+        };
+        this.loadData(newRules, true);
+    }
+    toggleQueryBuilder() {
+        this.store.update((state) => ({
+            showQueryBuilder: !state.showQueryBuilder
+        }));
+    }
+    updateListValue(value, key = "id") {
+        const { filterResult } = this.store.getValue();
+        if (!filterResult) {
+            return;
+        }
+        this.store.update({
+            filterResult: Object.assign(Object.assign({}, filterResult), { values: arrayUpsert(filterResult.values, value[key], value) })
+        });
+    }
+    removeListValue(value, key = "id") {
+        const { filterResult } = this.store.getValue();
+        if (!filterResult) {
+            return;
+        }
+        this.store.update({
+            filterResult: Object.assign(Object.assign({}, filterResult), { values: arrayRemove(filterResult.values, value[key]) })
+        });
+    }
+    updateQueryParams(queryParams) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.activatedRoute) {
+                return;
+            }
+            yield this.router.navigate([], {
+                relativeTo: this.activatedRoute,
+                queryParams,
+                queryParamsHandling: "merge"
+            });
+        });
+    }
+    getParameters(filterParameters) {
+        const { defaultRules } = this.store.getValue();
+        const parameters = Object.assign(Object.assign({}, filterParameters), { rules: (filterParameters === null || filterParameters === void 0 ? void 0 : filterParameters.rules) ? [...filterParameters.rules] : [] });
+        if (defaultRules === null || defaultRules === void 0 ? void 0 : defaultRules.length) {
+            parameters.rules.push({
+                condition: "and",
+                rules: defaultRules
+            });
+        }
+        return parameters;
+    }
+    mergeParameters(parameters) {
+        const { filterParameters } = this.store.getValue();
+        if (!parameters) {
+            return filterParameters;
+        }
+        return Object.assign(Object.assign(Object.assign({}, filterParameters), parameters), { order: filterParameters.order && !parameters.order
+                ? undefined
+                : Object.assign(Object.assign({}, filterParameters.order), parameters.order) });
+    }
+    setParameters(parameters, updateQueryParams = true) {
+        this.store.setParameters(parameters);
+        if (updateQueryParams) {
+            this.updateQueryParams(QueryParamsUtils.filterParametersToParamsMap(parameters));
+        }
+    }
+}
+NiceBaseListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListService, deps: [{ token: NiceBaseListStore }, { token: NiceFilterService }, { token: i3.ActivatedRoute }, { token: i3.Router }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceBaseListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: NiceBaseListStore }, { type: NiceFilterService }, { type: i3.ActivatedRoute }, { type: i3.Router }, { type: i0.ApplicationRef }]; } });
+
+class QueryRuleForm {
+    constructor(rule) {
+        if (!rule) {
+            return;
+        }
+        this.id = rule.id;
+        this.operation = rule.operation;
+        if (QBFilterUtils.isDoubleInput(rule.operation)) {
+            this.value = rule.value[0];
+            this.secondValue = rule.value[1];
+        }
+        else {
+            this.value = rule.value;
+        }
+    }
+    transform() {
+        return {
+            id: this.id,
+            operation: this.operation,
+            value: this.secondValue === undefined ? this.value : [this.value, this.secondValue]
+        };
+    }
+}
+__decorate([
+    Control(),
+    Required(),
+    __metadata("design:type", String)
+], QueryRuleForm.prototype, "id", void 0);
+__decorate([
+    Control(),
+    Required(),
+    __metadata("design:type", String)
+], QueryRuleForm.prototype, "operation", void 0);
+__decorate([
+    Control(),
+    Required(),
+    __metadata("design:type", Object)
+], QueryRuleForm.prototype, "value", void 0);
+__decorate([
+    Control(),
+    Required(),
+    __metadata("design:type", Object)
+], QueryRuleForm.prototype, "secondValue", void 0);
+class QueryForm {
+}
+__decorate([
+    Control(),
+    Required(),
+    __metadata("design:type", String)
+], QueryForm.prototype, "condition", void 0);
+__decorate([
+    Array$1(QueryRuleForm),
+    __metadata("design:type", Array$1)
+], QueryForm.prototype, "rules", void 0);
+class QueryBuilderForm {
+    constructor(rules) {
+        if (!rules) {
+            rules = [];
+        }
+        this.rules = rules.map(x => ({
+            condition: x.condition,
+            rules: x.rules.map(rule => new QueryRuleForm(rule))
+        }));
+    }
+    transform() {
+        return this.rules.map(x => ({
+            condition: x.condition,
+            rules: x.rules.map(rule => rule.transform())
+        }));
+    }
+}
+__decorate([
+    Array$1(QueryForm),
+    __metadata("design:type", Array$1)
+], QueryBuilderForm.prototype, "rules", void 0);
+
+class FilterComponent {
+    constructor() {
+        this.valueIndex = -1;
+        this.propagateChanges = (_) => { };
+    }
+    get value() {
+        if (this.valueIndex < 0) {
+            return this._value;
+        }
+        else if (this._value instanceof Array) {
+            return this._value[this.valueIndex];
+        }
+        return undefined;
+    }
+    registerOnTouched(fn) {
+        // NO-OP
+    }
+    registerOnChange(fn) {
+        this.propagateChanges = fn;
+    }
+    writeValue(value) {
+        this._value = value;
+    }
+    onValueChange(value) {
+        if (this.valueIndex < 0) {
+            this.propagateChanges(value);
+        }
+        else if (this._value instanceof Array) {
+            const v = [...this._value];
+            v[this.valueIndex] = value;
+            this.propagateChanges(v);
+        }
+    }
+}
+FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: FilterComponent, selector: "ng-component", inputs: { valueIndex: "valueIndex" }, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FilterComponent, decorators: [{
+            type: Component,
+            args: [{ template: `` }]
+        }], propDecorators: { valueIndex: [{
+                type: Input
+            }] } });
+
+class TextFilterComponent extends FilterComponent {
+}
+TextFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TextFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TextFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TextFilterComponent, selector: "nice-text-filter", inputs: { filterConfig: "filterConfig" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => TextFilterComponent),
+            multi: true
+        }
+    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"flex flex-auto\">\n    <input matInput [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" [mask]=\"(filterConfig?.mask) || ''\" [validation]=\"false\" type=\"text\" />\n</mat-form-field>\n", components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TextFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-text-filter", encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TextFilterComponent),
+                            multi: true
+                        }
+                    ], template: "<mat-form-field class=\"flex flex-auto\">\n    <input matInput [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" [mask]=\"(filterConfig?.mask) || ''\" [validation]=\"false\" type=\"text\" />\n</mat-form-field>\n" }]
+        }], propDecorators: { filterConfig: [{
+                type: Input
+            }] } });
+
+class NumberFilterComponent extends FilterComponent {
+}
+NumberFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NumberFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NumberFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NumberFilterComponent, selector: "nice-number-filter", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => NumberFilterComponent),
+            multi: true
+        }
+    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"flex flex-auto\">\n    <input matInput [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" type=\"number\" />\n</mat-form-field>\n", components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NumberFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-number-filter", encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NumberFilterComponent),
+                            multi: true
+                        }
+                    ], template: "<mat-form-field class=\"flex flex-auto\">\n    <input matInput [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" type=\"number\" />\n</mat-form-field>\n" }]
+        }] });
+
+class RadioFilterComponent extends FilterComponent {
+}
+RadioFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RadioFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+RadioFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: RadioFilterComponent, selector: "nice-radio-filter", inputs: { filterConfig: "filterConfig" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => RadioFilterComponent),
+            multi: true
+        }
+    ], usesInheritance: true, ngImport: i0, template: "<mat-radio-group class=\"flex flex-auto\" [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\">\n    <mat-radio-button class=\"mx-16\" *ngFor=\"let option of filterConfig.options\" [value]=\"option?.key\">\n        {{ option?.name }}\n    </mat-radio-button>\n</mat-radio-group>\n", components: [{ type: i1$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i1$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RadioFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-radio-filter", encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RadioFilterComponent),
+                            multi: true
+                        }
+                    ], template: "<mat-radio-group class=\"flex flex-auto\" [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\">\n    <mat-radio-button class=\"mx-16\" *ngFor=\"let option of filterConfig.options\" [value]=\"option?.key\">\n        {{ option?.name }}\n    </mat-radio-button>\n</mat-radio-group>\n" }]
+        }], propDecorators: { filterConfig: [{
+                type: Input
+            }] } });
+
+class SelectFilterComponent extends FilterComponent {
+    constructor(filterService) {
+        super();
+        this.filterService = filterService;
+        this.values = [];
+        this.search$ = new Subject();
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.filterConfig.lazyLoading) {
+                this.values = this.filterConfig.values;
+            }
+            this.searchSub$ = this.search$
+                .pipe(debounceTime(300), switchMap(value => {
+                if (this.filterConfig.lazyLoading) {
+                    return this.filterService.searchFilterValue(this.filterConfig, value);
+                }
+                return of(this.filterConfig.values);
+            }))
+                .subscribe(values => {
+                this.values = values;
+            });
+        });
+    }
+    ngOnChanges(changes) {
+        if ("filterConfig" in changes) {
+            if (!this.filterConfig.lazyLoading) {
+                this.values = this.filterConfig.values;
+            }
+        }
+    }
+    searchValue() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.value && !this.values.find(v => v.id === this.value)) {
+                const value = yield this.filterService
+                    .searchFilterResourceValue(this.filterConfig, this.value)
+                    .toPromise();
+                this.values = [...this.values, value];
+            }
+        });
+    }
+    onValueChange(value) {
+        super.onValueChange(value);
+        this.searchValue();
+    }
+    ngOnDestroy() {
+        this.searchSub$.unsubscribe();
+    }
+    writeValue(value) {
+        super.writeValue(value);
+        this.searchValue();
+    }
+}
+SelectFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SelectFilterComponent, deps: [{ token: NiceFilterService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SelectFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SelectFilterComponent, selector: "nice-select-filter", inputs: { filterConfig: "filterConfig" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => SelectFilterComponent),
+            multi: true
+        }
+    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"flex flex-auto\">\n    <nice-typeahead\n        [ngModel]=\"value\"\n        (ngModelChange)=\"onValueChange($event)\"\n        [items]=\"values\"\n        [typeahead]=\"search$\"\n        bindValue=\"id\"\n        bindLabel=\"name\"\n    ></nice-typeahead>\n</mat-form-field>\n", components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3$1.NiceTypeaheadComponent, selector: "nice-typeahead", inputs: ["items", "labelFormatFn", "required", "disabled", "placeholder", "emptyPlaceholder", "allowNotFoundItems", "panelClass", "bindValue", "bindLabel", "typeahead", "page$", "loading", "loadingPage", "searchFn", "optionTemplate"], outputs: ["change"] }], directives: [{ type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SelectFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-select-filter", encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectFilterComponent),
+                            multi: true
+                        }
+                    ], template: "<mat-form-field class=\"flex flex-auto\">\n    <nice-typeahead\n        [ngModel]=\"value\"\n        (ngModelChange)=\"onValueChange($event)\"\n        [items]=\"values\"\n        [typeahead]=\"search$\"\n        bindValue=\"id\"\n        bindLabel=\"name\"\n    ></nice-typeahead>\n</mat-form-field>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: NiceFilterService, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { filterConfig: [{
+                type: Input
+            }] } });
+
+class DateFilterComponent extends FilterComponent {
+}
+DateFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DateFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DateFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DateFilterComponent, selector: "nice-date-filter", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => DateFilterComponent),
+            multi: true
+        }
+    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"flex flex-auto\">\n    <input matInput [matDatepicker]=\"picker\" [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" />\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n", components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.MatSuffix, selector: "[matSuffix]" }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DateFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-date-filter", encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DateFilterComponent),
+                            multi: true
+                        }
+                    ], template: "<mat-form-field class=\"flex flex-auto\">\n    <input matInput [matDatepicker]=\"picker\" [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" />\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n" }]
+        }] });
+
+class NiceFilterGroupService {
+}
+
+class FilterGroupIconPipe {
+    constructor(service) {
+        this.service = service;
+    }
+    transform(value) {
+        return this.service.getFilterGroupIconClass(value);
+    }
+}
+FilterGroupIconPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FilterGroupIconPipe, deps: [{ token: NiceFilterGroupService }], target: i0.ɵɵFactoryTarget.Pipe });
+FilterGroupIconPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FilterGroupIconPipe, name: "filterGroupIcon" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FilterGroupIconPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "filterGroupIcon"
+                }]
+        }], ctorParameters: function () { return [{ type: NiceFilterGroupService }]; } });
+
+class FilterSelectionComponent {
+    constructor() {
+        this.filterSelected = new EventEmitter();
+    }
+    get filterGroups() {
+        const groups = ArrayUtils.uniqueObjects(this.filterConfigs.map(x => x.group), x => x === null || x === void 0 ? void 0 : x.key);
+        const result = [];
+        for (const group of groups) {
+            if (!group) {
+                continue;
+            }
+            result.push([group, this.filterConfigs.filter(x => { var _a; return ((_a = x.group) === null || _a === void 0 ? void 0 : _a.key) === group.key; })]);
+        }
+        return result.sort(([, a], [, b]) => b.length - a.length);
+    }
+    selectFilter(filterConfigurationModel) {
+        this.filterSelected.emit(filterConfigurationModel);
+    }
+}
+FilterSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FilterSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FilterSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: FilterSelectionComponent, selector: "nice-filter-selection", inputs: { filterConfigs: "filterConfigs", loading: "loading" }, outputs: { filterSelected: "filterSelected" }, ngImport: i0, template: "<mat-card class=\"flex flex-row flex-wrap filter-selection-container\" [niceLoadingOverlay]=\"loading\">\n    <mat-list class=\"flex flex-col flex-full\" [class.double-groups]=\"filterGroups.length > 1\" *ngFor=\"let group of filterGroups\">\n        <mat-list-item>\n            <i mat-list-icon class=\"text-accent fal\" [ngClass]=\"group[0].key | filterGroupIcon\"></i>\n            <strong mat-line>{{ group[0].name }}</strong>\n        </mat-list-item>\n        <mat-list-item (click)=\"selectFilter(filter)\" mat-ripple class=\"filter\" *ngFor=\"let filter of group[1]\">\n            {{ filter?.name }}\n        </mat-list-item>\n    </mat-list>\n</mat-card>\n", styles: ["nice-filter-selection .filter-selection-container{min-width:150px;min-height:150px;max-width:600px;padding:8px}nice-filter-selection .filter-selection-container .mat-list.double-groups{max-width:50%}nice-filter-selection .filter-selection-container .mat-list:not(.double-groups){max-width:100%}nice-filter-selection .mat-list-item{height:auto!important;min-height:32px!important;padding:16px}nice-filter-selection .mat-list-item strong{font-weight:700!important}nice-filter-selection .mat-list-item.filter{padding:8px 48px;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px!important}@media screen and (max-width: 959px){nice-filter-selection .mat-list-item.filter{padding:8px 24px}}\n"], components: [{ type: i9.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2$2.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i2$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }], directives: [{ type: i3$1.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$2.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.MatLine, selector: "[mat-line], [matLine]" }, { type: i5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "filterGroupIcon": FilterGroupIconPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FilterSelectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-filter-selection", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"flex flex-row flex-wrap filter-selection-container\" [niceLoadingOverlay]=\"loading\">\n    <mat-list class=\"flex flex-col flex-full\" [class.double-groups]=\"filterGroups.length > 1\" *ngFor=\"let group of filterGroups\">\n        <mat-list-item>\n            <i mat-list-icon class=\"text-accent fal\" [ngClass]=\"group[0].key | filterGroupIcon\"></i>\n            <strong mat-line>{{ group[0].name }}</strong>\n        </mat-list-item>\n        <mat-list-item (click)=\"selectFilter(filter)\" mat-ripple class=\"filter\" *ngFor=\"let filter of group[1]\">\n            {{ filter?.name }}\n        </mat-list-item>\n    </mat-list>\n</mat-card>\n", styles: ["nice-filter-selection .filter-selection-container{min-width:150px;min-height:150px;max-width:600px;padding:8px}nice-filter-selection .filter-selection-container .mat-list.double-groups{max-width:50%}nice-filter-selection .filter-selection-container .mat-list:not(.double-groups){max-width:100%}nice-filter-selection .mat-list-item{height:auto!important;min-height:32px!important;padding:16px}nice-filter-selection .mat-list-item strong{font-weight:700!important}nice-filter-selection .mat-list-item.filter{padding:8px 48px;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px!important}@media screen and (max-width: 959px){nice-filter-selection .mat-list-item.filter{padding:8px 24px}}\n"] }]
+        }], propDecorators: { filterConfigs: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], filterSelected: [{
+                type: Output
+            }] } });
+
+class QueryBuilderTriggerDirective {
+    constructor(overlayPositionBuilder, elementRef, overlay, platform) {
+        this.overlayPositionBuilder = overlayPositionBuilder;
+        this.elementRef = elementRef;
+        this.overlay = overlay;
+        this.platform = platform;
+        this.queryBuilderFilterSelected = new EventEmitter();
+    }
+    set queryBuilderFilters(queryBuilderFilters) {
+        if (queryBuilderFilters) {
+            this._queryBuilderFilters = queryBuilderFilters;
+        }
+        this.updateFilterSelectionComponent();
+    }
+    set queryBuilderFiltersLoading(queryBuilderFiltersLoading) {
+        this._queryBuilderFiltersLoading = queryBuilderFiltersLoading;
+        this.updateFilterSelectionComponent();
+    }
+    click() {
+        const positionStrategy = this.overlayPositionBuilder.flexibleConnectedTo(this.elementRef).withPositions([
+            {
+                originX: "center",
+                originY: "bottom",
+                overlayX: this.isMobile() ? "end" : "center",
+                overlayY: "top"
+            }
+        ]);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            hasBackdrop: true,
+            backdropClass: "cdk-overlay-transparent-backdrop"
+        });
+        const filterSelectionPortal = new ComponentPortal(FilterSelectionComponent);
+        this.filterSelectionRef = this.overlayRef.attach(filterSelectionPortal);
+        this.updateFilterSelectionComponent();
+        this.overlayRef.backdropClick().subscribe(() => this.close());
+    }
+    close() {
+        this.overlayRef.dispose();
+    }
+    updateFilterSelectionComponent() {
+        if (!this.filterSelectionRef) {
+            return;
+        }
+        this.filterSelectionRef.instance.filterConfigs = this._queryBuilderFilters;
+        this.filterSelectionRef.instance.loading = this._queryBuilderFiltersLoading;
+        this.filterSelectionRef.instance.filterSelected.subscribe((filter) => {
+            this.queryBuilderFilterSelected.emit(filter);
+            this.close();
+        });
+    }
+    isMobile() {
+        return this.platform.ANDROID || this.platform.IOS;
+    }
+}
+QueryBuilderTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QueryBuilderTriggerDirective, deps: [{ token: i1$3.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1$3.Overlay }, { token: i2$3.Platform }], target: i0.ɵɵFactoryTarget.Directive });
+QueryBuilderTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: { queryBuilderFilters: "queryBuilderFilters", queryBuilderFiltersLoading: "queryBuilderFiltersLoading" }, outputs: { queryBuilderFilterSelected: "queryBuilderFilterSelected" }, host: { listeners: { "click": "click()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QueryBuilderTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[niceQueryBuilderTrigger]" }]
+        }], ctorParameters: function () { return [{ type: i1$3.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$3.Overlay }, { type: i2$3.Platform }]; }, propDecorators: { queryBuilderFilters: [{
+                type: Input
+            }], queryBuilderFiltersLoading: [{
+                type: Input
+            }], queryBuilderFilterSelected: [{
+                type: Output
+            }], click: [{
+                type: HostListener,
+                args: ["click"]
+            }] } });
+
+class RuleComponent {
+    constructor(formGroupName) {
+        this.formGroupName = formGroupName;
+        this.remove = new EventEmitter();
+    }
+    get filterConfig() {
+        var _a;
+        const rule = this.rules.at(0).value;
+        return (_a = this.filterConfigs) === null || _a === void 0 ? void 0 : _a.find(f => f.id === rule.id);
+    }
+    get isSingleInput() {
+        return !this.isDoubleInput && !this.isNoInput;
+    }
+    get isDoubleInput() {
+        return QBFilterUtils.isDoubleInput(this.filterOperator);
+    }
+    get isNoInput() {
+        return QBFilterUtils.isNoInput(this.filterOperator);
+    }
+    ngOnInit() {
+        this.formGroup = this.formGroupName.control;
+        this.rules = this.formGroup.get("rules");
+        this.filterOperator = this.rules.at(0).value.operation;
+    }
+    onUpdateFilterConfig(config) {
+        const rule = QBFilterUtils.createRule(config);
+        this.rules.patchValue([rule]);
+        this.filterOperator = rule.operation;
+    }
+    onClickOr() {
+        this.rules.push(QBFilterUtils.createRule(this.filterConfig, this.filterOperator));
+    }
+    onUpdateFilterOperator(operator) {
+        var _a, _b;
+        this.filterOperator = operator;
+        for (const rule of this.rules.controls) {
+            (_a = rule.get("operation")) === null || _a === void 0 ? void 0 : _a.patchValue(this.filterOperator);
+            if (this.isDoubleInput) {
+                (_b = rule.get("value")) === null || _b === void 0 ? void 0 : _b.patchValue([rule.value.value, rule.value.value]);
+            }
+        }
+    }
+    onClickDelete(index) {
+        if (this.rules.length > 1) {
+            this.rules.removeAt(index);
+        }
+        else {
+            this.remove.emit();
+        }
+    }
+}
+RuleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RuleComponent, deps: [{ token: i1$1.FormGroupName }], target: i0.ɵɵFactoryTarget.Component });
+RuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: RuleComponent, selector: "nice-rule", inputs: { filterConfigs: "filterConfigs" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"flex flex-row justify-start items-center gap-2.5\">\n    <button\n        class=\"select-filter\"\n        mat-raised-button\n        color=\"accent\"\n        niceQueryBuilderTrigger\n        [queryBuilderFilters]=\"filterConfigs\"\n        (queryBuilderFilterSelected)=\"onUpdateFilterConfig($event)\"\n    >\n        <div class=\"flex flex-row justify-between items-center\">\n            <div class=\"config-name\">{{ filterConfig?.name }}</div>\n            <mat-icon class=\"config-name-icon\">arrow_drop_down</mat-icon>\n        </div>\n    </button>\n    <div class=\"flex flex-col md:flex-row flex-auto justify-start items-center gap-2.5\">\n        <mat-form-field class=\"w-90-p md:auto\" ngClass.lt-md=\"w-90-p\" fxFlex=\"0 0 188px\">\n            <mat-select\n                class=\"rule-operator\"\n                [ngModel]=\"filterOperator\"\n                (ngModelChange)=\"onUpdateFilterOperator($event)\"\n            >\n                <mat-option *ngFor=\"let operator of filterConfig?.operators\" [value]=\"operator.id\">\n                    {{ operator?.name }}\n                </mat-option>\n            </mat-select>\n        </mat-form-field>\n        <div class=\"flex flex-col md:flex-row flex-wrap\" [formGroup]=\"formGroup\">\n            <ng-container formArrayName=\"rules\">\n                <div\n                    class=\"rule-container flex flex-col md:flex-row flex-full justify-start items-center gap-2.5\"\n                    [class.is-double-input]=\"!!isDoubleInput\"\n                    [formGroupName]=\"i\"\n                    *ngFor=\"let rule of rules.controls; let i = index\"\n                >\n                    <ng-container *ngIf=\"isSingleInput\">\n                        <ng-container [ngSwitch]=\"filterConfig?.type\">\n                            <nice-text-filter *ngSwitchCase=\"'text'\" class=\"flex flex-auto\" formControlName=\"value\" [filterConfig]=\"filterConfig\"></nice-text-filter>\n                            <nice-number-filter *ngSwitchCase=\"'number'\" class=\"flex flex-auto\" formControlName=\"value\"></nice-number-filter>\n                            <nice-radio-filter\n                                *ngSwitchCase=\"'radio'\"\n                                class=\"flex flex-auto mb-16\"\n                                formControlName=\"value\"\n                                [filterConfig]=\"filterConfig\"\n                            ></nice-radio-filter>\n                            <nice-select-filter\n                                *ngSwitchCase=\"'select'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                                [filterConfig]=\"filterConfig\"\n                            ></nice-select-filter>\n                            <nice-date-filter *ngSwitchCase=\"'date'\" class=\"flex flex-auto\" formControlName=\"value\"></nice-date-filter>\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngIf=\"isDoubleInput\">\n                        <ng-container [ngSwitch]=\"filterConfig?.type\">\n                            <nice-text-filter\n                                *ngSwitchCase=\"'text'\"\n                                [valueIndex]=\"0\"\n                                [filterConfig]=\"filterConfig\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"secondValue\"\n                            ></nice-text-filter>\n                            <nice-number-filter\n                                *ngSwitchCase=\"'number'\"\n                                [valueIndex]=\"0\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"secondValue\"\n                            ></nice-number-filter>\n                            <nice-radio-filter\n                                *ngSwitchCase=\"'radio'\"\n                                class=\"flex flex-auto mb-16\"\n                                formControlName=\"secondValue\"\n                                [filterConfig]=\"filterConfig\"\n                                [valueIndex]=\"0\"\n                            ></nice-radio-filter>\n                            <nice-select-filter\n                                *ngSwitchCase=\"'select'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"secondValue\"\n                                [filterConfig]=\"filterConfig\"\n                                [valueIndex]=\"0\"\n                            ></nice-select-filter>\n                            <nice-date-filter\n                                *ngSwitchCase=\"'date'\"\n                                [valueIndex]=\"0\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"secondValue\"\n                            ></nice-date-filter>\n                        </ng-container>\n                        <h3 class=\"aligned-text\">\n                            {{ \"components.query_builder.rule.conditions.and\" | translate }}\n                        </h3>\n                        <ng-container [ngSwitch]=\"filterConfig?.type\">\n                            <nice-text-filter\n                                *ngSwitchCase=\"'text'\"\n                                [valueIndex]=\"1\"\n                                [filterConfig]=\"filterConfig\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                            ></nice-text-filter>\n                            <nice-number-filter\n                                *ngSwitchCase=\"'number'\"\n                                [valueIndex]=\"1\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                            ></nice-number-filter>\n                            <nice-radio-filter\n                                *ngSwitchCase=\"'radio'\"\n                                class=\"flex flex-auto mb-16\"\n                                formControlName=\"value\"\n                                [filterConfig]=\"filterConfig\"\n                                [valueIndex]=\"1\"\n                            ></nice-radio-filter>\n                            <nice-select-filter\n                                *ngSwitchCase=\"'select'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                                [filterConfig]=\"filterConfig\"\n                                [valueIndex]=\"1\"\n                            ></nice-select-filter>\n                            <nice-date-filter\n                                *ngSwitchCase=\"'date'\"\n                                [valueIndex]=\"1\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                            ></nice-date-filter>\n                        </ng-container>\n                    </ng-container>\n                    <div class=\"flex flex-row gap-2\">\n                        <button mat-mini-fab class=\"or-button aligned-button\" (click)=\"onClickOr()\">\n                            {{ \"components.query_builder.rule.conditions.or\" | translate }}\n                        </button>\n                        <button class=\"aligned-button\" mat-icon-button color=\"warn\" (click)=\"onClickDelete(i)\">\n                            <mat-icon>delete</mat-icon>\n                        </button>\n                    </div>\n\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n", styles: ["nice-rule{background:transparent}nice-rule .select-filter{@apply flex flex-full;height:36px;max-width:150px}nice-rule .config-name{@apply flex flex-full flex-grow-0 truncate;max-width:90px}nice-rule .config-name-icon{@apply flex flex-full;max-width:24px}nice-rule .rule-operator{@apply flex flex-full;max-width:100%}@screen md{nice-rule .rule-operator {max-width: 150px;}}nice-rule .aligned-button,nice-rule .select-filter{margin-bottom:1.25em}nice-rule .aligned-text{margin-bottom:2em}nice-rule .filter-select{margin-top:-14px}nice-rule .mat-form-field-infix{border:none}@media screen and (max-width: 959px){nice-rule .mat-form-field-infix{max-width:150px}}nice-rule .rule-container{padding-left:12px;padding-right:12px;max-width:100%}@screen md{nice-rule .rule-container:not(.is-double-input) {max-width: 50%;}}@media screen and (max-width: 959px){nice-rule .rule-container{padding:0}}\n"], components: [{ type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: TextFilterComponent, selector: "nice-text-filter", inputs: ["filterConfig"] }, { type: NumberFilterComponent, selector: "nice-number-filter" }, { type: RadioFilterComponent, selector: "nice-radio-filter", inputs: ["filterConfig"] }, { type: SelectFilterComponent, selector: "nice-select-filter", inputs: ["filterConfig"] }, { type: DateFilterComponent, selector: "nice-date-filter" }], directives: [{ type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i13.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1$4.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RuleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-rule", encapsulation: ViewEncapsulation.None, template: "<div class=\"flex flex-row justify-start items-center gap-2.5\">\n    <button\n        class=\"select-filter\"\n        mat-raised-button\n        color=\"accent\"\n        niceQueryBuilderTrigger\n        [queryBuilderFilters]=\"filterConfigs\"\n        (queryBuilderFilterSelected)=\"onUpdateFilterConfig($event)\"\n    >\n        <div class=\"flex flex-row justify-between items-center\">\n            <div class=\"config-name\">{{ filterConfig?.name }}</div>\n            <mat-icon class=\"config-name-icon\">arrow_drop_down</mat-icon>\n        </div>\n    </button>\n    <div class=\"flex flex-col md:flex-row flex-auto justify-start items-center gap-2.5\">\n        <mat-form-field class=\"w-90-p md:auto\" ngClass.lt-md=\"w-90-p\" fxFlex=\"0 0 188px\">\n            <mat-select\n                class=\"rule-operator\"\n                [ngModel]=\"filterOperator\"\n                (ngModelChange)=\"onUpdateFilterOperator($event)\"\n            >\n                <mat-option *ngFor=\"let operator of filterConfig?.operators\" [value]=\"operator.id\">\n                    {{ operator?.name }}\n                </mat-option>\n            </mat-select>\n        </mat-form-field>\n        <div class=\"flex flex-col md:flex-row flex-wrap\" [formGroup]=\"formGroup\">\n            <ng-container formArrayName=\"rules\">\n                <div\n                    class=\"rule-container flex flex-col md:flex-row flex-full justify-start items-center gap-2.5\"\n                    [class.is-double-input]=\"!!isDoubleInput\"\n                    [formGroupName]=\"i\"\n                    *ngFor=\"let rule of rules.controls; let i = index\"\n                >\n                    <ng-container *ngIf=\"isSingleInput\">\n                        <ng-container [ngSwitch]=\"filterConfig?.type\">\n                            <nice-text-filter *ngSwitchCase=\"'text'\" class=\"flex flex-auto\" formControlName=\"value\" [filterConfig]=\"filterConfig\"></nice-text-filter>\n                            <nice-number-filter *ngSwitchCase=\"'number'\" class=\"flex flex-auto\" formControlName=\"value\"></nice-number-filter>\n                            <nice-radio-filter\n                                *ngSwitchCase=\"'radio'\"\n                                class=\"flex flex-auto mb-16\"\n                                formControlName=\"value\"\n                                [filterConfig]=\"filterConfig\"\n                            ></nice-radio-filter>\n                            <nice-select-filter\n                                *ngSwitchCase=\"'select'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                                [filterConfig]=\"filterConfig\"\n                            ></nice-select-filter>\n                            <nice-date-filter *ngSwitchCase=\"'date'\" class=\"flex flex-auto\" formControlName=\"value\"></nice-date-filter>\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngIf=\"isDoubleInput\">\n                        <ng-container [ngSwitch]=\"filterConfig?.type\">\n                            <nice-text-filter\n                                *ngSwitchCase=\"'text'\"\n                                [valueIndex]=\"0\"\n                                [filterConfig]=\"filterConfig\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"secondValue\"\n                            ></nice-text-filter>\n                            <nice-number-filter\n                                *ngSwitchCase=\"'number'\"\n                                [valueIndex]=\"0\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"secondValue\"\n                            ></nice-number-filter>\n                            <nice-radio-filter\n                                *ngSwitchCase=\"'radio'\"\n                                class=\"flex flex-auto mb-16\"\n                                formControlName=\"secondValue\"\n                                [filterConfig]=\"filterConfig\"\n                                [valueIndex]=\"0\"\n                            ></nice-radio-filter>\n                            <nice-select-filter\n                                *ngSwitchCase=\"'select'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"secondValue\"\n                                [filterConfig]=\"filterConfig\"\n                                [valueIndex]=\"0\"\n                            ></nice-select-filter>\n                            <nice-date-filter\n                                *ngSwitchCase=\"'date'\"\n                                [valueIndex]=\"0\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"secondValue\"\n                            ></nice-date-filter>\n                        </ng-container>\n                        <h3 class=\"aligned-text\">\n                            {{ \"components.query_builder.rule.conditions.and\" | translate }}\n                        </h3>\n                        <ng-container [ngSwitch]=\"filterConfig?.type\">\n                            <nice-text-filter\n                                *ngSwitchCase=\"'text'\"\n                                [valueIndex]=\"1\"\n                                [filterConfig]=\"filterConfig\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                            ></nice-text-filter>\n                            <nice-number-filter\n                                *ngSwitchCase=\"'number'\"\n                                [valueIndex]=\"1\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                            ></nice-number-filter>\n                            <nice-radio-filter\n                                *ngSwitchCase=\"'radio'\"\n                                class=\"flex flex-auto mb-16\"\n                                formControlName=\"value\"\n                                [filterConfig]=\"filterConfig\"\n                                [valueIndex]=\"1\"\n                            ></nice-radio-filter>\n                            <nice-select-filter\n                                *ngSwitchCase=\"'select'\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                                [filterConfig]=\"filterConfig\"\n                                [valueIndex]=\"1\"\n                            ></nice-select-filter>\n                            <nice-date-filter\n                                *ngSwitchCase=\"'date'\"\n                                [valueIndex]=\"1\"\n                                class=\"flex flex-auto\"\n                                formControlName=\"value\"\n                            ></nice-date-filter>\n                        </ng-container>\n                    </ng-container>\n                    <div class=\"flex flex-row gap-2\">\n                        <button mat-mini-fab class=\"or-button aligned-button\" (click)=\"onClickOr()\">\n                            {{ \"components.query_builder.rule.conditions.or\" | translate }}\n                        </button>\n                        <button class=\"aligned-button\" mat-icon-button color=\"warn\" (click)=\"onClickDelete(i)\">\n                            <mat-icon>delete</mat-icon>\n                        </button>\n                    </div>\n\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n", styles: ["nice-rule{background:transparent}nice-rule .select-filter{@apply flex flex-full;height:36px;max-width:150px}nice-rule .config-name{@apply flex flex-full flex-grow-0 truncate;max-width:90px}nice-rule .config-name-icon{@apply flex flex-full;max-width:24px}nice-rule .rule-operator{@apply flex flex-full;max-width:100%}@screen md{nice-rule .rule-operator {max-width: 150px;}}nice-rule .aligned-button,nice-rule .select-filter{margin-bottom:1.25em}nice-rule .aligned-text{margin-bottom:2em}nice-rule .filter-select{margin-top:-14px}nice-rule .mat-form-field-infix{border:none}@media screen and (max-width: 959px){nice-rule .mat-form-field-infix{max-width:150px}}nice-rule .rule-container{padding-left:12px;padding-right:12px;max-width:100%}@screen md{nice-rule .rule-container:not(.is-double-input) {max-width: 50%;}}@media screen and (max-width: 959px){nice-rule .rule-container{padding:0}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormGroupName }]; }, propDecorators: { filterConfigs: [{
+                type: Input
+            }], remove: [{
+                type: Output
+            }] } });
+
+class QueryBuilderComponent {
+    constructor(formGroup) {
+        this.formGroup = formGroup;
+        this.close = new EventEmitter();
+        this.createReport = new EventEmitter();
+        this.updateReport = new EventEmitter();
+        this.propagateChanges = (_) => { };
+        this.rules = this.formGroup.get("rules");
+    }
+    get canSave() {
+        return !this.currentSavedReport;
+    }
+    registerOnChange(fn) {
+        this.propagateChanges = fn;
+    }
+    registerOnTouched(fn) { }
+    writeValue(rules) {
+        this.rules.clear();
+        this.formGroup.patchValue(new QueryBuilderForm(rules));
+    }
+    onClickAddRule(filterConfigurationModel) {
+        this.rules.push(QBFilterUtils.createQueryModel(filterConfigurationModel));
+    }
+    onClickDeleteRule(id) {
+        this.rules.removeAt(id);
+        if (this.rules.length === 0) {
+            this.close.emit();
+            this.onClickApply();
+        }
+    }
+    onClickApply() {
+        this.propagateChanges(this.formGroup.getRawValue().transform());
+    }
+    onClickSaveReport() {
+        this.createReport.emit();
+    }
+    onClickUpdateReport() {
+        this.updateReport.emit();
+    }
+}
+QueryBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QueryBuilderComponent, deps: [{ token: i1$5.GeneratedFormGroup }], target: i0.ɵɵFactoryTarget.Component });
+QueryBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: QueryBuilderComponent, selector: "nice-query-builder", inputs: { filterConfigs: "filterConfigs", currentSavedReport: "currentSavedReport", loading: "loading" }, outputs: { close: "close", createReport: "createReport", updateReport: "updateReport" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => QueryBuilderComponent),
+            multi: true
+        },
+        {
+            provide: GeneratedFormGroup,
+            useFactory: ngxFormGeneratorFactory(QueryBuilderForm)
+        }
+    ], ngImport: i0, template: "<div class=\"rules-container flex flex-col\" *ngIf=\"!loading\" [formGroup]=\"formGroup\">\n    <ng-container formArrayName=\"rules\">\n        <nice-rule\n            *ngFor=\"let rule of rules.controls; let i = index\"\n            (remove)=\"onClickDeleteRule(i)\"\n            [filterConfigs]=\"filterConfigs\"\n            [formGroupName]=\"i\"\n        ></nice-rule>\n    </ng-container>\n    <div class=\"flex justify-between\">\n        <button\n            class=\"add-button add-rule-button\"\n            mat-mini-fab\n            niceQueryBuilderTrigger\n            [queryBuilderFilters]=\"filterConfigs\"\n            (queryBuilderFilterSelected)=\"onClickAddRule($event)\"\n        >\n            <mat-icon>add</mat-icon>\n        </button>\n        <div class=\"flex flex-col md:flex-row gap-4\">\n            <!-- TODO: Support saved reports -->\n            <!--<button mat-button color=\"primary\" (click)=\"onClickSaveReport()\" *ngIf=\"canSave\">\n                <mat-icon class=\"mr-8\" fxHide.lt-md>save</mat-icon>\n                {{ \"components.query_builder.save_report\" | translate }}\n            </button>\n            <button mat-button color=\"primary\" (click)=\"onClickUpdateReport()\" *ngIf=\"!canSave\">\n                <mat-icon class=\"mr-8\" fxHide.lt-md>save</mat-icon>\n                {{ \"components.query_builder.update_report\" | translate }}\n            </button>-->\n            <button mat-stroked-button color=\"accent\" (click)=\"onClickApply()\">\n                {{ \"components.query_builder.update\" | translate }}\n                <mat-icon class=\"ml-8\">refresh</mat-icon>\n            </button>\n        </div>\n    </div>\n</div>\n", styles: ["nice-query-builder .rules-container{position:relative}nice-query-builder .rules-container:before{content:\"\";position:absolute;top:32px;bottom:32px;left:46px;width:4px;background:rgba(0,0,0,.12)}nice-query-builder .save-report-button{height:36px}nice-query-builder .add-rule-button{margin-left:28px;margin-right:28px}\n"], components: [{ type: RuleComponent, selector: "nice-rule", inputs: ["filterConfigs"], outputs: ["remove"] }, { type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }], pipes: { "translate": i1$4.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QueryBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-query-builder", encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => QueryBuilderComponent),
+                            multi: true
+                        },
+                        {
+                            provide: GeneratedFormGroup,
+                            useFactory: ngxFormGeneratorFactory(QueryBuilderForm)
+                        }
+                    ], template: "<div class=\"rules-container flex flex-col\" *ngIf=\"!loading\" [formGroup]=\"formGroup\">\n    <ng-container formArrayName=\"rules\">\n        <nice-rule\n            *ngFor=\"let rule of rules.controls; let i = index\"\n            (remove)=\"onClickDeleteRule(i)\"\n            [filterConfigs]=\"filterConfigs\"\n            [formGroupName]=\"i\"\n        ></nice-rule>\n    </ng-container>\n    <div class=\"flex justify-between\">\n        <button\n            class=\"add-button add-rule-button\"\n            mat-mini-fab\n            niceQueryBuilderTrigger\n            [queryBuilderFilters]=\"filterConfigs\"\n            (queryBuilderFilterSelected)=\"onClickAddRule($event)\"\n        >\n            <mat-icon>add</mat-icon>\n        </button>\n        <div class=\"flex flex-col md:flex-row gap-4\">\n            <!-- TODO: Support saved reports -->\n            <!--<button mat-button color=\"primary\" (click)=\"onClickSaveReport()\" *ngIf=\"canSave\">\n                <mat-icon class=\"mr-8\" fxHide.lt-md>save</mat-icon>\n                {{ \"components.query_builder.save_report\" | translate }}\n            </button>\n            <button mat-button color=\"primary\" (click)=\"onClickUpdateReport()\" *ngIf=\"!canSave\">\n                <mat-icon class=\"mr-8\" fxHide.lt-md>save</mat-icon>\n                {{ \"components.query_builder.update_report\" | translate }}\n            </button>-->\n            <button mat-stroked-button color=\"accent\" (click)=\"onClickApply()\">\n                {{ \"components.query_builder.update\" | translate }}\n                <mat-icon class=\"ml-8\">refresh</mat-icon>\n            </button>\n        </div>\n    </div>\n</div>\n", styles: ["nice-query-builder .rules-container{position:relative}nice-query-builder .rules-container:before{content:\"\";position:absolute;top:32px;bottom:32px;left:46px;width:4px;background:rgba(0,0,0,.12)}nice-query-builder .save-report-button{height:36px}nice-query-builder .add-rule-button{margin-left:28px;margin-right:28px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$5.GeneratedFormGroup }]; }, propDecorators: { filterConfigs: [{
+                type: Input
+            }], currentSavedReport: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }], createReport: [{
+                type: Output
+            }], updateReport: [{
+                type: Output
+            }] } });
+
+class NiceBaseListComponent {
+    constructor(enableQueryBuilder, listLayout, columns, exportsSettings, query, service, activatedRoute, bottomSheet, router, mediaObserver) {
+        this.enableQueryBuilder = enableQueryBuilder;
+        this.listLayout = listLayout;
+        this.columns = columns;
+        this.exportsSettings = exportsSettings;
+        this.query = query;
+        this.service = service;
+        this.activatedRoute = activatedRoute;
+        this.bottomSheet = bottomSheet;
+        this.router = router;
+        this.mediaObserver = mediaObserver;
+        this.mode = "normal";
+        this.layout = "page";
+        this.layoutContent = LayoutContent.Table;
+        this.autoChangeLayout = true;
+        this.autoLoad = true;
+        this.canExport = true;
+        this.disableRouting = false;
+        this.customExport = [];
+        this.newPage = new EventEmitter();
+        this.defaultPageSizeOptions = [10, 25, 50, 100];
+        this.columnNames = [];
+        this.loading$ = this.query.selectLoading();
+        this.filterResult$ = this.query.selectFilterResult();
+        this.data$ = this.query.selectData();
+        this.recordsFiltered$ = this.filterResult$.pipe(map(f => f && f.total));
+        this.showQueryBuilder$ = this.query.selectShowQueryBuilder();
+        this.filterParameters$ = this.query.selectFilterParameters();
+        this.index$ = this.filterParameters$.pipe(map(f => { var _a, _b; return Math.floor(((_a = f.start) !== null && _a !== void 0 ? _a : 0) / ((_b = f.length) !== null && _b !== void 0 ? _b : 1)); }));
+        this.length$ = this.filterParameters$.pipe(map(f => f.length));
+        this.isEmpty$ = this.recordsFiltered$.pipe(map(r => r === 0));
+        this.searchQuery$ = this.filterParameters$.pipe(map(f => f.search));
+        this.filterConfig$ = this.query.selectFilterConfig();
+        this.sortColumn$ = this.filterParameters$.pipe(map(f => { var _a; return (_a = (f.order && f.order.column)) !== null && _a !== void 0 ? _a : ""; }));
+        this.sortDirection$ = this.filterParameters$.pipe(map(f => f.order && f.order.direction));
+        this.filterConfigLoading$ = this.query.selectFilterConfigLoading();
+        this.rules$ = this.filterParameters$.pipe(map(parameters => parameters.rules));
+        this.rulesCount$ = this.filterParameters$.pipe(map(parameters => { var _a, _b; return (_b = (_a = parameters.rules) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0; }));
+        this.searchText$ = new Subject();
+        this.setColumn(columns);
+    }
+    get prefixButtons() {
+        var _a, _b;
+        return (_b = (_a = this.buttons) === null || _a === void 0 ? void 0 : _a.find(x => x.position === "prefix")) === null || _b === void 0 ? void 0 : _b.template;
+    }
+    get suffixButtons() {
+        var _a, _b;
+        return (_b = (_a = this.buttons) === null || _a === void 0 ? void 0 : _a.find(x => x.position === "suffix")) === null || _b === void 0 ? void 0 : _b.template;
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.service.init();
+            this.service.loadQueryParams(this.autoLoad);
+            this.searchText$
+                .pipe(debounceTime(300), distinctUntilChanged(), switchMap((search) => {
+                this.service.resetPaging();
+                return this.service.searchData(search);
+            }))
+                .subscribe();
+            this.mediaObserver.asObservable().subscribe(() => {
+                if (!this.autoChangeLayout) {
+                    return;
+                }
+                if (this.mediaObserver.isActive("lt-md") && this.layoutContent === LayoutContent.Table) {
+                    this.layoutContent = LayoutContent.Cards;
+                }
+                else {
+                    this.layoutContent = LayoutContent.Table;
+                }
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.service.closeSubscriptions();
+    }
+    ngOnChanges(changes) {
+        if ("mode" in changes) {
+            this.service.setMode(changes.mode.currentValue);
+        }
+    }
+    setLoading(loading) {
+        this.service.setLoading(loading);
+    }
+    clickToggleShowQueryBuilder() {
+        this.service.toggleQueryBuilder();
+    }
+    onUpdateRules(rules) {
+        this.service.updateGlobalRules(rules);
+    }
+    onQueryBuilderFilterSelected(filterConfigurationModel) {
+        this.service.addRuleFromConfig(filterConfigurationModel);
+    }
+    onUpdatePage(pageEvent) {
+        this.service.loadNewPage(pageEvent.pageIndex * pageEvent.pageSize, pageEvent.pageSize);
+        this.newPage.emit(pageEvent);
+    }
+    onUpdateSearch(search) {
+        this.searchText$.next(search);
+    }
+    getFilterRule$(id) {
+        return this.filterParameters$.pipe(map(f => {
+            return (f.rules &&
+                f.rules[0] &&
+                f.rules[0].rules &&
+                f.rules[0].rules.find((r) => r.id === id));
+        }));
+    }
+    onUpdateSort(sort) {
+        if (!sort.active || !sort.direction) {
+            sort = {
+                active: "id",
+                direction: "asc"
+            };
+        }
+        this.service.loadData({
+            order: sort.active && sort.direction ? { column: sort.active, direction: sort.direction } : null
+        });
+    }
+    updateRule(id, newRule) {
+        this.service.updateRule(id, newRule);
+    }
+    updateRules(rules) {
+        this.service.updateRules(rules);
+    }
+    clickExport() {
+        const exports = [];
+        if (this.exportsSettings.xlsx) {
+            exports.push({
+                type: "xlsx",
+                onClickExport: () => this.clickXlsx()
+            });
+        }
+        else if (this.exportsSettings.csv) {
+            exports.push({
+                type: "csv",
+                onClickExport: () => this.clickCsv()
+            });
+        }
+        else if (this.exportsSettings.pdf) {
+            exports.push({
+                type: "pdf",
+                onClickExport: () => this.clickPdf()
+            });
+        }
+        this.bottomSheet.open(ExportBottomSheetComponent, {
+            data: {
+                exportStrategies: [
+                    ...exports,
+                    ...this.customExport
+                ]
+            }
+        });
+    }
+    navigate(item) {
+        if (this.navigateFn) {
+            this.navigateFn(this.baseRoute, item);
+        }
+        else {
+            const route = this.routeFn ? this.routeFn(item) : [(this.baseRoute || "") + (item === null || item === void 0 ? void 0 : item.id)];
+            this.router.navigate(typeof route === "string" ? [route] : route, { relativeTo: this.activatedRoute });
+        }
+    }
+    clickXlsx() {
+        this.service.downloadData("xlsx");
+    }
+    clickCsv() {
+        this.service.downloadData("csv");
+    }
+    clickPrint() {
+        this.service.printData();
+    }
+    clickPdf() {
+        this.service.downloadData("pdf");
+    }
+    setColumn(columns) {
+        this.columns = columns;
+        this.columnNames = columns.map(x => x.id);
+    }
+}
+NiceBaseListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListComponent, deps: [{ token: ENABLE_QUERY_BUILDER, optional: true }, { token: BASE_LIST_LAYOUT }, { token: TABLE_COLUMNS }, { token: EXPORTS_SETTINGS }, { token: NiceBaseListQuery }, { token: NiceBaseListService }, { token: i3.ActivatedRoute }, { token: i4$1.MatBottomSheet }, { token: i3.Router }, { token: i5$2.MediaObserver }], target: i0.ɵɵFactoryTarget.Component });
+NiceBaseListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceBaseListComponent, selector: "nice-base-list", inputs: { mode: "mode", layout: "layout", layoutContent: "layoutContent", autoChangeLayout: "autoChangeLayout", baseRoute: "baseRoute", routeFn: "routeFn", navigateFn: "navigateFn", autoLoad: "autoLoad", pageTitle: "pageTitle", canExport: "canExport", disableRouting: "disableRouting", customExport: "customExport" }, outputs: { newPage: "newPage" }, providers: [
+        NiceBaseListQuery,
+        NiceBaseListService,
+        NiceBaseListStore
+    ], queries: [{ propertyName: "title", first: true, predicate: NiceBaseListTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "table", first: true, predicate: NiceBaseListTableDirective, descendants: true, read: TemplateRef }, { 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: "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 }\"></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 }\"></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 }\"></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 }\"></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 }\"></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 }\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\">\n    <ng-container *ngIf=\"layout?.length; else isObject\">\n        <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout } }\"></ng-container>\n    </ng-container>\n\n    <ng-template #isObject>\n        <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout }\"></ng-container>\n    </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\">\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 }\"></ng-container>\n            </ng-container>\n            <ng-template #childIsLayout>\n                <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item }\"></ng-container>\n            </ng-template>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\">\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>search</mat-icon>\n                    <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n                    <ng-container *ngIf=\"enableQueryBuilder\">\n                        <button\n                                *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\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                                [matBadge]=\"rulesCount$ | async\"\n                                [matBadgeHidden]=\"!(rulesCount$ | async)\"\n                                matBadgeColor=\"accent\"\n                            >\n                                filter_list\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                                [matBadge]=\"rulesCount$ | async\"\n                                [matBadgeHidden]=\"!(rulesCount$ | async)\"\n                                matBadgeColor=\"accent\"\n                            >\n                                filter_list\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>\n                                clear\n                            </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>print</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>cloud_download</mat-icon>\n            </button>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'content'\">\n        <ng-container *ngIf=\"layoutContent === 'table' && table\">\n            <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n            <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n            <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item }\"></ng-container>\n        </ng-container>\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 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: true\"></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; 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; 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; 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\">\n    <div [ngClass]=\"item.classes\">\n        <ng-container *ngFor=\"let data of data$ | async\">\n            <ng-container *ngTemplateOutlet=\"cards; context: { item: data }\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\">\n    <div [ngClass]=\"item.classes\">\n        <ng-container *ngTemplateOutlet=\"customContent; context: { data: data$ | async }\"></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: QueryBuilderComponent, 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: i3$1.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { type: i9.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i11.MatCellDef, selector: "[matCellDef]" }, { type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i5.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 }\"></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 }\"></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 }\"></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 }\"></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 }\"></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 }\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\">\n    <ng-container *ngIf=\"layout?.length; else isObject\">\n        <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout } }\"></ng-container>\n    </ng-container>\n\n    <ng-template #isObject>\n        <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout }\"></ng-container>\n    </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\">\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 }\"></ng-container>\n            </ng-container>\n            <ng-template #childIsLayout>\n                <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item }\"></ng-container>\n            </ng-template>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\">\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>search</mat-icon>\n                    <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n                    <ng-container *ngIf=\"enableQueryBuilder\">\n                        <button\n                                *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\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                                [matBadge]=\"rulesCount$ | async\"\n                                [matBadgeHidden]=\"!(rulesCount$ | async)\"\n                                matBadgeColor=\"accent\"\n                            >\n                                filter_list\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                                [matBadge]=\"rulesCount$ | async\"\n                                [matBadgeHidden]=\"!(rulesCount$ | async)\"\n                                matBadgeColor=\"accent\"\n                            >\n                                filter_list\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>\n                                clear\n                            </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>print</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>cloud_download</mat-icon>\n            </button>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'content'\">\n        <ng-container *ngIf=\"layoutContent === 'table' && table\">\n            <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n            <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n            <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item }\"></ng-container>\n        </ng-container>\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 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: true\"></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; 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; 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; 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\">\n    <div [ngClass]=\"item.classes\">\n        <ng-container *ngFor=\"let data of data$ | async\">\n            <ng-container *ngTemplateOutlet=\"cards; context: { item: data }\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\">\n    <div [ngClass]=\"item.classes\">\n        <ng-container *ngTemplateOutlet=\"customContent; context: { data: data$ | async }\"></ng-container>\n    </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [ENABLE_QUERY_BUILDER]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [BASE_LIST_LAYOUT]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [TABLE_COLUMNS]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [EXPORTS_SETTINGS]
+                    }] }, { type: NiceBaseListQuery }, { type: NiceBaseListService }, { type: i3.ActivatedRoute }, { type: i4$1.MatBottomSheet }, { type: i3.Router }, { type: i5$2.MediaObserver }];
+    }, propDecorators: { title: [{
+                type: ContentChild,
+                args: [NiceBaseListTitleDirective, { read: TemplateRef }]
+            }], buttons: [{
+                type: ContentChildren,
+                args: [NiceBaseListButtonsDirective]
+            }], table: [{
+                type: ContentChild,
+                args: [NiceBaseListTableDirective, { read: TemplateRef }]
+            }], cards: [{
+                type: ContentChild,
+                args: [NiceBaseListCardsDirective, { read: TemplateRef }]
+            }], customContent: [{
+                type: ContentChild,
+                args: [NiceBaseListCustomContentDirective, { read: TemplateRef }]
+            }], filters: [{
+                type: ContentChild,
+                args: [NiceBaseListFiltersDirective, { read: TemplateRef }]
+            }], mode: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], layoutContent: [{
+                type: Input
+            }], autoChangeLayout: [{
+                type: Input
+            }], baseRoute: [{
+                type: Input
+            }], routeFn: [{
+                type: Input
+            }], navigateFn: [{
+                type: Input
+            }], autoLoad: [{
+                type: Input
+            }], pageTitle: [{
+                type: Input
+            }], canExport: [{
+                type: Input
+            }], disableRouting: [{
+                type: Input
+            }], customExport: [{
+                type: Input
+            }], newPage: [{
+                type: Output
+            }] } });
+
+class NiceCustomDateAdapter extends NativeDateAdapter {
+    constructor(translateService, locale, platform) {
+        super(locale, platform);
+        this.translateService = translateService;
+        this.setLocale(this.translateService.getDefaultLang());
+        // @ts-ignore
+        this._format = (dtf, date) => {
+            return dtf.format(date);
+        };
+    }
+    format(date, displayFormat) {
+        return super.format(date, displayFormat);
+    }
+    getDate(date) {
+        return date.getUTCDate();
+    }
+    getMonth(date) {
+        return date.getUTCMonth();
+    }
+    getYear(date) {
+        return date.getUTCFullYear();
+    }
+}
+NiceCustomDateAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceCustomDateAdapter, deps: [{ token: i1$4.TranslateService }, { token: MAT_DATE_LOCALE }, { token: i2$3.Platform }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceCustomDateAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceCustomDateAdapter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceCustomDateAdapter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: i1$4.TranslateService }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DATE_LOCALE]
+                    }] }, { type: i2$3.Platform }];
+    } });
+
+class QueryBuilderModule {
+}
+QueryBuilderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+QueryBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QueryBuilderModule, declarations: [QueryBuilderComponent,
+        QueryBuilderTriggerDirective,
+        FilterSelectionComponent,
+        RuleComponent,
+        SelectFilterComponent,
+        TextFilterComponent,
+        NumberFilterComponent,
+        RadioFilterComponent,
+        DateFilterComponent,
+        FilterGroupIconPipe], imports: [CommonModule,
+        FormsModule,
+        TranslateModule,
+        OverlayModule,
+        MatCardModule,
+        MatListModule,
+        MatButtonModule,
+        MatRippleModule,
+        MatIconModule,
+        MatSelectModule,
+        MatInputModule,
+        MatDatepickerModule,
+        MatRadioModule,
+        NiceLoadingSpinnerModule,
+        NiceTypeaheadModule,
+        ReactiveFormsModule,
+        NgxMaskModule], exports: [QueryBuilderComponent, QueryBuilderTriggerDirective] });
+QueryBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QueryBuilderModule, providers: [{ provide: DateAdapter, useClass: NiceCustomDateAdapter }], imports: [[
+            CommonModule,
+            FormsModule,
+            TranslateModule,
+            OverlayModule,
+            MatCardModule,
+            MatListModule,
+            MatButtonModule,
+            MatRippleModule,
+            MatIconModule,
+            MatSelectModule,
+            MatInputModule,
+            MatDatepickerModule,
+            MatRadioModule,
+            NiceLoadingSpinnerModule,
+            NiceTypeaheadModule,
+            ReactiveFormsModule,
+            NgxMaskModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QueryBuilderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        TranslateModule,
+                        OverlayModule,
+                        MatCardModule,
+                        MatListModule,
+                        MatButtonModule,
+                        MatRippleModule,
+                        MatIconModule,
+                        MatSelectModule,
+                        MatInputModule,
+                        MatDatepickerModule,
+                        MatRadioModule,
+                        NiceLoadingSpinnerModule,
+                        NiceTypeaheadModule,
+                        ReactiveFormsModule,
+                        NgxMaskModule
+                    ],
+                    declarations: [
+                        QueryBuilderComponent,
+                        QueryBuilderTriggerDirective,
+                        FilterSelectionComponent,
+                        RuleComponent,
+                        SelectFilterComponent,
+                        TextFilterComponent,
+                        NumberFilterComponent,
+                        RadioFilterComponent,
+                        DateFilterComponent,
+                        FilterGroupIconPipe
+                    ],
+                    providers: [{ provide: DateAdapter, useClass: NiceCustomDateAdapter }],
+                    exports: [QueryBuilderComponent, QueryBuilderTriggerDirective]
+                }]
+        }] });
+
+class NiceBaseListModule {
+    static forRoot(options) {
+        var _a;
+        return {
+            ngModule: NiceBaseListModule,
+            providers: [
+                {
+                    provide: BASE_LIST_LAYOUT,
+                    useValue: (_a = options === null || options === void 0 ? void 0 : options.layout) !== null && _a !== void 0 ? _a : defaultLayout
+                },
+                ...((options === null || options === void 0 ? void 0 : options.queryBuilder) ? [
+                    {
+                        provide: ENABLE_QUERY_BUILDER,
+                        useValue: true
+                    },
+                    {
+                        provide: NiceFilterGroupService,
+                        useClass: options.queryBuilder.filterGroupService
+                    },
+                    options.queryBuilder.savedReportService ? {
+                        provide: NiceSavedReportService,
+                        useClass: options.queryBuilder.savedReportService
+                    } : undefined
+                ] : [])
+            ].filter(x => !!x)
+        };
+    }
+    static providerFactory(options) {
+        var _a;
+        return [
+            {
+                provide: NiceFilterService,
+                useClass: options.filterService
+            },
+            {
+                provide: LIST_TABLE,
+                useValue: options.table
+            },
+            {
+                provide: TABLE_COLUMNS,
+                useValue: options.columns,
+            },
+            {
+                provide: DEFAULT_PARAMETERS,
+                useValue: options.defaultParameters
+            },
+            options.layout ? {
+                provide: BASE_LIST_LAYOUT,
+                useValue: options.layout
+            } : undefined,
+            {
+                provide: EXPORTS_SETTINGS,
+                useValue: (_a = options.exports) !== null && _a !== void 0 ? _a : {
+                    pdf: true,
+                    xlsx: true,
+                    csv: true
+                }
+            },
+            options.disableQueryBuilder !== undefined ? {
+                provide: ENABLE_QUERY_BUILDER,
+                useValue: !options.disableQueryBuilder
+            } : null,
+            ...(options.queryBuilder ? [
+                {
+                    provide: NiceFilterGroupService,
+                    useClass: options.queryBuilder.filterGroupService
+                },
+                options.queryBuilder.savedReportService ? {
+                    provide: NiceSavedReportService,
+                    useClass: options.queryBuilder.savedReportService
+                } : undefined
+            ] : [])
+        ].filter(x => !!x);
+    }
+}
+NiceBaseListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NiceBaseListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListModule, declarations: [NiceBaseListComponent], imports: [NiceExportBottomSheetModule,
+        NiceBaseListDirectiveModule,
+        CommonModule,
+        FormsModule,
+        RouterModule,
+        MatButtonModule,
+        MatIconModule,
+        MatTooltipModule,
+        MatCardModule,
+        MatPaginatorModule,
+        TranslateModule,
+        NiceLoadingSpinnerModule,
+        MatTableModule,
+        MatSortModule,
+        MatRippleModule,
+        MatBottomSheetModule,
+        QueryBuilderModule,
+        MatBadgeModule], exports: [NiceBaseListComponent,
+        NiceBaseListDirectiveModule] });
+NiceBaseListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListModule, imports: [[
+            NiceExportBottomSheetModule,
+            NiceBaseListDirectiveModule,
+            CommonModule,
+            FormsModule,
+            RouterModule,
+            MatButtonModule,
+            MatIconModule,
+            MatTooltipModule,
+            MatCardModule,
+            MatPaginatorModule,
+            TranslateModule,
+            NiceLoadingSpinnerModule,
+            MatTableModule,
+            MatSortModule,
+            MatRippleModule,
+            MatBottomSheetModule,
+            QueryBuilderModule,
+            MatBadgeModule
+        ], NiceBaseListDirectiveModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        NiceExportBottomSheetModule,
+                        NiceBaseListDirectiveModule,
+                        CommonModule,
+                        FormsModule,
+                        RouterModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        MatCardModule,
+                        MatPaginatorModule,
+                        TranslateModule,
+                        NiceLoadingSpinnerModule,
+                        MatTableModule,
+                        MatSortModule,
+                        MatRippleModule,
+                        MatBottomSheetModule,
+                        QueryBuilderModule,
+                        MatBadgeModule
+                    ],
+                    declarations: [
+                        NiceBaseListComponent
+                    ],
+                    exports: [
+                        NiceBaseListComponent,
+                        NiceBaseListDirectiveModule
+                    ]
+                }]
+        }] });
+
+class NiceListState {
+}
+
+class NiceMultiStateFilterService extends NiceFilterService {
+    constructor(filters) {
+        super();
+        this.filters = filters;
+    }
+    switchState(state) {
+        this.api = this.filters[state];
+    }
+}
+
+const initialValue = Object.assign({}, initialBaseListState);
+let NiceMultiStateListStore = class NiceMultiStateListStore extends NiceBaseListStore {
+    constructor() {
+        super(null);
+    }
+};
+NiceMultiStateListStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NiceMultiStateListStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListStore });
+NiceMultiStateListStore = __decorate([
+    StoreConfig({ name: "multi-state-list", resettable: true }),
+    __metadata("design:paramtypes", [])
+], NiceMultiStateListStore);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListStore, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class NiceMultiStateListQuery extends NiceBaseListQuery {
+    constructor(store) {
+        super(store);
+        this.store = store;
+    }
+}
+NiceMultiStateListQuery.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListQuery, deps: [{ token: NiceMultiStateListStore }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceMultiStateListQuery.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListQuery });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListQuery, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: NiceMultiStateListStore }]; } });
+
+const LIST_STATES = new InjectionToken("list_states");
+
+class NiceMultiStateListService extends NiceBaseListService {
+    constructor(states, store, activatedRoute, router, appRef, multiFilterService) {
+        super(store, multiFilterService, activatedRoute, router, appRef);
+        this.states = states;
+        this.multiFilterService = multiFilterService;
+    }
+    reset() {
+        this.store.reset();
+    }
+    setStateDefaultFilter(state, parameters) {
+        this.states[state].defaultParameters = parameters;
+    }
+    switchState(state) {
+        var _a;
+        const newState = this.states[state];
+        if (!state) {
+            return [];
+        }
+        this.multiFilterService.switchState(state);
+        this.reset();
+        this.init();
+        this.loadData((_a = newState.defaultParameters) !== null && _a !== void 0 ? _a : initialBaseListState.filterParameters);
+        return newState.columns;
+    }
+}
+NiceMultiStateListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListService, deps: [{ token: LIST_STATES }, { token: NiceMultiStateListStore }, { token: i3.ActivatedRoute }, { token: i3.Router }, { token: i0.ApplicationRef }, { token: NiceMultiStateFilterService }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceMultiStateListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [LIST_STATES]
+                    }] }, { type: NiceMultiStateListStore }, { type: i3.ActivatedRoute }, { type: i3.Router }, { type: i0.ApplicationRef }, { type: NiceMultiStateFilterService }];
+    } });
+
+class NiceMultiStateListComponent extends NiceBaseListComponent {
+    constructor(enableQueryBuilder, listLayout, exportsSetting, query, activatedRoute, bottomSheet, router, mediaObserver, multiStateListService) {
+        super(enableQueryBuilder, listLayout, [], exportsSetting, query, multiStateListService, activatedRoute, bottomSheet, router, mediaObserver);
+        this.multiStateListService = multiStateListService;
+    }
+    set state(state) {
+        this.switchState(state);
+    }
+    switchState(state) {
+        const columns = this.multiStateListService.switchState(state);
+        this.setColumn(columns);
+    }
+}
+NiceMultiStateListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListComponent, deps: [{ token: ENABLE_QUERY_BUILDER, optional: true }, { token: BASE_LIST_LAYOUT }, { token: EXPORTS_SETTINGS }, { token: NiceMultiStateListQuery }, { token: i3.ActivatedRoute }, { token: i4$1.MatBottomSheet }, { token: i3.Router }, { token: i5$2.MediaObserver }, { token: NiceMultiStateListService }], target: i0.ɵɵFactoryTarget.Component });
+NiceMultiStateListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceMultiStateListComponent, selector: "nice-multi-state-list", inputs: { state: "state" }, providers: [
+        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 }\"></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 }\"></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 }\"></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 }\"></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 }\"></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 }\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\">\n    <ng-container *ngIf=\"layout?.length; else isObject\">\n        <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout } }\"></ng-container>\n    </ng-container>\n\n    <ng-template #isObject>\n        <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout }\"></ng-container>\n    </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\">\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 }\"></ng-container>\n            </ng-container>\n            <ng-template #childIsLayout>\n                <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item }\"></ng-container>\n            </ng-template>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\">\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>search</mat-icon>\n                    <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n                    <ng-container *ngIf=\"enableQueryBuilder\">\n                        <button\n                                *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\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                                [matBadge]=\"rulesCount$ | async\"\n                                [matBadgeHidden]=\"!(rulesCount$ | async)\"\n                                matBadgeColor=\"accent\"\n                            >\n                                filter_list\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                                [matBadge]=\"rulesCount$ | async\"\n                                [matBadgeHidden]=\"!(rulesCount$ | async)\"\n                                matBadgeColor=\"accent\"\n                            >\n                                filter_list\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>\n                                clear\n                            </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>print</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>cloud_download</mat-icon>\n            </button>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'content'\">\n        <ng-container *ngIf=\"layoutContent === 'table' && table\">\n            <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n            <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n            <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item }\"></ng-container>\n        </ng-container>\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 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: true\"></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; 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; 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; 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\">\n    <div [ngClass]=\"item.classes\">\n        <ng-container *ngFor=\"let data of data$ | async\">\n            <ng-container *ngTemplateOutlet=\"cards; context: { item: data }\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\">\n    <div [ngClass]=\"item.classes\">\n        <ng-container *ngTemplateOutlet=\"customContent; context: { data: data$ | async }\"></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: QueryBuilderComponent, 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: i3$1.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { type: i9.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i11.MatCellDef, selector: "[matCellDef]" }, { type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i5.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 }\"></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 }\"></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 }\"></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 }\"></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 }\"></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 }\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\">\n    <ng-container *ngIf=\"layout?.length; else isObject\">\n        <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout } }\"></ng-container>\n    </ng-container>\n\n    <ng-template #isObject>\n        <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout }\"></ng-container>\n    </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\">\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 }\"></ng-container>\n            </ng-container>\n            <ng-template #childIsLayout>\n                <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item }\"></ng-container>\n            </ng-template>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\">\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>search</mat-icon>\n                    <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n                    <ng-container *ngIf=\"enableQueryBuilder\">\n                        <button\n                                *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\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                                [matBadge]=\"rulesCount$ | async\"\n                                [matBadgeHidden]=\"!(rulesCount$ | async)\"\n                                matBadgeColor=\"accent\"\n                            >\n                                filter_list\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                                [matBadge]=\"rulesCount$ | async\"\n                                [matBadgeHidden]=\"!(rulesCount$ | async)\"\n                                matBadgeColor=\"accent\"\n                            >\n                                filter_list\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>\n                                clear\n                            </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>print</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>cloud_download</mat-icon>\n            </button>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.name === 'content'\">\n        <ng-container *ngIf=\"layoutContent === 'table' && table\">\n            <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n            <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n            <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item }\"></ng-container>\n        </ng-container>\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 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: true\"></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; 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; 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; 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\">\n    <div [ngClass]=\"item.classes\">\n        <ng-container *ngFor=\"let data of data$ | async\">\n            <ng-container *ngTemplateOutlet=\"cards; context: { item: data }\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\">\n    <div [ngClass]=\"item.classes\">\n        <ng-container *ngTemplateOutlet=\"customContent; context: { data: data$ | async }\"></ng-container>\n    </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [ENABLE_QUERY_BUILDER]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [BASE_LIST_LAYOUT]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [EXPORTS_SETTINGS]
+                    }] }, { type: NiceMultiStateListQuery }, { type: i3.ActivatedRoute }, { type: i4$1.MatBottomSheet }, { type: i3.Router }, { type: i5$2.MediaObserver }, { type: NiceMultiStateListService }];
+    }, propDecorators: { state: [{
+                type: Input
+            }] } });
+
+class NiceMultiStateListModule {
+    static providerFactory(options) {
+        var _a;
+        return [
+            {
+                provide: NiceMultiStateFilterService,
+                useExisting: options.filterService
+            },
+            {
+                provide: LIST_STATES,
+                useValue: options.states
+            },
+            options.layout ? {
+                provide: BASE_LIST_LAYOUT,
+                useValue: options.layout
+            } : undefined,
+            {
+                provide: EXPORTS_SETTINGS,
+                useValue: (_a = options.exports) !== null && _a !== void 0 ? _a : {
+                    pdf: true,
+                    xlsx: true,
+                    csv: true
+                }
+            },
+            ...(options.queryBuilder ? [
+                {
+                    provide: ENABLE_QUERY_BUILDER,
+                    useValue: true
+                },
+                {
+                    provide: NiceFilterGroupService,
+                    useClass: options.queryBuilder.filterGroupService
+                },
+                options.queryBuilder.savedReportService ? {
+                    provide: NiceSavedReportService,
+                    useClass: options.queryBuilder.savedReportService
+                } : undefined
+            ] : [])
+        ].filter(x => !!x);
+    }
+}
+NiceMultiStateListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NiceMultiStateListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListModule, declarations: [NiceMultiStateListComponent], imports: [NiceExportBottomSheetModule,
+        NiceBaseListDirectiveModule,
+        CommonModule,
+        FormsModule,
+        RouterModule,
+        MatButtonModule,
+        MatIconModule,
+        MatTooltipModule,
+        MatCardModule,
+        MatPaginatorModule,
+        TranslateModule,
+        NiceLoadingSpinnerModule,
+        MatTableModule,
+        MatSortModule,
+        MatRippleModule,
+        MatBottomSheetModule,
+        QueryBuilderModule,
+        MatBadgeModule], exports: [NiceMultiStateListComponent,
+        NiceBaseListDirectiveModule] });
+NiceMultiStateListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListModule, imports: [[
+            NiceExportBottomSheetModule,
+            NiceBaseListDirectiveModule,
+            CommonModule,
+            FormsModule,
+            RouterModule,
+            MatButtonModule,
+            MatIconModule,
+            MatTooltipModule,
+            MatCardModule,
+            MatPaginatorModule,
+            TranslateModule,
+            NiceLoadingSpinnerModule,
+            MatTableModule,
+            MatSortModule,
+            MatRippleModule,
+            MatBottomSheetModule,
+            QueryBuilderModule,
+            MatBadgeModule
+        ], NiceBaseListDirectiveModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        NiceExportBottomSheetModule,
+                        NiceBaseListDirectiveModule,
+                        CommonModule,
+                        FormsModule,
+                        RouterModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        MatCardModule,
+                        MatPaginatorModule,
+                        TranslateModule,
+                        NiceLoadingSpinnerModule,
+                        MatTableModule,
+                        MatSortModule,
+                        MatRippleModule,
+                        MatBottomSheetModule,
+                        QueryBuilderModule,
+                        MatBadgeModule
+                    ],
+                    declarations: [
+                        NiceMultiStateListComponent
+                    ],
+                    exports: [
+                        NiceMultiStateListComponent,
+                        NiceBaseListDirectiveModule
+                    ]
+                }]
+        }] });
+
+class StringUtils {
+}
+String.prototype.toTableColumn = function (sortable) {
+    return new TableColumns(this.toString(), sortable);
+};
+
+/*
+ * Public API Surface of nice-data-filter-kit
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DateFilterComponent, FilterComponent, FilterGroupIconPipe, FilterOperatorTypes, FilterSelectionComponent, FilterType, FilterUtils, LayoutContent, NiceBaseListButtonsDirective, NiceBaseListCardsDirective, NiceBaseListComponent, NiceBaseListCustomContentDirective, NiceBaseListDirectiveModule, NiceBaseListFiltersDirective, NiceBaseListModule, NiceBaseListQuery, NiceBaseListService, NiceBaseListStore, NiceBaseListTableDirective, NiceBaseListTitleDirective, NiceCustomDateAdapter, NiceFilterApi, NiceFilterGroupService, NiceFilterService, NiceListState, NiceMultiStateFilterService, NiceMultiStateListComponent, NiceMultiStateListModule, NiceMultiStateListQuery, NiceMultiStateListService, NiceMultiStateListStore, NiceSavedReportService, NumberFilterComponent, QBFilterUtils, QueryBuilderComponent, QueryBuilderModule, QueryBuilderTriggerDirective, RadioFilterComponent, RuleComponent, SelectFilterComponent, StringUtils, TableColumns, TextFilterComponent, defaultLayout, initialBaseListState, initialValue };
+//# sourceMappingURL=recursyve-nice-data-filter-kit.mjs.map