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.
Files changed (34) hide show
  1. package/README.md +24 -24
  2. package/assets/base-collapse-table.scss +49 -49
  3. package/assets/base-table.scss +155 -155
  4. package/esm2020/lib/components/local-table/configurations/configurations.component.mjs +69 -69
  5. package/esm2020/lib/components/local-table/local-table.component.mjs +259 -259
  6. package/esm2020/lib/components/select-table/select-table.component.mjs +101 -100
  7. package/esm2020/lib/models/st-configurations-settings.model.mjs +1 -1
  8. package/esm2020/lib/models/st-global-search-settings.model.mjs +1 -1
  9. package/esm2020/lib/models/st-local-storage-configuration.model.mjs +1 -1
  10. package/esm2020/lib/models/st-local-table-column.model.mjs +1 -1
  11. package/esm2020/lib/models/st-local-table-columns.model.mjs +1 -1
  12. package/esm2020/lib/models/st-table-settings.model.mjs +1 -1
  13. package/esm2020/lib/ngx-st-tables.module.mjs +89 -89
  14. package/esm2020/lib/services/local-table.service.mjs +36 -36
  15. package/esm2020/ngx-st-tables.mjs +4 -4
  16. package/esm2020/public-api.mjs +15 -15
  17. package/fesm2015/ngx-st-tables.mjs +482 -481
  18. package/fesm2015/ngx-st-tables.mjs.map +1 -1
  19. package/fesm2020/ngx-st-tables.mjs +484 -483
  20. package/fesm2020/ngx-st-tables.mjs.map +1 -1
  21. package/index.d.ts +5 -5
  22. package/lib/components/local-table/configurations/configurations.component.d.ts +27 -27
  23. package/lib/components/local-table/local-table.component.d.ts +63 -63
  24. package/lib/components/select-table/select-table.component.d.ts +37 -37
  25. package/lib/models/st-configurations-settings.model.d.ts +6 -6
  26. package/lib/models/st-global-search-settings.model.d.ts +4 -4
  27. package/lib/models/st-local-storage-configuration.model.d.ts +8 -8
  28. package/lib/models/st-local-table-column.model.d.ts +22 -22
  29. package/lib/models/st-local-table-columns.model.d.ts +4 -4
  30. package/lib/models/st-table-settings.model.d.ts +3 -3
  31. package/lib/ngx-st-tables.module.d.ts +24 -24
  32. package/lib/services/local-table.service.d.ts +11 -11
  33. package/package.json +1 -1
  34. 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.search = new UntypedFormControl('');
373
- this.rowSelected = [];
374
- }
375
- set setInitColumns(col) {
376
- this.columns = ['active', ...Object.keys(col)];
377
- this.initColumns = col;
378
- }
379
- set tableData(data) {
380
- this.tableSource = new MatTableDataSource(data);
381
- this.tableSource.paginator = this.paginator;
382
- }
383
- set validError(error) {
384
- this._validError = error;
385
- }
386
- get validError() {
387
- return this._validError;
388
- }
389
- ngOnInit() {
390
- this.search.valueChanges.subscribe(res => {
391
- this.tableSource.filter = res.trim().toLowerCase();
392
- });
393
- setTimeout(() => {
394
- if (this.initSearchVal) {
395
- this.search.setValue(this.initSearchVal);
396
- this.rowClick(this.initSelected);
397
- }
398
- }, 1000);
399
- }
400
- clearSearch() {
401
- this.search.setValue('');
402
- }
403
- rowClick(row) {
404
- const found = this.rowSelected.find(tmpRow => tmpRow === row);
405
- if (found) {
406
- this.rowSelected = this.rowSelected.filter(tmpRow => tmpRow !== row);
407
- }
408
- else {
409
- if (this.multiple) {
410
- this.rowSelected.push(row);
411
- }
412
- else {
413
- this.rowSelected = [row];
414
- }
415
- }
416
- this.returnRowSelected.emit(this.rowSelected);
417
- }
418
- checkActiveRow(row) {
419
- return !!this.rowSelected.find(activeRow => activeRow === row);
420
- }
421
- }
422
- SelectTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
423
- 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\">\n <p class=\"title\" [ngClass]=\"{ 'error-text': validError }\">\n {{ title }} {{ required ? '*' : '' }}\n </p>\n\n <div class=\"search-form row align-items-center\">\n <div class=\"col-sm-12 col-md row align-items-center\">\n <mat-form-field class=\"col\">\n <input\n matInput\n placeholder=\"{{ searchLabel }}\"\n [formControl]=\"search\"\n />\n </mat-form-field>\n <div class=\"clear col-auto\">\n <i class=\"material-icons\" (click)=\"clearSearch()\">clear</i>\n </div>\n </div>\n </div>\n\n <table mat-table [dataSource]=\"tableSource\">\n <ng-container *ngFor=\"let col of columns\" [matColumnDef]=\"col\">\n <th mat-header-cell *matHeaderCellDef>\n {{ col === 'active' ? selectedLabel : initColumns[col] }}\n </th>\n <td mat-cell *matCellDef=\"let element\">\n <ng-container *ngIf=\"col === 'active'\">\n <i *ngIf=\"checkActiveRow(element)\" class=\"material-icons active-row\"\n >done</i\n >\n </ng-container>\n\n <ng-container *ngIf=\"col !== 'active'\">\n {{ element[col] }}\n </ng-container>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columns\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: columns\"\n (click)=\"rowClick(row)\"\n [ngClass]=\"{ active: checkActiveRow(row) }\"\n ></tr>\n </table>\n <mat-paginator [pageSizeOptions]=\"[5]\"></mat-paginator>\n</div>\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"] }] });
424
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectTableComponent, decorators: [{
425
- type: Component,
426
- args: [{ selector: 'ngx-st-select-table', template: "<div class=\"shared-table-selector\">\n <p class=\"title\" [ngClass]=\"{ 'error-text': validError }\">\n {{ title }} {{ required ? '*' : '' }}\n </p>\n\n <div class=\"search-form row align-items-center\">\n <div class=\"col-sm-12 col-md row align-items-center\">\n <mat-form-field class=\"col\">\n <input\n matInput\n placeholder=\"{{ searchLabel }}\"\n [formControl]=\"search\"\n />\n </mat-form-field>\n <div class=\"clear col-auto\">\n <i class=\"material-icons\" (click)=\"clearSearch()\">clear</i>\n </div>\n </div>\n </div>\n\n <table mat-table [dataSource]=\"tableSource\">\n <ng-container *ngFor=\"let col of columns\" [matColumnDef]=\"col\">\n <th mat-header-cell *matHeaderCellDef>\n {{ col === 'active' ? selectedLabel : initColumns[col] }}\n </th>\n <td mat-cell *matCellDef=\"let element\">\n <ng-container *ngIf=\"col === 'active'\">\n <i *ngIf=\"checkActiveRow(element)\" class=\"material-icons active-row\"\n >done</i\n >\n </ng-container>\n\n <ng-container *ngIf=\"col !== 'active'\">\n {{ element[col] }}\n </ng-container>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columns\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: columns\"\n (click)=\"rowClick(row)\"\n [ngClass]=\"{ active: checkActiveRow(row) }\"\n ></tr>\n </table>\n <mat-paginator [pageSizeOptions]=\"[5]\"></mat-paginator>\n</div>\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"] }]
427
- }], ctorParameters: function () { return []; }, propDecorators: { paginator: [{
428
- type: ViewChild,
429
- args: [MatPaginator]
430
- }], title: [{
431
- type: Input
432
- }], required: [{
433
- type: Input
434
- }], multiple: [{
435
- type: Input
436
- }], initSelected: [{
437
- type: Input
438
- }], initSearchVal: [{
439
- type: Input
440
- }], searchLabel: [{
441
- type: Input
442
- }], selectedLabel: [{
443
- type: Input
444
- }], setInitColumns: [{
445
- type: Input
446
- }], tableData: [{
447
- type: Input
448
- }], validError: [{
449
- type: Input
450
- }], returnRowSelected: [{
451
- type: Output
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 };