@recursyve/nice-data-filter-kit 13.1.4 → 13.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/esm2020/lib/api/filter.api.mjs +46 -5
  2. package/esm2020/lib/components/base-list/base-list.component.mjs +14 -5
  3. package/esm2020/lib/components/base-list/providers/base-filter.service.mjs +11 -9
  4. package/esm2020/lib/components/base-list/store/base-list.service.mjs +20 -15
  5. package/esm2020/lib/components/base-list/store/base-list.store.mjs +3 -2
  6. package/esm2020/lib/components/multi-state-list/multi-state-list.component.mjs +3 -3
  7. package/esm2020/lib/components/multi-state-list/providers/multi-state-filter.service.mjs +1 -1
  8. package/fesm2015/recursyve-nice-data-filter-kit.mjs +94 -33
  9. package/fesm2015/recursyve-nice-data-filter-kit.mjs.map +1 -1
  10. package/fesm2020/recursyve-nice-data-filter-kit.mjs +91 -32
  11. package/fesm2020/recursyve-nice-data-filter-kit.mjs.map +1 -1
  12. package/lib/api/filter.api.d.ts +43 -4
  13. package/lib/components/base-list/base-list.component.d.ts +4 -1
  14. package/lib/components/base-list/providers/base-filter.service.d.ts +7 -7
  15. package/lib/components/base-list/store/base-list.service.d.ts +4 -2
  16. package/lib/components/base-list/store/base-list.store.d.ts +1 -0
  17. package/lib/components/multi-state-list/providers/multi-state-filter.service.d.ts +3 -3
  18. package/package.json +3 -3
package/fesm2020/recursyve-nice-data-filter-kit.mjs CHANGED
@@ -2,7 +2,7 @@ import { HttpParams } from '@angular/common/http';
2
2
  import * as i5 from '@recursyve/nice-ui-kit.v2';
3
3
  import { isNullOrUndefined, ObjectUtils, FileUtils, ArrayUtils, ExportBottomSheetComponent, NiceLoadingSpinnerModule, NiceTypeaheadModule, NiceExportBottomSheetModule } from '@recursyve/nice-ui-kit.v2';
4
4
  import * as i0 from '@angular/core';
5
- import { Directive, Input, NgModule, Injectable, InjectionToken, Optional, Inject, Component, forwardRef, ViewEncapsulation, Pipe, EventEmitter, ChangeDetectionStrategy, Output, HostListener, TemplateRef, ContentChild, ContentChildren } from '@angular/core';
5
+ import { Directive, Input, NgModule, Injectable, Inject, InjectionToken, Optional, Component, forwardRef, ViewEncapsulation, Pipe, EventEmitter, ChangeDetectionStrategy, Output, HostListener, TemplateRef, ContentChild, ContentChildren } from '@angular/core';
6
6
  import { Store, StoreConfig, Query, arrayAdd, arrayUpsert, arrayRemove } from '@datorama/akita';
7
7
  import { combineLatest, Subject, firstValueFrom, of } from 'rxjs';
8
8
  import { map, takeUntil, debounceTime, switchMap, distinctUntilChanged } from 'rxjs/operators';
@@ -125,8 +125,8 @@ class NiceFilterApi {
125
125
  this.path = path;
126
126
  this.http = http;
127
127
  }
128
- filter(queryModel) {
129
- return this.http.post(this.url("filter"), queryModel);
128
+ filter(queryModel, option = {}) {
129
+ return this.http.post(this.url("filter"), queryModel, option);
130
130
  }
131
131
  filterCount(queryModel) {
132
132
  return this.http.post(this.url("filter-count"), queryModel);
@@ -137,8 +137,8 @@ class NiceFilterApi {
137
137
  getPrintableHtml(queryModel) {
138
138
  return this.http.post(this.url(`download/html`), queryModel, { responseType: "text" });
139
139
  }
140
- getFilterConfig() {
141
- return this.http.get(this.url("filter/config"));
140
+ getFilterConfig(option = {}) {
141
+ return this.http.get(this.url("filter/config"), option);
142
142
  }
143
143
  searchFilterValue(id, value) {
144
144
  if (value === undefined) {
@@ -168,6 +168,47 @@ class NiceFilterApi {
168
168
  return [routeOfQueryParams ?? "", query];
169
169
  }
170
170
  }
171
+ function mixinNiceFilterApi(base) {
172
+ return class extends base {
173
+ filter(queryModel, option = {}) {
174
+ return this.post("filter", queryModel, option);
175
+ }
176
+ filterCount(queryModel) {
177
+ return this.post("filter-count", queryModel);
178
+ }
179
+ downloadData(type, queryModel) {
180
+ return this.post(`download/${type}`, queryModel, { responseType: "blob" });
181
+ }
182
+ getPrintableHtml(queryModel) {
183
+ return this.post(`download/html`, queryModel, { responseType: "text" });
184
+ }
185
+ getFilterConfig(option = {}) {
186
+ return this.get("filter/config", option);
187
+ }
188
+ searchFilterValue(id, value) {
189
+ if (value === undefined) {
190
+ value = "";
191
+ }
192
+ return this.get("filter/config/value", {
193
+ params: {
194
+ id,
195
+ value
196
+ }
197
+ });
198
+ }
199
+ searchFilterResourceValue(id, resourceId) {
200
+ return this.get("filter/config/id", {
201
+ params: {
202
+ id,
203
+ resourceId
204
+ }
205
+ });
206
+ }
207
+ constructor(...args) {
208
+ super(...args);
209
+ }
210
+ };
211
+ }
171
212
 
172
213
  class NiceBaseListButtonsDirective {
173
214
  constructor(template) {
@@ -525,8 +566,8 @@ class NiceFilterService {
525
566
  constructor(api) {
526
567
  this.api = api;
527
568
  }
528
- filter(params) {
529
- return this.api?.filter(FilterUtils.parametersToRequest(params));
569
+ filter(params, option = {}) {
570
+ return this.api?.filter(FilterUtils.parametersToRequest(params), option);
530
571
  }
531
572
  getFile(type, parameters) {
532
573
  return this.api?.downloadData(type, FilterUtils.parametersToRequest(parameters));
@@ -534,8 +575,8 @@ class NiceFilterService {
534
575
  getPrintableHtml(parameters) {
535
576
  return this.api?.getPrintableHtml(FilterUtils.parametersToRequest(parameters));
536
577
  }
537
- getFilterConfig() {
538
- return this.api?.getFilterConfig();
578
+ getFilterConfig(option = {}) {
579
+ return this.api?.getFilterConfig(option);
539
580
  }
540
581
  searchFilterValue(filterConfig, value) {
541
582
  return this.api?.searchFilterValue(filterConfig.id, value);
@@ -548,7 +589,10 @@ NiceFilterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versio
548
589
  NiceFilterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceFilterService });
549
590
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceFilterService, decorators: [{
550
591
  type: Injectable
551
- }], ctorParameters: function () { return [{ type: NiceFilterApi }]; } });
592
+ }], ctorParameters: function () { return [{ type: undefined, decorators: [{
593
+ type: Inject,
594
+ args: [NiceFilterApi]
595
+ }] }]; } });
552
596
 
553
597
  class NiceSavedReportsApi {
554
598
  constructor(filterApiUrl, path, http) {
@@ -651,7 +695,8 @@ const initialBaseListState = {
651
695
  },
652
696
  filterConfig: [],
653
697
  showQueryBuilder: false,
654
- defaultRules: []
698
+ defaultRules: [],
699
+ queryParams: {}
655
700
  };
656
701
  let NiceBaseListStore = class NiceBaseListStore extends Store {
657
702
  constructor(parameters, defaultRules) {
@@ -889,10 +934,10 @@ class NiceBaseListService {
889
934
  get filter() {
890
935
  return this.filterService;
891
936
  }
892
- async init() {
937
+ async init(configQueryParams = {}) {
893
938
  this.store.setFilterConfigLoading(true);
894
939
  try {
895
- const filterConfig = await firstValueFrom(this.filterService.getFilterConfig());
940
+ const filterConfig = await firstValueFrom(this.filterService.getFilterConfig({ params: configQueryParams }));
896
941
  this.store.update({
897
942
  filterConfig
898
943
  });
@@ -935,6 +980,9 @@ class NiceBaseListService {
935
980
  mergePageResults: mode === "infinite-scroll"
936
981
  });
937
982
  }
983
+ setQueryParams(queryParams) {
984
+ this.store.update({ queryParams });
985
+ }
938
986
  loadQueryParams(autoLoad) {
939
987
  this.activatedRoute?.queryParams
940
988
  .pipe(takeUntil(this.unsubscribeAll$), map((params) => {
@@ -963,7 +1011,7 @@ class NiceBaseListService {
963
1011
  return this.loadData(parameters, updateQueryParams, true);
964
1012
  }
965
1013
  async loadData(parameters, updateQueryParams = true, reset = false) {
966
- const { disabled } = this.store.getValue();
1014
+ const { disabled, queryParams } = this.store.getValue();
967
1015
  try {
968
1016
  const filterParameters = this.mergeParameters(parameters);
969
1017
  if (filterParameters) {
@@ -972,7 +1020,9 @@ class NiceBaseListService {
972
1020
  if (!disabled) {
973
1021
  this.store.setLoading(true);
974
1022
  this.loadingData = true;
975
- const result = await firstValueFrom(this.filterService.filter(this.getParameters(filterParameters)));
1023
+ const result = await firstValueFrom(this.filterService.filter(this.getParameters(filterParameters), {
1024
+ params: queryParams
1025
+ }));
976
1026
  this.store.setResult(result, reset);
977
1027
  }
978
1028
  }
@@ -1166,16 +1216,6 @@ class NiceBaseListService {
1166
1216
  }
1167
1217
  });
1168
1218
  }
1169
- async updateQueryParams(queryParams) {
1170
- if (!this.activatedRoute) {
1171
- return;
1172
- }
1173
- await this.router.navigate([], {
1174
- relativeTo: this.activatedRoute,
1175
- queryParams,
1176
- queryParamsHandling: "merge"
1177
- });
1178
- }
1179
1219
  getParameters(filterParameters) {
1180
1220
  const { defaultRules } = this.store.getValue();
1181
1221
  const parameters = {
@@ -1190,6 +1230,16 @@ class NiceBaseListService {
1190
1230
  }
1191
1231
  return parameters;
1192
1232
  }
1233
+ async updateQueryParams(queryParams) {
1234
+ if (!this.activatedRoute) {
1235
+ return;
1236
+ }
1237
+ await this.router.navigate([], {
1238
+ relativeTo: this.activatedRoute,
1239
+ queryParams,
1240
+ queryParamsHandling: "merge"
1241
+ });
1242
+ }
1193
1243
  mergeParameters(parameters) {
1194
1244
  const { filterParameters } = this.store.getValue();
1195
1245
  if (!parameters) {
@@ -1770,6 +1820,8 @@ class NiceBaseListComponent {
1770
1820
  this.canExport = true;
1771
1821
  this.disableRouting = false;
1772
1822
  this.customExport = [];
1823
+ this.queryParams = {};
1824
+ this.configQueryParams = {};
1773
1825
  this.newPage = new EventEmitter();
1774
1826
  this.defaultPageSizeOptions = [10, 25, 50, 100];
1775
1827
  this.columnNames = [];
@@ -1814,7 +1866,7 @@ class NiceBaseListComponent {
1814
1866
  return this.buttons?.find(x => x.position === "search")?.template;
1815
1867
  }
1816
1868
  async ngOnInit() {
1817
- await this.service.init();
1869
+ await this.service.init(this.configQueryParams);
1818
1870
  this.service.loadQueryParams(this.autoLoad);
1819
1871
  this.searchText$
1820
1872
  .pipe(debounceTime(300), distinctUntilChanged(), switchMap((search) => {
@@ -1841,6 +1893,9 @@ class NiceBaseListComponent {
1841
1893
  if ("mode" in changes) {
1842
1894
  this.service.setMode(changes.mode.currentValue);
1843
1895
  }
1896
+ if ("queryParams" in changes) {
1897
+ this.service.setQueryParams(changes.queryParams.currentValue);
1898
+ }
1844
1899
  }
1845
1900
  setLoading(loading) {
1846
1901
  this.service.setLoading(loading);
@@ -1957,18 +2012,18 @@ class NiceBaseListComponent {
1957
2012
  }
1958
2013
  }
1959
2014
  NiceBaseListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListComponent, deps: [{ token: ENABLE_QUERY_BUILDER, optional: true }, { token: BASE_LIST_ICONS }, { token: BASE_LIST_LAYOUT }, { token: TABLE_COLUMNS }, { token: EXPORTS_SETTINGS }, { token: NiceBaseListQuery }, { token: NiceBaseListService }, { token: i2.ActivatedRoute }, { token: i4$1.MatBottomSheet }, { token: i2.Router }, { token: i5.NiceMediaWatcherService }], target: i0.ɵɵFactoryTarget.Component });
1960
- 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: [
2015
+ NiceBaseListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceBaseListComponent, selector: "nice-base-list", inputs: { mode: "mode", layout: "layout", layoutContent: "layoutContent", autoChangeLayout: "autoChangeLayout", baseRoute: "baseRoute", routeFn: "routeFn", navigateFn: "navigateFn", autoLoad: "autoLoad", pageTitle: "pageTitle", canExport: "canExport", disableRouting: "disableRouting", customExport: "customExport", queryParams: "queryParams", configQueryParams: "configQueryParams" }, outputs: { newPage: "newPage" }, providers: [
1961
2016
  NiceBaseListQuery,
1962
2017
  NiceBaseListService,
1963
2018
  NiceBaseListStore
1964
- ], 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: "emptyState", first: true, predicate: NiceBaseListEmptyStateDirective, descendants: true, read: TemplateRef }, { propertyName: "buttons", predicate: NiceBaseListButtonsDirective }], usesOnChanges: true, ngImport: i0, template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl, active: xlActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg, active: lgActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md, active: mdActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm, active: smActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs, active: xsActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default, active: defaultActive$ | async }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\" let-active=\"active\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout }, active }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout, active }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\" let-active=\"active\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item, active }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\" let-active=\"active\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon [svgIcon]=\"icons.search.svgIcon\">{{ icons.search.matIcon }}</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n\n <ng-container *ngIf=\"searchButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"searchButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.print.svgIcon\">{{ icons.print.matIcon }}</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"(isEmpty$ | async) && emptyState; else showData\">\n <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n </ng-container>\n <ng-template #showData>\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: 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\" let-active=\"active\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data, active }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\" let-active=\"active\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { $implicit: data$ | async, data: data$ | async, total: recordsFiltered$ | async, active }\"></ng-container>\n </div>\n</ng-template>\n", components: [{ type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { type: i9.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: NiceQueryBuilderComponent, selector: "nice-query-builder", inputs: ["filterConfigs", "currentSavedReport", "loading"], outputs: ["close", "createReport", "updateReport"] }, { type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }, { type: i16.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i17.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { type: i5.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { type: i9.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i11.MatCellDef, selector: "[matCellDef]" }, { type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i5$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "async": i13.AsyncPipe, "translate": i1$4.TranslatePipe } });
2019
+ ], 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: "emptyState", first: true, predicate: NiceBaseListEmptyStateDirective, descendants: true, read: TemplateRef }, { propertyName: "buttons", predicate: NiceBaseListButtonsDirective }], usesOnChanges: true, ngImport: i0, template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl, active: xlActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg, active: lgActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md, active: mdActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm, active: smActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs, active: xsActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default, active: defaultActive$ | async }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\" let-active=\"active\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout }, active }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout, active }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\" let-active=\"active\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item, active }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\" let-active=\"active\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon [svgIcon]=\"icons.search.svgIcon\">{{ icons.search.matIcon }}</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n\n <ng-container *ngIf=\"searchButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"searchButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async) && (filterConfig$ | async).length > 0\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.print.svgIcon\">{{ icons.print.matIcon }}</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"(isEmpty$ | async) && emptyState; else showData\">\n <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n </ng-container>\n <ng-template #showData>\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: 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\" let-active=\"active\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data, active }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\" let-active=\"active\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { $implicit: data$ | async, data: data$ | async, total: recordsFiltered$ | async, active }\"></ng-container>\n </div>\n</ng-template>\n", components: [{ type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { type: i9.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: NiceQueryBuilderComponent, selector: "nice-query-builder", inputs: ["filterConfigs", "currentSavedReport", "loading"], outputs: ["close", "createReport", "updateReport"] }, { type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }, { type: i16.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i17.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { type: i5.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { type: i9.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i11.MatCellDef, selector: "[matCellDef]" }, { type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i5$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "async": i13.AsyncPipe, "translate": i1$4.TranslatePipe } });
1965
2020
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListComponent, decorators: [{
1966
2021
  type: Component,
1967
2022
  args: [{ selector: "nice-base-list", providers: [
1968
2023
  NiceBaseListQuery,
1969
2024
  NiceBaseListService,
1970
2025
  NiceBaseListStore
1971
- ], template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl, active: xlActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg, active: lgActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md, active: mdActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm, active: smActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs, active: xsActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default, active: defaultActive$ | async }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\" let-active=\"active\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout }, active }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout, active }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\" let-active=\"active\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item, active }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\" let-active=\"active\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon [svgIcon]=\"icons.search.svgIcon\">{{ icons.search.matIcon }}</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n\n <ng-container *ngIf=\"searchButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"searchButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.print.svgIcon\">{{ icons.print.matIcon }}</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"(isEmpty$ | async) && emptyState; else showData\">\n <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n </ng-container>\n <ng-template #showData>\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: 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\" let-active=\"active\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data, active }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\" let-active=\"active\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { $implicit: data$ | async, data: data$ | async, total: recordsFiltered$ | async, active }\"></ng-container>\n </div>\n</ng-template>\n" }]
2026
+ ], template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl, active: xlActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg, active: lgActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md, active: mdActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm, active: smActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs, active: xsActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default, active: defaultActive$ | async }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\" let-active=\"active\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout }, active }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout, active }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\" let-active=\"active\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item, active }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\" let-active=\"active\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon [svgIcon]=\"icons.search.svgIcon\">{{ icons.search.matIcon }}</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n\n <ng-container *ngIf=\"searchButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"searchButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async) && (filterConfig$ | async).length > 0\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.print.svgIcon\">{{ icons.print.matIcon }}</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"(isEmpty$ | async) && emptyState; else showData\">\n <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n </ng-container>\n <ng-template #showData>\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: 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\" let-active=\"active\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data, active }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\" let-active=\"active\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { $implicit: data$ | async, data: data$ | async, total: recordsFiltered$ | async, active }\"></ng-container>\n </div>\n</ng-template>\n" }]
1972
2027
  }], ctorParameters: function () { return [{ type: undefined, decorators: [{
1973
2028
  type: Optional
1974
2029
  }, {
@@ -2031,6 +2086,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
2031
2086
  type: Input
2032
2087
  }], customExport: [{
2033
2088
  type: Input
2089
+ }], queryParams: [{
2090
+ type: Input
2091
+ }], configQueryParams: [{
2092
+ type: Input
2034
2093
  }], newPage: [{
2035
2094
  type: Output
2036
2095
  }] } });
@@ -2425,14 +2484,14 @@ NiceMultiStateListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
2425
2484
  NiceMultiStateListQuery,
2426
2485
  NiceMultiStateListService,
2427
2486
  NiceMultiStateListStore
2428
- ], usesInheritance: true, ngImport: i0, template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl, active: xlActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg, active: lgActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md, active: mdActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm, active: smActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs, active: xsActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default, active: defaultActive$ | async }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\" let-active=\"active\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout }, active }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout, active }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\" let-active=\"active\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item, active }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\" let-active=\"active\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon [svgIcon]=\"icons.search.svgIcon\">{{ icons.search.matIcon }}</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n\n <ng-container *ngIf=\"searchButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"searchButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.print.svgIcon\">{{ icons.print.matIcon }}</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"(isEmpty$ | async) && emptyState; else showData\">\n <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n </ng-container>\n <ng-template #showData>\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: 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\" let-active=\"active\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data, active }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\" let-active=\"active\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { $implicit: data$ | async, data: data$ | async, total: recordsFiltered$ | async, active }\"></ng-container>\n </div>\n</ng-template>\n", components: [{ type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { type: i9.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: NiceQueryBuilderComponent, selector: "nice-query-builder", inputs: ["filterConfigs", "currentSavedReport", "loading"], outputs: ["close", "createReport", "updateReport"] }, { type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }, { type: i16.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i17.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { type: i5.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { type: i9.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i11.MatCellDef, selector: "[matCellDef]" }, { type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i5$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "async": i13.AsyncPipe, "translate": i1$4.TranslatePipe } });
2487
+ ], usesInheritance: true, ngImport: i0, template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl, active: xlActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg, active: lgActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md, active: mdActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm, active: smActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs, active: xsActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default, active: defaultActive$ | async }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\" let-active=\"active\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout }, active }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout, active }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\" let-active=\"active\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item, active }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\" let-active=\"active\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon [svgIcon]=\"icons.search.svgIcon\">{{ icons.search.matIcon }}</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n\n <ng-container *ngIf=\"searchButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"searchButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async) && (filterConfig$ | async).length > 0\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.print.svgIcon\">{{ icons.print.matIcon }}</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"(isEmpty$ | async) && emptyState; else showData\">\n <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n </ng-container>\n <ng-template #showData>\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: 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\" let-active=\"active\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data, active }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\" let-active=\"active\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { $implicit: data$ | async, data: data$ | async, total: recordsFiltered$ | async, active }\"></ng-container>\n </div>\n</ng-template>\n", components: [{ type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { type: i9.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: NiceQueryBuilderComponent, selector: "nice-query-builder", inputs: ["filterConfigs", "currentSavedReport", "loading"], outputs: ["close", "createReport", "updateReport"] }, { type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }, { type: i16.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i17.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { type: i5.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { type: i9.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i11.MatCellDef, selector: "[matCellDef]" }, { type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i5$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "async": i13.AsyncPipe, "translate": i1$4.TranslatePipe } });
2429
2488
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListComponent, decorators: [{
2430
2489
  type: Component,
2431
2490
  args: [{ selector: "nice-multi-state-list", providers: [
2432
2491
  NiceMultiStateListQuery,
2433
2492
  NiceMultiStateListService,
2434
2493
  NiceMultiStateListStore
2435
- ], template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl, active: xlActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg, active: lgActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md, active: mdActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm, active: smActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs, active: xsActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default, active: defaultActive$ | async }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\" let-active=\"active\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout }, active }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout, active }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\" let-active=\"active\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item, active }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\" let-active=\"active\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon [svgIcon]=\"icons.search.svgIcon\">{{ icons.search.matIcon }}</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n\n <ng-container *ngIf=\"searchButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"searchButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.print.svgIcon\">{{ icons.print.matIcon }}</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"(isEmpty$ | async) && emptyState; else showData\">\n <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n </ng-container>\n <ng-template #showData>\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: 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\" let-active=\"active\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data, active }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\" let-active=\"active\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { $implicit: data$ | async, data: data$ | async, total: recordsFiltered$ | async, active }\"></ng-container>\n </div>\n</ng-template>\n" }]
2494
+ ], template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl, active: xlActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg, active: lgActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md, active: mdActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm, active: smActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs, active: xsActive$ | async }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default, active: defaultActive$ | async }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\" let-active=\"active\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout }, active }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout, active }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\" let-active=\"active\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item, active }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\" let-active=\"active\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon [svgIcon]=\"icons.search.svgIcon\">{{ icons.search.matIcon }}</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n\n <ng-container *ngIf=\"searchButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"searchButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async) && (filterConfig$ | async).length > 0\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.print.svgIcon\">{{ icons.print.matIcon }}</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"(isEmpty$ | async) && emptyState; else showData\">\n <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n </ng-container>\n <ng-template #showData>\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item, active }\"></ng-container>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: 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\" let-active=\"active\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data, active }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\" let-active=\"active\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { $implicit: data$ | async, data: data$ | async, total: recordsFiltered$ | async, active }\"></ng-container>\n </div>\n</ng-template>\n" }]
2436
2495
  }], ctorParameters: function () { return [{ type: undefined, decorators: [{
2437
2496
  type: Optional
2438
2497
  }, {
@@ -2580,5 +2639,5 @@ String.prototype.toTableColumn = function (sortableOrOptions, nullLast) {
2580
2639
  * Generated bundle index. Do not edit.
2581
2640
  */
2582
2641
 
2583
- export { DateFilterComponent, FilterComponent, FilterGroupIconPipe, FilterOperatorTypes, FilterSelectionComponent, FilterType, FilterUtils, LayoutContent, NiceBaseListButtonsDirective, NiceBaseListCardsDirective, NiceBaseListComponent, NiceBaseListCustomContentDirective, NiceBaseListDirectiveModule, NiceBaseListEmptyStateDirective, NiceBaseListFiltersDirective, NiceBaseListModule, NiceBaseListQuery, NiceBaseListService, NiceBaseListStore, NiceBaseListTableDirective, NiceBaseListTitleDirective, NiceCustomDateAdapter, NiceFilterApi, NiceFilterGroupService, NiceFilterService, NiceListState, NiceMultiStateFilterService, NiceMultiStateListComponent, NiceMultiStateListModule, NiceMultiStateListQuery, NiceMultiStateListService, NiceMultiStateListStore, NiceQueryBuilderComponent, NiceQueryBuilderModule, NiceSavedReportService, NumberFilterComponent, OrderUtils, QBFilterUtils, QueryBuilderTriggerDirective, RadioFilterComponent, RuleComponent, SelectFilterComponent, StringUtils, TableColumns, TextFilterComponent, defaultLayout, initialBaseListState, initialValue };
2642
+ export { DateFilterComponent, FilterComponent, FilterGroupIconPipe, FilterOperatorTypes, FilterSelectionComponent, FilterType, FilterUtils, LayoutContent, NiceBaseListButtonsDirective, NiceBaseListCardsDirective, NiceBaseListComponent, NiceBaseListCustomContentDirective, NiceBaseListDirectiveModule, NiceBaseListEmptyStateDirective, NiceBaseListFiltersDirective, NiceBaseListModule, NiceBaseListQuery, NiceBaseListService, NiceBaseListStore, NiceBaseListTableDirective, NiceBaseListTitleDirective, NiceCustomDateAdapter, NiceFilterApi, NiceFilterGroupService, NiceFilterService, NiceListState, NiceMultiStateFilterService, NiceMultiStateListComponent, NiceMultiStateListModule, NiceMultiStateListQuery, NiceMultiStateListService, NiceMultiStateListStore, NiceQueryBuilderComponent, NiceQueryBuilderModule, NiceSavedReportService, NumberFilterComponent, OrderUtils, QBFilterUtils, QueryBuilderTriggerDirective, RadioFilterComponent, RuleComponent, SelectFilterComponent, StringUtils, TableColumns, TextFilterComponent, defaultLayout, initialBaseListState, initialValue, mixinNiceFilterApi };
2584
2643
  //# sourceMappingURL=recursyve-nice-data-filter-kit.mjs.map