@recursyve/nice-data-filter-kit 13.0.15 → 13.1.0
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.
- package/esm2020/lib/components/base-list/base-list.component.mjs +6 -3
- package/esm2020/lib/components/base-list/directives/base-list-buttons.directive.mjs +1 -1
- package/esm2020/lib/components/base-list/store/base-list.service.mjs +22 -10
- package/esm2020/lib/components/multi-state-list/multi-state-list.component.mjs +3 -3
- package/esm2020/lib/models/filter.model.mjs +1 -1
- package/esm2020/lib/utils/filter.utils.mjs +3 -2
- package/esm2020/lib/utils/order.utils.mjs +28 -0
- package/esm2020/lib/utils/public-api.mjs +2 -1
- package/fesm2015/recursyve-nice-data-filter-kit.mjs +52 -13
- package/fesm2015/recursyve-nice-data-filter-kit.mjs.map +1 -1
- package/fesm2020/recursyve-nice-data-filter-kit.mjs +57 -15
- package/fesm2020/recursyve-nice-data-filter-kit.mjs.map +1 -1
- package/lib/components/base-list/base-list.component.d.ts +1 -0
- package/lib/components/base-list/directives/base-list-buttons.directive.d.ts +1 -1
- package/lib/components/base-list/store/base-list.service.d.ts +2 -0
- package/lib/models/filter.model.d.ts +4 -7
- package/lib/utils/order.utils.d.ts +7 -0
- package/lib/utils/public-api.d.ts +1 -0
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ import * as i5 from '@recursyve/nice-ui-kit.v2';
|
|
|
3
3
|
import { isNullOrUndefined, ObjectUtils, FileUtils, ArrayUtils, ExportBottomSheetComponent, NiceLoadingSpinnerModule, NiceTypeaheadModule, NiceExportBottomSheetModule } from '@recursyve/nice-ui-kit.v2';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
5
|
import { Directive, Input, NgModule, Injectable, InjectionToken, Optional, Inject, Component, forwardRef, ViewEncapsulation, Pipe, EventEmitter, ChangeDetectionStrategy, Output, HostListener, TemplateRef, ContentChild, ContentChildren } from '@angular/core';
|
|
6
|
-
import { Store, StoreConfig, Query, arrayUpsert, arrayRemove } from '@datorama/akita';
|
|
6
|
+
import { Store, StoreConfig, Query, arrayAdd, arrayUpsert, arrayRemove } from '@datorama/akita';
|
|
7
7
|
import { combineLatest, Subject, firstValueFrom, of } from 'rxjs';
|
|
8
8
|
import { map, takeUntil, debounceTime, switchMap, distinctUntilChanged } from 'rxjs/operators';
|
|
9
9
|
import { __decorate, __metadata } from 'tslib';
|
|
@@ -454,6 +454,34 @@ const defaultLayout = {
|
|
|
454
454
|
}
|
|
455
455
|
};
|
|
456
456
|
|
|
457
|
+
class OrderUtils {
|
|
458
|
+
static mergeOrder(oldOrder, newOrder) {
|
|
459
|
+
if (oldOrder && !newOrder)
|
|
460
|
+
return undefined;
|
|
461
|
+
return {
|
|
462
|
+
...oldOrder,
|
|
463
|
+
...newOrder
|
|
464
|
+
};
|
|
465
|
+
}
|
|
466
|
+
static combineOrders(firstOrder, secondOrder, opts = { uniqueFromBack: false }) {
|
|
467
|
+
if (!Array.isArray(firstOrder))
|
|
468
|
+
firstOrder = [firstOrder];
|
|
469
|
+
if (!Array.isArray(secondOrder))
|
|
470
|
+
secondOrder = [secondOrder];
|
|
471
|
+
const orders = [...firstOrder, ...secondOrder].filter(order => order);
|
|
472
|
+
// Make sure order columns are unique
|
|
473
|
+
if (opts?.uniqueFromBack) {
|
|
474
|
+
// Keep unique values from the back of the array
|
|
475
|
+
return [...new Map(orders.map(order => [order.column, order])).values()];
|
|
476
|
+
}
|
|
477
|
+
else {
|
|
478
|
+
// Keep unique values from the front of the array
|
|
479
|
+
const columns = orders.map(order => order.column);
|
|
480
|
+
return orders.filter((order, index) => columns.indexOf(order.column) === index);
|
|
481
|
+
}
|
|
482
|
+
}
|
|
483
|
+
}
|
|
484
|
+
|
|
457
485
|
class FilterUtils {
|
|
458
486
|
static parametersToRequest(filterParameters) {
|
|
459
487
|
return {
|
|
@@ -468,7 +496,7 @@ class FilterUtils {
|
|
|
468
496
|
condition: "and",
|
|
469
497
|
rules: filterParameters.rules ?? []
|
|
470
498
|
},
|
|
471
|
-
order: filterParameters.order
|
|
499
|
+
order: OrderUtils.combineOrders(filterParameters.order, filterParameters.fallbackOrder),
|
|
472
500
|
data: filterParameters.data
|
|
473
501
|
};
|
|
474
502
|
}
|
|
@@ -925,7 +953,7 @@ class NiceBaseListService {
|
|
|
925
953
|
this.loadData(params, false);
|
|
926
954
|
}
|
|
927
955
|
else {
|
|
928
|
-
this.setParameters(params, false);
|
|
956
|
+
this.setParameters(params, false, true);
|
|
929
957
|
}
|
|
930
958
|
}
|
|
931
959
|
this.queryParamsLoaded$.next(null);
|
|
@@ -1102,6 +1130,18 @@ class NiceBaseListService {
|
|
|
1102
1130
|
showQueryBuilder: !state.showQueryBuilder
|
|
1103
1131
|
}));
|
|
1104
1132
|
}
|
|
1133
|
+
addListValue(value, opts) {
|
|
1134
|
+
const { filterResult } = this.store.getValue();
|
|
1135
|
+
if (!filterResult) {
|
|
1136
|
+
return;
|
|
1137
|
+
}
|
|
1138
|
+
this.store.update({
|
|
1139
|
+
filterResult: {
|
|
1140
|
+
...filterResult,
|
|
1141
|
+
values: arrayAdd(filterResult.values, value, opts)
|
|
1142
|
+
}
|
|
1143
|
+
});
|
|
1144
|
+
}
|
|
1105
1145
|
updateListValue(value, key = "id") {
|
|
1106
1146
|
const { filterResult } = this.store.getValue();
|
|
1107
1147
|
if (!filterResult) {
|
|
@@ -1158,15 +1198,14 @@ class NiceBaseListService {
|
|
|
1158
1198
|
return {
|
|
1159
1199
|
...filterParameters,
|
|
1160
1200
|
...parameters,
|
|
1161
|
-
order: filterParameters.order
|
|
1162
|
-
|
|
1163
|
-
: {
|
|
1164
|
-
...filterParameters.order,
|
|
1165
|
-
...parameters.order
|
|
1166
|
-
}
|
|
1201
|
+
order: OrderUtils.mergeOrder(filterParameters.order, parameters.order),
|
|
1202
|
+
fallbackOrder: OrderUtils.combineOrders(filterParameters.fallbackOrder, parameters.fallbackOrder, { uniqueFromBack: true })
|
|
1167
1203
|
};
|
|
1168
1204
|
}
|
|
1169
|
-
setParameters(parameters, updateQueryParams = true) {
|
|
1205
|
+
setParameters(parameters, updateQueryParams = true, merge = false) {
|
|
1206
|
+
if (merge) {
|
|
1207
|
+
parameters = this.mergeParameters(parameters);
|
|
1208
|
+
}
|
|
1170
1209
|
this.store.setParameters(parameters);
|
|
1171
1210
|
if (updateQueryParams) {
|
|
1172
1211
|
this.updateQueryParams(QueryParamsUtils.filterParametersToParamsMap(parameters));
|
|
@@ -1759,6 +1798,9 @@ class NiceBaseListComponent {
|
|
|
1759
1798
|
get suffixButtons() {
|
|
1760
1799
|
return this.buttons?.find(x => x.position === "suffix")?.template;
|
|
1761
1800
|
}
|
|
1801
|
+
get searchButtons() {
|
|
1802
|
+
return this.buttons?.find(x => x.position === "search")?.template;
|
|
1803
|
+
}
|
|
1762
1804
|
async ngOnInit() {
|
|
1763
1805
|
await this.service.init();
|
|
1764
1806
|
this.service.loadQueryParams(this.autoLoad);
|
|
@@ -1893,14 +1935,14 @@ NiceBaseListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
|
|
|
1893
1935
|
NiceBaseListQuery,
|
|
1894
1936
|
NiceBaseListService,
|
|
1895
1937
|
NiceBaseListStore
|
|
1896
|
-
], queries: [{ propertyName: "title", first: true, predicate: NiceBaseListTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "table", first: true, predicate: NiceBaseListTableDirective, descendants: true, read: TemplateRef }, { propertyName: "cards", first: true, predicate: NiceBaseListCardsDirective, descendants: true, read: TemplateRef }, { propertyName: "customContent", first: true, predicate: NiceBaseListCustomContentDirective, descendants: true, read: TemplateRef }, { propertyName: "filters", first: true, predicate: NiceBaseListFiltersDirective, descendants: true, read: TemplateRef }, { propertyName: "emptyState", first: true, predicate: NiceBaseListEmptyStateDirective, descendants: true, read: TemplateRef }, { propertyName: "buttons", predicate: NiceBaseListButtonsDirective }], usesOnChanges: true, ngImport: i0, template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl }\"></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=\"(isEmpty$ | async) && emptyState; else showData\">\n <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n </ng-container>\n <ng-template #showData>\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></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-template>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\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 } });
|
|
1938
|
+
], queries: [{ propertyName: "title", first: true, predicate: NiceBaseListTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "table", first: true, predicate: NiceBaseListTableDirective, descendants: true, read: TemplateRef }, { propertyName: "cards", first: true, predicate: NiceBaseListCardsDirective, descendants: true, read: TemplateRef }, { propertyName: "customContent", first: true, predicate: NiceBaseListCustomContentDirective, descendants: true, read: TemplateRef }, { propertyName: "filters", first: true, predicate: NiceBaseListFiltersDirective, descendants: true, read: TemplateRef }, { propertyName: "emptyState", first: true, predicate: NiceBaseListEmptyStateDirective, descendants: true, read: TemplateRef }, { propertyName: "buttons", predicate: NiceBaseListButtonsDirective }], usesOnChanges: true, ngImport: i0, template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl }\"></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\n <ng-container *ngIf=\"searchButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"searchButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.print.svgIcon\">{{ icons.print.matIcon }}</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"(isEmpty$ | async) && emptyState; else showData\">\n <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n </ng-container>\n <ng-template #showData>\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></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-template>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\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: { $implicit: data$ | async, data: data$ | async, total: recordsFiltered$ | 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 } });
|
|
1897
1939
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListComponent, decorators: [{
|
|
1898
1940
|
type: Component,
|
|
1899
1941
|
args: [{ selector: "nice-base-list", providers: [
|
|
1900
1942
|
NiceBaseListQuery,
|
|
1901
1943
|
NiceBaseListService,
|
|
1902
1944
|
NiceBaseListStore
|
|
1903
|
-
], 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=\"(isEmpty$ | async) && emptyState; else showData\">\n <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n </ng-container>\n <ng-template #showData>\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></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-template>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\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" }]
|
|
1945
|
+
], 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\n <ng-container *ngIf=\"searchButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"searchButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.print.svgIcon\">{{ icons.print.matIcon }}</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"(isEmpty$ | async) && emptyState; else showData\">\n <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n </ng-container>\n <ng-template #showData>\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></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-template>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\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: { $implicit: data$ | async, data: data$ | async, total: recordsFiltered$ | async }\"></ng-container>\n </div>\n</ng-template>\n" }]
|
|
1904
1946
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
1905
1947
|
type: Optional
|
|
1906
1948
|
}, {
|
|
@@ -2357,14 +2399,14 @@ NiceMultiStateListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
|
|
|
2357
2399
|
NiceMultiStateListQuery,
|
|
2358
2400
|
NiceMultiStateListService,
|
|
2359
2401
|
NiceMultiStateListStore
|
|
2360
|
-
], 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=\"(isEmpty$ | async) && emptyState; else showData\">\n <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n </ng-container>\n <ng-template #showData>\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></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-template>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\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 } });
|
|
2402
|
+
], 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\n <ng-container *ngIf=\"searchButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"searchButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.print.svgIcon\">{{ icons.print.matIcon }}</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"(isEmpty$ | async) && emptyState; else showData\">\n <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n </ng-container>\n <ng-template #showData>\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></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-template>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\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: { $implicit: data$ | async, data: data$ | async, total: recordsFiltered$ | 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 } });
|
|
2361
2403
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListComponent, decorators: [{
|
|
2362
2404
|
type: Component,
|
|
2363
2405
|
args: [{ selector: "nice-multi-state-list", providers: [
|
|
2364
2406
|
NiceMultiStateListQuery,
|
|
2365
2407
|
NiceMultiStateListService,
|
|
2366
2408
|
NiceMultiStateListStore
|
|
2367
|
-
], 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=\"(isEmpty$ | async) && emptyState; else showData\">\n <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n </ng-container>\n <ng-template #showData>\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></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-template>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\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" }]
|
|
2409
|
+
], 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\n <ng-container *ngIf=\"searchButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"searchButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.print.svgIcon\">{{ icons.print.matIcon }}</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"(isEmpty$ | async) && emptyState; else showData\">\n <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n </ng-container>\n <ng-template #showData>\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></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-template>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\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: { $implicit: data$ | async, data: data$ | async, total: recordsFiltered$ | async }\"></ng-container>\n </div>\n</ng-template>\n" }]
|
|
2368
2410
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
2369
2411
|
type: Optional
|
|
2370
2412
|
}, {
|
|
@@ -2512,5 +2554,5 @@ String.prototype.toTableColumn = function (sortableOrOptions, nullLast) {
|
|
|
2512
2554
|
* Generated bundle index. Do not edit.
|
|
2513
2555
|
*/
|
|
2514
2556
|
|
|
2515
|
-
export { DateFilterComponent, FilterComponent, FilterGroupIconPipe, FilterOperatorTypes, FilterSelectionComponent, FilterType, FilterUtils, LayoutContent, NiceBaseListButtonsDirective, NiceBaseListCardsDirective, NiceBaseListComponent, NiceBaseListCustomContentDirective, NiceBaseListDirectiveModule, NiceBaseListEmptyStateDirective, NiceBaseListFiltersDirective, NiceBaseListModule, NiceBaseListQuery, NiceBaseListService, NiceBaseListStore, NiceBaseListTableDirective, NiceBaseListTitleDirective, NiceCustomDateAdapter, NiceFilterApi, NiceFilterGroupService, NiceFilterService, NiceListState, NiceMultiStateFilterService, NiceMultiStateListComponent, NiceMultiStateListModule, NiceMultiStateListQuery, NiceMultiStateListService, NiceMultiStateListStore, NiceQueryBuilderComponent, NiceQueryBuilderModule, NiceSavedReportService, NumberFilterComponent, QBFilterUtils, QueryBuilderTriggerDirective, RadioFilterComponent, RuleComponent, SelectFilterComponent, StringUtils, TableColumns, TextFilterComponent, defaultLayout, initialBaseListState, initialValue };
|
|
2557
|
+
export { DateFilterComponent, FilterComponent, FilterGroupIconPipe, FilterOperatorTypes, FilterSelectionComponent, FilterType, FilterUtils, LayoutContent, NiceBaseListButtonsDirective, NiceBaseListCardsDirective, NiceBaseListComponent, NiceBaseListCustomContentDirective, NiceBaseListDirectiveModule, NiceBaseListEmptyStateDirective, NiceBaseListFiltersDirective, NiceBaseListModule, NiceBaseListQuery, NiceBaseListService, NiceBaseListStore, NiceBaseListTableDirective, NiceBaseListTitleDirective, NiceCustomDateAdapter, NiceFilterApi, NiceFilterGroupService, NiceFilterService, NiceListState, NiceMultiStateFilterService, NiceMultiStateListComponent, NiceMultiStateListModule, NiceMultiStateListQuery, NiceMultiStateListService, NiceMultiStateListStore, NiceQueryBuilderComponent, NiceQueryBuilderModule, NiceSavedReportService, NumberFilterComponent, OrderUtils, QBFilterUtils, QueryBuilderTriggerDirective, RadioFilterComponent, RuleComponent, SelectFilterComponent, StringUtils, TableColumns, TextFilterComponent, defaultLayout, initialBaseListState, initialValue };
|
|
2516
2558
|
//# sourceMappingURL=recursyve-nice-data-filter-kit.mjs.map
|