ngx-st-tables 1.0.1 → 1.0.2
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 +47 -23
- package/esm2020/public-api.mjs +1 -1
- package/fesm2015/ngx-st-tables.mjs +48 -24
- package/fesm2015/ngx-st-tables.mjs.map +1 -1
- package/fesm2020/ngx-st-tables.mjs +48 -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
|
|
|
@@ -107,10 +107,10 @@ class ConfigurationsComponent {
|
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
109
|
ConfigurationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ConfigurationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
110
|
-
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:
|
|
110
|
+
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 });
|
|
111
111
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ConfigurationsComponent, decorators: [{
|
|
112
112
|
type: Component,
|
|
113
|
-
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"] }]
|
|
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
114
|
}], ctorParameters: function () { return []; }, propDecorators: { configurationsSettings: [{
|
|
115
115
|
type: Input
|
|
116
116
|
}], configurations: [{
|
|
@@ -126,9 +126,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
126
126
|
}] } });
|
|
127
127
|
|
|
128
128
|
class LocalTableComponent {
|
|
129
|
-
constructor(localTableService, changeDetector) {
|
|
129
|
+
constructor(localTableService, changeDetector, router, activatedRoute) {
|
|
130
130
|
this.localTableService = localTableService;
|
|
131
131
|
this.changeDetector = changeDetector;
|
|
132
|
+
this.router = router;
|
|
133
|
+
this.activatedRoute = activatedRoute;
|
|
132
134
|
this.pageSize = 10;
|
|
133
135
|
this.allowPickColumns = false;
|
|
134
136
|
this.localStorageName = '';
|
|
@@ -137,6 +139,7 @@ class LocalTableComponent {
|
|
|
137
139
|
this.configurations = [];
|
|
138
140
|
this.initConfig = null;
|
|
139
141
|
this.activeConfig = null;
|
|
142
|
+
this.pageIndex = 0;
|
|
140
143
|
this._data = [];
|
|
141
144
|
this._columns = {};
|
|
142
145
|
}
|
|
@@ -167,6 +170,15 @@ class LocalTableComponent {
|
|
|
167
170
|
this.localTableService.localStorageName = ((_a = this.configurationsSettings) === null || _a === void 0 ? void 0 : _a.localStorageName) || '';
|
|
168
171
|
this.loadConfigs();
|
|
169
172
|
}
|
|
173
|
+
this.pageIndex = parseInt(this.activatedRoute.snapshot.params['stLocalTablePageIndex']);
|
|
174
|
+
if (!this.pageIndex && this.pageIndex !== 0) {
|
|
175
|
+
this.pageIndex = 0;
|
|
176
|
+
this.updateSearchToUrl();
|
|
177
|
+
}
|
|
178
|
+
this.searchModel = this.activatedRoute.snapshot.params['stLocalTableSearch'] || '';
|
|
179
|
+
if (this.searchModel) {
|
|
180
|
+
this.applySearch();
|
|
181
|
+
}
|
|
170
182
|
}
|
|
171
183
|
ngAfterViewInit() {
|
|
172
184
|
if (this.configurationsSettings) {
|
|
@@ -186,13 +198,14 @@ class LocalTableComponent {
|
|
|
186
198
|
}
|
|
187
199
|
this.paginator.pageSize = this.pageSize;
|
|
188
200
|
}
|
|
189
|
-
applySearch(
|
|
190
|
-
|
|
191
|
-
this.
|
|
201
|
+
applySearch() {
|
|
202
|
+
this.tableSource.filter = this.searchModel.trim().toLowerCase();
|
|
203
|
+
this.updateSearchToUrl();
|
|
192
204
|
}
|
|
193
205
|
clearSearch() {
|
|
194
206
|
this.searchModel = '';
|
|
195
207
|
this.tableSource.filter = this.searchModel;
|
|
208
|
+
this.updateSearchToUrl();
|
|
196
209
|
}
|
|
197
210
|
checkIfActionVisible(row, action) {
|
|
198
211
|
if (action.show) {
|
|
@@ -226,6 +239,17 @@ class LocalTableComponent {
|
|
|
226
239
|
this.clearSearch();
|
|
227
240
|
}
|
|
228
241
|
}
|
|
242
|
+
pageChanged(event) {
|
|
243
|
+
this.pageIndex = event.pageIndex;
|
|
244
|
+
this.updateSearchToUrl();
|
|
245
|
+
}
|
|
246
|
+
updateSearchToUrl() {
|
|
247
|
+
const queryParams = {
|
|
248
|
+
stLocalTableSearch: this.searchModel,
|
|
249
|
+
stLocalTablePageIndex: this.pageIndex
|
|
250
|
+
};
|
|
251
|
+
this.router.navigate(['./'], { queryParams: queryParams, relativeTo: this.activatedRoute });
|
|
252
|
+
}
|
|
229
253
|
updateConfigsToLocalStorage() {
|
|
230
254
|
this.localTableService.saveConfigs(this.configurations);
|
|
231
255
|
}
|
|
@@ -267,12 +291,12 @@ class LocalTableComponent {
|
|
|
267
291
|
this.setDisplayedColumns();
|
|
268
292
|
}
|
|
269
293
|
}
|
|
270
|
-
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 });
|
|
271
|
-
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 });
|
|
294
|
+
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 });
|
|
295
|
+
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 });
|
|
272
296
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LocalTableComponent, decorators: [{
|
|
273
297
|
type: Component,
|
|
274
|
-
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(
|
|
275
|
-
}], ctorParameters: function () { return [{ type: LocalTableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { paginator: [{
|
|
298
|
+
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"] }]
|
|
299
|
+
}], ctorParameters: function () { return [{ type: LocalTableService }, { type: i0.ChangeDetectorRef }, { type: i2$1.Router }, { type: i2$1.ActivatedRoute }]; }, propDecorators: { paginator: [{
|
|
276
300
|
type: ViewChild,
|
|
277
301
|
args: [MatPaginator]
|
|
278
302
|
}], sort: [{
|
|
@@ -355,7 +379,7 @@ class SelectTable {
|
|
|
355
379
|
}
|
|
356
380
|
}
|
|
357
381
|
SelectTable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SelectTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
358
|
-
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:
|
|
382
|
+
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"] }] });
|
|
359
383
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SelectTable, decorators: [{
|
|
360
384
|
type: Component,
|
|
361
385
|
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"] }]
|