ngx-st-tables 1.0.0 → 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/assets/base-table.scss +145 -0
- 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/lib/components/select-table/select-table.mjs +1 -1
- 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
|
|
|
@@ -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
|
}
|
|
@@ -165,6 +168,15 @@ class LocalTableComponent {
|
|
|
165
168
|
this.localTableService.localStorageName = this.configurationsSettings?.localStorageName || '';
|
|
166
169
|
this.loadConfigs();
|
|
167
170
|
}
|
|
171
|
+
this.pageIndex = parseInt(this.activatedRoute.snapshot.params['stLocalTablePageIndex']);
|
|
172
|
+
if (!this.pageIndex && this.pageIndex !== 0) {
|
|
173
|
+
this.pageIndex = 0;
|
|
174
|
+
this.updateSearchToUrl();
|
|
175
|
+
}
|
|
176
|
+
this.searchModel = this.activatedRoute.snapshot.params['stLocalTableSearch'] || '';
|
|
177
|
+
if (this.searchModel) {
|
|
178
|
+
this.applySearch();
|
|
179
|
+
}
|
|
168
180
|
}
|
|
169
181
|
ngAfterViewInit() {
|
|
170
182
|
if (this.configurationsSettings) {
|
|
@@ -184,13 +196,14 @@ class LocalTableComponent {
|
|
|
184
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.updateSearchToUrl();
|
|
190
202
|
}
|
|
191
203
|
clearSearch() {
|
|
192
204
|
this.searchModel = '';
|
|
193
205
|
this.tableSource.filter = this.searchModel;
|
|
206
|
+
this.updateSearchToUrl();
|
|
194
207
|
}
|
|
195
208
|
checkIfActionVisible(row, action) {
|
|
196
209
|
if (action.show) {
|
|
@@ -224,6 +237,17 @@ class LocalTableComponent {
|
|
|
224
237
|
this.clearSearch();
|
|
225
238
|
}
|
|
226
239
|
}
|
|
240
|
+
pageChanged(event) {
|
|
241
|
+
this.pageIndex = event.pageIndex;
|
|
242
|
+
this.updateSearchToUrl();
|
|
243
|
+
}
|
|
244
|
+
updateSearchToUrl() {
|
|
245
|
+
const queryParams = {
|
|
246
|
+
stLocalTableSearch: this.searchModel,
|
|
247
|
+
stLocalTablePageIndex: this.pageIndex
|
|
248
|
+
};
|
|
249
|
+
this.router.navigate(['./'], { queryParams: queryParams, relativeTo: this.activatedRoute });
|
|
250
|
+
}
|
|
227
251
|
updateConfigsToLocalStorage() {
|
|
228
252
|
this.localTableService.saveConfigs(this.configurations);
|
|
229
253
|
}
|
|
@@ -265,12 +289,12 @@ class LocalTableComponent {
|
|
|
265
289
|
this.setDisplayedColumns();
|
|
266
290
|
}
|
|
267
291
|
}
|
|
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 });
|
|
292
|
+
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 });
|
|
293
|
+
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
294
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LocalTableComponent, decorators: [{
|
|
271
295
|
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: [{
|
|
296
|
+
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"] }]
|
|
297
|
+
}], ctorParameters: function () { return [{ type: LocalTableService }, { type: i0.ChangeDetectorRef }, { type: i2$1.Router }, { type: i2$1.ActivatedRoute }]; }, propDecorators: { paginator: [{
|
|
274
298
|
type: ViewChild,
|
|
275
299
|
args: [MatPaginator]
|
|
276
300
|
}], sort: [{
|
|
@@ -353,7 +377,7 @@ class SelectTable {
|
|
|
353
377
|
}
|
|
354
378
|
}
|
|
355
379
|
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:
|
|
380
|
+
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
381
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SelectTable, decorators: [{
|
|
358
382
|
type: Component,
|
|
359
383
|
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"] }]
|