@recursyve/nice-data-filter-kit 13.0.8 → 13.0.9

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 (22) hide show
  1. package/esm2020/lib/components/base-list/base-list.component.mjs +10 -6
  2. package/esm2020/lib/components/base-list/base-list.constant.mjs +2 -1
  3. package/esm2020/lib/components/base-list/base-list.module.mjs +14 -6
  4. package/esm2020/lib/components/base-list/models/icons.model.mjs +18 -0
  5. package/esm2020/lib/components/multi-state-list/multi-state-list.component.mjs +10 -7
  6. package/esm2020/lib/components/multi-state-list/multi-state-list.module.mjs +5 -5
  7. package/esm2020/lib/components/query-builder/query-builder.component.mjs +7 -7
  8. package/esm2020/lib/components/query-builder/query-builder.module.mjs +10 -10
  9. package/esm2020/lib/components/query-builder/rule/components/filter.component.mjs +2 -1
  10. package/fesm2015/recursyve-nice-data-filter-kit.mjs +62 -31
  11. package/fesm2015/recursyve-nice-data-filter-kit.mjs.map +1 -1
  12. package/fesm2020/recursyve-nice-data-filter-kit.mjs +64 -30
  13. package/fesm2020/recursyve-nice-data-filter-kit.mjs.map +1 -1
  14. package/lib/components/base-list/base-list.component.d.ts +4 -2
  15. package/lib/components/base-list/base-list.constant.d.ts +1 -0
  16. package/lib/components/base-list/base-list.module.d.ts +3 -1
  17. package/lib/components/base-list/models/icons.model.d.ts +15 -0
  18. package/lib/components/multi-state-list/multi-state-list.component.d.ts +3 -2
  19. package/lib/components/multi-state-list/multi-state-list.module.d.ts +1 -1
  20. package/lib/components/query-builder/query-builder.component.d.ts +3 -3
  21. package/lib/components/query-builder/query-builder.module.d.ts +4 -4
  22. package/package.json +1 -1
@@ -582,6 +582,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
582
582
  type: Injectable
583
583
  }], ctorParameters: function () { return [{ type: NiceSavedReportsApi }]; } });
584
584
 
585
+ const BASE_LIST_ICONS = new InjectionToken("base_list_icons");
585
586
  const BASE_LIST_LAYOUT = new InjectionToken("base_list_layout");
586
587
  const DEFAULT_RULES = new InjectionToken("default_rules");
587
588
  const DEFAULT_PARAMETERS = new InjectionToken("default_parameters");
@@ -1248,6 +1249,7 @@ class FilterComponent {
1248
1249
  this._value = value;
1249
1250
  }
1250
1251
  onValueChange(value) {
1252
+ this._value = value;
1251
1253
  if (this.valueIndex < 0) {
1252
1254
  this.propagateChanges(value);
1253
1255
  }
@@ -1610,7 +1612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
1610
1612
  type: Output
1611
1613
  }] } });
1612
1614
 
1613
- class QueryBuilderComponent {
1615
+ class NiceQueryBuilderComponent {
1614
1616
  constructor(formGroup) {
1615
1617
  this.formGroup = formGroup;
1616
1618
  this.close = new EventEmitter();
@@ -1650,11 +1652,11 @@ class QueryBuilderComponent {
1650
1652
  this.updateReport.emit();
1651
1653
  }
1652
1654
  }
1653
- QueryBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QueryBuilderComponent, deps: [{ token: i1$5.GeneratedFormGroup }], target: i0.ɵɵFactoryTarget.Component });
1654
- QueryBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: QueryBuilderComponent, selector: "nice-query-builder", inputs: { filterConfigs: "filterConfigs", currentSavedReport: "currentSavedReport", loading: "loading" }, outputs: { close: "close", createReport: "createReport", updateReport: "updateReport" }, providers: [
1655
+ NiceQueryBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceQueryBuilderComponent, deps: [{ token: i1$5.GeneratedFormGroup }], target: i0.ɵɵFactoryTarget.Component });
1656
+ NiceQueryBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceQueryBuilderComponent, selector: "nice-query-builder", inputs: { filterConfigs: "filterConfigs", currentSavedReport: "currentSavedReport", loading: "loading" }, outputs: { close: "close", createReport: "createReport", updateReport: "updateReport" }, providers: [
1655
1657
  {
1656
1658
  provide: NG_VALUE_ACCESSOR,
1657
- useExisting: forwardRef(() => QueryBuilderComponent),
1659
+ useExisting: forwardRef(() => NiceQueryBuilderComponent),
1658
1660
  multi: true
1659
1661
  },
1660
1662
  {
@@ -1662,12 +1664,12 @@ QueryBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
1662
1664
  useFactory: ngxFormGeneratorFactory(QueryBuilderForm)
1663
1665
  }
1664
1666
  ], ngImport: i0, template: "<div class=\"rules-container flex flex-col\" *ngIf=\"!loading\" [formGroup]=\"formGroup\">\n <ng-container formArrayName=\"rules\">\n <nice-rule\n *ngFor=\"let rule of rules.controls; let i = index\"\n (remove)=\"onClickDeleteRule(i)\"\n [filterConfigs]=\"filterConfigs\"\n [formGroupName]=\"i\"\n ></nice-rule>\n </ng-container>\n <div class=\"flex justify-between\">\n <button\n class=\"add-button add-rule-button\"\n mat-mini-fab\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfigs\"\n (queryBuilderFilterSelected)=\"onClickAddRule($event)\"\n >\n <mat-icon>add</mat-icon>\n </button>\n <div class=\"flex flex-col md:flex-row gap-4\">\n <!-- TODO: Support saved reports -->\n <!--<button mat-button color=\"primary\" (click)=\"onClickSaveReport()\" *ngIf=\"canSave\">\n <mat-icon class=\"mr-8\" fxHide.lt-md>save</mat-icon>\n {{ \"components.query_builder.save_report\" | translate }}\n </button>\n <button mat-button color=\"primary\" (click)=\"onClickUpdateReport()\" *ngIf=\"!canSave\">\n <mat-icon class=\"mr-8\" fxHide.lt-md>save</mat-icon>\n {{ \"components.query_builder.update_report\" | translate }}\n </button>-->\n <button mat-stroked-button color=\"accent\" (click)=\"onClickApply()\">\n {{ \"components.query_builder.update\" | translate }}\n <mat-icon class=\"ml-8\">refresh</mat-icon>\n </button>\n </div>\n </div>\n</div>\n", styles: ["nice-query-builder .rules-container{position:relative}nice-query-builder .rules-container:before{content:\"\";position:absolute;top:32px;bottom:32px;left:46px;width:4px;background:rgba(0,0,0,.12)}nice-query-builder .save-report-button{height:36px}nice-query-builder .add-rule-button{margin-left:28px;margin-right:28px}\n"], components: [{ type: RuleComponent, selector: "nice-rule", inputs: ["filterConfigs"], outputs: ["remove"] }, { type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }], pipes: { "translate": i1$4.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
1665
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QueryBuilderComponent, decorators: [{
1667
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceQueryBuilderComponent, decorators: [{
1666
1668
  type: Component,
1667
1669
  args: [{ selector: "nice-query-builder", encapsulation: ViewEncapsulation.None, providers: [
1668
1670
  {
1669
1671
  provide: NG_VALUE_ACCESSOR,
1670
- useExisting: forwardRef(() => QueryBuilderComponent),
1672
+ useExisting: forwardRef(() => NiceQueryBuilderComponent),
1671
1673
  multi: true
1672
1674
  },
1673
1675
  {
@@ -1690,8 +1692,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
1690
1692
  }] } });
1691
1693
 
1692
1694
  class NiceBaseListComponent {
1693
- constructor(enableQueryBuilder, listLayout, columns, exportsSettings, query, service, activatedRoute, bottomSheet, router, mediaWatcher) {
1695
+ constructor(enableQueryBuilder, icons, listLayout, columns, exportsSettings, query, service, activatedRoute, bottomSheet, router, mediaWatcher) {
1694
1696
  this.enableQueryBuilder = enableQueryBuilder;
1697
+ this.icons = icons;
1695
1698
  this.listLayout = listLayout;
1696
1699
  this.columns = columns;
1697
1700
  this.exportsSettings = exportsSettings;
@@ -1866,24 +1869,27 @@ class NiceBaseListComponent {
1866
1869
  this.columnNames = columns.map(x => x.id);
1867
1870
  }
1868
1871
  }
1869
- NiceBaseListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListComponent, deps: [{ token: ENABLE_QUERY_BUILDER, optional: true }, { token: BASE_LIST_LAYOUT }, { token: TABLE_COLUMNS }, { token: EXPORTS_SETTINGS }, { token: NiceBaseListQuery }, { token: NiceBaseListService }, { token: i3.ActivatedRoute }, { token: i4$1.MatBottomSheet }, { token: i3.Router }, { token: i5.NiceMediaWatcherService }], target: i0.ɵɵFactoryTarget.Component });
1872
+ 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: i3.ActivatedRoute }, { token: i4$1.MatBottomSheet }, { token: i3.Router }, { token: i5.NiceMediaWatcherService }], target: i0.ɵɵFactoryTarget.Component });
1870
1873
  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: [
1871
1874
  NiceBaseListQuery,
1872
1875
  NiceBaseListService,
1873
1876
  NiceBaseListStore
1874
- ], queries: [{ propertyName: "title", first: true, predicate: NiceBaseListTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "table", first: true, predicate: NiceBaseListTableDirective, descendants: true, read: TemplateRef }, { propertyName: "cards", first: true, predicate: NiceBaseListCardsDirective, descendants: true, read: TemplateRef }, { propertyName: "customContent", first: true, predicate: NiceBaseListCustomContentDirective, descendants: true, read: TemplateRef }, { propertyName: "filters", first: true, predicate: NiceBaseListFiltersDirective, descendants: true, read: TemplateRef }, { propertyName: "buttons", predicate: NiceBaseListButtonsDirective }], usesOnChanges: true, ngImport: i0, template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout } }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon>search</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n filter_list\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n filter_list\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon>\n clear\n </mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon>print</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon>cloud_download</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { data: data$ | async }\"></ng-container>\n </div>\n</ng-template>\n", components: [{ type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { type: i9.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: QueryBuilderComponent, selector: "nice-query-builder", inputs: ["filterConfigs", "currentSavedReport", "loading"], outputs: ["close", "createReport", "updateReport"] }, { type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }, { type: i16.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i17.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { type: 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 } });
1877
+ ], queries: [{ propertyName: "title", first: true, predicate: NiceBaseListTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "table", first: true, predicate: NiceBaseListTableDirective, descendants: true, read: TemplateRef }, { propertyName: "cards", first: true, predicate: NiceBaseListCardsDirective, descendants: true, read: TemplateRef }, { propertyName: "customContent", first: true, predicate: NiceBaseListCustomContentDirective, descendants: true, read: TemplateRef }, { propertyName: "filters", first: true, predicate: NiceBaseListFiltersDirective, descendants: true, read: TemplateRef }, { propertyName: "buttons", predicate: NiceBaseListButtonsDirective }], usesOnChanges: true, ngImport: i0, template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout } }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon [svgIcon]=\"icons.search.svgIcon\">{{ icons.search.matIcon }}</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [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=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { data: data$ | async }\"></ng-container>\n </div>\n</ng-template>\n", components: [{ type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { type: i9.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: 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 } });
1875
1878
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListComponent, decorators: [{
1876
1879
  type: Component,
1877
1880
  args: [{ selector: "nice-base-list", providers: [
1878
1881
  NiceBaseListQuery,
1879
1882
  NiceBaseListService,
1880
1883
  NiceBaseListStore
1881
- ], template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout } }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon>search</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n filter_list\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n filter_list\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon>\n clear\n </mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon>print</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon>cloud_download</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { data: data$ | async }\"></ng-container>\n </div>\n</ng-template>\n" }]
1884
+ ], template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout } }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon [svgIcon]=\"icons.search.svgIcon\">{{ icons.search.matIcon }}</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [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=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { data: data$ | async }\"></ng-container>\n </div>\n</ng-template>\n" }]
1882
1885
  }], ctorParameters: function () { return [{ type: undefined, decorators: [{
1883
1886
  type: Optional
1884
1887
  }, {
1885
1888
  type: Inject,
1886
1889
  args: [ENABLE_QUERY_BUILDER]
1890
+ }] }, { type: undefined, decorators: [{
1891
+ type: Inject,
1892
+ args: [BASE_LIST_ICONS]
1887
1893
  }] }, { type: undefined, decorators: [{
1888
1894
  type: Inject,
1889
1895
  args: [BASE_LIST_LAYOUT]
@@ -1971,10 +1977,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
1971
1977
  args: [MAT_DATE_LOCALE]
1972
1978
  }] }, { type: i2$3.Platform }]; } });
1973
1979
 
1974
- class QueryBuilderModule {
1980
+ class NiceQueryBuilderModule {
1975
1981
  }
1976
- QueryBuilderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1977
- QueryBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QueryBuilderModule, declarations: [QueryBuilderComponent,
1982
+ NiceQueryBuilderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceQueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1983
+ NiceQueryBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceQueryBuilderModule, declarations: [NiceQueryBuilderComponent,
1978
1984
  QueryBuilderTriggerDirective,
1979
1985
  FilterSelectionComponent,
1980
1986
  RuleComponent,
@@ -1999,8 +2005,8 @@ QueryBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
1999
2005
  NiceLoadingSpinnerModule,
2000
2006
  NiceTypeaheadModule,
2001
2007
  ReactiveFormsModule,
2002
- NgxMaskModule], exports: [QueryBuilderComponent, QueryBuilderTriggerDirective] });
2003
- QueryBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QueryBuilderModule, providers: [{ provide: DateAdapter, useClass: NiceCustomDateAdapter }], imports: [[
2008
+ NgxMaskModule], exports: [NiceQueryBuilderComponent, QueryBuilderTriggerDirective] });
2009
+ NiceQueryBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceQueryBuilderModule, providers: [{ provide: DateAdapter, useClass: NiceCustomDateAdapter }], imports: [[
2004
2010
  CommonModule,
2005
2011
  FormsModule,
2006
2012
  TranslateModule,
@@ -2019,7 +2025,7 @@ QueryBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
2019
2025
  ReactiveFormsModule,
2020
2026
  NgxMaskModule
2021
2027
  ]] });
2022
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QueryBuilderModule, decorators: [{
2028
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceQueryBuilderModule, decorators: [{
2023
2029
  type: NgModule,
2024
2030
  args: [{
2025
2031
  imports: [
@@ -2042,7 +2048,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
2042
2048
  NgxMaskModule
2043
2049
  ],
2044
2050
  declarations: [
2045
- QueryBuilderComponent,
2051
+ NiceQueryBuilderComponent,
2046
2052
  QueryBuilderTriggerDirective,
2047
2053
  FilterSelectionComponent,
2048
2054
  RuleComponent,
@@ -2054,10 +2060,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
2054
2060
  FilterGroupIconPipe
2055
2061
  ],
2056
2062
  providers: [{ provide: DateAdapter, useClass: NiceCustomDateAdapter }],
2057
- exports: [QueryBuilderComponent, QueryBuilderTriggerDirective]
2063
+ exports: [NiceQueryBuilderComponent, QueryBuilderTriggerDirective]
2058
2064
  }]
2059
2065
  }] });
2060
2066
 
2067
+ const defaultIcons = {
2068
+ search: {
2069
+ matIcon: "search"
2070
+ },
2071
+ queryBuilder: {
2072
+ matIcon: "filter_list"
2073
+ },
2074
+ close: {
2075
+ matIcon: "close"
2076
+ },
2077
+ print: {
2078
+ matIcon: "print"
2079
+ },
2080
+ download: {
2081
+ matIcon: "cloud_download"
2082
+ }
2083
+ };
2084
+
2061
2085
  class NiceBaseListModule {
2062
2086
  static forRoot(options) {
2063
2087
  return {
@@ -2067,6 +2091,13 @@ class NiceBaseListModule {
2067
2091
  provide: BASE_LIST_LAYOUT,
2068
2092
  useValue: options?.layout ?? defaultLayout
2069
2093
  },
2094
+ {
2095
+ provide: BASE_LIST_ICONS,
2096
+ useValue: {
2097
+ ...defaultIcons,
2098
+ ...(options?.icons ?? {})
2099
+ }
2100
+ },
2070
2101
  ...(options?.queryBuilder ? [
2071
2102
  {
2072
2103
  provide: ENABLE_QUERY_BUILDER,
@@ -2152,7 +2183,7 @@ NiceBaseListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
2152
2183
  MatSortModule,
2153
2184
  MatRippleModule,
2154
2185
  MatBottomSheetModule,
2155
- QueryBuilderModule,
2186
+ NiceQueryBuilderModule,
2156
2187
  MatBadgeModule], exports: [NiceBaseListComponent,
2157
2188
  NiceBaseListDirectiveModule] });
2158
2189
  NiceBaseListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListModule, imports: [[
@@ -2172,7 +2203,7 @@ NiceBaseListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
2172
2203
  MatSortModule,
2173
2204
  MatRippleModule,
2174
2205
  MatBottomSheetModule,
2175
- QueryBuilderModule,
2206
+ NiceQueryBuilderModule,
2176
2207
  MatBadgeModule
2177
2208
  ], NiceBaseListDirectiveModule] });
2178
2209
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListModule, decorators: [{
@@ -2195,7 +2226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
2195
2226
  MatSortModule,
2196
2227
  MatRippleModule,
2197
2228
  MatBottomSheetModule,
2198
- QueryBuilderModule,
2229
+ NiceQueryBuilderModule,
2199
2230
  MatBadgeModule
2200
2231
  ],
2201
2232
  declarations: [
@@ -2287,8 +2318,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
2287
2318
  }] }, { type: NiceMultiStateListStore }, { type: i3.ActivatedRoute }, { type: i3.Router }, { type: i0.ApplicationRef }, { type: NiceMultiStateFilterService }]; } });
2288
2319
 
2289
2320
  class NiceMultiStateListComponent extends NiceBaseListComponent {
2290
- constructor(enableQueryBuilder, listLayout, exportsSetting, query, activatedRoute, bottomSheet, router, mediaWatcher, multiStateListService) {
2291
- super(enableQueryBuilder, listLayout, [], exportsSetting, query, multiStateListService, activatedRoute, bottomSheet, router, mediaWatcher);
2321
+ constructor(enableQueryBuilder, icons, listLayout, exportsSetting, query, activatedRoute, bottomSheet, router, mediaWatcher, multiStateListService) {
2322
+ super(enableQueryBuilder, icons, listLayout, [], exportsSetting, query, multiStateListService, activatedRoute, bottomSheet, router, mediaWatcher);
2292
2323
  this.multiStateListService = multiStateListService;
2293
2324
  }
2294
2325
  set state(state) {
@@ -2299,24 +2330,27 @@ class NiceMultiStateListComponent extends NiceBaseListComponent {
2299
2330
  this.setColumn(columns);
2300
2331
  }
2301
2332
  }
2302
- NiceMultiStateListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListComponent, deps: [{ token: ENABLE_QUERY_BUILDER, optional: true }, { token: BASE_LIST_LAYOUT }, { token: EXPORTS_SETTINGS }, { token: NiceMultiStateListQuery }, { token: i3.ActivatedRoute }, { token: i4$1.MatBottomSheet }, { token: i3.Router }, { token: i5.NiceMediaWatcherService }, { token: NiceMultiStateListService }], target: i0.ɵɵFactoryTarget.Component });
2333
+ NiceMultiStateListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListComponent, deps: [{ token: ENABLE_QUERY_BUILDER, optional: true }, { token: BASE_LIST_ICONS }, { token: BASE_LIST_LAYOUT }, { token: EXPORTS_SETTINGS }, { token: NiceMultiStateListQuery }, { token: i3.ActivatedRoute }, { token: i4$1.MatBottomSheet }, { token: i3.Router }, { token: i5.NiceMediaWatcherService }, { token: NiceMultiStateListService }], target: i0.ɵɵFactoryTarget.Component });
2303
2334
  NiceMultiStateListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceMultiStateListComponent, selector: "nice-multi-state-list", inputs: { state: "state" }, providers: [
2304
2335
  NiceMultiStateListQuery,
2305
2336
  NiceMultiStateListService,
2306
2337
  NiceMultiStateListStore
2307
- ], usesInheritance: true, ngImport: i0, template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout } }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon>search</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n filter_list\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n filter_list\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon>\n clear\n </mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon>print</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon>cloud_download</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { data: data$ | async }\"></ng-container>\n </div>\n</ng-template>\n", components: [{ type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { type: i9.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: QueryBuilderComponent, selector: "nice-query-builder", inputs: ["filterConfigs", "currentSavedReport", "loading"], outputs: ["close", "createReport", "updateReport"] }, { type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }, { type: i16.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i17.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { type: 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 } });
2338
+ ], usesInheritance: true, ngImport: i0, template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout } }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon [svgIcon]=\"icons.search.svgIcon\">{{ icons.search.matIcon }}</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [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=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { data: data$ | async }\"></ng-container>\n </div>\n</ng-template>\n", components: [{ type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { type: i9.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: 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 } });
2308
2339
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListComponent, decorators: [{
2309
2340
  type: Component,
2310
2341
  args: [{ selector: "nice-multi-state-list", providers: [
2311
2342
  NiceMultiStateListQuery,
2312
2343
  NiceMultiStateListService,
2313
2344
  NiceMultiStateListStore
2314
- ], template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout } }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon>search</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n filter_list\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n filter_list\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon>\n clear\n </mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon>print</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon>cloud_download</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { data: data$ | async }\"></ng-container>\n </div>\n</ng-template>\n" }]
2345
+ ], template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout } }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon [svgIcon]=\"icons.search.svgIcon\">{{ icons.search.matIcon }}</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [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=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { data: data$ | async }\"></ng-container>\n </div>\n</ng-template>\n" }]
2315
2346
  }], ctorParameters: function () { return [{ type: undefined, decorators: [{
2316
2347
  type: Optional
2317
2348
  }, {
2318
2349
  type: Inject,
2319
2350
  args: [ENABLE_QUERY_BUILDER]
2351
+ }] }, { type: undefined, decorators: [{
2352
+ type: Inject,
2353
+ args: [BASE_LIST_ICONS]
2320
2354
  }] }, { type: undefined, decorators: [{
2321
2355
  type: Inject,
2322
2356
  args: [BASE_LIST_LAYOUT]
@@ -2384,7 +2418,7 @@ NiceMultiStateListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0"
2384
2418
  MatSortModule,
2385
2419
  MatRippleModule,
2386
2420
  MatBottomSheetModule,
2387
- QueryBuilderModule,
2421
+ NiceQueryBuilderModule,
2388
2422
  MatBadgeModule], exports: [NiceMultiStateListComponent,
2389
2423
  NiceBaseListDirectiveModule] });
2390
2424
  NiceMultiStateListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListModule, imports: [[
@@ -2404,7 +2438,7 @@ NiceMultiStateListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0"
2404
2438
  MatSortModule,
2405
2439
  MatRippleModule,
2406
2440
  MatBottomSheetModule,
2407
- QueryBuilderModule,
2441
+ NiceQueryBuilderModule,
2408
2442
  MatBadgeModule
2409
2443
  ], NiceBaseListDirectiveModule] });
2410
2444
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListModule, decorators: [{
@@ -2427,7 +2461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
2427
2461
  MatSortModule,
2428
2462
  MatRippleModule,
2429
2463
  MatBottomSheetModule,
2430
- QueryBuilderModule,
2464
+ NiceQueryBuilderModule,
2431
2465
  MatBadgeModule
2432
2466
  ],
2433
2467
  declarations: [
@@ -2456,5 +2490,5 @@ String.prototype.toTableColumn = function (sortableOrOptions, nullLast) {
2456
2490
  * Generated bundle index. Do not edit.
2457
2491
  */
2458
2492
 
2459
- export { DateFilterComponent, FilterComponent, FilterGroupIconPipe, FilterOperatorTypes, FilterSelectionComponent, FilterType, FilterUtils, LayoutContent, NiceBaseListButtonsDirective, NiceBaseListCardsDirective, NiceBaseListComponent, NiceBaseListCustomContentDirective, NiceBaseListDirectiveModule, NiceBaseListFiltersDirective, NiceBaseListModule, NiceBaseListQuery, NiceBaseListService, NiceBaseListStore, NiceBaseListTableDirective, NiceBaseListTitleDirective, NiceCustomDateAdapter, NiceFilterApi, NiceFilterGroupService, NiceFilterService, NiceListState, NiceMultiStateFilterService, NiceMultiStateListComponent, NiceMultiStateListModule, NiceMultiStateListQuery, NiceMultiStateListService, NiceMultiStateListStore, NiceSavedReportService, NumberFilterComponent, QBFilterUtils, QueryBuilderComponent, QueryBuilderModule, QueryBuilderTriggerDirective, RadioFilterComponent, RuleComponent, SelectFilterComponent, StringUtils, TableColumns, TextFilterComponent, defaultLayout, initialBaseListState, initialValue };
2493
+ export { DateFilterComponent, FilterComponent, FilterGroupIconPipe, FilterOperatorTypes, FilterSelectionComponent, FilterType, FilterUtils, LayoutContent, NiceBaseListButtonsDirective, NiceBaseListCardsDirective, NiceBaseListComponent, NiceBaseListCustomContentDirective, NiceBaseListDirectiveModule, NiceBaseListFiltersDirective, NiceBaseListModule, NiceBaseListQuery, NiceBaseListService, NiceBaseListStore, NiceBaseListTableDirective, NiceBaseListTitleDirective, NiceCustomDateAdapter, NiceFilterApi, NiceFilterGroupService, NiceFilterService, NiceListState, NiceMultiStateFilterService, NiceMultiStateListComponent, NiceMultiStateListModule, NiceMultiStateListQuery, NiceMultiStateListService, NiceMultiStateListStore, NiceQueryBuilderComponent, NiceQueryBuilderModule, NiceSavedReportService, NumberFilterComponent, QBFilterUtils, QueryBuilderTriggerDirective, RadioFilterComponent, RuleComponent, SelectFilterComponent, StringUtils, TableColumns, TextFilterComponent, defaultLayout, initialBaseListState, initialValue };
2460
2494
  //# sourceMappingURL=recursyve-nice-data-filter-kit.mjs.map