@recursyve/nice-data-filter-kit 13.0.7 → 13.0.10
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 +10 -6
- package/esm2020/lib/components/base-list/base-list.constant.mjs +3 -1
- package/esm2020/lib/components/base-list/base-list.module.mjs +18 -6
- package/esm2020/lib/components/base-list/models/icons.model.mjs +18 -0
- package/esm2020/lib/components/base-list/store/base-list.service.mjs +11 -6
- package/esm2020/lib/components/base-list/store/base-list.store.mjs +12 -6
- package/esm2020/lib/components/multi-state-list/multi-state-list.component.mjs +10 -7
- package/esm2020/lib/components/multi-state-list/multi-state-list.module.mjs +5 -5
- package/esm2020/lib/components/multi-state-list/store/multi-state-list.store.mjs +2 -2
- package/esm2020/lib/components/query-builder/query-builder.component.mjs +7 -7
- package/esm2020/lib/components/query-builder/query-builder.module.mjs +10 -10
- package/esm2020/lib/components/query-builder/rule/components/filter.component.mjs +2 -1
- package/fesm2015/recursyve-nice-data-filter-kit.mjs +104 -55
- package/fesm2015/recursyve-nice-data-filter-kit.mjs.map +1 -1
- package/fesm2020/recursyve-nice-data-filter-kit.mjs +105 -54
- package/fesm2020/recursyve-nice-data-filter-kit.mjs.map +1 -1
- package/lib/components/base-list/base-list.component.d.ts +8 -5
- package/lib/components/base-list/base-list.constant.d.ts +2 -0
- package/lib/components/base-list/base-list.module.d.ts +5 -1
- package/lib/components/base-list/models/icons.model.d.ts +15 -0
- package/lib/components/base-list/store/base-list.service.d.ts +6 -5
- package/lib/components/base-list/store/base-list.store.d.ts +2 -2
- package/lib/components/multi-state-list/multi-state-list.component.d.ts +3 -2
- package/lib/components/multi-state-list/multi-state-list.module.d.ts +1 -1
- package/lib/components/query-builder/query-builder.component.d.ts +3 -3
- package/lib/components/query-builder/query-builder.module.d.ts +4 -4
- package/package.json +1 -1
|
@@ -5,7 +5,7 @@ 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
6
|
import { Store, StoreConfig, Query, arrayUpsert, arrayRemove } from '@datorama/akita';
|
|
7
7
|
import { __decorate, __metadata } from 'tslib';
|
|
8
|
-
import * as
|
|
8
|
+
import * as i2 from '@angular/router';
|
|
9
9
|
import { RouterModule } from '@angular/router';
|
|
10
10
|
import { Subject, firstValueFrom, of } from 'rxjs';
|
|
11
11
|
import { takeUntil, map, debounceTime, switchMap, distinctUntilChanged } from 'rxjs/operators';
|
|
@@ -28,7 +28,7 @@ import * as i5$2 from '@angular/material/select';
|
|
|
28
28
|
import { MatSelectModule } from '@angular/material/select';
|
|
29
29
|
import * as i5$1 from '@angular/material/core';
|
|
30
30
|
import { NativeDateAdapter, MAT_DATE_LOCALE, MatRippleModule, DateAdapter } from '@angular/material/core';
|
|
31
|
-
import * as i2 from '@angular/material/input';
|
|
31
|
+
import * as i2$1 from '@angular/material/input';
|
|
32
32
|
import { MatInputModule } from '@angular/material/input';
|
|
33
33
|
import * as i4 from 'ngx-mask';
|
|
34
34
|
import { NgxMaskModule } from 'ngx-mask';
|
|
@@ -36,13 +36,13 @@ import * as i1$2 from '@angular/material/radio';
|
|
|
36
36
|
import { MatRadioModule } from '@angular/material/radio';
|
|
37
37
|
import * as i13 from '@angular/common';
|
|
38
38
|
import { CommonModule } from '@angular/common';
|
|
39
|
-
import * as i2$
|
|
39
|
+
import * as i2$2 from '@angular/material/datepicker';
|
|
40
40
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
41
41
|
import * as i1$3 from '@angular/cdk/overlay';
|
|
42
42
|
import { OverlayModule } from '@angular/cdk/overlay';
|
|
43
|
-
import * as i2$
|
|
43
|
+
import * as i2$4 from '@angular/cdk/platform';
|
|
44
44
|
import { ComponentPortal } from '@angular/cdk/portal';
|
|
45
|
-
import * as i2$
|
|
45
|
+
import * as i2$3 from '@angular/material/list';
|
|
46
46
|
import { MatListModule } from '@angular/material/list';
|
|
47
47
|
import * as i1$4 from '@ngx-translate/core';
|
|
48
48
|
import { TranslateModule } from '@ngx-translate/core';
|
|
@@ -582,7 +582,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
582
582
|
type: Injectable
|
|
583
583
|
}], ctorParameters: function () { return [{ type: NiceSavedReportsApi }]; } });
|
|
584
584
|
|
|
585
|
+
const BASE_LIST_ICONS = new InjectionToken("base_list_icons");
|
|
585
586
|
const BASE_LIST_LAYOUT = new InjectionToken("base_list_layout");
|
|
587
|
+
const DEFAULT_RULES = new InjectionToken("default_rules");
|
|
586
588
|
const DEFAULT_PARAMETERS = new InjectionToken("default_parameters");
|
|
587
589
|
const LIST_TABLE = new InjectionToken("list_table");
|
|
588
590
|
const TABLE_COLUMNS = new InjectionToken("table_columns");
|
|
@@ -608,13 +610,14 @@ const initialBaseListState = {
|
|
|
608
610
|
defaultRules: []
|
|
609
611
|
};
|
|
610
612
|
let NiceBaseListStore = class NiceBaseListStore extends Store {
|
|
611
|
-
constructor(parameters) {
|
|
613
|
+
constructor(parameters, defaultRules) {
|
|
612
614
|
super({
|
|
613
615
|
...initialBaseListState,
|
|
614
616
|
filterParameters: {
|
|
615
617
|
...initialBaseListState.filterParameters,
|
|
616
618
|
...(parameters ?? {})
|
|
617
|
-
}
|
|
619
|
+
},
|
|
620
|
+
defaultRules
|
|
618
621
|
});
|
|
619
622
|
}
|
|
620
623
|
setFilterConfigLoading(loading) {
|
|
@@ -649,11 +652,11 @@ let NiceBaseListStore = class NiceBaseListStore extends Store {
|
|
|
649
652
|
});
|
|
650
653
|
}
|
|
651
654
|
};
|
|
652
|
-
NiceBaseListStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListStore, deps: [{ token: DEFAULT_PARAMETERS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
655
|
+
NiceBaseListStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListStore, deps: [{ token: DEFAULT_PARAMETERS, optional: true }, { token: DEFAULT_RULES, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
653
656
|
NiceBaseListStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListStore });
|
|
654
657
|
NiceBaseListStore = __decorate([
|
|
655
658
|
StoreConfig({ name: "base-list", resettable: true }),
|
|
656
|
-
__metadata("design:paramtypes", [Object])
|
|
659
|
+
__metadata("design:paramtypes", [Object, Array])
|
|
657
660
|
], NiceBaseListStore);
|
|
658
661
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListStore, decorators: [{
|
|
659
662
|
type: Injectable
|
|
@@ -662,6 +665,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
662
665
|
}, {
|
|
663
666
|
type: Inject,
|
|
664
667
|
args: [DEFAULT_PARAMETERS]
|
|
668
|
+
}] }, { type: undefined, decorators: [{
|
|
669
|
+
type: Optional
|
|
670
|
+
}, {
|
|
671
|
+
type: Inject,
|
|
672
|
+
args: [DEFAULT_RULES]
|
|
665
673
|
}] }]; } });
|
|
666
674
|
|
|
667
675
|
class NiceBaseListQuery extends Query {
|
|
@@ -827,6 +835,9 @@ class NiceBaseListService {
|
|
|
827
835
|
this.unsubscribeAll$ = new Subject();
|
|
828
836
|
this.loadingData = false;
|
|
829
837
|
}
|
|
838
|
+
get filter() {
|
|
839
|
+
return this.filterService;
|
|
840
|
+
}
|
|
830
841
|
async init() {
|
|
831
842
|
this.store.setFilterConfigLoading(true);
|
|
832
843
|
try {
|
|
@@ -1135,11 +1146,14 @@ class NiceBaseListService {
|
|
|
1135
1146
|
}
|
|
1136
1147
|
}
|
|
1137
1148
|
}
|
|
1138
|
-
NiceBaseListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListService, deps: [{ token: NiceBaseListStore }, { token: NiceFilterService }, { token:
|
|
1149
|
+
NiceBaseListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListService, deps: [{ token: NiceBaseListStore }, { token: NiceFilterService }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1139
1150
|
NiceBaseListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListService });
|
|
1140
1151
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListService, decorators: [{
|
|
1141
1152
|
type: Injectable
|
|
1142
|
-
}], ctorParameters: function () { return [{ type: NiceBaseListStore }, { type:
|
|
1153
|
+
}], ctorParameters: function () { return [{ type: NiceBaseListStore }, { type: undefined, decorators: [{
|
|
1154
|
+
type: Inject,
|
|
1155
|
+
args: [NiceFilterService]
|
|
1156
|
+
}] }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: i0.ApplicationRef }]; } });
|
|
1143
1157
|
|
|
1144
1158
|
class QueryRuleForm {
|
|
1145
1159
|
constructor(rule) {
|
|
@@ -1241,6 +1255,7 @@ class FilterComponent {
|
|
|
1241
1255
|
this._value = value;
|
|
1242
1256
|
}
|
|
1243
1257
|
onValueChange(value) {
|
|
1258
|
+
this._value = value;
|
|
1244
1259
|
if (this.valueIndex < 0) {
|
|
1245
1260
|
this.propagateChanges(value);
|
|
1246
1261
|
}
|
|
@@ -1269,7 +1284,7 @@ TextFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
|
|
|
1269
1284
|
useExisting: forwardRef(() => TextFilterComponent),
|
|
1270
1285
|
multi: true
|
|
1271
1286
|
}
|
|
1272
|
-
], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"flex-auto\">\n <input matInput [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" [mask]=\"(filterConfig?.mask) || ''\" [validation]=\"false\" type=\"text\" />\n</mat-form-field>\n", components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1287
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"flex-auto\">\n <input matInput [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" [mask]=\"(filterConfig?.mask) || ''\" [validation]=\"false\" type=\"text\" />\n</mat-form-field>\n", components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1273
1288
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TextFilterComponent, decorators: [{
|
|
1274
1289
|
type: Component,
|
|
1275
1290
|
args: [{ selector: "nice-text-filter", encapsulation: ViewEncapsulation.None, providers: [
|
|
@@ -1292,7 +1307,7 @@ NumberFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
|
|
|
1292
1307
|
useExisting: forwardRef(() => NumberFilterComponent),
|
|
1293
1308
|
multi: true
|
|
1294
1309
|
}
|
|
1295
|
-
], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"flex-auto\">\n <input matInput [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" type=\"number\" />\n</mat-form-field>\n", components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1310
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"flex-auto\">\n <input matInput [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" type=\"number\" />\n</mat-form-field>\n", components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1296
1311
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NumberFilterComponent, decorators: [{
|
|
1297
1312
|
type: Component,
|
|
1298
1313
|
args: [{ selector: "nice-number-filter", encapsulation: ViewEncapsulation.None, providers: [
|
|
@@ -1408,7 +1423,7 @@ DateFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
|
|
|
1408
1423
|
useExisting: forwardRef(() => DateFilterComponent),
|
|
1409
1424
|
multi: true
|
|
1410
1425
|
}
|
|
1411
|
-
], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"flex-auto\">\n <input matInput [matDatepicker]=\"picker\" [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" />\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n", components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$
|
|
1426
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"flex-auto\">\n <input matInput [matDatepicker]=\"picker\" [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\" />\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n", components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.MatSuffix, selector: "[matSuffix]" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1412
1427
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DateFilterComponent, decorators: [{
|
|
1413
1428
|
type: Component,
|
|
1414
1429
|
args: [{ selector: "nice-date-filter", encapsulation: ViewEncapsulation.None, providers: [
|
|
@@ -1460,7 +1475,7 @@ class FilterSelectionComponent {
|
|
|
1460
1475
|
}
|
|
1461
1476
|
}
|
|
1462
1477
|
FilterSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FilterSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1463
|
-
FilterSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: FilterSelectionComponent, selector: "nice-filter-selection", inputs: { filterConfigs: "filterConfigs", loading: "loading" }, outputs: { filterSelected: "filterSelected" }, ngImport: i0, template: "<mat-card class=\"flex flex-row flex-wrap filter-selection-container\" [niceLoadingOverlay]=\"loading\">\n <mat-list class=\"flex flex-col flex-full\" [class.double-groups]=\"filterGroups.length > 1\" *ngFor=\"let group of filterGroups\">\n <mat-list-item>\n <i mat-list-icon class=\"text-accent fal\" [ngClass]=\"group[0].key | filterGroupIcon\"></i>\n <strong mat-line>{{ group[0].name }}</strong>\n </mat-list-item>\n <mat-list-item (click)=\"selectFilter(filter)\" mat-ripple class=\"filter\" *ngFor=\"let filter of group[1]\">\n {{ filter?.name }}\n </mat-list-item>\n </mat-list>\n</mat-card>\n", components: [{ type: i9.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2$
|
|
1478
|
+
FilterSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: FilterSelectionComponent, selector: "nice-filter-selection", inputs: { filterConfigs: "filterConfigs", loading: "loading" }, outputs: { filterSelected: "filterSelected" }, ngImport: i0, template: "<mat-card class=\"flex flex-row flex-wrap filter-selection-container\" [niceLoadingOverlay]=\"loading\">\n <mat-list class=\"flex flex-col flex-full\" [class.double-groups]=\"filterGroups.length > 1\" *ngFor=\"let group of filterGroups\">\n <mat-list-item>\n <i mat-list-icon class=\"text-accent fal\" [ngClass]=\"group[0].key | filterGroupIcon\"></i>\n <strong mat-line>{{ group[0].name }}</strong>\n </mat-list-item>\n <mat-list-item (click)=\"selectFilter(filter)\" mat-ripple class=\"filter\" *ngFor=\"let filter of group[1]\">\n {{ filter?.name }}\n </mat-list-item>\n </mat-list>\n</mat-card>\n", components: [{ type: i9.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2$3.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i2$3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }], directives: [{ type: i5.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$3.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5$1.MatLine, selector: "[mat-line], [matLine]" }, { type: i5$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "filterGroupIcon": FilterGroupIconPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1464
1479
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FilterSelectionComponent, decorators: [{
|
|
1465
1480
|
type: Component,
|
|
1466
1481
|
args: [{ selector: "nice-filter-selection", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"flex flex-row flex-wrap filter-selection-container\" [niceLoadingOverlay]=\"loading\">\n <mat-list class=\"flex flex-col flex-full\" [class.double-groups]=\"filterGroups.length > 1\" *ngFor=\"let group of filterGroups\">\n <mat-list-item>\n <i mat-list-icon class=\"text-accent fal\" [ngClass]=\"group[0].key | filterGroupIcon\"></i>\n <strong mat-line>{{ group[0].name }}</strong>\n </mat-list-item>\n <mat-list-item (click)=\"selectFilter(filter)\" mat-ripple class=\"filter\" *ngFor=\"let filter of group[1]\">\n {{ filter?.name }}\n </mat-list-item>\n </mat-list>\n</mat-card>\n" }]
|
|
@@ -1527,12 +1542,12 @@ class QueryBuilderTriggerDirective {
|
|
|
1527
1542
|
return this.platform.ANDROID || this.platform.IOS;
|
|
1528
1543
|
}
|
|
1529
1544
|
}
|
|
1530
|
-
QueryBuilderTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QueryBuilderTriggerDirective, deps: [{ token: i1$3.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1$3.Overlay }, { token: i2$
|
|
1545
|
+
QueryBuilderTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QueryBuilderTriggerDirective, deps: [{ token: i1$3.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1$3.Overlay }, { token: i2$4.Platform }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1531
1546
|
QueryBuilderTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: { queryBuilderFilters: "queryBuilderFilters", queryBuilderFiltersLoading: "queryBuilderFiltersLoading" }, outputs: { queryBuilderFilterSelected: "queryBuilderFilterSelected" }, host: { listeners: { "click": "click()" } }, ngImport: i0 });
|
|
1532
1547
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: QueryBuilderTriggerDirective, decorators: [{
|
|
1533
1548
|
type: Directive,
|
|
1534
1549
|
args: [{ selector: "[niceQueryBuilderTrigger]" }]
|
|
1535
|
-
}], ctorParameters: function () { return [{ type: i1$3.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$3.Overlay }, { type: i2$
|
|
1550
|
+
}], ctorParameters: function () { return [{ type: i1$3.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$3.Overlay }, { type: i2$4.Platform }]; }, propDecorators: { queryBuilderFilters: [{
|
|
1536
1551
|
type: Input
|
|
1537
1552
|
}], queryBuilderFiltersLoading: [{
|
|
1538
1553
|
type: Input
|
|
@@ -1603,7 +1618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
1603
1618
|
type: Output
|
|
1604
1619
|
}] } });
|
|
1605
1620
|
|
|
1606
|
-
class
|
|
1621
|
+
class NiceQueryBuilderComponent {
|
|
1607
1622
|
constructor(formGroup) {
|
|
1608
1623
|
this.formGroup = formGroup;
|
|
1609
1624
|
this.close = new EventEmitter();
|
|
@@ -1643,11 +1658,11 @@ class QueryBuilderComponent {
|
|
|
1643
1658
|
this.updateReport.emit();
|
|
1644
1659
|
}
|
|
1645
1660
|
}
|
|
1646
|
-
|
|
1647
|
-
|
|
1661
|
+
NiceQueryBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceQueryBuilderComponent, deps: [{ token: i1$5.GeneratedFormGroup }], target: i0.ɵɵFactoryTarget.Component });
|
|
1662
|
+
NiceQueryBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceQueryBuilderComponent, selector: "nice-query-builder", inputs: { filterConfigs: "filterConfigs", currentSavedReport: "currentSavedReport", loading: "loading" }, outputs: { close: "close", createReport: "createReport", updateReport: "updateReport" }, providers: [
|
|
1648
1663
|
{
|
|
1649
1664
|
provide: NG_VALUE_ACCESSOR,
|
|
1650
|
-
useExisting: forwardRef(() =>
|
|
1665
|
+
useExisting: forwardRef(() => NiceQueryBuilderComponent),
|
|
1651
1666
|
multi: true
|
|
1652
1667
|
},
|
|
1653
1668
|
{
|
|
@@ -1655,12 +1670,12 @@ QueryBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
|
|
|
1655
1670
|
useFactory: ngxFormGeneratorFactory(QueryBuilderForm)
|
|
1656
1671
|
}
|
|
1657
1672
|
], ngImport: i0, template: "<div class=\"rules-container flex flex-col\" *ngIf=\"!loading\" [formGroup]=\"formGroup\">\n <ng-container formArrayName=\"rules\">\n <nice-rule\n *ngFor=\"let rule of rules.controls; let i = index\"\n (remove)=\"onClickDeleteRule(i)\"\n [filterConfigs]=\"filterConfigs\"\n [formGroupName]=\"i\"\n ></nice-rule>\n </ng-container>\n <div class=\"flex justify-between\">\n <button\n class=\"add-button add-rule-button\"\n mat-mini-fab\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfigs\"\n (queryBuilderFilterSelected)=\"onClickAddRule($event)\"\n >\n <mat-icon>add</mat-icon>\n </button>\n <div class=\"flex flex-col md:flex-row gap-4\">\n <!-- TODO: Support saved reports -->\n <!--<button mat-button color=\"primary\" (click)=\"onClickSaveReport()\" *ngIf=\"canSave\">\n <mat-icon class=\"mr-8\" fxHide.lt-md>save</mat-icon>\n {{ \"components.query_builder.save_report\" | translate }}\n </button>\n <button mat-button color=\"primary\" (click)=\"onClickUpdateReport()\" *ngIf=\"!canSave\">\n <mat-icon class=\"mr-8\" fxHide.lt-md>save</mat-icon>\n {{ \"components.query_builder.update_report\" | translate }}\n </button>-->\n <button mat-stroked-button color=\"accent\" (click)=\"onClickApply()\">\n {{ \"components.query_builder.update\" | translate }}\n <mat-icon class=\"ml-8\">refresh</mat-icon>\n </button>\n </div>\n </div>\n</div>\n", styles: ["nice-query-builder .rules-container{position:relative}nice-query-builder .rules-container:before{content:\"\";position:absolute;top:32px;bottom:32px;left:46px;width:4px;background:rgba(0,0,0,.12)}nice-query-builder .save-report-button{height:36px}nice-query-builder .add-rule-button{margin-left:28px;margin-right:28px}\n"], components: [{ type: RuleComponent, selector: "nice-rule", inputs: ["filterConfigs"], outputs: ["remove"] }, { type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }], pipes: { "translate": i1$4.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
|
|
1658
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type:
|
|
1673
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceQueryBuilderComponent, decorators: [{
|
|
1659
1674
|
type: Component,
|
|
1660
1675
|
args: [{ selector: "nice-query-builder", encapsulation: ViewEncapsulation.None, providers: [
|
|
1661
1676
|
{
|
|
1662
1677
|
provide: NG_VALUE_ACCESSOR,
|
|
1663
|
-
useExisting: forwardRef(() =>
|
|
1678
|
+
useExisting: forwardRef(() => NiceQueryBuilderComponent),
|
|
1664
1679
|
multi: true
|
|
1665
1680
|
},
|
|
1666
1681
|
{
|
|
@@ -1683,8 +1698,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
1683
1698
|
}] } });
|
|
1684
1699
|
|
|
1685
1700
|
class NiceBaseListComponent {
|
|
1686
|
-
constructor(enableQueryBuilder, listLayout, columns, exportsSettings, query, service, activatedRoute, bottomSheet, router, mediaWatcher) {
|
|
1701
|
+
constructor(enableQueryBuilder, icons, listLayout, columns, exportsSettings, query, service, activatedRoute, bottomSheet, router, mediaWatcher) {
|
|
1687
1702
|
this.enableQueryBuilder = enableQueryBuilder;
|
|
1703
|
+
this.icons = icons;
|
|
1688
1704
|
this.listLayout = listLayout;
|
|
1689
1705
|
this.columns = columns;
|
|
1690
1706
|
this.exportsSettings = exportsSettings;
|
|
@@ -1859,24 +1875,27 @@ class NiceBaseListComponent {
|
|
|
1859
1875
|
this.columnNames = columns.map(x => x.id);
|
|
1860
1876
|
}
|
|
1861
1877
|
}
|
|
1862
|
-
NiceBaseListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListComponent, deps: [{ token: ENABLE_QUERY_BUILDER, optional: true }, { token: BASE_LIST_LAYOUT }, { token: TABLE_COLUMNS }, { token: EXPORTS_SETTINGS }, { token: NiceBaseListQuery }, { token: NiceBaseListService }, { token:
|
|
1878
|
+
NiceBaseListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListComponent, deps: [{ token: ENABLE_QUERY_BUILDER, optional: true }, { token: BASE_LIST_ICONS }, { token: BASE_LIST_LAYOUT }, { token: TABLE_COLUMNS }, { token: EXPORTS_SETTINGS }, { token: NiceBaseListQuery }, { token: NiceBaseListService }, { token: i2.ActivatedRoute }, { token: i4$1.MatBottomSheet }, { token: i2.Router }, { token: i5.NiceMediaWatcherService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1863
1879
|
NiceBaseListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceBaseListComponent, selector: "nice-base-list", inputs: { mode: "mode", layout: "layout", layoutContent: "layoutContent", autoChangeLayout: "autoChangeLayout", baseRoute: "baseRoute", routeFn: "routeFn", navigateFn: "navigateFn", autoLoad: "autoLoad", pageTitle: "pageTitle", canExport: "canExport", disableRouting: "disableRouting", customExport: "customExport" }, outputs: { newPage: "newPage" }, providers: [
|
|
1864
1880
|
NiceBaseListQuery,
|
|
1865
1881
|
NiceBaseListService,
|
|
1866
1882
|
NiceBaseListStore
|
|
1867
|
-
], queries: [{ propertyName: "title", first: true, predicate: NiceBaseListTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "table", first: true, predicate: NiceBaseListTableDirective, descendants: true, read: TemplateRef }, { propertyName: "cards", first: true, predicate: NiceBaseListCardsDirective, descendants: true, read: TemplateRef }, { propertyName: "customContent", first: true, predicate: NiceBaseListCustomContentDirective, descendants: true, read: TemplateRef }, { propertyName: "filters", first: true, predicate: NiceBaseListFiltersDirective, descendants: true, read: TemplateRef }, { propertyName: "buttons", predicate: NiceBaseListButtonsDirective }], usesOnChanges: true, ngImport: i0, template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout } }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon>search</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n filter_list\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n filter_list\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon>\n clear\n </mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon>print</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon>cloud_download</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { data: data$ | async }\"></ng-container>\n </div>\n</ng-template>\n", components: [{ type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { type: i9.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: QueryBuilderComponent, selector: "nice-query-builder", inputs: ["filterConfigs", "currentSavedReport", "loading"], outputs: ["close", "createReport", "updateReport"] }, { type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }, { type: i16.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i17.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { type: i5.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { type: i9.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i11.MatCellDef, selector: "[matCellDef]" }, { type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i5$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "async": i13.AsyncPipe, "translate": i1$4.TranslatePipe } });
|
|
1883
|
+
], queries: [{ propertyName: "title", first: true, predicate: NiceBaseListTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "table", first: true, predicate: NiceBaseListTableDirective, descendants: true, read: TemplateRef }, { propertyName: "cards", first: true, predicate: NiceBaseListCardsDirective, descendants: true, read: TemplateRef }, { propertyName: "customContent", first: true, predicate: NiceBaseListCustomContentDirective, descendants: true, read: TemplateRef }, { propertyName: "filters", first: true, predicate: NiceBaseListFiltersDirective, descendants: true, read: TemplateRef }, { propertyName: "buttons", predicate: NiceBaseListButtonsDirective }], usesOnChanges: true, ngImport: i0, template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout } }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon [svgIcon]=\"icons.search.svgIcon\">{{ icons.search.matIcon }}</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.print.svgIcon\">{{ icons.print.matIcon }}</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { data: data$ | async }\"></ng-container>\n </div>\n</ng-template>\n", components: [{ type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { type: i9.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: NiceQueryBuilderComponent, selector: "nice-query-builder", inputs: ["filterConfigs", "currentSavedReport", "loading"], outputs: ["close", "createReport", "updateReport"] }, { type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }, { type: i16.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i17.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { type: i5.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { type: i9.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i11.MatCellDef, selector: "[matCellDef]" }, { type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i5$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "async": i13.AsyncPipe, "translate": i1$4.TranslatePipe } });
|
|
1868
1884
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListComponent, decorators: [{
|
|
1869
1885
|
type: Component,
|
|
1870
1886
|
args: [{ selector: "nice-base-list", providers: [
|
|
1871
1887
|
NiceBaseListQuery,
|
|
1872
1888
|
NiceBaseListService,
|
|
1873
1889
|
NiceBaseListStore
|
|
1874
|
-
], template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout } }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon>search</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n filter_list\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n filter_list\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon>\n clear\n </mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon>print</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon>cloud_download</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { data: data$ | async }\"></ng-container>\n </div>\n</ng-template>\n" }]
|
|
1890
|
+
], template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout } }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon [svgIcon]=\"icons.search.svgIcon\">{{ icons.search.matIcon }}</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.print.svgIcon\">{{ icons.print.matIcon }}</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { data: data$ | async }\"></ng-container>\n </div>\n</ng-template>\n" }]
|
|
1875
1891
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
1876
1892
|
type: Optional
|
|
1877
1893
|
}, {
|
|
1878
1894
|
type: Inject,
|
|
1879
1895
|
args: [ENABLE_QUERY_BUILDER]
|
|
1896
|
+
}] }, { type: undefined, decorators: [{
|
|
1897
|
+
type: Inject,
|
|
1898
|
+
args: [BASE_LIST_ICONS]
|
|
1880
1899
|
}] }, { type: undefined, decorators: [{
|
|
1881
1900
|
type: Inject,
|
|
1882
1901
|
args: [BASE_LIST_LAYOUT]
|
|
@@ -1886,7 +1905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
1886
1905
|
}] }, { type: undefined, decorators: [{
|
|
1887
1906
|
type: Inject,
|
|
1888
1907
|
args: [EXPORTS_SETTINGS]
|
|
1889
|
-
}] }, { type: NiceBaseListQuery }, { type: NiceBaseListService }, { type:
|
|
1908
|
+
}] }, { type: NiceBaseListQuery }, { type: NiceBaseListService }, { type: i2.ActivatedRoute }, { type: i4$1.MatBottomSheet }, { type: i2.Router }, { type: i5.NiceMediaWatcherService }]; }, propDecorators: { title: [{
|
|
1890
1909
|
type: ContentChild,
|
|
1891
1910
|
args: [NiceBaseListTitleDirective, { read: TemplateRef }]
|
|
1892
1911
|
}], buttons: [{
|
|
@@ -1955,19 +1974,19 @@ class NiceCustomDateAdapter extends NativeDateAdapter {
|
|
|
1955
1974
|
return date.getUTCFullYear();
|
|
1956
1975
|
}
|
|
1957
1976
|
}
|
|
1958
|
-
NiceCustomDateAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceCustomDateAdapter, deps: [{ token: i1$4.TranslateService }, { token: MAT_DATE_LOCALE }, { token: i2$
|
|
1977
|
+
NiceCustomDateAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceCustomDateAdapter, deps: [{ token: i1$4.TranslateService }, { token: MAT_DATE_LOCALE }, { token: i2$4.Platform }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1959
1978
|
NiceCustomDateAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceCustomDateAdapter });
|
|
1960
1979
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceCustomDateAdapter, decorators: [{
|
|
1961
1980
|
type: Injectable
|
|
1962
1981
|
}], ctorParameters: function () { return [{ type: i1$4.TranslateService }, { type: undefined, decorators: [{
|
|
1963
1982
|
type: Inject,
|
|
1964
1983
|
args: [MAT_DATE_LOCALE]
|
|
1965
|
-
}] }, { type: i2$
|
|
1984
|
+
}] }, { type: i2$4.Platform }]; } });
|
|
1966
1985
|
|
|
1967
|
-
class
|
|
1986
|
+
class NiceQueryBuilderModule {
|
|
1968
1987
|
}
|
|
1969
|
-
|
|
1970
|
-
|
|
1988
|
+
NiceQueryBuilderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceQueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1989
|
+
NiceQueryBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceQueryBuilderModule, declarations: [NiceQueryBuilderComponent,
|
|
1971
1990
|
QueryBuilderTriggerDirective,
|
|
1972
1991
|
FilterSelectionComponent,
|
|
1973
1992
|
RuleComponent,
|
|
@@ -1992,8 +2011,8 @@ QueryBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
|
|
|
1992
2011
|
NiceLoadingSpinnerModule,
|
|
1993
2012
|
NiceTypeaheadModule,
|
|
1994
2013
|
ReactiveFormsModule,
|
|
1995
|
-
NgxMaskModule], exports: [
|
|
1996
|
-
|
|
2014
|
+
NgxMaskModule], exports: [NiceQueryBuilderComponent, QueryBuilderTriggerDirective] });
|
|
2015
|
+
NiceQueryBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceQueryBuilderModule, providers: [{ provide: DateAdapter, useClass: NiceCustomDateAdapter }], imports: [[
|
|
1997
2016
|
CommonModule,
|
|
1998
2017
|
FormsModule,
|
|
1999
2018
|
TranslateModule,
|
|
@@ -2012,7 +2031,7 @@ QueryBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
|
|
|
2012
2031
|
ReactiveFormsModule,
|
|
2013
2032
|
NgxMaskModule
|
|
2014
2033
|
]] });
|
|
2015
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type:
|
|
2034
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceQueryBuilderModule, decorators: [{
|
|
2016
2035
|
type: NgModule,
|
|
2017
2036
|
args: [{
|
|
2018
2037
|
imports: [
|
|
@@ -2035,7 +2054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
2035
2054
|
NgxMaskModule
|
|
2036
2055
|
],
|
|
2037
2056
|
declarations: [
|
|
2038
|
-
|
|
2057
|
+
NiceQueryBuilderComponent,
|
|
2039
2058
|
QueryBuilderTriggerDirective,
|
|
2040
2059
|
FilterSelectionComponent,
|
|
2041
2060
|
RuleComponent,
|
|
@@ -2047,10 +2066,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
2047
2066
|
FilterGroupIconPipe
|
|
2048
2067
|
],
|
|
2049
2068
|
providers: [{ provide: DateAdapter, useClass: NiceCustomDateAdapter }],
|
|
2050
|
-
exports: [
|
|
2069
|
+
exports: [NiceQueryBuilderComponent, QueryBuilderTriggerDirective]
|
|
2051
2070
|
}]
|
|
2052
2071
|
}] });
|
|
2053
2072
|
|
|
2073
|
+
const defaultIcons = {
|
|
2074
|
+
search: {
|
|
2075
|
+
matIcon: "search"
|
|
2076
|
+
},
|
|
2077
|
+
queryBuilder: {
|
|
2078
|
+
matIcon: "filter_list"
|
|
2079
|
+
},
|
|
2080
|
+
close: {
|
|
2081
|
+
matIcon: "close"
|
|
2082
|
+
},
|
|
2083
|
+
print: {
|
|
2084
|
+
matIcon: "print"
|
|
2085
|
+
},
|
|
2086
|
+
download: {
|
|
2087
|
+
matIcon: "cloud_download"
|
|
2088
|
+
}
|
|
2089
|
+
};
|
|
2090
|
+
|
|
2054
2091
|
class NiceBaseListModule {
|
|
2055
2092
|
static forRoot(options) {
|
|
2056
2093
|
return {
|
|
@@ -2060,6 +2097,13 @@ class NiceBaseListModule {
|
|
|
2060
2097
|
provide: BASE_LIST_LAYOUT,
|
|
2061
2098
|
useValue: options?.layout ?? defaultLayout
|
|
2062
2099
|
},
|
|
2100
|
+
{
|
|
2101
|
+
provide: BASE_LIST_ICONS,
|
|
2102
|
+
useValue: {
|
|
2103
|
+
...defaultIcons,
|
|
2104
|
+
...(options?.icons ?? {})
|
|
2105
|
+
}
|
|
2106
|
+
},
|
|
2063
2107
|
...(options?.queryBuilder ? [
|
|
2064
2108
|
{
|
|
2065
2109
|
provide: ENABLE_QUERY_BUILDER,
|
|
@@ -2091,6 +2135,10 @@ class NiceBaseListModule {
|
|
|
2091
2135
|
provide: TABLE_COLUMNS,
|
|
2092
2136
|
useValue: options.columns,
|
|
2093
2137
|
},
|
|
2138
|
+
{
|
|
2139
|
+
provide: DEFAULT_RULES,
|
|
2140
|
+
useValue: options.defaultRules
|
|
2141
|
+
},
|
|
2094
2142
|
{
|
|
2095
2143
|
provide: DEFAULT_PARAMETERS,
|
|
2096
2144
|
useValue: options.defaultParameters
|
|
@@ -2141,7 +2189,7 @@ NiceBaseListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
|
|
|
2141
2189
|
MatSortModule,
|
|
2142
2190
|
MatRippleModule,
|
|
2143
2191
|
MatBottomSheetModule,
|
|
2144
|
-
|
|
2192
|
+
NiceQueryBuilderModule,
|
|
2145
2193
|
MatBadgeModule], exports: [NiceBaseListComponent,
|
|
2146
2194
|
NiceBaseListDirectiveModule] });
|
|
2147
2195
|
NiceBaseListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListModule, imports: [[
|
|
@@ -2161,7 +2209,7 @@ NiceBaseListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
|
|
|
2161
2209
|
MatSortModule,
|
|
2162
2210
|
MatRippleModule,
|
|
2163
2211
|
MatBottomSheetModule,
|
|
2164
|
-
|
|
2212
|
+
NiceQueryBuilderModule,
|
|
2165
2213
|
MatBadgeModule
|
|
2166
2214
|
], NiceBaseListDirectiveModule] });
|
|
2167
2215
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceBaseListModule, decorators: [{
|
|
@@ -2184,7 +2232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
2184
2232
|
MatSortModule,
|
|
2185
2233
|
MatRippleModule,
|
|
2186
2234
|
MatBottomSheetModule,
|
|
2187
|
-
|
|
2235
|
+
NiceQueryBuilderModule,
|
|
2188
2236
|
MatBadgeModule
|
|
2189
2237
|
],
|
|
2190
2238
|
declarations: [
|
|
@@ -2215,7 +2263,7 @@ const initialValue = {
|
|
|
2215
2263
|
};
|
|
2216
2264
|
let NiceMultiStateListStore = class NiceMultiStateListStore extends NiceBaseListStore {
|
|
2217
2265
|
constructor() {
|
|
2218
|
-
super(null);
|
|
2266
|
+
super(null, []);
|
|
2219
2267
|
}
|
|
2220
2268
|
};
|
|
2221
2269
|
NiceMultiStateListStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
@@ -2266,18 +2314,18 @@ class NiceMultiStateListService extends NiceBaseListService {
|
|
|
2266
2314
|
return newState.columns;
|
|
2267
2315
|
}
|
|
2268
2316
|
}
|
|
2269
|
-
NiceMultiStateListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListService, deps: [{ token: LIST_STATES }, { token: NiceMultiStateListStore }, { token:
|
|
2317
|
+
NiceMultiStateListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListService, deps: [{ token: LIST_STATES }, { token: NiceMultiStateListStore }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: i0.ApplicationRef }, { token: NiceMultiStateFilterService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2270
2318
|
NiceMultiStateListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListService });
|
|
2271
2319
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListService, decorators: [{
|
|
2272
2320
|
type: Injectable
|
|
2273
2321
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
2274
2322
|
type: Inject,
|
|
2275
2323
|
args: [LIST_STATES]
|
|
2276
|
-
}] }, { type: NiceMultiStateListStore }, { type:
|
|
2324
|
+
}] }, { type: NiceMultiStateListStore }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: i0.ApplicationRef }, { type: NiceMultiStateFilterService }]; } });
|
|
2277
2325
|
|
|
2278
2326
|
class NiceMultiStateListComponent extends NiceBaseListComponent {
|
|
2279
|
-
constructor(enableQueryBuilder, listLayout, exportsSetting, query, activatedRoute, bottomSheet, router, mediaWatcher, multiStateListService) {
|
|
2280
|
-
super(enableQueryBuilder, listLayout, [], exportsSetting, query, multiStateListService, activatedRoute, bottomSheet, router, mediaWatcher);
|
|
2327
|
+
constructor(enableQueryBuilder, icons, listLayout, exportsSetting, query, activatedRoute, bottomSheet, router, mediaWatcher, multiStateListService) {
|
|
2328
|
+
super(enableQueryBuilder, icons, listLayout, [], exportsSetting, query, multiStateListService, activatedRoute, bottomSheet, router, mediaWatcher);
|
|
2281
2329
|
this.multiStateListService = multiStateListService;
|
|
2282
2330
|
}
|
|
2283
2331
|
set state(state) {
|
|
@@ -2288,31 +2336,34 @@ class NiceMultiStateListComponent extends NiceBaseListComponent {
|
|
|
2288
2336
|
this.setColumn(columns);
|
|
2289
2337
|
}
|
|
2290
2338
|
}
|
|
2291
|
-
NiceMultiStateListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListComponent, deps: [{ token: ENABLE_QUERY_BUILDER, optional: true }, { token: BASE_LIST_LAYOUT }, { token: EXPORTS_SETTINGS }, { token: NiceMultiStateListQuery }, { token:
|
|
2339
|
+
NiceMultiStateListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListComponent, deps: [{ token: ENABLE_QUERY_BUILDER, optional: true }, { token: BASE_LIST_ICONS }, { token: BASE_LIST_LAYOUT }, { token: EXPORTS_SETTINGS }, { token: NiceMultiStateListQuery }, { token: i2.ActivatedRoute }, { token: i4$1.MatBottomSheet }, { token: i2.Router }, { token: i5.NiceMediaWatcherService }, { token: NiceMultiStateListService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2292
2340
|
NiceMultiStateListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceMultiStateListComponent, selector: "nice-multi-state-list", inputs: { state: "state" }, providers: [
|
|
2293
2341
|
NiceMultiStateListQuery,
|
|
2294
2342
|
NiceMultiStateListService,
|
|
2295
2343
|
NiceMultiStateListStore
|
|
2296
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout } }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon>search</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n filter_list\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n filter_list\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon>\n clear\n </mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon>print</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon>cloud_download</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { data: data$ | async }\"></ng-container>\n </div>\n</ng-template>\n", components: [{ type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { type: i9.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: QueryBuilderComponent, selector: "nice-query-builder", inputs: ["filterConfigs", "currentSavedReport", "loading"], outputs: ["close", "createReport", "updateReport"] }, { type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }, { type: i16.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i17.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { type: i5.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { type: i9.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i11.MatCellDef, selector: "[matCellDef]" }, { type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i5$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "async": i13.AsyncPipe, "translate": i1$4.TranslatePipe } });
|
|
2344
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout } }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon [svgIcon]=\"icons.search.svgIcon\">{{ icons.search.matIcon }}</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.print.svgIcon\">{{ icons.print.matIcon }}</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { data: data$ | async }\"></ng-container>\n </div>\n</ng-template>\n", components: [{ type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { type: i9.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: NiceQueryBuilderComponent, selector: "nice-query-builder", inputs: ["filterConfigs", "currentSavedReport", "loading"], outputs: ["close", "createReport", "updateReport"] }, { type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: QueryBuilderTriggerDirective, selector: "[niceQueryBuilderTrigger]", inputs: ["queryBuilderFilters", "queryBuilderFiltersLoading"], outputs: ["queryBuilderFilterSelected"] }, { type: i16.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i17.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { type: i5.NiceLoadingDirective, selector: "[niceLoadingOverlay]", inputs: ["niceLoadingOverlay"] }, { type: i9.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i11.MatCellDef, selector: "[matCellDef]" }, { type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i5$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "async": i13.AsyncPipe, "translate": i1$4.TranslatePipe } });
|
|
2297
2345
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListComponent, decorators: [{
|
|
2298
2346
|
type: Component,
|
|
2299
2347
|
args: [{ selector: "nice-multi-state-list", providers: [
|
|
2300
2348
|
NiceMultiStateListQuery,
|
|
2301
2349
|
NiceMultiStateListService,
|
|
2302
2350
|
NiceMultiStateListStore
|
|
2303
|
-
], template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout } }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon>search</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n filter_list\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n filter_list\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon>\n clear\n </mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon>print</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon>cloud_download</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { data: data$ | async }\"></ng-container>\n </div>\n</ng-template>\n" }]
|
|
2351
|
+
], template: "<div class=\"list page-layout carded fullwidth inner-scroll\" *ngIf=\"layout === 'page'; else content\">\n <div class=\"center\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-container *ngIf=\"listLayout.xl\">\n <div class=\"hidden xl:block\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xl }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.lg\">\n <div class=\"hidden lg:block xl:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.lg }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.md\">\n <div class=\"hidden md:block lg:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.md }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.sm\">\n <div class=\"hidden sm:block md:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.sm }\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"listLayout.xs\">\n <div class=\"block sm:hidden\">\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.xs }\"></ng-container>\n </div>\n </ng-container>\n\n <div\n [class.hidden]=\"!!listLayout.xs\"\n [class.block]=\"!listLayout.xs\"\n [class.sm:hidden]=\"!!listLayout.sm\"\n [class.sm:block]=\"!listLayout.sm\"\n [class.md:hidden]=\"!!listLayout.md\"\n [class.md:block]=\"!listLayout.md\"\n [class.lg:hidden]=\"!!listLayout.lg\"\n [class.lg:block]=\"!listLayout.lg\"\n [class.xl:hidden]=\"!!listLayout.xl\"\n [class.xl:block]=\"!listLayout.xl\"\n >\n <ng-container *ngTemplateOutlet=\"pageLayout; context: { layout: listLayout.default }\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #pageLayout let-layout=\"layout\">\n <ng-container *ngIf=\"layout?.length; else isObject\">\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: { classes: ['flex flex-col'], items: layout } }\"></ng-container>\n </ng-container>\n\n <ng-template #isObject>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: layout }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<ng-template #contentLayout let-layout=\"layout\">\n <div [ngClass]=\"layout.classes\">\n <ng-container *ngFor=\"let item of layout.items\">\n <ng-container *ngIf=\"item.name; else childIsLayout\">\n <ng-container *ngTemplateOutlet=\"layoutItem; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-template #childIsLayout>\n <ng-container *ngTemplateOutlet=\"contentLayout; context: { layout: item }\"></ng-container>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #layoutItem let-item=\"item\">\n <ng-container *ngIf=\"item.name === 'title' && title\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'search'\">\n <div [ngClass]=\"item.classes\">\n <div class=\"search-wrapper mx-md-0\">\n <div class=\"search flex flex-auto justify-start items-center\">\n <mat-icon [svgIcon]=\"icons.search.svgIcon\">{{ icons.search.matIcon }}</mat-icon>\n <input [ngModel]=\"searchQuery$ | async\" (ngModelChange)=\"onUpdateSearch($event)\" [placeholder]=\"'general.search' | translate\" />\n <ng-container *ngIf=\"enableQueryBuilder\">\n <button\n *ngIf=\"!(showQueryBuilder$ | async) && !(rulesCount$ | async)\"\n mat-icon-button\n niceQueryBuilderTrigger\n [queryBuilderFilters]=\"filterConfig$ | async\"\n [queryBuilderFiltersLoading]=\"(filterConfigLoading$ | async) || false\"\n (queryBuilderFilterSelected)=\"onQueryBuilderFilterSelected($event)\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"!(showQueryBuilder$ | async) && (rulesCount$ | async)\"\n [disabled]=\"filterConfigLoading$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.show_advanced_search' | translate\"\n >\n <mat-icon\n [svgIcon]=\"icons.queryBuilder.svgIcon\"\n [matBadge]=\"rulesCount$ | async\"\n [matBadgeHidden]=\"!(rulesCount$ | async)\"\n matBadgeColor=\"accent\"\n >\n {{ icons.queryBuilder.matIcon }}\n </mat-icon>\n </button>\n <button\n mat-icon-button\n *ngIf=\"showQueryBuilder$ | async\"\n (click)=\"clickToggleShowQueryBuilder()\"\n [matTooltip]=\"'general.query_builder.close_advanced_search' | translate\"\n >\n <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'prefixButtons' && prefixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"prefixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'suffixButtons' && suffixButtons\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"suffixButtons\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'exportButtons' && canExport\">\n <div [ngClass]=\"item.classes\" [class.mr-2]=\"!!suffixButtons\" [class.ml-2]=\"!!prefixButtons\">\n <button\n (click)=\"clickPrint()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.print' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.print.svgIcon\">{{ icons.print.matIcon }}</mat-icon>\n </button>\n\n <button\n (click)=\"clickExport()\"\n [disabled]=\"loading$ | async\"\n [matTooltip]=\"'general.export' | translate\"\n class=\"list-button mr-2\"\n mat-mini-fab\n >\n <mat-icon [svgIcon]=\"icons.download.svgIcon\">{{ icons.download.matIcon }}</mat-icon>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'content'\">\n <ng-container *ngIf=\"layoutContent === 'table' && table\">\n <ng-container *ngTemplateOutlet=\"tableLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'cards' && cards\">\n <ng-container *ngTemplateOutlet=\"cardsLayout; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"layoutContent === 'custom' && customContent\">\n <ng-container *ngTemplateOutlet=\"customLayout; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'pagination' && layoutContent !== 'custom'\">\n <div [ngClass]=\"item.classes\">\n <mat-paginator\n (page)=\"onUpdatePage($event)\"\n [length]=\"recordsFiltered$ | async\"\n [pageIndex]=\"index$ | async\"\n [pageSizeOptions]=\"defaultPageSizeOptions\"\n [pageSize]=\"length$ | async\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'queryBuilder' && enableQueryBuilder\">\n <div class=\"flex flex-col\" *ngIf=\"showQueryBuilder$ | async\">\n <mat-card class=\"my-4\" [niceLoadingOverlay]=\"filterConfigLoading$ | async\">\n <mat-card-content class=\"flex flex-col\">\n <div class=\"flex-auto\">\n <nice-query-builder\n [filterConfigs]=\"filterConfig$ | async\"\n [ngModel]=\"rules$ | async\"\n (ngModelChange)=\"onUpdateRules($event)\"\n (close)=\"clickToggleShowQueryBuilder()\"\n ></nice-query-builder>\n </div>\n </mat-card-content>\n </mat-card>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.name === 'filters' && filters\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"filters\"></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <div\n [niceLoadingOverlay]=\"loading$ | async\"\n class=\"content-card base-list flex flex-col justify-between\"\n >\n <mat-table\n (matSortChange)=\"onUpdateSort($event)\"\n [dataSource]=\"data$\"\n [matSortActive]=\"(sortColumn$ | async) || ''\"\n [matSortDirection]=\"(sortDirection$ | async) || ''\"\n class=\"flex flex-col flex-auto\"\n matSort\n >\n <mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></mat-header-row>\n\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.sortable\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, header: true }\"\n ></ng-container>\n </mat-header-cell>\n </ng-container>\n\n <mat-cell *matCellDef=\"let item\">\n <ng-container\n *ngTemplateOutlet=\"table; context: { column: column.id, data: true, item: item }\"\n ></ng-container>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"disableRouting; else withRouting\">\n <mat-row *matRowDef=\"let item; columns: columnNames;\" class=\"item\"></mat-row>\n </ng-container>\n\n <ng-template #withRouting>\n <mat-row\n *matRowDef=\"let item; columns: columnNames;\"\n (click)=\"navigate(item)\"\n class=\"item clickable\"\n matRipple\n >\n </mat-row>\n </ng-template>\n </mat-table>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cardsLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngFor=\"let data of data$ | async\">\n <ng-container *ngTemplateOutlet=\"cards; context: { item: data }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #customLayout let-item=\"item\">\n <div [ngClass]=\"item.classes\">\n <ng-container *ngTemplateOutlet=\"customContent; context: { data: data$ | async }\"></ng-container>\n </div>\n</ng-template>\n" }]
|
|
2304
2352
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
2305
2353
|
type: Optional
|
|
2306
2354
|
}, {
|
|
2307
2355
|
type: Inject,
|
|
2308
2356
|
args: [ENABLE_QUERY_BUILDER]
|
|
2357
|
+
}] }, { type: undefined, decorators: [{
|
|
2358
|
+
type: Inject,
|
|
2359
|
+
args: [BASE_LIST_ICONS]
|
|
2309
2360
|
}] }, { type: undefined, decorators: [{
|
|
2310
2361
|
type: Inject,
|
|
2311
2362
|
args: [BASE_LIST_LAYOUT]
|
|
2312
2363
|
}] }, { type: undefined, decorators: [{
|
|
2313
2364
|
type: Inject,
|
|
2314
2365
|
args: [EXPORTS_SETTINGS]
|
|
2315
|
-
}] }, { type: NiceMultiStateListQuery }, { type:
|
|
2366
|
+
}] }, { type: NiceMultiStateListQuery }, { type: i2.ActivatedRoute }, { type: i4$1.MatBottomSheet }, { type: i2.Router }, { type: i5.NiceMediaWatcherService }, { type: NiceMultiStateListService }]; }, propDecorators: { state: [{
|
|
2316
2367
|
type: Input
|
|
2317
2368
|
}] } });
|
|
2318
2369
|
|
|
@@ -2373,7 +2424,7 @@ NiceMultiStateListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0"
|
|
|
2373
2424
|
MatSortModule,
|
|
2374
2425
|
MatRippleModule,
|
|
2375
2426
|
MatBottomSheetModule,
|
|
2376
|
-
|
|
2427
|
+
NiceQueryBuilderModule,
|
|
2377
2428
|
MatBadgeModule], exports: [NiceMultiStateListComponent,
|
|
2378
2429
|
NiceBaseListDirectiveModule] });
|
|
2379
2430
|
NiceMultiStateListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListModule, imports: [[
|
|
@@ -2393,7 +2444,7 @@ NiceMultiStateListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0"
|
|
|
2393
2444
|
MatSortModule,
|
|
2394
2445
|
MatRippleModule,
|
|
2395
2446
|
MatBottomSheetModule,
|
|
2396
|
-
|
|
2447
|
+
NiceQueryBuilderModule,
|
|
2397
2448
|
MatBadgeModule
|
|
2398
2449
|
], NiceBaseListDirectiveModule] });
|
|
2399
2450
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceMultiStateListModule, decorators: [{
|
|
@@ -2416,7 +2467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
2416
2467
|
MatSortModule,
|
|
2417
2468
|
MatRippleModule,
|
|
2418
2469
|
MatBottomSheetModule,
|
|
2419
|
-
|
|
2470
|
+
NiceQueryBuilderModule,
|
|
2420
2471
|
MatBadgeModule
|
|
2421
2472
|
],
|
|
2422
2473
|
declarations: [
|
|
@@ -2445,5 +2496,5 @@ String.prototype.toTableColumn = function (sortableOrOptions, nullLast) {
|
|
|
2445
2496
|
* Generated bundle index. Do not edit.
|
|
2446
2497
|
*/
|
|
2447
2498
|
|
|
2448
|
-
export { DateFilterComponent, FilterComponent, FilterGroupIconPipe, FilterOperatorTypes, FilterSelectionComponent, FilterType, FilterUtils, LayoutContent, NiceBaseListButtonsDirective, NiceBaseListCardsDirective, NiceBaseListComponent, NiceBaseListCustomContentDirective, NiceBaseListDirectiveModule, NiceBaseListFiltersDirective, NiceBaseListModule, NiceBaseListQuery, NiceBaseListService, NiceBaseListStore, NiceBaseListTableDirective, NiceBaseListTitleDirective, NiceCustomDateAdapter, NiceFilterApi, NiceFilterGroupService, NiceFilterService, NiceListState, NiceMultiStateFilterService, NiceMultiStateListComponent, NiceMultiStateListModule, NiceMultiStateListQuery, NiceMultiStateListService, NiceMultiStateListStore,
|
|
2499
|
+
export { DateFilterComponent, FilterComponent, FilterGroupIconPipe, FilterOperatorTypes, FilterSelectionComponent, FilterType, FilterUtils, LayoutContent, NiceBaseListButtonsDirective, NiceBaseListCardsDirective, NiceBaseListComponent, NiceBaseListCustomContentDirective, NiceBaseListDirectiveModule, NiceBaseListFiltersDirective, NiceBaseListModule, NiceBaseListQuery, NiceBaseListService, NiceBaseListStore, NiceBaseListTableDirective, NiceBaseListTitleDirective, NiceCustomDateAdapter, NiceFilterApi, NiceFilterGroupService, NiceFilterService, NiceListState, NiceMultiStateFilterService, NiceMultiStateListComponent, NiceMultiStateListModule, NiceMultiStateListQuery, NiceMultiStateListService, NiceMultiStateListStore, NiceQueryBuilderComponent, NiceQueryBuilderModule, NiceSavedReportService, NumberFilterComponent, QBFilterUtils, QueryBuilderTriggerDirective, RadioFilterComponent, RuleComponent, SelectFilterComponent, StringUtils, TableColumns, TextFilterComponent, defaultLayout, initialBaseListState, initialValue };
|
|
2449
2500
|
//# sourceMappingURL=recursyve-nice-data-filter-kit.mjs.map
|