ngx-st-tables 1.1.13 → 1.1.14
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/README.md +24 -24
- package/assets/base-collapse-table.scss +49 -49
- package/assets/base-table.scss +155 -155
- package/esm2020/lib/components/local-table/configurations/configurations.component.mjs +69 -69
- package/esm2020/lib/components/local-table/local-table.component.mjs +259 -259
- package/esm2020/lib/components/select-table/select-table.component.mjs +101 -100
- package/esm2020/lib/models/st-configurations-settings.model.mjs +1 -1
- package/esm2020/lib/models/st-global-search-settings.model.mjs +1 -1
- package/esm2020/lib/models/st-local-storage-configuration.model.mjs +1 -1
- package/esm2020/lib/models/st-local-table-column.model.mjs +1 -1
- package/esm2020/lib/models/st-local-table-columns.model.mjs +1 -1
- package/esm2020/lib/models/st-table-settings.model.mjs +1 -1
- package/esm2020/lib/ngx-st-tables.module.mjs +89 -89
- package/esm2020/lib/services/local-table.service.mjs +36 -36
- package/esm2020/ngx-st-tables.mjs +4 -4
- package/esm2020/public-api.mjs +15 -15
- package/fesm2015/ngx-st-tables.mjs +482 -481
- package/fesm2015/ngx-st-tables.mjs.map +1 -1
- package/fesm2020/ngx-st-tables.mjs +484 -483
- package/fesm2020/ngx-st-tables.mjs.map +1 -1
- package/index.d.ts +5 -5
- package/lib/components/local-table/configurations/configurations.component.d.ts +27 -27
- package/lib/components/local-table/local-table.component.d.ts +63 -63
- package/lib/components/select-table/select-table.component.d.ts +37 -37
- package/lib/models/st-configurations-settings.model.d.ts +6 -6
- package/lib/models/st-global-search-settings.model.d.ts +4 -4
- package/lib/models/st-local-storage-configuration.model.d.ts +8 -8
- package/lib/models/st-local-table-column.model.d.ts +22 -22
- package/lib/models/st-local-table-columns.model.d.ts +4 -4
- package/lib/models/st-table-settings.model.d.ts +3 -3
- package/lib/ngx-st-tables.module.d.ts +24 -24
- package/lib/services/local-table.service.d.ts +11 -11
- package/package.json +1 -1
- package/public-api.d.ts +11 -11
|
@@ -32,499 +32,500 @@ import * as i7 from '@angular/material/core';
|
|
|
32
32
|
import * as i16 from 'ngx-st-date-format';
|
|
33
33
|
import { StDateFormatModule } from 'ngx-st-date-format';
|
|
34
34
|
|
|
35
|
-
class LocalTableService {
|
|
36
|
-
constructor() {
|
|
37
|
-
this.localStorageName = '';
|
|
38
|
-
}
|
|
39
|
-
getConfigs() {
|
|
40
|
-
if (this.checkLocalStorageName()) {
|
|
41
|
-
return JSON.parse(localStorage.getItem(this.localStorageName) || '[]');
|
|
42
|
-
}
|
|
43
|
-
return [];
|
|
44
|
-
}
|
|
45
|
-
saveConfigs(configs) {
|
|
46
|
-
if (this.checkLocalStorageName()) {
|
|
47
|
-
localStorage.setItem(this.localStorageName, JSON.stringify(configs));
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
checkLocalStorageName() {
|
|
51
|
-
if (this.localStorageName) {
|
|
52
|
-
return true;
|
|
53
|
-
}
|
|
54
|
-
else {
|
|
55
|
-
console.warn('Yiu have to add configurationsSettings');
|
|
56
|
-
return false;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
LocalTableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LocalTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
61
|
-
LocalTableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LocalTableService, providedIn: 'root' });
|
|
62
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LocalTableService, decorators: [{
|
|
63
|
-
type: Injectable,
|
|
64
|
-
args: [{
|
|
65
|
-
providedIn: 'root',
|
|
66
|
-
}]
|
|
35
|
+
class LocalTableService {
|
|
36
|
+
constructor() {
|
|
37
|
+
this.localStorageName = '';
|
|
38
|
+
}
|
|
39
|
+
getConfigs() {
|
|
40
|
+
if (this.checkLocalStorageName()) {
|
|
41
|
+
return JSON.parse(localStorage.getItem(this.localStorageName) || '[]');
|
|
42
|
+
}
|
|
43
|
+
return [];
|
|
44
|
+
}
|
|
45
|
+
saveConfigs(configs) {
|
|
46
|
+
if (this.checkLocalStorageName()) {
|
|
47
|
+
localStorage.setItem(this.localStorageName, JSON.stringify(configs));
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
checkLocalStorageName() {
|
|
51
|
+
if (this.localStorageName) {
|
|
52
|
+
return true;
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
console.warn('Yiu have to add configurationsSettings');
|
|
56
|
+
return false;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
LocalTableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LocalTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
61
|
+
LocalTableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LocalTableService, providedIn: 'root' });
|
|
62
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LocalTableService, decorators: [{
|
|
63
|
+
type: Injectable,
|
|
64
|
+
args: [{
|
|
65
|
+
providedIn: 'root',
|
|
66
|
+
}]
|
|
67
67
|
}], ctorParameters: function () { return []; } });
|
|
68
68
|
|
|
69
|
-
class ConfigurationsComponent {
|
|
70
|
-
constructor() {
|
|
71
|
-
this.createNewConfig = new EventEmitter();
|
|
72
|
-
this.removeConfig = new EventEmitter();
|
|
73
|
-
this.changeConfig = new EventEmitter();
|
|
74
|
-
this.creatingConfiguration = false;
|
|
75
|
-
this.createConfigurationName = '';
|
|
76
|
-
this.removingConfiguration = false;
|
|
77
|
-
}
|
|
78
|
-
set initSelectedConfig(config) {
|
|
79
|
-
this.selectedConfig = config;
|
|
80
|
-
}
|
|
81
|
-
ngOnInit() { }
|
|
82
|
-
showCreateConfiguration() {
|
|
83
|
-
this.creatingConfiguration = true;
|
|
84
|
-
this.createConfigurationName = '';
|
|
85
|
-
}
|
|
86
|
-
hideCreateConfiguration() {
|
|
87
|
-
this.creatingConfiguration = false;
|
|
88
|
-
this.createConfigurationName = '';
|
|
89
|
-
}
|
|
90
|
-
saveCreateConfiguration() {
|
|
91
|
-
this.creatingConfiguration = false;
|
|
92
|
-
this.selectedConfig = null;
|
|
93
|
-
this.createNewConfig.emit(this.createConfigurationName);
|
|
94
|
-
}
|
|
95
|
-
deleteConfiguration() {
|
|
96
|
-
this.removingConfiguration = true;
|
|
97
|
-
}
|
|
98
|
-
acceptDeleteConfiguration() {
|
|
99
|
-
this.removingConfiguration = false;
|
|
100
|
-
this.selectedConfig = null;
|
|
101
|
-
this.removeConfig.emit(this.selectedConfig.configId);
|
|
102
|
-
}
|
|
103
|
-
declineDeleteConfiguration() {
|
|
104
|
-
this.removingConfiguration = false;
|
|
105
|
-
}
|
|
106
|
-
selectedConfigChanged() {
|
|
107
|
-
var _a;
|
|
108
|
-
this.changeConfig.emit(((_a = this.selectedConfig) === null || _a === void 0 ? void 0 : _a.configId) || null);
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
ConfigurationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ConfigurationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
112
|
-
ConfigurationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ConfigurationsComponent, selector: "st-configurations[configurationsSettings]", inputs: { configurationsSettings: "configurationsSettings", configurations: "configurations", initSelectedConfig: "initSelectedConfig" }, outputs: { createNewConfig: "createNewConfig", removeConfig: "removeConfig", changeConfig: "changeConfig" }, ngImport: i0, template: "<div class=\"col-auto row align-items-center\" style=\"padding: 0\">\n <ng-container *ngIf=\"!creatingConfiguration && !removingConfiguration\">\n <mat-form-field class=\"col-auto\" style=\"padding-right: 0\">\n <mat-label>{{ configurationsSettings.selectLabel }}</mat-label>\n <mat-select\n [(ngModel)]=\"selectedConfig\"\n (ngModelChange)=\"selectedConfigChanged()\"\n >\n <mat-option [value]=\"null\"></mat-option>\n <mat-option *ngFor=\"let config of configurations\" [value]=\"config\">{{\n config.configName\n }}</mat-option>\n </mat-select>\n </mat-form-field>\n <button\n mat-icon-button\n class=\"col-auto green-icon\"\n (click)=\"showCreateConfiguration()\"\n >\n <span class=\"material-icons-outlined\"> add </span>\n </button>\n <button\n mat-icon-button\n class=\"col-auto red-icon\"\n [disabled]=\"!selectedConfig\"\n (click)=\"deleteConfiguration()\"\n >\n <span class=\"material-icons-outlined\"> delete </span>\n </button>\n </ng-container>\n\n <ng-container *ngIf=\"creatingConfiguration\">\n <mat-form-field class=\"col-auto\">\n <mat-label>{{ configurationsSettings.createLabel }}</mat-label>\n <input matInput [(ngModel)]=\"createConfigurationName\" />\n </mat-form-field>\n <button\n mat-icon-button\n class=\"col-auto green-icon\"\n (click)=\"saveCreateConfiguration()\"\n [disabled]=\"!createConfigurationName\"\n >\n <span class=\"material-icons-outlined\"> done </span>\n </button>\n <button\n mat-icon-button\n class=\"col-auto red-icon\"\n (click)=\"hideCreateConfiguration()\"\n >\n <span class=\"material-icons-outlined\"> close </span>\n </button>\n </ng-container>\n\n <ng-container *ngIf=\"removingConfiguration\">\n <p class=\"col-auto\" style=\"margin: 0; font-weight: bold; font-size: 16px\">\n {{ configurationsSettings.deleteWarningTitle }}\n </p>\n <button\n mat-icon-button\n class=\"col-auto green-icon\"\n (click)=\"acceptDeleteConfiguration()\"\n >\n <span class=\"material-icons-outlined\"> done </span>\n </button>\n <button\n mat-icon-button\n class=\"col-auto red-icon\"\n (click)=\"declineDeleteConfiguration()\"\n >\n <span class=\"material-icons-outlined\"> close </span>\n </button>\n </ng-container>\n</div>\n", styles: [".green-icon span{color:#2e7d32}.red-icon span{color:#c62828}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
|
|
113
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ConfigurationsComponent, decorators: [{
|
|
114
|
-
type: Component,
|
|
115
|
-
args: [{ selector: 'st-configurations[configurationsSettings]', template: "<div class=\"col-auto row align-items-center\" style=\"padding: 0\">\n <ng-container *ngIf=\"!creatingConfiguration && !removingConfiguration\">\n <mat-form-field class=\"col-auto\" style=\"padding-right: 0\">\n <mat-label>{{ configurationsSettings.selectLabel }}</mat-label>\n <mat-select\n [(ngModel)]=\"selectedConfig\"\n (ngModelChange)=\"selectedConfigChanged()\"\n >\n <mat-option [value]=\"null\"></mat-option>\n <mat-option *ngFor=\"let config of configurations\" [value]=\"config\">{{\n config.configName\n }}</mat-option>\n </mat-select>\n </mat-form-field>\n <button\n mat-icon-button\n class=\"col-auto green-icon\"\n (click)=\"showCreateConfiguration()\"\n >\n <span class=\"material-icons-outlined\"> add </span>\n </button>\n <button\n mat-icon-button\n class=\"col-auto red-icon\"\n [disabled]=\"!selectedConfig\"\n (click)=\"deleteConfiguration()\"\n >\n <span class=\"material-icons-outlined\"> delete </span>\n </button>\n </ng-container>\n\n <ng-container *ngIf=\"creatingConfiguration\">\n <mat-form-field class=\"col-auto\">\n <mat-label>{{ configurationsSettings.createLabel }}</mat-label>\n <input matInput [(ngModel)]=\"createConfigurationName\" />\n </mat-form-field>\n <button\n mat-icon-button\n class=\"col-auto green-icon\"\n (click)=\"saveCreateConfiguration()\"\n [disabled]=\"!createConfigurationName\"\n >\n <span class=\"material-icons-outlined\"> done </span>\n </button>\n <button\n mat-icon-button\n class=\"col-auto red-icon\"\n (click)=\"hideCreateConfiguration()\"\n >\n <span class=\"material-icons-outlined\"> close </span>\n </button>\n </ng-container>\n\n <ng-container *ngIf=\"removingConfiguration\">\n <p class=\"col-auto\" style=\"margin: 0; font-weight: bold; font-size: 16px\">\n {{ configurationsSettings.deleteWarningTitle }}\n </p>\n <button\n mat-icon-button\n class=\"col-auto green-icon\"\n (click)=\"acceptDeleteConfiguration()\"\n >\n <span class=\"material-icons-outlined\"> done </span>\n </button>\n <button\n mat-icon-button\n class=\"col-auto red-icon\"\n (click)=\"declineDeleteConfiguration()\"\n >\n <span class=\"material-icons-outlined\"> close </span>\n </button>\n </ng-container>\n</div>\n", styles: [".green-icon span{color:#2e7d32}.red-icon span{color:#c62828}\n"] }]
|
|
116
|
-
}], ctorParameters: function () { return []; }, propDecorators: { configurationsSettings: [{
|
|
117
|
-
type: Input
|
|
118
|
-
}], configurations: [{
|
|
119
|
-
type: Input
|
|
120
|
-
}], initSelectedConfig: [{
|
|
121
|
-
type: Input
|
|
122
|
-
}], createNewConfig: [{
|
|
123
|
-
type: Output
|
|
124
|
-
}], removeConfig: [{
|
|
125
|
-
type: Output
|
|
126
|
-
}], changeConfig: [{
|
|
127
|
-
type: Output
|
|
69
|
+
class ConfigurationsComponent {
|
|
70
|
+
constructor() {
|
|
71
|
+
this.createNewConfig = new EventEmitter();
|
|
72
|
+
this.removeConfig = new EventEmitter();
|
|
73
|
+
this.changeConfig = new EventEmitter();
|
|
74
|
+
this.creatingConfiguration = false;
|
|
75
|
+
this.createConfigurationName = '';
|
|
76
|
+
this.removingConfiguration = false;
|
|
77
|
+
}
|
|
78
|
+
set initSelectedConfig(config) {
|
|
79
|
+
this.selectedConfig = config;
|
|
80
|
+
}
|
|
81
|
+
ngOnInit() { }
|
|
82
|
+
showCreateConfiguration() {
|
|
83
|
+
this.creatingConfiguration = true;
|
|
84
|
+
this.createConfigurationName = '';
|
|
85
|
+
}
|
|
86
|
+
hideCreateConfiguration() {
|
|
87
|
+
this.creatingConfiguration = false;
|
|
88
|
+
this.createConfigurationName = '';
|
|
89
|
+
}
|
|
90
|
+
saveCreateConfiguration() {
|
|
91
|
+
this.creatingConfiguration = false;
|
|
92
|
+
this.selectedConfig = null;
|
|
93
|
+
this.createNewConfig.emit(this.createConfigurationName);
|
|
94
|
+
}
|
|
95
|
+
deleteConfiguration() {
|
|
96
|
+
this.removingConfiguration = true;
|
|
97
|
+
}
|
|
98
|
+
acceptDeleteConfiguration() {
|
|
99
|
+
this.removingConfiguration = false;
|
|
100
|
+
this.selectedConfig = null;
|
|
101
|
+
this.removeConfig.emit(this.selectedConfig.configId);
|
|
102
|
+
}
|
|
103
|
+
declineDeleteConfiguration() {
|
|
104
|
+
this.removingConfiguration = false;
|
|
105
|
+
}
|
|
106
|
+
selectedConfigChanged() {
|
|
107
|
+
var _a;
|
|
108
|
+
this.changeConfig.emit(((_a = this.selectedConfig) === null || _a === void 0 ? void 0 : _a.configId) || null);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
ConfigurationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ConfigurationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
112
|
+
ConfigurationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ConfigurationsComponent, selector: "st-configurations[configurationsSettings]", inputs: { configurationsSettings: "configurationsSettings", configurations: "configurations", initSelectedConfig: "initSelectedConfig" }, outputs: { createNewConfig: "createNewConfig", removeConfig: "removeConfig", changeConfig: "changeConfig" }, ngImport: i0, template: "<div class=\"col-auto row align-items-center\" style=\"padding: 0\">\r\n <ng-container *ngIf=\"!creatingConfiguration && !removingConfiguration\">\r\n <mat-form-field class=\"col-auto\" style=\"padding-right: 0\">\r\n <mat-label>{{ configurationsSettings.selectLabel }}</mat-label>\r\n <mat-select\r\n [(ngModel)]=\"selectedConfig\"\r\n (ngModelChange)=\"selectedConfigChanged()\"\r\n >\r\n <mat-option [value]=\"null\"></mat-option>\r\n <mat-option *ngFor=\"let config of configurations\" [value]=\"config\">{{\r\n config.configName\r\n }}</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n <button\r\n mat-icon-button\r\n class=\"col-auto green-icon\"\r\n (click)=\"showCreateConfiguration()\"\r\n >\r\n <span class=\"material-icons-outlined\"> add </span>\r\n </button>\r\n <button\r\n mat-icon-button\r\n class=\"col-auto red-icon\"\r\n [disabled]=\"!selectedConfig\"\r\n (click)=\"deleteConfiguration()\"\r\n >\r\n <span class=\"material-icons-outlined\"> delete </span>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"creatingConfiguration\">\r\n <mat-form-field class=\"col-auto\">\r\n <mat-label>{{ configurationsSettings.createLabel }}</mat-label>\r\n <input matInput [(ngModel)]=\"createConfigurationName\" />\r\n </mat-form-field>\r\n <button\r\n mat-icon-button\r\n class=\"col-auto green-icon\"\r\n (click)=\"saveCreateConfiguration()\"\r\n [disabled]=\"!createConfigurationName\"\r\n >\r\n <span class=\"material-icons-outlined\"> done </span>\r\n </button>\r\n <button\r\n mat-icon-button\r\n class=\"col-auto red-icon\"\r\n (click)=\"hideCreateConfiguration()\"\r\n >\r\n <span class=\"material-icons-outlined\"> close </span>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"removingConfiguration\">\r\n <p class=\"col-auto\" style=\"margin: 0; font-weight: bold; font-size: 16px\">\r\n {{ configurationsSettings.deleteWarningTitle }}\r\n </p>\r\n <button\r\n mat-icon-button\r\n class=\"col-auto green-icon\"\r\n (click)=\"acceptDeleteConfiguration()\"\r\n >\r\n <span class=\"material-icons-outlined\"> done </span>\r\n </button>\r\n <button\r\n mat-icon-button\r\n class=\"col-auto red-icon\"\r\n (click)=\"declineDeleteConfiguration()\"\r\n >\r\n <span class=\"material-icons-outlined\"> close </span>\r\n </button>\r\n </ng-container>\r\n</div>\r\n", styles: [".green-icon span{color:#2e7d32}.red-icon span{color:#c62828}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
|
|
113
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ConfigurationsComponent, decorators: [{
|
|
114
|
+
type: Component,
|
|
115
|
+
args: [{ selector: 'st-configurations[configurationsSettings]', template: "<div class=\"col-auto row align-items-center\" style=\"padding: 0\">\r\n <ng-container *ngIf=\"!creatingConfiguration && !removingConfiguration\">\r\n <mat-form-field class=\"col-auto\" style=\"padding-right: 0\">\r\n <mat-label>{{ configurationsSettings.selectLabel }}</mat-label>\r\n <mat-select\r\n [(ngModel)]=\"selectedConfig\"\r\n (ngModelChange)=\"selectedConfigChanged()\"\r\n >\r\n <mat-option [value]=\"null\"></mat-option>\r\n <mat-option *ngFor=\"let config of configurations\" [value]=\"config\">{{\r\n config.configName\r\n }}</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n <button\r\n mat-icon-button\r\n class=\"col-auto green-icon\"\r\n (click)=\"showCreateConfiguration()\"\r\n >\r\n <span class=\"material-icons-outlined\"> add </span>\r\n </button>\r\n <button\r\n mat-icon-button\r\n class=\"col-auto red-icon\"\r\n [disabled]=\"!selectedConfig\"\r\n (click)=\"deleteConfiguration()\"\r\n >\r\n <span class=\"material-icons-outlined\"> delete </span>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"creatingConfiguration\">\r\n <mat-form-field class=\"col-auto\">\r\n <mat-label>{{ configurationsSettings.createLabel }}</mat-label>\r\n <input matInput [(ngModel)]=\"createConfigurationName\" />\r\n </mat-form-field>\r\n <button\r\n mat-icon-button\r\n class=\"col-auto green-icon\"\r\n (click)=\"saveCreateConfiguration()\"\r\n [disabled]=\"!createConfigurationName\"\r\n >\r\n <span class=\"material-icons-outlined\"> done </span>\r\n </button>\r\n <button\r\n mat-icon-button\r\n class=\"col-auto red-icon\"\r\n (click)=\"hideCreateConfiguration()\"\r\n >\r\n <span class=\"material-icons-outlined\"> close </span>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"removingConfiguration\">\r\n <p class=\"col-auto\" style=\"margin: 0; font-weight: bold; font-size: 16px\">\r\n {{ configurationsSettings.deleteWarningTitle }}\r\n </p>\r\n <button\r\n mat-icon-button\r\n class=\"col-auto green-icon\"\r\n (click)=\"acceptDeleteConfiguration()\"\r\n >\r\n <span class=\"material-icons-outlined\"> done </span>\r\n </button>\r\n <button\r\n mat-icon-button\r\n class=\"col-auto red-icon\"\r\n (click)=\"declineDeleteConfiguration()\"\r\n >\r\n <span class=\"material-icons-outlined\"> close </span>\r\n </button>\r\n </ng-container>\r\n</div>\r\n", styles: [".green-icon span{color:#2e7d32}.red-icon span{color:#c62828}\n"] }]
|
|
116
|
+
}], ctorParameters: function () { return []; }, propDecorators: { configurationsSettings: [{
|
|
117
|
+
type: Input
|
|
118
|
+
}], configurations: [{
|
|
119
|
+
type: Input
|
|
120
|
+
}], initSelectedConfig: [{
|
|
121
|
+
type: Input
|
|
122
|
+
}], createNewConfig: [{
|
|
123
|
+
type: Output
|
|
124
|
+
}], removeConfig: [{
|
|
125
|
+
type: Output
|
|
126
|
+
}], changeConfig: [{
|
|
127
|
+
type: Output
|
|
128
128
|
}] } });
|
|
129
129
|
|
|
130
|
-
class LocalTableComponent {
|
|
131
|
-
constructor(localTableService, changeDetectorRef, router, activatedRoute) {
|
|
132
|
-
this.localTableService = localTableService;
|
|
133
|
-
this.changeDetectorRef = changeDetectorRef;
|
|
134
|
-
this.router = router;
|
|
135
|
-
this.activatedRoute = activatedRoute;
|
|
136
|
-
this.pageSize = 10;
|
|
137
|
-
this.allowPickColumns = false;
|
|
138
|
-
this.localStorageName = '';
|
|
139
|
-
this.bindSearchToUrl = false;
|
|
140
|
-
this._columns = {};
|
|
141
|
-
this._data = [];
|
|
142
|
-
this.searchModel = '';
|
|
143
|
-
this.displayedColumns = [];
|
|
144
|
-
this.configurations = [];
|
|
145
|
-
this.initConfig = null;
|
|
146
|
-
this.activeConfig = null;
|
|
147
|
-
this.pageIndex = 0;
|
|
148
|
-
}
|
|
149
|
-
set columns(columns) {
|
|
150
|
-
this._columns = columns;
|
|
151
|
-
this.columnsArray = this.getColumnsArray();
|
|
152
|
-
this.setDisplayedColumns();
|
|
153
|
-
}
|
|
154
|
-
get columns() {
|
|
155
|
-
return this._columns;
|
|
156
|
-
}
|
|
157
|
-
set data(data) {
|
|
158
|
-
this._data = data || [];
|
|
159
|
-
this.setTableSource();
|
|
160
|
-
}
|
|
161
|
-
get data() {
|
|
162
|
-
return this._data;
|
|
163
|
-
}
|
|
164
|
-
ngOnInit() {
|
|
165
|
-
var _a;
|
|
166
|
-
if (this.localStorageName) {
|
|
167
|
-
const pageSize = localStorage.getItem(this.localStorageName);
|
|
168
|
-
if (pageSize) {
|
|
169
|
-
this.pageSize = parseInt(pageSize);
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
if (this.configurationsSettings) {
|
|
173
|
-
this.localTableService.localStorageName =
|
|
174
|
-
((_a = this.configurationsSettings) === null || _a === void 0 ? void 0 : _a.localStorageName) || '';
|
|
175
|
-
this.loadConfigs();
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
ngAfterViewInit() {
|
|
179
|
-
if (this.configurationsSettings) {
|
|
180
|
-
this.paginator.page.subscribe(res => {
|
|
181
|
-
if (this.activeConfig) {
|
|
182
|
-
this.activeConfig.pageSize = res.pageSize;
|
|
183
|
-
this.updateConfigsToLocalStorage();
|
|
184
|
-
}
|
|
185
|
-
});
|
|
186
|
-
this.sort.sortChange.subscribe(res => {
|
|
187
|
-
if (this.activeConfig) {
|
|
188
|
-
this.activeConfig.sortFieldName = res.active;
|
|
189
|
-
this.activeConfig.sortDirection = res.direction;
|
|
190
|
-
this.updateConfigsToLocalStorage();
|
|
191
|
-
}
|
|
192
|
-
});
|
|
193
|
-
}
|
|
194
|
-
if (this.bindSearchToUrl) {
|
|
195
|
-
const params = new URLSearchParams(location.search);
|
|
196
|
-
this.sort.sortChange.subscribe(res => {
|
|
197
|
-
this.updateSearchToUrl();
|
|
198
|
-
});
|
|
199
|
-
if (params.get('stLocalTablePageIndex')) {
|
|
200
|
-
this.pageIndex = parseInt(params.get('stLocalTablePageIndex') || '');
|
|
201
|
-
}
|
|
202
|
-
if (params.get('stLocalTablePageSize')) {
|
|
203
|
-
this.pageSize = parseInt(params.get('stLocalTablePageSize') || '');
|
|
204
|
-
}
|
|
205
|
-
if (params.get('stLocalTableSortFieldName') &&
|
|
206
|
-
params.get('stLocalTableSortDirection')) {
|
|
207
|
-
this.sort.sort({
|
|
208
|
-
id: params.get('stLocalTableSortFieldName') || '',
|
|
209
|
-
start: params.get('stLocalTableSortDirection') || 'asc',
|
|
210
|
-
disableClear: false,
|
|
211
|
-
});
|
|
212
|
-
}
|
|
213
|
-
this.searchModel = params.get('stLocalTableSearch') || '';
|
|
214
|
-
if (this.searchModel) {
|
|
215
|
-
this.tableSource.filter = this.searchModel.trim().toLowerCase();
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
this.paginator.pageSize = this.pageSize;
|
|
219
|
-
}
|
|
220
|
-
applySearch() {
|
|
221
|
-
this.tableSource.filter = this.searchModel.trim().toLowerCase();
|
|
222
|
-
this.pageIndex = 0;
|
|
223
|
-
this.updateSearchToUrl();
|
|
224
|
-
}
|
|
225
|
-
clearSearch() {
|
|
226
|
-
this.searchModel = '';
|
|
227
|
-
this.tableSource.filter = this.searchModel;
|
|
228
|
-
this.pageIndex = 0;
|
|
229
|
-
this.updateSearchToUrl();
|
|
230
|
-
}
|
|
231
|
-
checkIfActionVisible(row, action) {
|
|
232
|
-
if (action.show) {
|
|
233
|
-
return action.show(row);
|
|
234
|
-
}
|
|
235
|
-
else {
|
|
236
|
-
return true;
|
|
237
|
-
}
|
|
238
|
-
}
|
|
239
|
-
columnVisibleChanged(column) {
|
|
240
|
-
this.setDisplayedColumns();
|
|
241
|
-
this.updateConfigsToLocalStorage();
|
|
242
|
-
}
|
|
243
|
-
newConfigCreated(name) {
|
|
244
|
-
const newConfig = this.generateNewConfig(name);
|
|
245
|
-
this.configurations.push(newConfig);
|
|
246
|
-
this.updateConfigsToLocalStorage();
|
|
247
|
-
this.initConfig = newConfig;
|
|
248
|
-
}
|
|
249
|
-
configRemoved(configId) {
|
|
250
|
-
this.configurations = this.configurations.filter(config => config.configId !== configId);
|
|
251
|
-
this.updateConfigsToLocalStorage();
|
|
252
|
-
}
|
|
253
|
-
configChanged(configId) {
|
|
254
|
-
this.activeConfig = configId
|
|
255
|
-
? this.configurations.find(config => config.configId === configId)
|
|
256
|
-
: null;
|
|
257
|
-
if (this.activeConfig) {
|
|
258
|
-
this.setTableConfig(this.activeConfig.pageSize, this.activeConfig.columnsDisabled, this.activeConfig.sortFieldName, this.activeConfig.sortDirection);
|
|
259
|
-
}
|
|
260
|
-
else {
|
|
261
|
-
this.setTableConfig(this.pageSize, [], null, null);
|
|
262
|
-
this.clearSearch();
|
|
263
|
-
}
|
|
264
|
-
}
|
|
265
|
-
pageChanged(event) {
|
|
266
|
-
this.pageIndex = event.pageIndex;
|
|
267
|
-
this.updateSearchToUrl();
|
|
268
|
-
}
|
|
269
|
-
updateSearchToUrl() {
|
|
270
|
-
if (this.bindSearchToUrl) {
|
|
271
|
-
let queryParams = {
|
|
272
|
-
stLocalTableSearch: this.searchModel,
|
|
273
|
-
stLocalTablePageIndex: this.pageIndex,
|
|
274
|
-
stLocalTablePageSize: this.paginator.pageSize,
|
|
275
|
-
stLocalTableSortFieldName: '',
|
|
276
|
-
stLocalTableSortDirection: '',
|
|
277
|
-
};
|
|
278
|
-
if (this.sort.direction && this.sort.active) {
|
|
279
|
-
queryParams = Object.assign(Object.assign({}, queryParams), { stLocalTableSortFieldName: this.sort.active, stLocalTableSortDirection: this.sort.direction });
|
|
280
|
-
}
|
|
281
|
-
this.router.navigate(['./'], {
|
|
282
|
-
queryParams: queryParams,
|
|
283
|
-
relativeTo: this.activatedRoute,
|
|
284
|
-
});
|
|
285
|
-
}
|
|
286
|
-
}
|
|
287
|
-
updateConfigsToLocalStorage() {
|
|
288
|
-
this.localTableService.saveConfigs(this.configurations);
|
|
289
|
-
}
|
|
290
|
-
setTableSource() {
|
|
291
|
-
this.tableSource = new MatTableDataSource(this._data);
|
|
292
|
-
this.tableSource.paginator = this.paginator;
|
|
293
|
-
this.tableSource.sort = this.sort;
|
|
294
|
-
this.tableSource.filter = this.searchModel;
|
|
295
|
-
this.changeDetectorRef.markForCheck();
|
|
296
|
-
}
|
|
297
|
-
setDisplayedColumns() {
|
|
298
|
-
this.displayedColumns = Object.keys(this.columns).filter(column => {
|
|
299
|
-
return this._columns[column].visible;
|
|
300
|
-
});
|
|
301
|
-
}
|
|
302
|
-
getColumnsArray() {
|
|
303
|
-
return Object.keys(this._columns).map(column => this._columns[column]);
|
|
304
|
-
}
|
|
305
|
-
loadConfigs() {
|
|
306
|
-
this.configurations = this.localTableService.getConfigs();
|
|
307
|
-
}
|
|
308
|
-
generateNewConfig(configName) {
|
|
309
|
-
return {
|
|
310
|
-
configId: Date.now().toString(),
|
|
311
|
-
configName: configName,
|
|
312
|
-
columnsDisabled: this.columnsArray
|
|
313
|
-
.filter(column => !column.visible)
|
|
314
|
-
.map(column => column.translateColumnName),
|
|
315
|
-
pageSize: this.paginator.pageSize,
|
|
316
|
-
sortFieldName: this.sort.direction && this.sort.active ? this.sort.active : null,
|
|
317
|
-
sortDirection: this.sort.direction || null,
|
|
318
|
-
};
|
|
319
|
-
}
|
|
320
|
-
setTableConfig(pageSize, disabledColumns, sortFieldName, sortDirection) {
|
|
321
|
-
this.paginator.pageSize = pageSize;
|
|
322
|
-
this.sort.sort({
|
|
323
|
-
id: sortFieldName || '',
|
|
324
|
-
start: sortDirection || 'asc',
|
|
325
|
-
disableClear: false,
|
|
326
|
-
});
|
|
327
|
-
this.columnsArray.forEach(column => {
|
|
328
|
-
column.visible =
|
|
329
|
-
disabledColumns.indexOf(column.translateColumnName) === -1;
|
|
330
|
-
});
|
|
331
|
-
this.setDisplayedColumns();
|
|
332
|
-
}
|
|
333
|
-
}
|
|
334
|
-
LocalTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LocalTableComponent, deps: [{ token: LocalTableService }, { token: i0.ChangeDetectorRef }, { token: i2$1.Router }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
335
|
-
LocalTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LocalTableComponent, selector: "ngx-st-local-table", inputs: { tableSettings: "tableSettings", globalSearchSettings: "globalSearchSettings", pageSize: "pageSize", allowPickColumns: "allowPickColumns", configurationsSettings: "configurationsSettings", localStorageName: "localStorageName", bindSearchToUrl: "bindSearchToUrl", columns: "columns", data: "data" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"local-table\">\n <div class=\"row align-items-center\">\n <div\n class=\"col row align-items-center\"\n style=\"padding: 0\"\n *ngIf=\"configurationsSettings || allowPickColumns\"\n >\n <div class=\"col-auto\" style=\"padding: 0\" *ngIf=\"allowPickColumns\">\n <button\n mat-icon-button\n class=\"col-auto\"\n [matMenuTriggerFor]=\"columnsMenu\"\n >\n <span class=\"material-icons-outlined\"> view_week </span>\n </button>\n <mat-menu #columnsMenu=\"matMenu\" xPosition=\"after\">\n <ng-container *ngFor=\"let column of columnsArray\">\n <div mat-menu-item *ngIf=\"!column.notShowInColumnPick\">\n <mat-checkbox\n [(ngModel)]=\"column.visible\"\n (ngModelChange)=\"columnVisibleChanged(column)\"\n style=\"margin-top: 5px\"\n (click)=\"$event.stopPropagation()\"\n >\n {{ column.translateColumnName }}\n </mat-checkbox>\n </div>\n </ng-container>\n </mat-menu>\n </div>\n\n <st-configurations\n *ngIf=\"configurationsSettings\"\n [configurationsSettings]=\"configurationsSettings\"\n [configurations]=\"configurations\"\n [initSelectedConfig]=\"initConfig\"\n (createNewConfig)=\"newConfigCreated($event)\"\n (removeConfig)=\"configRemoved($event)\"\n (changeConfig)=\"configChanged($event)\"\n ></st-configurations>\n </div>\n\n <div class=\"col\" style=\"padding: 0\" *ngIf=\"globalSearchSettings?.show\">\n <mat-form-field class=\"col\">\n <mat-label>{{ globalSearchSettings?.label || 'Search' }}</mat-label>\n <input matInput (keyup)=\"applySearch()\" [(ngModel)]=\"searchModel\" />\n <button\n matSuffix\n mat-icon-button\n aria-label=\"Clear\"\n (click)=\"clearSearch()\"\n >\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\n </button>\n </mat-form-field>\n </div>\n </div>\n\n <table\n [ngClass]=\"{ 'no-hover': !tableSettings?.rowClickAction }\"\n mat-table\n [dataSource]=\"tableSource\"\n matSort\n >\n <ng-container\n [matColumnDef]=\"column\"\n *ngFor=\"let column of displayedColumns\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n style=\"{{\n columns[column].width ? 'width:' + columns[column].width : ''\n }}\"\n mat-sort-header\n [disabled]=\"!columns[column].sort\"\n >\n {{ columns[column].translateColumnName }}\n <span\n class=\"material-icons search-icon\"\n [matMenuTriggerFor]=\"menu\"\n (click)=\"$event.stopPropagation()\"\n *ngIf=\"columns[column].search\"\n >\n search\n </span>\n <mat-menu #menu=\"matMenu\" xPosition=\"before\">\n <mat-form-field class=\"col\">\n <mat-label>{{ columns[column].searchLabel || 'Search' }}</mat-label>\n <input\n matInput\n (keyup)=\"applySearch()\"\n [(ngModel)]=\"searchModel\"\n (click)=\"$event.stopPropagation()\"\n />\n <button\n matSuffix\n mat-icon-button\n aria-label=\"Clear\"\n (click)=\"searchModel = ''\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n </mat-menu>\n </th>\n <td\n mat-cell\n *matCellDef=\"let element\"\n style=\"{{\n columns[column].width ? 'width:' + columns[column].width : ''\n }}\"\n >\n <div\n class=\"actions-container\"\n [ngClass]=\"{ 'justify-content-end': columns[column].flexRight }\"\n *ngIf=\"columns[column].actions && columns[column].actions!.length > 0\"\n >\n <ng-container *ngFor=\"let action of columns[column].actions\">\n <ng-container *ngIf=\"checkIfActionVisible(element, action)\">\n <button\n class=\"col-auto\"\n mat-icon-button\n type=\"button\"\n *ngIf=\"!action.url && action.action\"\n matTooltip=\"{{ action.tooltipName || '' }}\"\n [matTooltipDisabled]=\"!!!action.tooltipName\"\n (click)=\"action.action(element)\"\n >\n <span class=\"material-icons\">{{ action.iconName }}</span>\n </button>\n\n <a *ngIf=\"action.url\" [routerLink]=\"action.url\">\n <button\n class=\"col-auto\"\n mat-icon-button\n type=\"button\"\n matTooltip=\"{{ action.tooltipName || '' }}\"\n [matTooltipDisabled]=\"!!!action.tooltipName\"\n >\n <span class=\"material-icons\">{{ action.iconName }}</span>\n </button>\n </a>\n </ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"!columns[column].actions\">\n <ng-container *ngIf=\"columns[column].translateValue\">\n <p style=\"margin: 0; padding: 0\">\n {{ columns[column].translateValue![element[column]] || '' }}\n </p>\n </ng-container>\n\n <ng-container *ngIf=\"!columns[column].translateValue\">\n <ng-container\n *ngIf=\"!columns[column].type || columns[column].type === 'string'\"\n >\n <p style=\"margin: 0; padding: 0\">{{ element[column] }}</p>\n </ng-container>\n\n <ng-container *ngIf=\"columns[column].type === 'date'\">\n <p style=\"margin: 0; padding: 0\">\n {{ element[column] | stDateTimeFormatPipe }}\n </p>\n </ng-container>\n </ng-container>\n </ng-container>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: displayedColumns\"\n (click)=\"\n tableSettings?.rowClickAction ? tableSettings.rowClickAction(row) : null\n \"\n ></tr>\n </table>\n <mat-paginator\n [pageIndex]=\"pageIndex\"\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\n (page)=\"pageChanged($event)\"\n [showFirstLastButtons]=\"true\"\n ></mat-paginator>\n</div>\n", styles: ["", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-header-cell:first-of-type,table td.mat-cell:first-of-type,table td.mat-footer-cell:first-of-type{padding-left:12px}table th.mat-header-cell:last-of-type,table td.mat-cell:last-of-type,table td.mat-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4}table::ng-deep thead tr th{border-color:#fdd835}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr:hover{background-color:#a5d6a7}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent}table.no-hover::ng-deep tbody tr:hover{background-color:transparent}table.admin-table::ng-deep .actions-cell{width:100px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: ConfigurationsComponent, selector: "st-configurations[configurationsSettings]", inputs: ["configurationsSettings", "configurations", "initSelectedConfig"], outputs: ["createNewConfig", "removeConfig", "changeConfig"] }, { kind: "pipe", type: i16.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
336
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LocalTableComponent, decorators: [{
|
|
337
|
-
type: Component,
|
|
338
|
-
args: [{ selector: 'ngx-st-local-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"local-table\">\n <div class=\"row align-items-center\">\n <div\n class=\"col row align-items-center\"\n style=\"padding: 0\"\n *ngIf=\"configurationsSettings || allowPickColumns\"\n >\n <div class=\"col-auto\" style=\"padding: 0\" *ngIf=\"allowPickColumns\">\n <button\n mat-icon-button\n class=\"col-auto\"\n [matMenuTriggerFor]=\"columnsMenu\"\n >\n <span class=\"material-icons-outlined\"> view_week </span>\n </button>\n <mat-menu #columnsMenu=\"matMenu\" xPosition=\"after\">\n <ng-container *ngFor=\"let column of columnsArray\">\n <div mat-menu-item *ngIf=\"!column.notShowInColumnPick\">\n <mat-checkbox\n [(ngModel)]=\"column.visible\"\n (ngModelChange)=\"columnVisibleChanged(column)\"\n style=\"margin-top: 5px\"\n (click)=\"$event.stopPropagation()\"\n >\n {{ column.translateColumnName }}\n </mat-checkbox>\n </div>\n </ng-container>\n </mat-menu>\n </div>\n\n <st-configurations\n *ngIf=\"configurationsSettings\"\n [configurationsSettings]=\"configurationsSettings\"\n [configurations]=\"configurations\"\n [initSelectedConfig]=\"initConfig\"\n (createNewConfig)=\"newConfigCreated($event)\"\n (removeConfig)=\"configRemoved($event)\"\n (changeConfig)=\"configChanged($event)\"\n ></st-configurations>\n </div>\n\n <div class=\"col\" style=\"padding: 0\" *ngIf=\"globalSearchSettings?.show\">\n <mat-form-field class=\"col\">\n <mat-label>{{ globalSearchSettings?.label || 'Search' }}</mat-label>\n <input matInput (keyup)=\"applySearch()\" [(ngModel)]=\"searchModel\" />\n <button\n matSuffix\n mat-icon-button\n aria-label=\"Clear\"\n (click)=\"clearSearch()\"\n >\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\n </button>\n </mat-form-field>\n </div>\n </div>\n\n <table\n [ngClass]=\"{ 'no-hover': !tableSettings?.rowClickAction }\"\n mat-table\n [dataSource]=\"tableSource\"\n matSort\n >\n <ng-container\n [matColumnDef]=\"column\"\n *ngFor=\"let column of displayedColumns\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n style=\"{{\n columns[column].width ? 'width:' + columns[column].width : ''\n }}\"\n mat-sort-header\n [disabled]=\"!columns[column].sort\"\n >\n {{ columns[column].translateColumnName }}\n <span\n class=\"material-icons search-icon\"\n [matMenuTriggerFor]=\"menu\"\n (click)=\"$event.stopPropagation()\"\n *ngIf=\"columns[column].search\"\n >\n search\n </span>\n <mat-menu #menu=\"matMenu\" xPosition=\"before\">\n <mat-form-field class=\"col\">\n <mat-label>{{ columns[column].searchLabel || 'Search' }}</mat-label>\n <input\n matInput\n (keyup)=\"applySearch()\"\n [(ngModel)]=\"searchModel\"\n (click)=\"$event.stopPropagation()\"\n />\n <button\n matSuffix\n mat-icon-button\n aria-label=\"Clear\"\n (click)=\"searchModel = ''\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n </mat-menu>\n </th>\n <td\n mat-cell\n *matCellDef=\"let element\"\n style=\"{{\n columns[column].width ? 'width:' + columns[column].width : ''\n }}\"\n >\n <div\n class=\"actions-container\"\n [ngClass]=\"{ 'justify-content-end': columns[column].flexRight }\"\n *ngIf=\"columns[column].actions && columns[column].actions!.length > 0\"\n >\n <ng-container *ngFor=\"let action of columns[column].actions\">\n <ng-container *ngIf=\"checkIfActionVisible(element, action)\">\n <button\n class=\"col-auto\"\n mat-icon-button\n type=\"button\"\n *ngIf=\"!action.url && action.action\"\n matTooltip=\"{{ action.tooltipName || '' }}\"\n [matTooltipDisabled]=\"!!!action.tooltipName\"\n (click)=\"action.action(element)\"\n >\n <span class=\"material-icons\">{{ action.iconName }}</span>\n </button>\n\n <a *ngIf=\"action.url\" [routerLink]=\"action.url\">\n <button\n class=\"col-auto\"\n mat-icon-button\n type=\"button\"\n matTooltip=\"{{ action.tooltipName || '' }}\"\n [matTooltipDisabled]=\"!!!action.tooltipName\"\n >\n <span class=\"material-icons\">{{ action.iconName }}</span>\n </button>\n </a>\n </ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"!columns[column].actions\">\n <ng-container *ngIf=\"columns[column].translateValue\">\n <p style=\"margin: 0; padding: 0\">\n {{ columns[column].translateValue![element[column]] || '' }}\n </p>\n </ng-container>\n\n <ng-container *ngIf=\"!columns[column].translateValue\">\n <ng-container\n *ngIf=\"!columns[column].type || columns[column].type === 'string'\"\n >\n <p style=\"margin: 0; padding: 0\">{{ element[column] }}</p>\n </ng-container>\n\n <ng-container *ngIf=\"columns[column].type === 'date'\">\n <p style=\"margin: 0; padding: 0\">\n {{ element[column] | stDateTimeFormatPipe }}\n </p>\n </ng-container>\n </ng-container>\n </ng-container>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: displayedColumns\"\n (click)=\"\n tableSettings?.rowClickAction ? tableSettings.rowClickAction(row) : null\n \"\n ></tr>\n </table>\n <mat-paginator\n [pageIndex]=\"pageIndex\"\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\n (page)=\"pageChanged($event)\"\n [showFirstLastButtons]=\"true\"\n ></mat-paginator>\n</div>\n", styles: [".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-header-cell:first-of-type,table td.mat-cell:first-of-type,table td.mat-footer-cell:first-of-type{padding-left:12px}table th.mat-header-cell:last-of-type,table td.mat-cell:last-of-type,table td.mat-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4}table::ng-deep thead tr th{border-color:#fdd835}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr:hover{background-color:#a5d6a7}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent}table.no-hover::ng-deep tbody tr:hover{background-color:transparent}table.admin-table::ng-deep .actions-cell{width:100px}\n"] }]
|
|
339
|
-
}], ctorParameters: function () { return [{ type: LocalTableService }, { type: i0.ChangeDetectorRef }, { type: i2$1.Router }, { type: i2$1.ActivatedRoute }]; }, propDecorators: { paginator: [{
|
|
340
|
-
type: ViewChild,
|
|
341
|
-
args: [MatPaginator]
|
|
342
|
-
}], sort: [{
|
|
343
|
-
type: ViewChild,
|
|
344
|
-
args: [MatSort]
|
|
345
|
-
}], tableSettings: [{
|
|
346
|
-
type: Input
|
|
347
|
-
}], globalSearchSettings: [{
|
|
348
|
-
type: Input
|
|
349
|
-
}], pageSize: [{
|
|
350
|
-
type: Input
|
|
351
|
-
}], allowPickColumns: [{
|
|
352
|
-
type: Input
|
|
353
|
-
}], configurationsSettings: [{
|
|
354
|
-
type: Input
|
|
355
|
-
}], localStorageName: [{
|
|
356
|
-
type: Input
|
|
357
|
-
}], bindSearchToUrl: [{
|
|
358
|
-
type: Input
|
|
359
|
-
}], columns: [{
|
|
360
|
-
type: Input
|
|
361
|
-
}], data: [{
|
|
362
|
-
type: Input
|
|
130
|
+
class LocalTableComponent {
|
|
131
|
+
constructor(localTableService, changeDetectorRef, router, activatedRoute) {
|
|
132
|
+
this.localTableService = localTableService;
|
|
133
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
134
|
+
this.router = router;
|
|
135
|
+
this.activatedRoute = activatedRoute;
|
|
136
|
+
this.pageSize = 10;
|
|
137
|
+
this.allowPickColumns = false;
|
|
138
|
+
this.localStorageName = '';
|
|
139
|
+
this.bindSearchToUrl = false;
|
|
140
|
+
this._columns = {};
|
|
141
|
+
this._data = [];
|
|
142
|
+
this.searchModel = '';
|
|
143
|
+
this.displayedColumns = [];
|
|
144
|
+
this.configurations = [];
|
|
145
|
+
this.initConfig = null;
|
|
146
|
+
this.activeConfig = null;
|
|
147
|
+
this.pageIndex = 0;
|
|
148
|
+
}
|
|
149
|
+
set columns(columns) {
|
|
150
|
+
this._columns = columns;
|
|
151
|
+
this.columnsArray = this.getColumnsArray();
|
|
152
|
+
this.setDisplayedColumns();
|
|
153
|
+
}
|
|
154
|
+
get columns() {
|
|
155
|
+
return this._columns;
|
|
156
|
+
}
|
|
157
|
+
set data(data) {
|
|
158
|
+
this._data = data || [];
|
|
159
|
+
this.setTableSource();
|
|
160
|
+
}
|
|
161
|
+
get data() {
|
|
162
|
+
return this._data;
|
|
163
|
+
}
|
|
164
|
+
ngOnInit() {
|
|
165
|
+
var _a;
|
|
166
|
+
if (this.localStorageName) {
|
|
167
|
+
const pageSize = localStorage.getItem(this.localStorageName);
|
|
168
|
+
if (pageSize) {
|
|
169
|
+
this.pageSize = parseInt(pageSize);
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
if (this.configurationsSettings) {
|
|
173
|
+
this.localTableService.localStorageName =
|
|
174
|
+
((_a = this.configurationsSettings) === null || _a === void 0 ? void 0 : _a.localStorageName) || '';
|
|
175
|
+
this.loadConfigs();
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
ngAfterViewInit() {
|
|
179
|
+
if (this.configurationsSettings) {
|
|
180
|
+
this.paginator.page.subscribe(res => {
|
|
181
|
+
if (this.activeConfig) {
|
|
182
|
+
this.activeConfig.pageSize = res.pageSize;
|
|
183
|
+
this.updateConfigsToLocalStorage();
|
|
184
|
+
}
|
|
185
|
+
});
|
|
186
|
+
this.sort.sortChange.subscribe(res => {
|
|
187
|
+
if (this.activeConfig) {
|
|
188
|
+
this.activeConfig.sortFieldName = res.active;
|
|
189
|
+
this.activeConfig.sortDirection = res.direction;
|
|
190
|
+
this.updateConfigsToLocalStorage();
|
|
191
|
+
}
|
|
192
|
+
});
|
|
193
|
+
}
|
|
194
|
+
if (this.bindSearchToUrl) {
|
|
195
|
+
const params = new URLSearchParams(location.search);
|
|
196
|
+
this.sort.sortChange.subscribe(res => {
|
|
197
|
+
this.updateSearchToUrl();
|
|
198
|
+
});
|
|
199
|
+
if (params.get('stLocalTablePageIndex')) {
|
|
200
|
+
this.pageIndex = parseInt(params.get('stLocalTablePageIndex') || '');
|
|
201
|
+
}
|
|
202
|
+
if (params.get('stLocalTablePageSize')) {
|
|
203
|
+
this.pageSize = parseInt(params.get('stLocalTablePageSize') || '');
|
|
204
|
+
}
|
|
205
|
+
if (params.get('stLocalTableSortFieldName') &&
|
|
206
|
+
params.get('stLocalTableSortDirection')) {
|
|
207
|
+
this.sort.sort({
|
|
208
|
+
id: params.get('stLocalTableSortFieldName') || '',
|
|
209
|
+
start: params.get('stLocalTableSortDirection') || 'asc',
|
|
210
|
+
disableClear: false,
|
|
211
|
+
});
|
|
212
|
+
}
|
|
213
|
+
this.searchModel = params.get('stLocalTableSearch') || '';
|
|
214
|
+
if (this.searchModel) {
|
|
215
|
+
this.tableSource.filter = this.searchModel.trim().toLowerCase();
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
this.paginator.pageSize = this.pageSize;
|
|
219
|
+
}
|
|
220
|
+
applySearch() {
|
|
221
|
+
this.tableSource.filter = this.searchModel.trim().toLowerCase();
|
|
222
|
+
this.pageIndex = 0;
|
|
223
|
+
this.updateSearchToUrl();
|
|
224
|
+
}
|
|
225
|
+
clearSearch() {
|
|
226
|
+
this.searchModel = '';
|
|
227
|
+
this.tableSource.filter = this.searchModel;
|
|
228
|
+
this.pageIndex = 0;
|
|
229
|
+
this.updateSearchToUrl();
|
|
230
|
+
}
|
|
231
|
+
checkIfActionVisible(row, action) {
|
|
232
|
+
if (action.show) {
|
|
233
|
+
return action.show(row);
|
|
234
|
+
}
|
|
235
|
+
else {
|
|
236
|
+
return true;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
columnVisibleChanged(column) {
|
|
240
|
+
this.setDisplayedColumns();
|
|
241
|
+
this.updateConfigsToLocalStorage();
|
|
242
|
+
}
|
|
243
|
+
newConfigCreated(name) {
|
|
244
|
+
const newConfig = this.generateNewConfig(name);
|
|
245
|
+
this.configurations.push(newConfig);
|
|
246
|
+
this.updateConfigsToLocalStorage();
|
|
247
|
+
this.initConfig = newConfig;
|
|
248
|
+
}
|
|
249
|
+
configRemoved(configId) {
|
|
250
|
+
this.configurations = this.configurations.filter(config => config.configId !== configId);
|
|
251
|
+
this.updateConfigsToLocalStorage();
|
|
252
|
+
}
|
|
253
|
+
configChanged(configId) {
|
|
254
|
+
this.activeConfig = configId
|
|
255
|
+
? this.configurations.find(config => config.configId === configId)
|
|
256
|
+
: null;
|
|
257
|
+
if (this.activeConfig) {
|
|
258
|
+
this.setTableConfig(this.activeConfig.pageSize, this.activeConfig.columnsDisabled, this.activeConfig.sortFieldName, this.activeConfig.sortDirection);
|
|
259
|
+
}
|
|
260
|
+
else {
|
|
261
|
+
this.setTableConfig(this.pageSize, [], null, null);
|
|
262
|
+
this.clearSearch();
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
pageChanged(event) {
|
|
266
|
+
this.pageIndex = event.pageIndex;
|
|
267
|
+
this.updateSearchToUrl();
|
|
268
|
+
}
|
|
269
|
+
updateSearchToUrl() {
|
|
270
|
+
if (this.bindSearchToUrl) {
|
|
271
|
+
let queryParams = {
|
|
272
|
+
stLocalTableSearch: this.searchModel,
|
|
273
|
+
stLocalTablePageIndex: this.pageIndex,
|
|
274
|
+
stLocalTablePageSize: this.paginator.pageSize,
|
|
275
|
+
stLocalTableSortFieldName: '',
|
|
276
|
+
stLocalTableSortDirection: '',
|
|
277
|
+
};
|
|
278
|
+
if (this.sort.direction && this.sort.active) {
|
|
279
|
+
queryParams = Object.assign(Object.assign({}, queryParams), { stLocalTableSortFieldName: this.sort.active, stLocalTableSortDirection: this.sort.direction });
|
|
280
|
+
}
|
|
281
|
+
this.router.navigate(['./'], {
|
|
282
|
+
queryParams: queryParams,
|
|
283
|
+
relativeTo: this.activatedRoute,
|
|
284
|
+
});
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
updateConfigsToLocalStorage() {
|
|
288
|
+
this.localTableService.saveConfigs(this.configurations);
|
|
289
|
+
}
|
|
290
|
+
setTableSource() {
|
|
291
|
+
this.tableSource = new MatTableDataSource(this._data);
|
|
292
|
+
this.tableSource.paginator = this.paginator;
|
|
293
|
+
this.tableSource.sort = this.sort;
|
|
294
|
+
this.tableSource.filter = this.searchModel;
|
|
295
|
+
this.changeDetectorRef.markForCheck();
|
|
296
|
+
}
|
|
297
|
+
setDisplayedColumns() {
|
|
298
|
+
this.displayedColumns = Object.keys(this.columns).filter(column => {
|
|
299
|
+
return this._columns[column].visible;
|
|
300
|
+
});
|
|
301
|
+
}
|
|
302
|
+
getColumnsArray() {
|
|
303
|
+
return Object.keys(this._columns).map(column => this._columns[column]);
|
|
304
|
+
}
|
|
305
|
+
loadConfigs() {
|
|
306
|
+
this.configurations = this.localTableService.getConfigs();
|
|
307
|
+
}
|
|
308
|
+
generateNewConfig(configName) {
|
|
309
|
+
return {
|
|
310
|
+
configId: Date.now().toString(),
|
|
311
|
+
configName: configName,
|
|
312
|
+
columnsDisabled: this.columnsArray
|
|
313
|
+
.filter(column => !column.visible)
|
|
314
|
+
.map(column => column.translateColumnName),
|
|
315
|
+
pageSize: this.paginator.pageSize,
|
|
316
|
+
sortFieldName: this.sort.direction && this.sort.active ? this.sort.active : null,
|
|
317
|
+
sortDirection: this.sort.direction || null,
|
|
318
|
+
};
|
|
319
|
+
}
|
|
320
|
+
setTableConfig(pageSize, disabledColumns, sortFieldName, sortDirection) {
|
|
321
|
+
this.paginator.pageSize = pageSize;
|
|
322
|
+
this.sort.sort({
|
|
323
|
+
id: sortFieldName || '',
|
|
324
|
+
start: sortDirection || 'asc',
|
|
325
|
+
disableClear: false,
|
|
326
|
+
});
|
|
327
|
+
this.columnsArray.forEach(column => {
|
|
328
|
+
column.visible =
|
|
329
|
+
disabledColumns.indexOf(column.translateColumnName) === -1;
|
|
330
|
+
});
|
|
331
|
+
this.setDisplayedColumns();
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
LocalTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LocalTableComponent, deps: [{ token: LocalTableService }, { token: i0.ChangeDetectorRef }, { token: i2$1.Router }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
335
|
+
LocalTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LocalTableComponent, selector: "ngx-st-local-table", inputs: { tableSettings: "tableSettings", globalSearchSettings: "globalSearchSettings", pageSize: "pageSize", allowPickColumns: "allowPickColumns", configurationsSettings: "configurationsSettings", localStorageName: "localStorageName", bindSearchToUrl: "bindSearchToUrl", columns: "columns", data: "data" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"local-table\">\r\n <div class=\"row align-items-center\">\r\n <div\r\n class=\"col row align-items-center\"\r\n style=\"padding: 0\"\r\n *ngIf=\"configurationsSettings || allowPickColumns\"\r\n >\r\n <div class=\"col-auto\" style=\"padding: 0\" *ngIf=\"allowPickColumns\">\r\n <button\r\n mat-icon-button\r\n class=\"col-auto\"\r\n [matMenuTriggerFor]=\"columnsMenu\"\r\n >\r\n <span class=\"material-icons-outlined\"> view_week </span>\r\n </button>\r\n <mat-menu #columnsMenu=\"matMenu\" xPosition=\"after\">\r\n <ng-container *ngFor=\"let column of columnsArray\">\r\n <div mat-menu-item *ngIf=\"!column.notShowInColumnPick\">\r\n <mat-checkbox\r\n [(ngModel)]=\"column.visible\"\r\n (ngModelChange)=\"columnVisibleChanged(column)\"\r\n style=\"margin-top: 5px\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n {{ column.translateColumnName }}\r\n </mat-checkbox>\r\n </div>\r\n </ng-container>\r\n </mat-menu>\r\n </div>\r\n\r\n <st-configurations\r\n *ngIf=\"configurationsSettings\"\r\n [configurationsSettings]=\"configurationsSettings\"\r\n [configurations]=\"configurations\"\r\n [initSelectedConfig]=\"initConfig\"\r\n (createNewConfig)=\"newConfigCreated($event)\"\r\n (removeConfig)=\"configRemoved($event)\"\r\n (changeConfig)=\"configChanged($event)\"\r\n ></st-configurations>\r\n </div>\r\n\r\n <div class=\"col\" style=\"padding: 0\" *ngIf=\"globalSearchSettings?.show\">\r\n <mat-form-field class=\"col\">\r\n <mat-label>{{ globalSearchSettings?.label || 'Search' }}</mat-label>\r\n <input matInput (keyup)=\"applySearch()\" [(ngModel)]=\"searchModel\" />\r\n <button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"clearSearch()\"\r\n >\r\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <table\r\n [ngClass]=\"{ 'no-hover': !tableSettings?.rowClickAction }\"\r\n mat-table\r\n [dataSource]=\"tableSource\"\r\n matSort\r\n >\r\n <ng-container\r\n [matColumnDef]=\"column\"\r\n *ngFor=\"let column of displayedColumns\"\r\n >\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"{{\r\n columns[column].width ? 'width:' + columns[column].width : ''\r\n }}\"\r\n mat-sort-header\r\n [disabled]=\"!columns[column].sort\"\r\n >\r\n {{ columns[column].translateColumnName }}\r\n <span\r\n class=\"material-icons search-icon\"\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"$event.stopPropagation()\"\r\n *ngIf=\"columns[column].search\"\r\n >\r\n search\r\n </span>\r\n <mat-menu #menu=\"matMenu\" xPosition=\"before\">\r\n <mat-form-field class=\"col\">\r\n <mat-label>{{ columns[column].searchLabel || 'Search' }}</mat-label>\r\n <input\r\n matInput\r\n (keyup)=\"applySearch()\"\r\n [(ngModel)]=\"searchModel\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n <button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"searchModel = ''\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n </mat-menu>\r\n </th>\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n style=\"{{\r\n columns[column].width ? 'width:' + columns[column].width : ''\r\n }}\"\r\n >\r\n <div\r\n class=\"actions-container\"\r\n [ngClass]=\"{ 'justify-content-end': columns[column].flexRight }\"\r\n *ngIf=\"columns[column].actions && columns[column].actions!.length > 0\"\r\n >\r\n <ng-container *ngFor=\"let action of columns[column].actions\">\r\n <ng-container *ngIf=\"checkIfActionVisible(element, action)\">\r\n <button\r\n class=\"col-auto\"\r\n mat-icon-button\r\n type=\"button\"\r\n *ngIf=\"!action.url && action.action\"\r\n matTooltip=\"{{ action.tooltipName || '' }}\"\r\n [matTooltipDisabled]=\"!!!action.tooltipName\"\r\n (click)=\"action.action(element)\"\r\n >\r\n <span class=\"material-icons\">{{ action.iconName }}</span>\r\n </button>\r\n\r\n <a *ngIf=\"action.url\" [routerLink]=\"action.url\">\r\n <button\r\n class=\"col-auto\"\r\n mat-icon-button\r\n type=\"button\"\r\n matTooltip=\"{{ action.tooltipName || '' }}\"\r\n [matTooltipDisabled]=\"!!!action.tooltipName\"\r\n >\r\n <span class=\"material-icons\">{{ action.iconName }}</span>\r\n </button>\r\n </a>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"!columns[column].actions\">\r\n <ng-container *ngIf=\"columns[column].translateValue\">\r\n <p style=\"margin: 0; padding: 0\">\r\n {{ columns[column].translateValue![element[column]] || '' }}\r\n </p>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!columns[column].translateValue\">\r\n <ng-container\r\n *ngIf=\"!columns[column].type || columns[column].type === 'string'\"\r\n >\r\n <p style=\"margin: 0; padding: 0\">{{ element[column] }}</p>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"columns[column].type === 'date'\">\r\n <p style=\"margin: 0; padding: 0\">\r\n {{ element[column] | stDateTimeFormatPipe }}\r\n </p>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: displayedColumns\"\r\n (click)=\"\r\n tableSettings?.rowClickAction ? tableSettings.rowClickAction(row) : null\r\n \"\r\n ></tr>\r\n </table>\r\n <mat-paginator\r\n [pageIndex]=\"pageIndex\"\r\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n (page)=\"pageChanged($event)\"\r\n [showFirstLastButtons]=\"true\"\r\n ></mat-paginator>\r\n</div>\r\n", styles: ["", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-header-cell:first-of-type,table td.mat-cell:first-of-type,table td.mat-footer-cell:first-of-type{padding-left:12px}table th.mat-header-cell:last-of-type,table td.mat-cell:last-of-type,table td.mat-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4}table::ng-deep thead tr th{border-color:#fdd835}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr:hover{background-color:#a5d6a7}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent}table.no-hover::ng-deep tbody tr:hover{background-color:transparent}table.admin-table::ng-deep .actions-cell{width:100px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: ConfigurationsComponent, selector: "st-configurations[configurationsSettings]", inputs: ["configurationsSettings", "configurations", "initSelectedConfig"], outputs: ["createNewConfig", "removeConfig", "changeConfig"] }, { kind: "pipe", type: i16.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
336
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LocalTableComponent, decorators: [{
|
|
337
|
+
type: Component,
|
|
338
|
+
args: [{ selector: 'ngx-st-local-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"local-table\">\r\n <div class=\"row align-items-center\">\r\n <div\r\n class=\"col row align-items-center\"\r\n style=\"padding: 0\"\r\n *ngIf=\"configurationsSettings || allowPickColumns\"\r\n >\r\n <div class=\"col-auto\" style=\"padding: 0\" *ngIf=\"allowPickColumns\">\r\n <button\r\n mat-icon-button\r\n class=\"col-auto\"\r\n [matMenuTriggerFor]=\"columnsMenu\"\r\n >\r\n <span class=\"material-icons-outlined\"> view_week </span>\r\n </button>\r\n <mat-menu #columnsMenu=\"matMenu\" xPosition=\"after\">\r\n <ng-container *ngFor=\"let column of columnsArray\">\r\n <div mat-menu-item *ngIf=\"!column.notShowInColumnPick\">\r\n <mat-checkbox\r\n [(ngModel)]=\"column.visible\"\r\n (ngModelChange)=\"columnVisibleChanged(column)\"\r\n style=\"margin-top: 5px\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n {{ column.translateColumnName }}\r\n </mat-checkbox>\r\n </div>\r\n </ng-container>\r\n </mat-menu>\r\n </div>\r\n\r\n <st-configurations\r\n *ngIf=\"configurationsSettings\"\r\n [configurationsSettings]=\"configurationsSettings\"\r\n [configurations]=\"configurations\"\r\n [initSelectedConfig]=\"initConfig\"\r\n (createNewConfig)=\"newConfigCreated($event)\"\r\n (removeConfig)=\"configRemoved($event)\"\r\n (changeConfig)=\"configChanged($event)\"\r\n ></st-configurations>\r\n </div>\r\n\r\n <div class=\"col\" style=\"padding: 0\" *ngIf=\"globalSearchSettings?.show\">\r\n <mat-form-field class=\"col\">\r\n <mat-label>{{ globalSearchSettings?.label || 'Search' }}</mat-label>\r\n <input matInput (keyup)=\"applySearch()\" [(ngModel)]=\"searchModel\" />\r\n <button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"clearSearch()\"\r\n >\r\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <table\r\n [ngClass]=\"{ 'no-hover': !tableSettings?.rowClickAction }\"\r\n mat-table\r\n [dataSource]=\"tableSource\"\r\n matSort\r\n >\r\n <ng-container\r\n [matColumnDef]=\"column\"\r\n *ngFor=\"let column of displayedColumns\"\r\n >\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"{{\r\n columns[column].width ? 'width:' + columns[column].width : ''\r\n }}\"\r\n mat-sort-header\r\n [disabled]=\"!columns[column].sort\"\r\n >\r\n {{ columns[column].translateColumnName }}\r\n <span\r\n class=\"material-icons search-icon\"\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"$event.stopPropagation()\"\r\n *ngIf=\"columns[column].search\"\r\n >\r\n search\r\n </span>\r\n <mat-menu #menu=\"matMenu\" xPosition=\"before\">\r\n <mat-form-field class=\"col\">\r\n <mat-label>{{ columns[column].searchLabel || 'Search' }}</mat-label>\r\n <input\r\n matInput\r\n (keyup)=\"applySearch()\"\r\n [(ngModel)]=\"searchModel\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n <button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"searchModel = ''\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n </mat-menu>\r\n </th>\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n style=\"{{\r\n columns[column].width ? 'width:' + columns[column].width : ''\r\n }}\"\r\n >\r\n <div\r\n class=\"actions-container\"\r\n [ngClass]=\"{ 'justify-content-end': columns[column].flexRight }\"\r\n *ngIf=\"columns[column].actions && columns[column].actions!.length > 0\"\r\n >\r\n <ng-container *ngFor=\"let action of columns[column].actions\">\r\n <ng-container *ngIf=\"checkIfActionVisible(element, action)\">\r\n <button\r\n class=\"col-auto\"\r\n mat-icon-button\r\n type=\"button\"\r\n *ngIf=\"!action.url && action.action\"\r\n matTooltip=\"{{ action.tooltipName || '' }}\"\r\n [matTooltipDisabled]=\"!!!action.tooltipName\"\r\n (click)=\"action.action(element)\"\r\n >\r\n <span class=\"material-icons\">{{ action.iconName }}</span>\r\n </button>\r\n\r\n <a *ngIf=\"action.url\" [routerLink]=\"action.url\">\r\n <button\r\n class=\"col-auto\"\r\n mat-icon-button\r\n type=\"button\"\r\n matTooltip=\"{{ action.tooltipName || '' }}\"\r\n [matTooltipDisabled]=\"!!!action.tooltipName\"\r\n >\r\n <span class=\"material-icons\">{{ action.iconName }}</span>\r\n </button>\r\n </a>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"!columns[column].actions\">\r\n <ng-container *ngIf=\"columns[column].translateValue\">\r\n <p style=\"margin: 0; padding: 0\">\r\n {{ columns[column].translateValue![element[column]] || '' }}\r\n </p>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!columns[column].translateValue\">\r\n <ng-container\r\n *ngIf=\"!columns[column].type || columns[column].type === 'string'\"\r\n >\r\n <p style=\"margin: 0; padding: 0\">{{ element[column] }}</p>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"columns[column].type === 'date'\">\r\n <p style=\"margin: 0; padding: 0\">\r\n {{ element[column] | stDateTimeFormatPipe }}\r\n </p>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: displayedColumns\"\r\n (click)=\"\r\n tableSettings?.rowClickAction ? tableSettings.rowClickAction(row) : null\r\n \"\r\n ></tr>\r\n </table>\r\n <mat-paginator\r\n [pageIndex]=\"pageIndex\"\r\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n (page)=\"pageChanged($event)\"\r\n [showFirstLastButtons]=\"true\"\r\n ></mat-paginator>\r\n</div>\r\n", styles: [".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-header-cell:first-of-type,table td.mat-cell:first-of-type,table td.mat-footer-cell:first-of-type{padding-left:12px}table th.mat-header-cell:last-of-type,table td.mat-cell:last-of-type,table td.mat-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4}table::ng-deep thead tr th{border-color:#fdd835}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr:hover{background-color:#a5d6a7}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent}table.no-hover::ng-deep tbody tr:hover{background-color:transparent}table.admin-table::ng-deep .actions-cell{width:100px}\n"] }]
|
|
339
|
+
}], ctorParameters: function () { return [{ type: LocalTableService }, { type: i0.ChangeDetectorRef }, { type: i2$1.Router }, { type: i2$1.ActivatedRoute }]; }, propDecorators: { paginator: [{
|
|
340
|
+
type: ViewChild,
|
|
341
|
+
args: [MatPaginator]
|
|
342
|
+
}], sort: [{
|
|
343
|
+
type: ViewChild,
|
|
344
|
+
args: [MatSort]
|
|
345
|
+
}], tableSettings: [{
|
|
346
|
+
type: Input
|
|
347
|
+
}], globalSearchSettings: [{
|
|
348
|
+
type: Input
|
|
349
|
+
}], pageSize: [{
|
|
350
|
+
type: Input
|
|
351
|
+
}], allowPickColumns: [{
|
|
352
|
+
type: Input
|
|
353
|
+
}], configurationsSettings: [{
|
|
354
|
+
type: Input
|
|
355
|
+
}], localStorageName: [{
|
|
356
|
+
type: Input
|
|
357
|
+
}], bindSearchToUrl: [{
|
|
358
|
+
type: Input
|
|
359
|
+
}], columns: [{
|
|
360
|
+
type: Input
|
|
361
|
+
}], data: [{
|
|
362
|
+
type: Input
|
|
363
363
|
}] } });
|
|
364
364
|
|
|
365
|
-
class SelectTableComponent {
|
|
366
|
-
constructor() {
|
|
367
|
-
this.required = false;
|
|
368
|
-
this.multiple = false;
|
|
369
|
-
this.searchLabel = 'Search';
|
|
370
|
-
this.selectedLabel = 'Selected';
|
|
371
|
-
this._validError = false;
|
|
372
|
-
this.
|
|
373
|
-
this.
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
this.
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
this.tableSource
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
this.
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
}
|
|
422
|
-
|
|
423
|
-
SelectTableComponent.ɵ
|
|
424
|
-
i0.ɵɵ
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
}]
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
365
|
+
class SelectTableComponent {
|
|
366
|
+
constructor() {
|
|
367
|
+
this.required = false;
|
|
368
|
+
this.multiple = false;
|
|
369
|
+
this.searchLabel = 'Search';
|
|
370
|
+
this.selectedLabel = 'Selected';
|
|
371
|
+
this._validError = false;
|
|
372
|
+
this.returnRowSelected = new EventEmitter();
|
|
373
|
+
this.search = new UntypedFormControl('');
|
|
374
|
+
this.rowSelected = [];
|
|
375
|
+
}
|
|
376
|
+
set setInitColumns(col) {
|
|
377
|
+
this.columns = ['active', ...Object.keys(col)];
|
|
378
|
+
this.initColumns = col;
|
|
379
|
+
}
|
|
380
|
+
set tableData(data) {
|
|
381
|
+
this.tableSource = new MatTableDataSource(data);
|
|
382
|
+
this.tableSource.paginator = this.paginator;
|
|
383
|
+
}
|
|
384
|
+
set validError(error) {
|
|
385
|
+
this._validError = error;
|
|
386
|
+
}
|
|
387
|
+
get validError() {
|
|
388
|
+
return this._validError;
|
|
389
|
+
}
|
|
390
|
+
ngOnInit() {
|
|
391
|
+
this.search.valueChanges.subscribe(res => {
|
|
392
|
+
this.tableSource.filter = res.trim().toLowerCase();
|
|
393
|
+
});
|
|
394
|
+
setTimeout(() => {
|
|
395
|
+
if (this.initSearchVal) {
|
|
396
|
+
this.search.setValue(this.initSearchVal);
|
|
397
|
+
this.rowClick(this.initSelected);
|
|
398
|
+
}
|
|
399
|
+
}, 1000);
|
|
400
|
+
}
|
|
401
|
+
clearSearch() {
|
|
402
|
+
this.search.setValue('');
|
|
403
|
+
}
|
|
404
|
+
rowClick(row) {
|
|
405
|
+
const found = this.rowSelected.find(tmpRow => tmpRow === row);
|
|
406
|
+
if (found) {
|
|
407
|
+
this.rowSelected = this.rowSelected.filter(tmpRow => tmpRow !== row);
|
|
408
|
+
}
|
|
409
|
+
else {
|
|
410
|
+
if (this.multiple) {
|
|
411
|
+
this.rowSelected.push(row);
|
|
412
|
+
}
|
|
413
|
+
else {
|
|
414
|
+
this.rowSelected = [row];
|
|
415
|
+
}
|
|
416
|
+
}
|
|
417
|
+
this.returnRowSelected.emit(this.rowSelected);
|
|
418
|
+
}
|
|
419
|
+
checkActiveRow(row) {
|
|
420
|
+
return !!this.rowSelected.find(activeRow => activeRow === row);
|
|
421
|
+
}
|
|
422
|
+
}
|
|
423
|
+
SelectTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
424
|
+
SelectTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectTableComponent, selector: "ngx-st-select-table", inputs: { title: "title", required: "required", multiple: "multiple", initSelected: "initSelected", initSearchVal: "initSearchVal", searchLabel: "searchLabel", selectedLabel: "selectedLabel", setInitColumns: "setInitColumns", tableData: "tableData", validError: "validError" }, outputs: { returnRowSelected: "returnRowSelected" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"shared-table-selector\">\r\n <p class=\"title\" [ngClass]=\"{ 'error-text': validError }\">\r\n {{ title }} {{ required ? '*' : '' }}\r\n </p>\r\n\r\n <div class=\"search-form row align-items-center\">\r\n <div class=\"col-sm-12 col-md row align-items-center\">\r\n <mat-form-field class=\"col\">\r\n <input\r\n matInput\r\n placeholder=\"{{ searchLabel }}\"\r\n [formControl]=\"search\"\r\n />\r\n </mat-form-field>\r\n <div class=\"clear col-auto\">\r\n <i class=\"material-icons\" (click)=\"clearSearch()\">clear</i>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <table mat-table [dataSource]=\"tableSource\">\r\n <ng-container *ngFor=\"let col of columns\" [matColumnDef]=\"col\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n {{ col === 'active' ? selectedLabel : initColumns[col] }}\r\n </th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <ng-container *ngIf=\"col === 'active'\">\r\n <i *ngIf=\"checkActiveRow(element)\" class=\"material-icons active-row\"\r\n >done</i\r\n >\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"col !== 'active'\">\r\n {{ element[col] }}\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"columns\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: columns\"\r\n (click)=\"rowClick(row)\"\r\n [ngClass]=\"{ active: checkActiveRow(row) }\"\r\n ></tr>\r\n </table>\r\n <mat-paginator [pageSizeOptions]=\"[5]\"></mat-paginator>\r\n</div>\r\n", styles: [".title{margin-bottom:0;margin-top:1rem;font-weight:500}.title.error-text{color:#ef5350}\n", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-header-cell:first-of-type,table td.mat-cell:first-of-type,table td.mat-footer-cell:first-of-type{padding-left:12px}table th.mat-header-cell:last-of-type,table td.mat-cell:last-of-type,table td.mat-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4}table::ng-deep thead tr th{border-color:#fdd835}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr:hover{background-color:#a5d6a7}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent}table.no-hover::ng-deep tbody tr:hover{background-color:transparent}table.admin-table::ng-deep .actions-cell{width:100px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
425
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectTableComponent, decorators: [{
|
|
426
|
+
type: Component,
|
|
427
|
+
args: [{ selector: 'ngx-st-select-table', template: "<div class=\"shared-table-selector\">\r\n <p class=\"title\" [ngClass]=\"{ 'error-text': validError }\">\r\n {{ title }} {{ required ? '*' : '' }}\r\n </p>\r\n\r\n <div class=\"search-form row align-items-center\">\r\n <div class=\"col-sm-12 col-md row align-items-center\">\r\n <mat-form-field class=\"col\">\r\n <input\r\n matInput\r\n placeholder=\"{{ searchLabel }}\"\r\n [formControl]=\"search\"\r\n />\r\n </mat-form-field>\r\n <div class=\"clear col-auto\">\r\n <i class=\"material-icons\" (click)=\"clearSearch()\">clear</i>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <table mat-table [dataSource]=\"tableSource\">\r\n <ng-container *ngFor=\"let col of columns\" [matColumnDef]=\"col\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n {{ col === 'active' ? selectedLabel : initColumns[col] }}\r\n </th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <ng-container *ngIf=\"col === 'active'\">\r\n <i *ngIf=\"checkActiveRow(element)\" class=\"material-icons active-row\"\r\n >done</i\r\n >\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"col !== 'active'\">\r\n {{ element[col] }}\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"columns\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: columns\"\r\n (click)=\"rowClick(row)\"\r\n [ngClass]=\"{ active: checkActiveRow(row) }\"\r\n ></tr>\r\n </table>\r\n <mat-paginator [pageSizeOptions]=\"[5]\"></mat-paginator>\r\n</div>\r\n", styles: [".title{margin-bottom:0;margin-top:1rem;font-weight:500}.title.error-text{color:#ef5350}\n", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-header-cell:first-of-type,table td.mat-cell:first-of-type,table td.mat-footer-cell:first-of-type{padding-left:12px}table th.mat-header-cell:last-of-type,table td.mat-cell:last-of-type,table td.mat-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4}table::ng-deep thead tr th{border-color:#fdd835}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr:hover{background-color:#a5d6a7}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent}table.no-hover::ng-deep tbody tr:hover{background-color:transparent}table.admin-table::ng-deep .actions-cell{width:100px}\n"] }]
|
|
428
|
+
}], ctorParameters: function () { return []; }, propDecorators: { paginator: [{
|
|
429
|
+
type: ViewChild,
|
|
430
|
+
args: [MatPaginator]
|
|
431
|
+
}], title: [{
|
|
432
|
+
type: Input
|
|
433
|
+
}], required: [{
|
|
434
|
+
type: Input
|
|
435
|
+
}], multiple: [{
|
|
436
|
+
type: Input
|
|
437
|
+
}], initSelected: [{
|
|
438
|
+
type: Input
|
|
439
|
+
}], initSearchVal: [{
|
|
440
|
+
type: Input
|
|
441
|
+
}], searchLabel: [{
|
|
442
|
+
type: Input
|
|
443
|
+
}], selectedLabel: [{
|
|
444
|
+
type: Input
|
|
445
|
+
}], setInitColumns: [{
|
|
446
|
+
type: Input
|
|
447
|
+
}], tableData: [{
|
|
448
|
+
type: Input
|
|
449
|
+
}], validError: [{
|
|
450
|
+
type: Input
|
|
451
|
+
}], returnRowSelected: [{
|
|
452
|
+
type: Output
|
|
452
453
|
}] } });
|
|
453
454
|
|
|
454
|
-
class StTablesModule {
|
|
455
|
-
}
|
|
456
|
-
StTablesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StTablesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
457
|
-
StTablesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: StTablesModule, declarations: [LocalTableComponent,
|
|
458
|
-
SelectTableComponent,
|
|
459
|
-
ConfigurationsComponent], imports: [CommonModule,
|
|
460
|
-
MatButtonModule,
|
|
461
|
-
MatIconModule,
|
|
462
|
-
MatTableModule,
|
|
463
|
-
MatPaginatorModule,
|
|
464
|
-
MatFormFieldModule,
|
|
465
|
-
MatInputModule,
|
|
466
|
-
MatTooltipModule,
|
|
467
|
-
FormsModule,
|
|
468
|
-
ReactiveFormsModule,
|
|
469
|
-
RouterModule,
|
|
470
|
-
StDateFormatModule,
|
|
471
|
-
MatSortModule,
|
|
472
|
-
MatMenuModule,
|
|
473
|
-
MatSelectModule,
|
|
474
|
-
MatCheckboxModule], exports: [LocalTableComponent, SelectTableComponent] });
|
|
475
|
-
StTablesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StTablesModule, providers: [LocalTableService], imports: [CommonModule,
|
|
476
|
-
MatButtonModule,
|
|
477
|
-
MatIconModule,
|
|
478
|
-
MatTableModule,
|
|
479
|
-
MatPaginatorModule,
|
|
480
|
-
MatFormFieldModule,
|
|
481
|
-
MatInputModule,
|
|
482
|
-
MatTooltipModule,
|
|
483
|
-
FormsModule,
|
|
484
|
-
ReactiveFormsModule,
|
|
485
|
-
RouterModule,
|
|
486
|
-
StDateFormatModule,
|
|
487
|
-
MatSortModule,
|
|
488
|
-
MatMenuModule,
|
|
489
|
-
MatSelectModule,
|
|
490
|
-
MatCheckboxModule] });
|
|
491
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StTablesModule, decorators: [{
|
|
492
|
-
type: NgModule,
|
|
493
|
-
args: [{
|
|
494
|
-
declarations: [
|
|
495
|
-
LocalTableComponent,
|
|
496
|
-
SelectTableComponent,
|
|
497
|
-
ConfigurationsComponent,
|
|
498
|
-
],
|
|
499
|
-
imports: [
|
|
500
|
-
CommonModule,
|
|
501
|
-
MatButtonModule,
|
|
502
|
-
MatIconModule,
|
|
503
|
-
MatTableModule,
|
|
504
|
-
MatPaginatorModule,
|
|
505
|
-
MatFormFieldModule,
|
|
506
|
-
MatInputModule,
|
|
507
|
-
MatTooltipModule,
|
|
508
|
-
FormsModule,
|
|
509
|
-
ReactiveFormsModule,
|
|
510
|
-
RouterModule,
|
|
511
|
-
StDateFormatModule,
|
|
512
|
-
MatSortModule,
|
|
513
|
-
MatMenuModule,
|
|
514
|
-
MatSelectModule,
|
|
515
|
-
MatCheckboxModule,
|
|
516
|
-
],
|
|
517
|
-
exports: [LocalTableComponent, SelectTableComponent],
|
|
518
|
-
providers: [LocalTableService],
|
|
519
|
-
}]
|
|
455
|
+
class StTablesModule {
|
|
456
|
+
}
|
|
457
|
+
StTablesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StTablesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
458
|
+
StTablesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: StTablesModule, declarations: [LocalTableComponent,
|
|
459
|
+
SelectTableComponent,
|
|
460
|
+
ConfigurationsComponent], imports: [CommonModule,
|
|
461
|
+
MatButtonModule,
|
|
462
|
+
MatIconModule,
|
|
463
|
+
MatTableModule,
|
|
464
|
+
MatPaginatorModule,
|
|
465
|
+
MatFormFieldModule,
|
|
466
|
+
MatInputModule,
|
|
467
|
+
MatTooltipModule,
|
|
468
|
+
FormsModule,
|
|
469
|
+
ReactiveFormsModule,
|
|
470
|
+
RouterModule,
|
|
471
|
+
StDateFormatModule,
|
|
472
|
+
MatSortModule,
|
|
473
|
+
MatMenuModule,
|
|
474
|
+
MatSelectModule,
|
|
475
|
+
MatCheckboxModule], exports: [LocalTableComponent, SelectTableComponent] });
|
|
476
|
+
StTablesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StTablesModule, providers: [LocalTableService], imports: [CommonModule,
|
|
477
|
+
MatButtonModule,
|
|
478
|
+
MatIconModule,
|
|
479
|
+
MatTableModule,
|
|
480
|
+
MatPaginatorModule,
|
|
481
|
+
MatFormFieldModule,
|
|
482
|
+
MatInputModule,
|
|
483
|
+
MatTooltipModule,
|
|
484
|
+
FormsModule,
|
|
485
|
+
ReactiveFormsModule,
|
|
486
|
+
RouterModule,
|
|
487
|
+
StDateFormatModule,
|
|
488
|
+
MatSortModule,
|
|
489
|
+
MatMenuModule,
|
|
490
|
+
MatSelectModule,
|
|
491
|
+
MatCheckboxModule] });
|
|
492
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StTablesModule, decorators: [{
|
|
493
|
+
type: NgModule,
|
|
494
|
+
args: [{
|
|
495
|
+
declarations: [
|
|
496
|
+
LocalTableComponent,
|
|
497
|
+
SelectTableComponent,
|
|
498
|
+
ConfigurationsComponent,
|
|
499
|
+
],
|
|
500
|
+
imports: [
|
|
501
|
+
CommonModule,
|
|
502
|
+
MatButtonModule,
|
|
503
|
+
MatIconModule,
|
|
504
|
+
MatTableModule,
|
|
505
|
+
MatPaginatorModule,
|
|
506
|
+
MatFormFieldModule,
|
|
507
|
+
MatInputModule,
|
|
508
|
+
MatTooltipModule,
|
|
509
|
+
FormsModule,
|
|
510
|
+
ReactiveFormsModule,
|
|
511
|
+
RouterModule,
|
|
512
|
+
StDateFormatModule,
|
|
513
|
+
MatSortModule,
|
|
514
|
+
MatMenuModule,
|
|
515
|
+
MatSelectModule,
|
|
516
|
+
MatCheckboxModule,
|
|
517
|
+
],
|
|
518
|
+
exports: [LocalTableComponent, SelectTableComponent],
|
|
519
|
+
providers: [LocalTableService],
|
|
520
|
+
}]
|
|
520
521
|
}] });
|
|
521
522
|
|
|
522
|
-
/*
|
|
523
|
-
* Public API Surface of ngx-st-tables
|
|
523
|
+
/*
|
|
524
|
+
* Public API Surface of ngx-st-tables
|
|
524
525
|
*/
|
|
525
526
|
|
|
526
|
-
/**
|
|
527
|
-
* Generated bundle index. Do not edit.
|
|
527
|
+
/**
|
|
528
|
+
* Generated bundle index. Do not edit.
|
|
528
529
|
*/
|
|
529
530
|
|
|
530
531
|
export { ConfigurationsComponent, LocalTableComponent, LocalTableService, SelectTableComponent, StTablesModule };
|