ngx-st-tables 17.0.25 → 17.0.26
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/assets/base-table.scss +171 -126
- package/esm2022/lib/components/local-table/local-table.component.mjs +2 -2
- package/esm2022/lib/components/material-table/material-table-caption/material-table-filter-dialog/material-table-filter-dialog.component.mjs +2 -2
- package/esm2022/lib/components/material-table/material-table-caption/material-table-order-column-dialog/material-table-order-column-dialog.component.mjs +2 -2
- package/esm2022/lib/components/material-table/material-table.component.mjs +4 -4
- package/esm2022/lib/components/select-table/select-table.component.mjs +2 -2
- package/fesm2022/ngx-st-tables.mjs +11 -11
- package/fesm2022/ngx-st-tables.mjs.map +1 -1
- package/package.json +1 -1
package/assets/base-table.scss
CHANGED
|
@@ -1,183 +1,228 @@
|
|
|
1
|
-
.
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
mat-form-field {
|
|
7
|
-
&:first-child {
|
|
8
|
-
padding-left: 0;
|
|
1
|
+
.st-material-table {
|
|
2
|
+
.search-form {
|
|
3
|
+
button {
|
|
4
|
+
height: 40px;
|
|
9
5
|
}
|
|
10
6
|
|
|
11
|
-
|
|
12
|
-
|
|
7
|
+
mat-form-field {
|
|
8
|
+
&:first-child {
|
|
9
|
+
padding-left: 0;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
&:last-child {
|
|
13
|
+
padding-right: 0;
|
|
14
|
+
}
|
|
13
15
|
}
|
|
14
|
-
}
|
|
15
16
|
|
|
16
|
-
|
|
17
|
-
|
|
17
|
+
.clear {
|
|
18
|
+
padding: 0;
|
|
18
19
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
mat-icon {
|
|
21
|
+
height: 20px;
|
|
22
|
+
width: 20px;
|
|
23
|
+
font-size: 20px;
|
|
24
|
+
cursor: pointer;
|
|
25
|
+
}
|
|
24
26
|
}
|
|
25
27
|
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
table {
|
|
29
|
-
width: 100%;
|
|
30
|
-
box-shadow: none;
|
|
31
28
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
padding: 0;
|
|
36
|
-
}
|
|
29
|
+
table {
|
|
30
|
+
width: 100%;
|
|
31
|
+
box-shadow: none;
|
|
37
32
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
33
|
+
th.mat-mdc-header-cell,
|
|
34
|
+
td.mat-mdc-cell,
|
|
35
|
+
td.mat-mdc-footer-cell {
|
|
36
|
+
padding: 0;
|
|
37
|
+
}
|
|
43
38
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
39
|
+
th.mat-mdc-header-cell:first-of-type,
|
|
40
|
+
td.mat-mdc-cell:first-of-type,
|
|
41
|
+
td.mat-mdc-footer-cell:first-of-type {
|
|
42
|
+
padding-left: 12px;
|
|
43
|
+
}
|
|
49
44
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
45
|
+
th.mat-mdc-header-cell:last-of-type,
|
|
46
|
+
td.mat-mdc-cell:last-of-type,
|
|
47
|
+
td.mat-mdc-footer-cell:last-of-type {
|
|
48
|
+
padding-right: 12px;
|
|
49
|
+
}
|
|
55
50
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
51
|
+
&::ng-deep {
|
|
52
|
+
thead {
|
|
53
|
+
tr {
|
|
54
|
+
background-color: #fff9c4;
|
|
55
|
+
height: 40px !important;
|
|
56
|
+
|
|
57
|
+
th {
|
|
58
|
+
border-color: #fdd835;
|
|
59
|
+
font-size: 0.9rem;
|
|
60
|
+
font-weight: 600;
|
|
61
|
+
color: #424242;
|
|
62
|
+
}
|
|
61
63
|
}
|
|
62
64
|
}
|
|
63
|
-
}
|
|
64
65
|
|
|
65
|
-
|
|
66
|
-
|
|
66
|
+
tbody {
|
|
67
|
+
background-color: transparent !important;
|
|
67
68
|
|
|
68
|
-
|
|
69
|
-
|
|
69
|
+
& > tr {
|
|
70
|
+
cursor: pointer;
|
|
70
71
|
|
|
71
|
-
|
|
72
|
-
|
|
72
|
+
&.active {
|
|
73
|
+
background-color: #a5d6a7;
|
|
73
74
|
|
|
74
|
-
|
|
75
|
-
|
|
75
|
+
td {
|
|
76
|
+
border-bottom-color: #81c784 !important;
|
|
77
|
+
}
|
|
76
78
|
}
|
|
77
|
-
}
|
|
78
79
|
|
|
79
|
-
|
|
80
|
-
|
|
80
|
+
&:hover {
|
|
81
|
+
background-color: #f5f5f5;
|
|
81
82
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
83
|
+
//td {
|
|
84
|
+
// border-bottom-color: #81c784 !important;
|
|
85
|
+
//}
|
|
86
|
+
}
|
|
86
87
|
|
|
87
|
-
|
|
88
|
-
|
|
88
|
+
&.disabled {
|
|
89
|
+
cursor: not-allowed;
|
|
89
90
|
|
|
90
|
-
|
|
91
|
-
|
|
91
|
+
&:hover {
|
|
92
|
+
background-color: inherit !important;
|
|
93
|
+
}
|
|
92
94
|
}
|
|
93
|
-
}
|
|
94
95
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
96
|
+
&.detail-row {
|
|
97
|
+
height: 0;
|
|
98
|
+
cursor: default;
|
|
98
99
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
100
|
+
&:hover {
|
|
101
|
+
background-color: transparent;
|
|
102
|
+
}
|
|
102
103
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
104
|
+
.element-detail {
|
|
105
|
+
overflow: hidden;
|
|
106
|
+
display: flex;
|
|
106
107
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
108
|
+
p {
|
|
109
|
+
padding: 20px 0;
|
|
110
|
+
margin-bottom: 0;
|
|
111
|
+
white-space: pre-wrap;
|
|
112
|
+
}
|
|
111
113
|
}
|
|
112
114
|
}
|
|
113
|
-
}
|
|
114
115
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
116
|
+
td {
|
|
117
|
+
i.active-row {
|
|
118
|
+
color: #1b5e20;
|
|
119
|
+
font-weight: bold;
|
|
120
|
+
font-size: 25px;
|
|
121
|
+
height: 25px;
|
|
122
|
+
width: 25px;
|
|
123
|
+
margin-top: 2px;
|
|
124
|
+
}
|
|
123
125
|
}
|
|
124
|
-
}
|
|
125
126
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
}
|
|
132
|
-
a {
|
|
133
|
-
button {
|
|
134
|
-
color: #000;
|
|
127
|
+
td {
|
|
128
|
+
& > div {
|
|
129
|
+
max-height: 200px;
|
|
130
|
+
overflow: hidden;
|
|
131
|
+
overflow-y: auto;
|
|
135
132
|
}
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
133
|
+
a {
|
|
134
|
+
button {
|
|
135
|
+
color: #000;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
mat-icon {
|
|
139
|
+
color: #333;
|
|
140
|
+
}
|
|
139
141
|
}
|
|
140
142
|
}
|
|
141
143
|
}
|
|
142
144
|
}
|
|
143
|
-
}
|
|
144
145
|
|
|
145
|
-
|
|
146
|
-
|
|
146
|
+
.mat-column-active {
|
|
147
|
+
width: 48px;
|
|
148
|
+
}
|
|
147
149
|
}
|
|
148
|
-
}
|
|
149
150
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
151
|
+
&.no-hover {
|
|
152
|
+
&::ng-deep {
|
|
153
|
+
tbody {
|
|
154
|
+
tr {
|
|
155
|
+
cursor: default;
|
|
155
156
|
|
|
156
|
-
|
|
157
|
-
|
|
157
|
+
&.active {
|
|
158
|
+
background-color: transparent !important;
|
|
158
159
|
|
|
159
|
-
|
|
160
|
-
|
|
160
|
+
td {
|
|
161
|
+
border-bottom-color: #0000001f !important;
|
|
162
|
+
}
|
|
161
163
|
}
|
|
162
|
-
}
|
|
163
164
|
|
|
164
|
-
|
|
165
|
-
|
|
165
|
+
&:hover {
|
|
166
|
+
background-color: transparent !important;
|
|
166
167
|
|
|
167
|
-
|
|
168
|
-
|
|
168
|
+
td {
|
|
169
|
+
border-bottom-color: #0000001f !important;
|
|
170
|
+
}
|
|
169
171
|
}
|
|
170
172
|
}
|
|
171
173
|
}
|
|
172
174
|
}
|
|
173
175
|
}
|
|
176
|
+
|
|
177
|
+
&.admin-table {
|
|
178
|
+
&::ng-deep {
|
|
179
|
+
.actions-cell {
|
|
180
|
+
width: 100px;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
}
|
|
174
184
|
}
|
|
185
|
+
}
|
|
175
186
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
187
|
+
.dark-theme {
|
|
188
|
+
.st-material-table {
|
|
189
|
+
table {
|
|
190
|
+
background-color: transparent !important;
|
|
191
|
+
|
|
192
|
+
thead tr {
|
|
193
|
+
background-color: #5e4803 !important;
|
|
194
|
+
|
|
195
|
+
th {
|
|
196
|
+
border-color: #816204 !important;
|
|
197
|
+
color: #e0e0e0 !important;
|
|
198
|
+
}
|
|
180
199
|
}
|
|
181
200
|
}
|
|
201
|
+
|
|
202
|
+
tbody {
|
|
203
|
+
tr {
|
|
204
|
+
&:hover {
|
|
205
|
+
background-color: var(--primeng-table-hover-background) !important;
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
mat-paginator {
|
|
212
|
+
background-color: transparent !important;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.reorder-column-list .reorder-column-element {
|
|
216
|
+
background-color: #424242 !important;
|
|
217
|
+
color: #eee !important;
|
|
218
|
+
|
|
219
|
+
p,
|
|
220
|
+
mat-icon {
|
|
221
|
+
color: #eee !important;
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.filter .filter-title {
|
|
226
|
+
color: #eee !important;
|
|
182
227
|
}
|
|
183
228
|
}
|
|
@@ -226,11 +226,11 @@ export class LocalTableComponent {
|
|
|
226
226
|
this.setDisplayedColumns();
|
|
227
227
|
}
|
|
228
228
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LocalTableComponent, deps: [{ token: i1.LocalTableService }, { token: i0.ChangeDetectorRef }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
229
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: LocalTableComponent, selector: "ngx-st-local-table", inputs: { tableSettings: "tableSettings", globalSearchSettings: "globalSearchSettings", pageSize: "pageSize", allowPickColumns: "allowPickColumns", configurationsSettings: "configurationsSettings", localStorageName: "localStorageName", bindSearchToUrl: "bindSearchToUrl", columns: "columns", data: "data" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"local-table\">\n <div class=\"row align-items-center\">\n @if (configurationsSettings || allowPickColumns) {\n <div class=\"col row align-items-center\" style=\"padding: 0\">\n @if (allowPickColumns) {\n <div class=\"col-auto\" style=\"padding: 0\">\n <button\n mat-icon-button\n class=\"col-auto\"\n [matMenuTriggerFor]=\"columnsMenu\"\n >\n <mat-icon> view_week </mat-icon>\n </button>\n <mat-menu #columnsMenu=\"matMenu\" xPosition=\"after\">\n @for (column of columnsArray; track column) {\n @if (!column.notShowInColumnPick) {\n <div mat-menu-item>\n <mat-checkbox\n [(ngModel)]=\"column.visible\"\n (ngModelChange)=\"columnVisibleChanged(column)\"\n style=\"margin-top: 5px\"\n (click)=\"$event.stopPropagation()\"\n >\n {{ column.translateColumnName }}\n </mat-checkbox>\n </div>\n }\n }\n </mat-menu>\n </div>\n }\n @if (configurationsSettings) {\n <st-configurations\n [configurationsSettings]=\"configurationsSettings\"\n [configurations]=\"configurations\"\n [initSelectedConfig]=\"initConfig\"\n (createNewConfig)=\"newConfigCreated($event)\"\n (removeConfig)=\"configRemoved($event)\"\n (changeConfig)=\"configChanged($event)\"\n ></st-configurations>\n }\n </div>\n }\n\n @if (globalSearchSettings?.show) {\n <div class=\"col\" style=\"padding: 0; margin-bottom: -15px\">\n <mat-form-field>\n <mat-label>{{ globalSearchSettings?.label || 'Search' }}</mat-label>\n <input matInput (keyup)=\"applySearch()\" [(ngModel)]=\"searchModel\" />\n <button\n matSuffix\n mat-icon-button\n aria-label=\"Clear\"\n (click)=\"clearSearch()\"\n >\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\n </button>\n </mat-form-field>\n </div>\n }\n </div>\n\n <table\n [ngClass]=\"{ 'no-hover': !tableSettings?.rowClickAction }\"\n mat-table\n [dataSource]=\"tableSource\"\n matSort\n >\n @for (column of displayedColumns; track column) {\n <ng-container [matColumnDef]=\"column\">\n <th\n mat-header-cell\n *matHeaderCellDef\n style=\"{{\n columns[column].width ? 'width:' + columns[column].width : ''\n }}\"\n mat-sort-header\n [disabled]=\"!columns[column].sort\"\n >\n {{ columns[column].translateColumnName }}\n @if (columns[column].search) {\n <mat-icon\n class=\"search-icon\"\n [matMenuTriggerFor]=\"menu\"\n (click)=\"$event.stopPropagation()\"\n >\n search\n </mat-icon>\n }\n <mat-menu #menu=\"matMenu\" xPosition=\"before\">\n <mat-form-field class=\"col\">\n <mat-label>{{\n columns[column].searchLabel || 'Search'\n }}</mat-label>\n <input\n matInput\n (keyup)=\"applySearch()\"\n [(ngModel)]=\"searchModel\"\n (click)=\"$event.stopPropagation()\"\n />\n <button\n matSuffix\n mat-icon-button\n aria-label=\"Clear\"\n (click)=\"searchModel = ''\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n </mat-menu>\n </th>\n <td\n mat-cell\n *matCellDef=\"let element\"\n style=\"{{\n columns[column].width ? 'width:' + columns[column].width : ''\n }}\"\n >\n @if (columns[column].actions && columns[column].actions!.length > 0) {\n <div\n class=\"actions-container\"\n style=\"overflow-y: hidden\"\n [ngClass]=\"{ 'justify-content-end': columns[column].flexRight }\"\n >\n @for (action of columns[column].actions; track action) {\n @if (checkIfActionVisible(element, action)) {\n @if (!action.url && action.action) {\n <button\n style=\"padding: 7px 7px; width: 40px; height: 40px\"\n class=\"col-auto\"\n mat-icon-button\n type=\"button\"\n matTooltip=\"{{ action.tooltipName || '' }}\"\n [matTooltipDisabled]=\"!!!action.tooltipName\"\n (click)=\"action.action(element)\"\n >\n <mat-icon>{{ action.iconName }}</mat-icon>\n </button>\n }\n @if (action.url) {\n <a [routerLink]=\"action.url\">\n <button\n class=\"col-auto\"\n mat-icon-button\n type=\"button\"\n matTooltip=\"{{ action.tooltipName || '' }}\"\n [matTooltipDisabled]=\"!!!action.tooltipName\"\n >\n <mat-icon>{{ action.iconName }}</mat-icon>\n </button>\n </a>\n }\n }\n }\n </div>\n }\n @if (!columns[column].actions) {\n @if (columns[column].translateValue) {\n <p style=\"margin: 0; padding: 0\">\n {{ columns[column].translateValue![element[column]] || '' }}\n </p>\n }\n @if (!columns[column].translateValue) {\n @if (!columns[column].type || columns[column].type === 'string') {\n <p style=\"margin: 0; padding: 0\">{{ element[column] }}</p>\n }\n @if (columns[column].type === 'date') {\n <p style=\"margin: 0; padding: 0\">\n {{ element[column] | stDateTimeFormatPipe }}\n </p>\n }\n }\n }\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: displayedColumns\"\n (click)=\"\n tableSettings?.rowClickAction ? tableSettings.rowClickAction(row) : null\n \"\n ></tr>\n </table>\n <mat-paginator\n [pageIndex]=\"pageIndex\"\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\n (page)=\"pageChanged($event)\"\n [showFirstLastButtons]=\"true\"\n ></mat-paginator>\n</div>\n", styles: ["", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:600;color:#424242}table::ng-deep tbody{background-color:transparent!important}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#f5f5f5}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}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 mat-icon{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!important}table.no-hover::ng-deep tbody tr.active td{border-bottom-color:#0000001f!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover td{border-bottom-color:#0000001f!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i11.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i15.ConfigurationsComponent, selector: "st-configurations[configurationsSettings]", inputs: ["configurationsSettings", "configurations", "initSelectedConfig"], outputs: ["createNewConfig", "removeConfig", "changeConfig"] }, { kind: "pipe", type: i16.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
229
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: LocalTableComponent, selector: "ngx-st-local-table", inputs: { tableSettings: "tableSettings", globalSearchSettings: "globalSearchSettings", pageSize: "pageSize", allowPickColumns: "allowPickColumns", configurationsSettings: "configurationsSettings", localStorageName: "localStorageName", bindSearchToUrl: "bindSearchToUrl", columns: "columns", data: "data" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"local-table\">\n <div class=\"row align-items-center\">\n @if (configurationsSettings || allowPickColumns) {\n <div class=\"col row align-items-center\" style=\"padding: 0\">\n @if (allowPickColumns) {\n <div class=\"col-auto\" style=\"padding: 0\">\n <button\n mat-icon-button\n class=\"col-auto\"\n [matMenuTriggerFor]=\"columnsMenu\"\n >\n <mat-icon> view_week </mat-icon>\n </button>\n <mat-menu #columnsMenu=\"matMenu\" xPosition=\"after\">\n @for (column of columnsArray; track column) {\n @if (!column.notShowInColumnPick) {\n <div mat-menu-item>\n <mat-checkbox\n [(ngModel)]=\"column.visible\"\n (ngModelChange)=\"columnVisibleChanged(column)\"\n style=\"margin-top: 5px\"\n (click)=\"$event.stopPropagation()\"\n >\n {{ column.translateColumnName }}\n </mat-checkbox>\n </div>\n }\n }\n </mat-menu>\n </div>\n }\n @if (configurationsSettings) {\n <st-configurations\n [configurationsSettings]=\"configurationsSettings\"\n [configurations]=\"configurations\"\n [initSelectedConfig]=\"initConfig\"\n (createNewConfig)=\"newConfigCreated($event)\"\n (removeConfig)=\"configRemoved($event)\"\n (changeConfig)=\"configChanged($event)\"\n ></st-configurations>\n }\n </div>\n }\n\n @if (globalSearchSettings?.show) {\n <div class=\"col\" style=\"padding: 0; margin-bottom: -15px\">\n <mat-form-field>\n <mat-label>{{ globalSearchSettings?.label || 'Search' }}</mat-label>\n <input matInput (keyup)=\"applySearch()\" [(ngModel)]=\"searchModel\" />\n <button\n matSuffix\n mat-icon-button\n aria-label=\"Clear\"\n (click)=\"clearSearch()\"\n >\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\n </button>\n </mat-form-field>\n </div>\n }\n </div>\n\n <table\n [ngClass]=\"{ 'no-hover': !tableSettings?.rowClickAction }\"\n mat-table\n [dataSource]=\"tableSource\"\n matSort\n >\n @for (column of displayedColumns; track column) {\n <ng-container [matColumnDef]=\"column\">\n <th\n mat-header-cell\n *matHeaderCellDef\n style=\"{{\n columns[column].width ? 'width:' + columns[column].width : ''\n }}\"\n mat-sort-header\n [disabled]=\"!columns[column].sort\"\n >\n {{ columns[column].translateColumnName }}\n @if (columns[column].search) {\n <mat-icon\n class=\"search-icon\"\n [matMenuTriggerFor]=\"menu\"\n (click)=\"$event.stopPropagation()\"\n >\n search\n </mat-icon>\n }\n <mat-menu #menu=\"matMenu\" xPosition=\"before\">\n <mat-form-field class=\"col\">\n <mat-label>{{\n columns[column].searchLabel || 'Search'\n }}</mat-label>\n <input\n matInput\n (keyup)=\"applySearch()\"\n [(ngModel)]=\"searchModel\"\n (click)=\"$event.stopPropagation()\"\n />\n <button\n matSuffix\n mat-icon-button\n aria-label=\"Clear\"\n (click)=\"searchModel = ''\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n </mat-menu>\n </th>\n <td\n mat-cell\n *matCellDef=\"let element\"\n style=\"{{\n columns[column].width ? 'width:' + columns[column].width : ''\n }}\"\n >\n @if (columns[column].actions && columns[column].actions!.length > 0) {\n <div\n class=\"actions-container\"\n style=\"overflow-y: hidden\"\n [ngClass]=\"{ 'justify-content-end': columns[column].flexRight }\"\n >\n @for (action of columns[column].actions; track action) {\n @if (checkIfActionVisible(element, action)) {\n @if (!action.url && action.action) {\n <button\n style=\"padding: 7px 7px; width: 40px; height: 40px\"\n class=\"col-auto\"\n mat-icon-button\n type=\"button\"\n matTooltip=\"{{ action.tooltipName || '' }}\"\n [matTooltipDisabled]=\"!!!action.tooltipName\"\n (click)=\"action.action(element)\"\n >\n <mat-icon>{{ action.iconName }}</mat-icon>\n </button>\n }\n @if (action.url) {\n <a [routerLink]=\"action.url\">\n <button\n class=\"col-auto\"\n mat-icon-button\n type=\"button\"\n matTooltip=\"{{ action.tooltipName || '' }}\"\n [matTooltipDisabled]=\"!!!action.tooltipName\"\n >\n <mat-icon>{{ action.iconName }}</mat-icon>\n </button>\n </a>\n }\n }\n }\n </div>\n }\n @if (!columns[column].actions) {\n @if (columns[column].translateValue) {\n <p style=\"margin: 0; padding: 0\">\n {{ columns[column].translateValue![element[column]] || '' }}\n </p>\n }\n @if (!columns[column].translateValue) {\n @if (!columns[column].type || columns[column].type === 'string') {\n <p style=\"margin: 0; padding: 0\">{{ element[column] }}</p>\n }\n @if (columns[column].type === 'date') {\n <p style=\"margin: 0; padding: 0\">\n {{ element[column] | stDateTimeFormatPipe }}\n </p>\n }\n }\n }\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: displayedColumns\"\n (click)=\"\n tableSettings?.rowClickAction ? tableSettings.rowClickAction(row) : null\n \"\n ></tr>\n </table>\n <mat-paginator\n [pageIndex]=\"pageIndex\"\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\n (page)=\"pageChanged($event)\"\n [showFirstLastButtons]=\"true\"\n ></mat-paginator>\n</div>\n", styles: ["", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table::ng-deep thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:600;color:#424242}.st-material-table table::ng-deep tbody{background-color:transparent!important}.st-material-table table::ng-deep tbody>tr{cursor:pointer}.st-material-table table::ng-deep tbody>tr.active{background-color:#a5d6a7}.st-material-table table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table::ng-deep tbody>tr:hover{background-color:#f5f5f5}.st-material-table table::ng-deep tbody>tr.disabled{cursor:not-allowed}.st-material-table table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table::ng-deep tbody>tr.detail-row{height:0;cursor:default}.st-material-table table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}.st-material-table table::ng-deep tbody>tr td a button{color:#000}.st-material-table table::ng-deep tbody>tr td a mat-icon{color:#333}.st-material-table table::ng-deep .mat-column-active{width:48px}.st-material-table table.no-hover::ng-deep tbody tr{cursor:default}.st-material-table table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover::ng-deep tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover::ng-deep tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table::ng-deep .actions-cell{width:100px}.dark-theme .st-material-table table{background-color:transparent!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table tbody tr:hover{background-color:var(--primeng-table-hover-background)!important}.dark-theme mat-paginator{background-color:transparent!important}.dark-theme .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .reorder-column-list .reorder-column-element p,.dark-theme .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .filter .filter-title{color:#eee!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i11.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i15.ConfigurationsComponent, selector: "st-configurations[configurationsSettings]", inputs: ["configurationsSettings", "configurations", "initSelectedConfig"], outputs: ["createNewConfig", "removeConfig", "changeConfig"] }, { kind: "pipe", type: i16.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
230
230
|
}
|
|
231
231
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LocalTableComponent, decorators: [{
|
|
232
232
|
type: Component,
|
|
233
|
-
args: [{ selector: 'ngx-st-local-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"local-table\">\n <div class=\"row align-items-center\">\n @if (configurationsSettings || allowPickColumns) {\n <div class=\"col row align-items-center\" style=\"padding: 0\">\n @if (allowPickColumns) {\n <div class=\"col-auto\" style=\"padding: 0\">\n <button\n mat-icon-button\n class=\"col-auto\"\n [matMenuTriggerFor]=\"columnsMenu\"\n >\n <mat-icon> view_week </mat-icon>\n </button>\n <mat-menu #columnsMenu=\"matMenu\" xPosition=\"after\">\n @for (column of columnsArray; track column) {\n @if (!column.notShowInColumnPick) {\n <div mat-menu-item>\n <mat-checkbox\n [(ngModel)]=\"column.visible\"\n (ngModelChange)=\"columnVisibleChanged(column)\"\n style=\"margin-top: 5px\"\n (click)=\"$event.stopPropagation()\"\n >\n {{ column.translateColumnName }}\n </mat-checkbox>\n </div>\n }\n }\n </mat-menu>\n </div>\n }\n @if (configurationsSettings) {\n <st-configurations\n [configurationsSettings]=\"configurationsSettings\"\n [configurations]=\"configurations\"\n [initSelectedConfig]=\"initConfig\"\n (createNewConfig)=\"newConfigCreated($event)\"\n (removeConfig)=\"configRemoved($event)\"\n (changeConfig)=\"configChanged($event)\"\n ></st-configurations>\n }\n </div>\n }\n\n @if (globalSearchSettings?.show) {\n <div class=\"col\" style=\"padding: 0; margin-bottom: -15px\">\n <mat-form-field>\n <mat-label>{{ globalSearchSettings?.label || 'Search' }}</mat-label>\n <input matInput (keyup)=\"applySearch()\" [(ngModel)]=\"searchModel\" />\n <button\n matSuffix\n mat-icon-button\n aria-label=\"Clear\"\n (click)=\"clearSearch()\"\n >\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\n </button>\n </mat-form-field>\n </div>\n }\n </div>\n\n <table\n [ngClass]=\"{ 'no-hover': !tableSettings?.rowClickAction }\"\n mat-table\n [dataSource]=\"tableSource\"\n matSort\n >\n @for (column of displayedColumns; track column) {\n <ng-container [matColumnDef]=\"column\">\n <th\n mat-header-cell\n *matHeaderCellDef\n style=\"{{\n columns[column].width ? 'width:' + columns[column].width : ''\n }}\"\n mat-sort-header\n [disabled]=\"!columns[column].sort\"\n >\n {{ columns[column].translateColumnName }}\n @if (columns[column].search) {\n <mat-icon\n class=\"search-icon\"\n [matMenuTriggerFor]=\"menu\"\n (click)=\"$event.stopPropagation()\"\n >\n search\n </mat-icon>\n }\n <mat-menu #menu=\"matMenu\" xPosition=\"before\">\n <mat-form-field class=\"col\">\n <mat-label>{{\n columns[column].searchLabel || 'Search'\n }}</mat-label>\n <input\n matInput\n (keyup)=\"applySearch()\"\n [(ngModel)]=\"searchModel\"\n (click)=\"$event.stopPropagation()\"\n />\n <button\n matSuffix\n mat-icon-button\n aria-label=\"Clear\"\n (click)=\"searchModel = ''\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n </mat-menu>\n </th>\n <td\n mat-cell\n *matCellDef=\"let element\"\n style=\"{{\n columns[column].width ? 'width:' + columns[column].width : ''\n }}\"\n >\n @if (columns[column].actions && columns[column].actions!.length > 0) {\n <div\n class=\"actions-container\"\n style=\"overflow-y: hidden\"\n [ngClass]=\"{ 'justify-content-end': columns[column].flexRight }\"\n >\n @for (action of columns[column].actions; track action) {\n @if (checkIfActionVisible(element, action)) {\n @if (!action.url && action.action) {\n <button\n style=\"padding: 7px 7px; width: 40px; height: 40px\"\n class=\"col-auto\"\n mat-icon-button\n type=\"button\"\n matTooltip=\"{{ action.tooltipName || '' }}\"\n [matTooltipDisabled]=\"!!!action.tooltipName\"\n (click)=\"action.action(element)\"\n >\n <mat-icon>{{ action.iconName }}</mat-icon>\n </button>\n }\n @if (action.url) {\n <a [routerLink]=\"action.url\">\n <button\n class=\"col-auto\"\n mat-icon-button\n type=\"button\"\n matTooltip=\"{{ action.tooltipName || '' }}\"\n [matTooltipDisabled]=\"!!!action.tooltipName\"\n >\n <mat-icon>{{ action.iconName }}</mat-icon>\n </button>\n </a>\n }\n }\n }\n </div>\n }\n @if (!columns[column].actions) {\n @if (columns[column].translateValue) {\n <p style=\"margin: 0; padding: 0\">\n {{ columns[column].translateValue![element[column]] || '' }}\n </p>\n }\n @if (!columns[column].translateValue) {\n @if (!columns[column].type || columns[column].type === 'string') {\n <p style=\"margin: 0; padding: 0\">{{ element[column] }}</p>\n }\n @if (columns[column].type === 'date') {\n <p style=\"margin: 0; padding: 0\">\n {{ element[column] | stDateTimeFormatPipe }}\n </p>\n }\n }\n }\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: displayedColumns\"\n (click)=\"\n tableSettings?.rowClickAction ? tableSettings.rowClickAction(row) : null\n \"\n ></tr>\n </table>\n <mat-paginator\n [pageIndex]=\"pageIndex\"\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\n (page)=\"pageChanged($event)\"\n [showFirstLastButtons]=\"true\"\n ></mat-paginator>\n</div>\n", styles: [".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:600;color:#424242}table::ng-deep tbody{background-color:transparent!important}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#f5f5f5}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}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 mat-icon{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!important}table.no-hover::ng-deep tbody tr.active td{border-bottom-color:#0000001f!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover td{border-bottom-color:#0000001f!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"] }]
|
|
233
|
+
args: [{ selector: 'ngx-st-local-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"local-table\">\n <div class=\"row align-items-center\">\n @if (configurationsSettings || allowPickColumns) {\n <div class=\"col row align-items-center\" style=\"padding: 0\">\n @if (allowPickColumns) {\n <div class=\"col-auto\" style=\"padding: 0\">\n <button\n mat-icon-button\n class=\"col-auto\"\n [matMenuTriggerFor]=\"columnsMenu\"\n >\n <mat-icon> view_week </mat-icon>\n </button>\n <mat-menu #columnsMenu=\"matMenu\" xPosition=\"after\">\n @for (column of columnsArray; track column) {\n @if (!column.notShowInColumnPick) {\n <div mat-menu-item>\n <mat-checkbox\n [(ngModel)]=\"column.visible\"\n (ngModelChange)=\"columnVisibleChanged(column)\"\n style=\"margin-top: 5px\"\n (click)=\"$event.stopPropagation()\"\n >\n {{ column.translateColumnName }}\n </mat-checkbox>\n </div>\n }\n }\n </mat-menu>\n </div>\n }\n @if (configurationsSettings) {\n <st-configurations\n [configurationsSettings]=\"configurationsSettings\"\n [configurations]=\"configurations\"\n [initSelectedConfig]=\"initConfig\"\n (createNewConfig)=\"newConfigCreated($event)\"\n (removeConfig)=\"configRemoved($event)\"\n (changeConfig)=\"configChanged($event)\"\n ></st-configurations>\n }\n </div>\n }\n\n @if (globalSearchSettings?.show) {\n <div class=\"col\" style=\"padding: 0; margin-bottom: -15px\">\n <mat-form-field>\n <mat-label>{{ globalSearchSettings?.label || 'Search' }}</mat-label>\n <input matInput (keyup)=\"applySearch()\" [(ngModel)]=\"searchModel\" />\n <button\n matSuffix\n mat-icon-button\n aria-label=\"Clear\"\n (click)=\"clearSearch()\"\n >\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\n </button>\n </mat-form-field>\n </div>\n }\n </div>\n\n <table\n [ngClass]=\"{ 'no-hover': !tableSettings?.rowClickAction }\"\n mat-table\n [dataSource]=\"tableSource\"\n matSort\n >\n @for (column of displayedColumns; track column) {\n <ng-container [matColumnDef]=\"column\">\n <th\n mat-header-cell\n *matHeaderCellDef\n style=\"{{\n columns[column].width ? 'width:' + columns[column].width : ''\n }}\"\n mat-sort-header\n [disabled]=\"!columns[column].sort\"\n >\n {{ columns[column].translateColumnName }}\n @if (columns[column].search) {\n <mat-icon\n class=\"search-icon\"\n [matMenuTriggerFor]=\"menu\"\n (click)=\"$event.stopPropagation()\"\n >\n search\n </mat-icon>\n }\n <mat-menu #menu=\"matMenu\" xPosition=\"before\">\n <mat-form-field class=\"col\">\n <mat-label>{{\n columns[column].searchLabel || 'Search'\n }}</mat-label>\n <input\n matInput\n (keyup)=\"applySearch()\"\n [(ngModel)]=\"searchModel\"\n (click)=\"$event.stopPropagation()\"\n />\n <button\n matSuffix\n mat-icon-button\n aria-label=\"Clear\"\n (click)=\"searchModel = ''\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n </mat-menu>\n </th>\n <td\n mat-cell\n *matCellDef=\"let element\"\n style=\"{{\n columns[column].width ? 'width:' + columns[column].width : ''\n }}\"\n >\n @if (columns[column].actions && columns[column].actions!.length > 0) {\n <div\n class=\"actions-container\"\n style=\"overflow-y: hidden\"\n [ngClass]=\"{ 'justify-content-end': columns[column].flexRight }\"\n >\n @for (action of columns[column].actions; track action) {\n @if (checkIfActionVisible(element, action)) {\n @if (!action.url && action.action) {\n <button\n style=\"padding: 7px 7px; width: 40px; height: 40px\"\n class=\"col-auto\"\n mat-icon-button\n type=\"button\"\n matTooltip=\"{{ action.tooltipName || '' }}\"\n [matTooltipDisabled]=\"!!!action.tooltipName\"\n (click)=\"action.action(element)\"\n >\n <mat-icon>{{ action.iconName }}</mat-icon>\n </button>\n }\n @if (action.url) {\n <a [routerLink]=\"action.url\">\n <button\n class=\"col-auto\"\n mat-icon-button\n type=\"button\"\n matTooltip=\"{{ action.tooltipName || '' }}\"\n [matTooltipDisabled]=\"!!!action.tooltipName\"\n >\n <mat-icon>{{ action.iconName }}</mat-icon>\n </button>\n </a>\n }\n }\n }\n </div>\n }\n @if (!columns[column].actions) {\n @if (columns[column].translateValue) {\n <p style=\"margin: 0; padding: 0\">\n {{ columns[column].translateValue![element[column]] || '' }}\n </p>\n }\n @if (!columns[column].translateValue) {\n @if (!columns[column].type || columns[column].type === 'string') {\n <p style=\"margin: 0; padding: 0\">{{ element[column] }}</p>\n }\n @if (columns[column].type === 'date') {\n <p style=\"margin: 0; padding: 0\">\n {{ element[column] | stDateTimeFormatPipe }}\n </p>\n }\n }\n }\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: displayedColumns\"\n (click)=\"\n tableSettings?.rowClickAction ? tableSettings.rowClickAction(row) : null\n \"\n ></tr>\n </table>\n <mat-paginator\n [pageIndex]=\"pageIndex\"\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\n (page)=\"pageChanged($event)\"\n [showFirstLastButtons]=\"true\"\n ></mat-paginator>\n</div>\n", styles: [".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table::ng-deep thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:600;color:#424242}.st-material-table table::ng-deep tbody{background-color:transparent!important}.st-material-table table::ng-deep tbody>tr{cursor:pointer}.st-material-table table::ng-deep tbody>tr.active{background-color:#a5d6a7}.st-material-table table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table::ng-deep tbody>tr:hover{background-color:#f5f5f5}.st-material-table table::ng-deep tbody>tr.disabled{cursor:not-allowed}.st-material-table table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table::ng-deep tbody>tr.detail-row{height:0;cursor:default}.st-material-table table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}.st-material-table table::ng-deep tbody>tr td a button{color:#000}.st-material-table table::ng-deep tbody>tr td a mat-icon{color:#333}.st-material-table table::ng-deep .mat-column-active{width:48px}.st-material-table table.no-hover::ng-deep tbody tr{cursor:default}.st-material-table table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover::ng-deep tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover::ng-deep tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table::ng-deep .actions-cell{width:100px}.dark-theme .st-material-table table{background-color:transparent!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table tbody tr:hover{background-color:var(--primeng-table-hover-background)!important}.dark-theme mat-paginator{background-color:transparent!important}.dark-theme .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .reorder-column-list .reorder-column-element p,.dark-theme .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .filter .filter-title{color:#eee!important}\n"] }]
|
|
234
234
|
}], ctorParameters: () => [{ type: i1.LocalTableService }, { type: i0.ChangeDetectorRef }, { type: i2.Router }, { type: i2.ActivatedRoute }], propDecorators: { paginator: [{
|
|
235
235
|
type: ViewChild,
|
|
236
236
|
args: [MatPaginator]
|