ngx-st-tables 1.1.9 → 1.1.11

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