ngx-st-tables 1.1.9 → 1.1.10

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