ngx-st-tables 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -24
- package/esm2020/lib/components/local-table/configurations/configurations.component.mjs +3 -3
- package/esm2020/lib/components/local-table/local-table.component.mjs +48 -23
- package/esm2020/public-api.mjs +1 -1
- package/fesm2015/ngx-st-tables.mjs +49 -24
- package/fesm2015/ngx-st-tables.mjs.map +1 -1
- package/fesm2020/ngx-st-tables.mjs +49 -24
- package/fesm2020/ngx-st-tables.mjs.map +1 -1
- package/lib/components/local-table/local-table.component.d.ts +8 -2
- package/package.json +1 -1
|
@@ -1,34 +1,34 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, NgModule } from '@angular/core';
|
|
3
|
-
import * as
|
|
3
|
+
import * as i9 from '@angular/material/table';
|
|
4
4
|
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
|
|
5
|
-
import * as
|
|
5
|
+
import * as i11 from '@angular/material/paginator';
|
|
6
6
|
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
|
|
7
|
-
import * as
|
|
7
|
+
import * as i10 from '@angular/material/sort';
|
|
8
8
|
import { MatSort, MatSortModule } from '@angular/material/sort';
|
|
9
|
+
import * as i2$1 from '@angular/router';
|
|
10
|
+
import { RouterModule } from '@angular/router';
|
|
9
11
|
import * as i4 from '@angular/material/button';
|
|
10
12
|
import { MatButtonModule } from '@angular/material/button';
|
|
11
|
-
import * as
|
|
13
|
+
import * as i4$1 from '@angular/material/menu';
|
|
12
14
|
import { MatMenuModule } from '@angular/material/menu';
|
|
13
|
-
import * as
|
|
15
|
+
import * as i5 from '@angular/material/checkbox';
|
|
14
16
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
15
|
-
import * as
|
|
17
|
+
import * as i7 from '@angular/material/form-field';
|
|
16
18
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
17
19
|
import * as i2 from '@angular/material/select';
|
|
18
20
|
import { MatSelectModule } from '@angular/material/select';
|
|
19
21
|
import * as i3 from '@angular/material/core';
|
|
20
|
-
import * as
|
|
22
|
+
import * as i12 from '@angular/common';
|
|
21
23
|
import { CommonModule } from '@angular/common';
|
|
22
|
-
import * as i6
|
|
24
|
+
import * as i6 from '@angular/forms';
|
|
23
25
|
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
24
|
-
import * as i7 from '@angular/material/input';
|
|
26
|
+
import * as i7$1 from '@angular/material/input';
|
|
25
27
|
import { MatInputModule } from '@angular/material/input';
|
|
26
|
-
import * as
|
|
28
|
+
import * as i8 from '@angular/material/icon';
|
|
27
29
|
import { MatIconModule } from '@angular/material/icon';
|
|
28
|
-
import * as
|
|
30
|
+
import * as i15 from '@angular/material/tooltip';
|
|
29
31
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
30
|
-
import * as i15 from '@angular/router';
|
|
31
|
-
import { RouterModule } from '@angular/router';
|
|
32
32
|
import * as i16 from 'ngx-st-date-format';
|
|
33
33
|
import { StDateFormatModule } from 'ngx-st-date-format';
|
|
34
34
|
|
|
@@ -106,10 +106,10 @@ class ConfigurationsComponent {
|
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
108
|
ConfigurationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ConfigurationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
109
|
-
ConfigurationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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;\">\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 [(ngModel)]=\"selectedConfig\" (ngModelChange)=\"selectedConfigChanged()\">\n <mat-option [value]=\"null\"></mat-option>\n <mat-option *ngFor=\"let config of configurations\" [value]=\"config\">{{config.configName}}</mat-option>\n </mat-select>\n </mat-form-field>\n <button mat-icon-button class=\"col-auto green-icon\" (click)=\"showCreateConfiguration()\">\n <span class=\"material-icons-outlined\">\n add\n </span>\n </button>\n <button mat-icon-button class=\"col-auto red-icon\" [disabled]=\"!selectedConfig\" (click)=\"deleteConfiguration()\">\n <span class=\"material-icons-outlined\">\n delete\n </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 mat-icon-button class=\"col-auto green-icon\" (click)=\"saveCreateConfiguration()\" [disabled]=\"!createConfigurationName\">\n <span class=\"material-icons-outlined\">\n done\n </span>\n </button>\n <button mat-icon-button class=\"col-auto red-icon\" (click)=\"hideCreateConfiguration()\">\n <span class=\"material-icons-outlined\">\n close\n </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;\">{{configurationsSettings.deleteWarningTitle}}</p>\n <button mat-icon-button class=\"col-auto green-icon\" (click)=\"acceptDeleteConfiguration()\">\n <span class=\"material-icons-outlined\">\n done\n </span>\n </button>\n <button mat-icon-button class=\"col-auto red-icon\" (click)=\"declineDeleteConfiguration()\">\n <span class=\"material-icons-outlined\">\n close\n </span>\n </button>\n </ng-container>\n</div>\n", styles: [".green-icon span{color:#2e7d32}.red-icon span{color:#c62828}\n"], components: [{ type:
|
|
109
|
+
ConfigurationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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"], components: [{ type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4.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"] }], directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.MatLabel, selector: "mat-label" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7$1.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"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
110
110
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ConfigurationsComponent, decorators: [{
|
|
111
111
|
type: Component,
|
|
112
|
-
args: [{ selector: 'app-configurations[configurationsSettings]', changeDetection: ChangeDetectionStrategy.OnPush, 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 [(ngModel)]=\"selectedConfig\" (ngModelChange)=\"selectedConfigChanged()\">\n <mat-option [value]=\"null\"></mat-option>\n <mat-option *ngFor=\"let config of configurations\" [value]=\"config\">{{config.configName}}</mat-option>\n </mat-select>\n </mat-form-field>\n <button mat-icon-button class=\"col-auto green-icon\" (click)=\"showCreateConfiguration()\">\n <span class=\"material-icons-outlined\">\n add\n </span>\n </button>\n <button mat-icon-button class=\"col-auto red-icon\" [disabled]=\"!selectedConfig\" (click)=\"deleteConfiguration()\">\n <span class=\"material-icons-outlined\">\n delete\n </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 mat-icon-button class=\"col-auto green-icon\" (click)=\"saveCreateConfiguration()\" [disabled]=\"!createConfigurationName\">\n <span class=\"material-icons-outlined\">\n done\n </span>\n </button>\n <button mat-icon-button class=\"col-auto red-icon\" (click)=\"hideCreateConfiguration()\">\n <span class=\"material-icons-outlined\">\n close\n </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;\">{{configurationsSettings.deleteWarningTitle}}</p>\n <button mat-icon-button class=\"col-auto green-icon\" (click)=\"acceptDeleteConfiguration()\">\n <span class=\"material-icons-outlined\">\n done\n </span>\n </button>\n <button mat-icon-button class=\"col-auto red-icon\" (click)=\"declineDeleteConfiguration()\">\n <span class=\"material-icons-outlined\">\n close\n </span>\n </button>\n </ng-container>\n</div>\n", styles: [".green-icon span{color:#2e7d32}.red-icon span{color:#c62828}\n"] }]
|
|
112
|
+
args: [{ selector: 'app-configurations[configurationsSettings]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"col-auto row align-items-center\" style=\"padding: 0;\">\r\n <ng-container *ngIf=\"!creatingConfiguration && !removingConfiguration\">\r\n <mat-form-field class=\"col-auto\" style=\"padding-right: 0;\">\r\n <mat-label>{{configurationsSettings.selectLabel}}</mat-label>\r\n <mat-select [(ngModel)]=\"selectedConfig\" (ngModelChange)=\"selectedConfigChanged()\">\r\n <mat-option [value]=\"null\"></mat-option>\r\n <mat-option *ngFor=\"let config of configurations\" [value]=\"config\">{{config.configName}}</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n <button mat-icon-button class=\"col-auto green-icon\" (click)=\"showCreateConfiguration()\">\r\n <span class=\"material-icons-outlined\">\r\n add\r\n </span>\r\n </button>\r\n <button mat-icon-button class=\"col-auto red-icon\" [disabled]=\"!selectedConfig\" (click)=\"deleteConfiguration()\">\r\n <span class=\"material-icons-outlined\">\r\n delete\r\n </span>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"creatingConfiguration\">\r\n <mat-form-field class=\"col-auto\">\r\n <mat-label>{{configurationsSettings.createLabel}}</mat-label>\r\n <input matInput [(ngModel)]=\"createConfigurationName\">\r\n </mat-form-field>\r\n <button mat-icon-button class=\"col-auto green-icon\" (click)=\"saveCreateConfiguration()\" [disabled]=\"!createConfigurationName\">\r\n <span class=\"material-icons-outlined\">\r\n done\r\n </span>\r\n </button>\r\n <button mat-icon-button class=\"col-auto red-icon\" (click)=\"hideCreateConfiguration()\">\r\n <span class=\"material-icons-outlined\">\r\n close\r\n </span>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"removingConfiguration\">\r\n <p class=\"col-auto\" style=\"margin: 0; font-weight: bold;font-size: 16px;\">{{configurationsSettings.deleteWarningTitle}}</p>\r\n <button mat-icon-button class=\"col-auto green-icon\" (click)=\"acceptDeleteConfiguration()\">\r\n <span class=\"material-icons-outlined\">\r\n done\r\n </span>\r\n </button>\r\n <button mat-icon-button class=\"col-auto red-icon\" (click)=\"declineDeleteConfiguration()\">\r\n <span class=\"material-icons-outlined\">\r\n close\r\n </span>\r\n </button>\r\n </ng-container>\r\n</div>\r\n", styles: [".green-icon span{color:#2e7d32}.red-icon span{color:#c62828}\n"] }]
|
|
113
113
|
}], ctorParameters: function () { return []; }, propDecorators: { configurationsSettings: [{
|
|
114
114
|
type: Input
|
|
115
115
|
}], configurations: [{
|
|
@@ -125,9 +125,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
125
125
|
}] } });
|
|
126
126
|
|
|
127
127
|
class LocalTableComponent {
|
|
128
|
-
constructor(localTableService, changeDetector) {
|
|
128
|
+
constructor(localTableService, changeDetector, router, activatedRoute) {
|
|
129
129
|
this.localTableService = localTableService;
|
|
130
130
|
this.changeDetector = changeDetector;
|
|
131
|
+
this.router = router;
|
|
132
|
+
this.activatedRoute = activatedRoute;
|
|
131
133
|
this.pageSize = 10;
|
|
132
134
|
this.allowPickColumns = false;
|
|
133
135
|
this.localStorageName = '';
|
|
@@ -136,6 +138,7 @@ class LocalTableComponent {
|
|
|
136
138
|
this.configurations = [];
|
|
137
139
|
this.initConfig = null;
|
|
138
140
|
this.activeConfig = null;
|
|
141
|
+
this.pageIndex = 0;
|
|
139
142
|
this._data = [];
|
|
140
143
|
this._columns = {};
|
|
141
144
|
}
|
|
@@ -182,15 +185,26 @@ class LocalTableComponent {
|
|
|
182
185
|
}
|
|
183
186
|
});
|
|
184
187
|
}
|
|
188
|
+
this.pageIndex = parseInt(this.activatedRoute.snapshot.params['stLocalTablePageIndex']);
|
|
189
|
+
if (!this.pageIndex && this.pageIndex !== 0) {
|
|
190
|
+
this.pageIndex = 0;
|
|
191
|
+
this.updateSearchToUrl();
|
|
192
|
+
}
|
|
193
|
+
this.searchModel = this.activatedRoute.snapshot.params['stLocalTableSearch'] || '';
|
|
194
|
+
if (this.searchModel) {
|
|
195
|
+
this.applySearch();
|
|
196
|
+
}
|
|
185
197
|
this.paginator.pageSize = this.pageSize;
|
|
186
198
|
}
|
|
187
|
-
applySearch(
|
|
188
|
-
|
|
189
|
-
this.
|
|
199
|
+
applySearch() {
|
|
200
|
+
this.tableSource.filter = this.searchModel.trim().toLowerCase();
|
|
201
|
+
this.pageIndex = 0;
|
|
202
|
+
this.updateSearchToUrl();
|
|
190
203
|
}
|
|
191
204
|
clearSearch() {
|
|
192
205
|
this.searchModel = '';
|
|
193
206
|
this.tableSource.filter = this.searchModel;
|
|
207
|
+
this.updateSearchToUrl();
|
|
194
208
|
}
|
|
195
209
|
checkIfActionVisible(row, action) {
|
|
196
210
|
if (action.show) {
|
|
@@ -224,6 +238,17 @@ class LocalTableComponent {
|
|
|
224
238
|
this.clearSearch();
|
|
225
239
|
}
|
|
226
240
|
}
|
|
241
|
+
pageChanged(event) {
|
|
242
|
+
this.pageIndex = event.pageIndex;
|
|
243
|
+
this.updateSearchToUrl();
|
|
244
|
+
}
|
|
245
|
+
updateSearchToUrl() {
|
|
246
|
+
const queryParams = {
|
|
247
|
+
stLocalTableSearch: this.searchModel,
|
|
248
|
+
stLocalTablePageIndex: this.pageIndex
|
|
249
|
+
};
|
|
250
|
+
this.router.navigate(['./'], { queryParams: queryParams, relativeTo: this.activatedRoute });
|
|
251
|
+
}
|
|
227
252
|
updateConfigsToLocalStorage() {
|
|
228
253
|
this.localTableService.saveConfigs(this.configurations);
|
|
229
254
|
}
|
|
@@ -265,12 +290,12 @@ class LocalTableComponent {
|
|
|
265
290
|
this.setDisplayedColumns();
|
|
266
291
|
}
|
|
267
292
|
}
|
|
268
|
-
LocalTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LocalTableComponent, deps: [{ token: LocalTableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
269
|
-
LocalTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: LocalTableComponent, selector: "ngx-st-local-table", inputs: { tableSettings: "tableSettings", globalSearchSettings: "globalSearchSettings", pageSize: "pageSize", allowPickColumns: "allowPickColumns", configurationsSettings: "configurationsSettings", localStorageName: "localStorageName", 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($event)\" [(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($event)\" [(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 [pageSizeOptions]=\"[5, 10, 15, 20, 25]\" 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"], components: [{ type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: ConfigurationsComponent, selector: "app-configurations[configurationsSettings]", inputs: ["configurationsSettings", "configurations", "initSelectedConfig"], outputs: ["createNewConfig", "removeConfig", "changeConfig"] }, { type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i7$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i9.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i10.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.MatLabel, selector: "mat-label" }, { type: i7.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"] }, { type: i6$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.MatSuffix, selector: "[matSuffix]" }, { type: i9.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i8.MatCellDef, selector: "[matCellDef]" }, { type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i14.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i15.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], pipes: { "stDateTimeFormatPipe": i16.DateTimeFormatPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
293
|
+
LocalTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LocalTableComponent, deps: [{ token: LocalTableService }, { token: i0.ChangeDetectorRef }, { token: i2$1.Router }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
294
|
+
LocalTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: LocalTableComponent, selector: "ngx-st-local-table", inputs: { tableSettings: "tableSettings", globalSearchSettings: "globalSearchSettings", pageSize: "pageSize", allowPickColumns: "allowPickColumns", configurationsSettings: "configurationsSettings", localStorageName: "localStorageName", 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"], components: [{ type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: ConfigurationsComponent, selector: "app-configurations[configurationsSettings]", inputs: ["configurationsSettings", "configurations", "initSelectedConfig"], outputs: ["createNewConfig", "removeConfig", "changeConfig"] }, { type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i11.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.MatLabel, selector: "mat-label" }, { type: i7$1.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"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i7.MatSuffix, selector: "[matSuffix]" }, { type: i10.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i9.MatCellDef, selector: "[matCellDef]" }, { type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i15.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], pipes: { "stDateTimeFormatPipe": i16.DateTimeFormatPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
270
295
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LocalTableComponent, decorators: [{
|
|
271
296
|
type: Component,
|
|
272
|
-
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(
|
|
273
|
-
}], ctorParameters: function () { return [{ type: LocalTableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { paginator: [{
|
|
297
|
+
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"] }]
|
|
298
|
+
}], ctorParameters: function () { return [{ type: LocalTableService }, { type: i0.ChangeDetectorRef }, { type: i2$1.Router }, { type: i2$1.ActivatedRoute }]; }, propDecorators: { paginator: [{
|
|
274
299
|
type: ViewChild,
|
|
275
300
|
args: [MatPaginator]
|
|
276
301
|
}], sort: [{
|
|
@@ -353,7 +378,7 @@ class SelectTable {
|
|
|
353
378
|
}
|
|
354
379
|
}
|
|
355
380
|
SelectTable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SelectTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
356
|
-
SelectTable.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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%}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"], components: [{ type:
|
|
381
|
+
SelectTable.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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%}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"], components: [{ type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i11.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.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"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i9.MatCellDef, selector: "[matCellDef]" }, { type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
|
|
357
382
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SelectTable, decorators: [{
|
|
358
383
|
type: Component,
|
|
359
384
|
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%}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"] }]
|