@openremote/or-mwc-components 1.8.0-snapshot.20250725120001 → 1.8.0-snapshot.20250725123024
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 +32 -32
- package/build.gradle +19 -19
- package/custom-elements.json +4 -4
- package/lib/or-mwc-dialog.js +76 -329
- package/lib/or-mwc-drawer.js +10 -114
- package/lib/or-mwc-input.js +439 -1760
- package/lib/or-mwc-list.js +71 -283
- package/lib/or-mwc-menu.js +45 -237
- package/lib/or-mwc-snackbar.js +17 -141
- package/lib/or-mwc-table.js +245 -685
- package/lib/or-mwc-tabs.js +53 -173
- package/lib/style.js +121 -125
- package/package.json +5 -5
- package/rspack.config.js +7 -7
- package/src/or-mwc-dialog.ts +374 -374
- package/src/or-mwc-drawer.ts +100 -100
- package/src/or-mwc-input.ts +1876 -1876
- package/src/or-mwc-list.ts +335 -335
- package/src/or-mwc-menu.ts +279 -279
- package/src/or-mwc-snackbar.ts +157 -157
- package/src/or-mwc-table.ts +712 -712
- package/src/or-mwc-tabs.ts +175 -175
- package/src/style.ts +125 -125
- package/tsconfig.json +15 -15
- package/tsconfig.tsbuildinfo +1 -1
package/lib/or-mwc-table.js
CHANGED
|
@@ -1,706 +1,266 @@
|
|
|
1
|
-
var __decorate = (
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
7
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
8
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
9
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
10
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
11
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
12
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
13
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
14
|
-
});
|
|
15
|
-
};
|
|
16
|
-
import { css, html, LitElement, unsafeCSS } from "lit";
|
|
17
|
-
import { customElement, property, state } from "lit/decorators.js";
|
|
18
|
-
import { classMap } from "lit/directives/class-map.js";
|
|
19
|
-
import { until } from 'lit/directives/until.js';
|
|
20
|
-
import { MDCDataTable } from "@material/data-table";
|
|
21
|
-
import { when } from 'lit/directives/when.js';
|
|
22
|
-
import { DefaultColor3, DefaultColor2, DefaultColor1 } from "@openremote/core";
|
|
23
|
-
import { i18next } from "@openremote/or-translate";
|
|
24
|
-
import { InputType } from "./or-mwc-input";
|
|
25
|
-
import { styleMap } from "lit/directives/style-map.js";
|
|
26
|
-
import moment from "moment";
|
|
27
|
-
const dataTableStyle = require("@material/data-table/dist/mdc.data-table.css");
|
|
28
|
-
// language=CSS
|
|
29
|
-
const style = css `
|
|
30
|
-
|
|
31
|
-
:host {
|
|
32
|
-
width: 100%;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
:host([hidden]) {
|
|
36
|
-
display: none;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.mdc-data-table {
|
|
40
|
-
width: 100%;
|
|
41
|
-
overflow: auto;
|
|
42
|
-
max-height: 500px;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.mdc-data-table__paginated {
|
|
46
|
-
overflow: hidden;
|
|
47
|
-
max-height: 700px;
|
|
48
|
-
justify-content: space-between;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.mdc-data-table__fullheight {
|
|
52
|
-
height: 100%;
|
|
53
|
-
max-height: none !important;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
/* first column should be sticky*/
|
|
57
|
-
.mdc-data-table.has-sticky-first-column tr th:first-of-type,
|
|
58
|
-
.mdc-data-table.has-sticky-first-column tr td:first-of-type {
|
|
59
|
-
z-index: 1;
|
|
60
|
-
position: sticky;
|
|
61
|
-
left: 0;
|
|
62
|
-
background-color: ${unsafeCSS(DefaultColor2)};
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.mdc-data-table.has-sticky-first-column tr th:first-of-type {
|
|
66
|
-
z-index: 2;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
thead th {
|
|
70
|
-
box-shadow: 0 1px 0 0 rgb(229, 229, 229);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.mdc-data-table.has-sticky-first-column tr td:first-of-type {
|
|
74
|
-
box-shadow: 1px 0 0 0 rgb(229, 229, 229);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
thead th:first-of-type {
|
|
78
|
-
box-shadow: 1px 1px 0 0 rgb(229, 229, 229);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
th {
|
|
82
|
-
position: sticky;
|
|
83
|
-
top: 0;
|
|
84
|
-
background-color: ${unsafeCSS(DefaultColor1)};
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
th, td {
|
|
88
|
-
cursor: default;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.mdc-data-table__header-cell {
|
|
92
|
-
font-weight: bold;
|
|
93
|
-
color: ${unsafeCSS(DefaultColor3)};
|
|
94
|
-
font-size: 14px;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.mdc-data-table__pagination-rows-per-page-select {
|
|
98
|
-
/*min-width: 112px;*/
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.mdc-data-table__pagination {
|
|
102
|
-
min-height: 64px;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
.mdc-data-table__cell--clickable {
|
|
106
|
-
cursor: pointer;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.sort-button {
|
|
110
|
-
padding-right: 0;
|
|
111
|
-
border: none;
|
|
112
|
-
color: ${unsafeCSS(DefaultColor3)};
|
|
113
|
-
background-color: transparent;
|
|
114
|
-
cursor: pointer;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
.sort-button-reverse {
|
|
118
|
-
padding-left: 0;
|
|
119
|
-
border: none;
|
|
120
|
-
color: ${unsafeCSS(DefaultColor3)};
|
|
121
|
-
cursor: pointer;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
.sortable {
|
|
125
|
-
flex-direction: row;
|
|
126
|
-
cursor: pointer;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.sortable-reverse {
|
|
130
|
-
flex-direction: row-reverse;
|
|
131
|
-
cursor: pointer;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.hidden {
|
|
135
|
-
visibility: hidden;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
#column-1 {
|
|
139
|
-
width: var(--or-mwc-table-column-width-1, unset);
|
|
140
|
-
}
|
|
141
|
-
#column-2 {
|
|
142
|
-
width: var(--or-mwc-table-column-width-2, unset);
|
|
143
|
-
}
|
|
144
|
-
#column-3 {
|
|
145
|
-
width: var(--or-mwc-table-column-width-3, unset);
|
|
146
|
-
}
|
|
147
|
-
#column-4 {
|
|
148
|
-
width: var(--or-mwc-table-column-width-4, unset);
|
|
149
|
-
}
|
|
150
|
-
#column-5 {
|
|
151
|
-
width: var(--or-mwc-table-column-width-5, unset);
|
|
152
|
-
}
|
|
153
|
-
#column-6 {
|
|
154
|
-
width: var(--or-mwc-table-column-width-6, unset);
|
|
155
|
-
}
|
|
156
|
-
#column-7 {
|
|
157
|
-
width: var(--or-mwc-table-column-width-7, unset);
|
|
158
|
-
}
|
|
159
|
-
#column-8 {
|
|
160
|
-
width: var(--or-mwc-table-column-width-8, unset);
|
|
161
|
-
}
|
|
162
|
-
#column-9 {
|
|
163
|
-
width: var(--or-mwc-table-column-width-9, unset);
|
|
164
|
-
}
|
|
165
|
-
#column-10 {
|
|
166
|
-
width: var(--or-mwc-table-column-width-10, unset);
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
@media screen and (max-width: 768px) {
|
|
170
|
-
.hide-mobile {
|
|
171
|
-
display: none;
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
`;
|
|
175
|
-
export class OrMwcTableRowClickEvent extends CustomEvent {
|
|
176
|
-
constructor(index) {
|
|
177
|
-
super(OrMwcTableRowClickEvent.NAME, {
|
|
178
|
-
detail: {
|
|
179
|
-
index: index
|
|
180
|
-
},
|
|
181
|
-
bubbles: true,
|
|
182
|
-
composed: true
|
|
183
|
-
});
|
|
1
|
+
var __decorate=this&&this.__decorate||function(t,e,i,a){var o,n=arguments.length,l=n<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,i,a);else for(var r=t.length-1;r>=0;r--)(o=t[r])&&(l=(n<3?o(l):n>3?o(e,i,l):o(e,i))||l);return n>3&&l&&Object.defineProperty(e,i,l),l},__awaiter=this&&this.__awaiter||function(t,e,i,a){return new(i||(i=Promise))(function(o,n){function l(t){try{s(a.next(t))}catch(t){n(t)}}function r(t){try{s(a.throw(t))}catch(t){n(t)}}function s(t){var e;t.done?o(t.value):((e=t.value)instanceof i?e:new i(function(t){t(e)})).then(l,r)}s((a=a.apply(t,e||[])).next())})};import{css as t,html as e,LitElement as i,unsafeCSS as a}from"lit";import{customElement as o,property as n,state as l}from"lit/decorators.js";import{classMap as r}from"lit/directives/class-map.js";import{until as s}from"lit/directives/until.js";import{MDCDataTable as c}from"@material/data-table";import{when as d}from"lit/directives/when.js";import{DefaultColor3 as h,DefaultColor2 as u,DefaultColor1 as m}from"@openremote/core";import{i18next as p}from"@openremote/or-translate";import{InputType as b}from"./or-mwc-input";import{styleMap as w}from"lit/directives/style-map.js";import g from"moment";let dataTableStyle=require("@material/data-table/dist/mdc.data-table.css"),style=t`
|
|
2
|
+
|
|
3
|
+
:host {
|
|
4
|
+
width: 100%;
|
|
184
5
|
}
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
constructor(index, state) {
|
|
189
|
-
super(OrMwcTableRowSelectEvent.NAME, {
|
|
190
|
-
detail: {
|
|
191
|
-
index: index,
|
|
192
|
-
state: state
|
|
193
|
-
},
|
|
194
|
-
bubbles: true,
|
|
195
|
-
composed: true
|
|
196
|
-
});
|
|
6
|
+
|
|
7
|
+
:host([hidden]) {
|
|
8
|
+
display: none;
|
|
197
9
|
}
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
this.config = {
|
|
204
|
-
columnFilter: [],
|
|
205
|
-
stickyFirstColumn: true,
|
|
206
|
-
fullHeight: false,
|
|
207
|
-
pagination: {
|
|
208
|
-
enable: false
|
|
209
|
-
}
|
|
210
|
-
};
|
|
211
|
-
this.paginationIndex = 0;
|
|
212
|
-
this.paginationSize = 10;
|
|
213
|
-
this.sortDirection = 'ASC';
|
|
214
|
-
this.sortIndex = -1;
|
|
215
|
-
this.selectedRows = [];
|
|
10
|
+
|
|
11
|
+
.mdc-data-table {
|
|
12
|
+
width: 100%;
|
|
13
|
+
overflow: auto;
|
|
14
|
+
max-height: 500px;
|
|
216
15
|
}
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
16
|
+
|
|
17
|
+
.mdc-data-table__paginated {
|
|
18
|
+
overflow: hidden;
|
|
19
|
+
max-height: 700px;
|
|
20
|
+
justify-content: space-between;
|
|
222
21
|
}
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
22
|
+
|
|
23
|
+
.mdc-data-table__fullheight {
|
|
24
|
+
height: 100%;
|
|
25
|
+
max-height: none !important;
|
|
227
26
|
}
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
});
|
|
237
|
-
observer.observe(elem);
|
|
238
|
-
// Reset selected rows properties
|
|
239
|
-
this.selectedRows = [];
|
|
240
|
-
}
|
|
27
|
+
|
|
28
|
+
/* first column should be sticky*/
|
|
29
|
+
.mdc-data-table.has-sticky-first-column tr th:first-of-type,
|
|
30
|
+
.mdc-data-table.has-sticky-first-column tr td:first-of-type {
|
|
31
|
+
z-index: 1;
|
|
32
|
+
position: sticky;
|
|
33
|
+
left: 0;
|
|
34
|
+
background-color: ${a(u)};
|
|
241
35
|
}
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
"mdc-data-table": true,
|
|
246
|
-
"mdc-data-table__paginated": !!((_a = this.config.pagination) === null || _a === void 0 ? void 0 : _a.enable),
|
|
247
|
-
"mdc-data-table__fullheight": !!this.config.fullHeight,
|
|
248
|
-
"has-sticky-first-column": !!this.config.stickyFirstColumn
|
|
249
|
-
};
|
|
250
|
-
// Only show pagination if enabled in config, and when "the amount of rows doesn't fit on the page".
|
|
251
|
-
const showPagination = ((_b = this.config.pagination) === null || _b === void 0 ? void 0 : _b.enable) && (!!this.rowsTemplate || (this.rows && (this.rows.length > this.paginationSize)));
|
|
252
|
-
const tableWidth = (_d = (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.firstElementChild) === null || _d === void 0 ? void 0 : _d.clientWidth;
|
|
253
|
-
return html `
|
|
254
|
-
<div class="${classMap(tableClasses)}">
|
|
255
|
-
<div class="mdc-data-table__table-container" style="flex: 1;">
|
|
256
|
-
<table class="mdc-data-table__table">
|
|
257
|
-
<!-- Header row that normally includes entries like 'id' and 'name'. You can use either a template or a list of columns -->
|
|
258
|
-
${when(this.columnsTemplate, () => this.columnsTemplate, () => {
|
|
259
|
-
return this.columns ? html `
|
|
260
|
-
<thead>
|
|
261
|
-
<tr class="mdc-data-table__header-row">
|
|
262
|
-
${this.columns.map((column, index) => {
|
|
263
|
-
var _a, _b;
|
|
264
|
-
const styles = {
|
|
265
|
-
width: this.getColumnWidth(index, this.columns, tableWidth),
|
|
266
|
-
maxWidth: this.getMaxColumnWidth(index, this.columns, tableWidth),
|
|
267
|
-
};
|
|
268
|
-
if (index === 0 && this.config.multiSelect) {
|
|
269
|
-
const allSelected = this.rows && this.rows.length > 0 && ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.length) === ((_b = this.rows) === null || _b === void 0 ? void 0 : _b.length);
|
|
270
|
-
const indeterminate = !allSelected && this.selectedRows && this.selectedRows.length > 0;
|
|
271
|
-
return html `
|
|
272
|
-
<th class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox"
|
|
273
|
-
role="columnheader" scope="col">
|
|
274
|
-
<or-mwc-input type="${InputType.CHECKBOX}" id="checkbox"
|
|
275
|
-
.indeterminate="${indeterminate}" .value="${allSelected}"
|
|
276
|
-
@or-mwc-input-changed="${(ev) => this.onCheckChanged(ev, ev.detail.value, "all")}">
|
|
277
|
-
</or-mwc-input>
|
|
278
|
-
</th>
|
|
279
|
-
${(typeof column === "string") ? html `
|
|
280
|
-
<th class="mdc-data-table__header-cell ${this.config.multiSelect ? "mdc-data-table__header-cell" : ''}" id="column-${index + 1}"
|
|
281
|
-
role="columnheader" scope="col"
|
|
282
|
-
title="${column}">
|
|
283
|
-
column
|
|
284
|
-
</th>
|
|
285
|
-
` : html `
|
|
286
|
-
<th class="mdc-data-table__header-cell ${classMap({
|
|
287
|
-
'mdc-data-table__cell--numeric': !!column.isNumeric,
|
|
288
|
-
'hide-mobile': !!column.hideMobile,
|
|
289
|
-
'mdc-data-table__header-cell--with-sort': !!column.isSortable,
|
|
290
|
-
})}"
|
|
291
|
-
role="columnheader" scope="col" title="${column.title}" data-column-id="${column.title}"
|
|
292
|
-
@click="${(ev) => column.isSortable ? this.onColumnSort(ev, index, this.sortDirection) : ''}">
|
|
293
|
-
${(!column.isSortable ? column.title : until(this.getSortHeader(index, column.title, this.sortDirection), html `${i18next.t('loading')}`))}
|
|
294
|
-
</th>
|
|
295
|
-
`}`;
|
|
296
|
-
}
|
|
297
|
-
return (typeof column == "string") ? html `
|
|
298
|
-
<th class="mdc-data-table__header-cell ${!!this.config.multiSelect ? "mdc-data-table__header-cell" : ''}" id="column-${index + 1}" role="columnheader" scope="col"
|
|
299
|
-
title="${column}">
|
|
300
|
-
${column}
|
|
301
|
-
</th>
|
|
302
|
-
` : html `
|
|
303
|
-
<th class="mdc-data-table__header-cell ${classMap({
|
|
304
|
-
'mdc-data-table__cell--numeric': !!column.isNumeric,
|
|
305
|
-
'hide-mobile': !!column.hideMobile,
|
|
306
|
-
'mdc-data-table__header-cell--with-sort': !!column.isSortable,
|
|
307
|
-
})}"
|
|
308
|
-
style="${styleMap(styles)}"
|
|
309
|
-
role="columnheader" scope="col" title="${column.title}" data-column-id="${column.title}"
|
|
310
|
-
@click="${(ev) => column.isSortable ? this.onColumnSort(ev, index, this.sortDirection ? this.sortDirection : 'ASC') : ''}">
|
|
311
|
-
${(!column.isSortable ? column.title : until(this.getSortHeader(index, column.title, this.sortDirection, !!column.isNumeric), html `${i18next.t('loading')}`))}
|
|
312
|
-
</th>
|
|
313
|
-
`;
|
|
314
|
-
})}
|
|
315
|
-
</tr>
|
|
316
|
-
</thead>
|
|
317
|
-
` : undefined;
|
|
318
|
-
})}
|
|
319
|
-
<!-- Table content, where either the template or an array of rows is displayed -->
|
|
320
|
-
<tbody class="mdc-data-table__content">
|
|
321
|
-
${when(this.rowsTemplate, () => {
|
|
322
|
-
var _a;
|
|
323
|
-
if ((_a = this.config.pagination) === null || _a === void 0 ? void 0 : _a.enable) { // if paginated, filter out the rows by index by manually collecting a list of <tr> elements.
|
|
324
|
-
this.updateComplete.then(() => __awaiter(this, void 0, void 0, function* () {
|
|
325
|
-
const elem = yield this.getTableElem(false);
|
|
326
|
-
const rows = elem === null || elem === void 0 ? void 0 : elem.querySelectorAll('tr');
|
|
327
|
-
rows === null || rows === void 0 ? void 0 : rows.forEach((row, index) => {
|
|
328
|
-
const hidden = (index <= (this.paginationIndex * this.paginationSize) || index > (this.paginationIndex * this.paginationSize) + this.paginationSize) && !row.classList.contains('mdc-data-table__header-row');
|
|
329
|
-
row.style.display = (hidden ? 'none' : 'table-row');
|
|
330
|
-
});
|
|
331
|
-
}));
|
|
332
|
-
}
|
|
333
|
-
return html `${this.rowsTemplate}`;
|
|
334
|
-
}, () => {
|
|
335
|
-
return this.rows ? this.rows
|
|
336
|
-
.filter((row, index) => { var _a; return !((_a = this.config.pagination) === null || _a === void 0 ? void 0 : _a.enable) || (index >= (this.paginationIndex * this.paginationSize)) && (index < (this.paginationIndex * this.paginationSize + this.paginationSize)); })
|
|
337
|
-
.map((item) => {
|
|
338
|
-
const content = (Array.isArray(item) ? item : item.content);
|
|
339
|
-
return html `
|
|
340
|
-
<tr class="mdc-data-table__row" @click="${(ev) => this.onRowClick(ev, item)}">
|
|
341
|
-
${content === null || content === void 0 ? void 0 : content.map((cell, index) => {
|
|
342
|
-
const classes = {
|
|
343
|
-
"mdc-data-table__cell": true,
|
|
344
|
-
"mdc-data-table__cell--numeric": typeof cell === "number",
|
|
345
|
-
"mdc-data-table__cell--clickable": (!Array.isArray(item) && item.clickable),
|
|
346
|
-
"hide-mobile": (this.columns && typeof this.columns[index] != "string" && this.columns[index].hideMobile)
|
|
347
|
-
};
|
|
348
|
-
const styles = {
|
|
349
|
-
maxWidth: this.getMaxColumnWidth(index, this.columns, tableWidth),
|
|
350
|
-
};
|
|
351
|
-
return html `
|
|
352
|
-
${when(index === 0 && this.config.multiSelect, () => {
|
|
353
|
-
var _a;
|
|
354
|
-
return html `
|
|
355
|
-
<td class="mdc-data-table__cell mdc-data-table__cell--checkbox" >
|
|
356
|
-
<div class="">
|
|
357
|
-
<or-mwc-input type="${InputType.CHECKBOX}" id="checkbox-${index}"
|
|
358
|
-
@or-mwc-input-changed="${(ev) => this.onCheckChanged(ev, ev.detail.value, "single", item)}"
|
|
359
|
-
.value="${(_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.includes(item)}"
|
|
360
|
-
></or-mwc-input>
|
|
361
|
-
</div>
|
|
362
|
-
</td>
|
|
363
|
-
`;
|
|
364
|
-
})}
|
|
365
|
-
<td class="${classMap(classes)}" title="${typeof cell === 'object' ? "" : cell}" style="${styleMap(styles)}">
|
|
366
|
-
${until(this.getTableContent(cell))}
|
|
367
|
-
</td>
|
|
368
|
-
`;
|
|
369
|
-
})}
|
|
370
|
-
</tr>
|
|
371
|
-
`;
|
|
372
|
-
})
|
|
373
|
-
: undefined;
|
|
374
|
-
})}
|
|
375
|
-
</tbody>
|
|
376
|
-
</table>
|
|
377
|
-
</div>
|
|
378
|
-
<!-- Pagination HTML, shown on the bottom right. Same as Material Design spec -->
|
|
379
|
-
${when(showPagination, () => {
|
|
380
|
-
var _a;
|
|
381
|
-
const options = ((_a = this.config.pagination) === null || _a === void 0 ? void 0 : _a.options) || [10, 25, 100];
|
|
382
|
-
return html `
|
|
383
|
-
<div class="mdc-data-table__pagination">
|
|
384
|
-
<div class="mdc-data-table__pagination-trailing">
|
|
385
|
-
<div class="mdc-data-table__pagination-rows-per-page">
|
|
386
|
-
<div class="mdc-data-table__pagination-rows-per-page-label">
|
|
387
|
-
${i18next.t('rowsPerPage')}
|
|
388
|
-
</div>
|
|
389
|
-
<or-mwc-input class="mdc-data-table__pagination-rows-per-page-select"
|
|
390
|
-
.type="${InputType.SELECT}" compact comfortable outlined .readonly="${options.length === 1}"
|
|
391
|
-
.value="${this.paginationSize}" .options="${options}"
|
|
392
|
-
@or-mwc-input-changed="${(ev) => {
|
|
393
|
-
this.paginationSize = ev.detail.value;
|
|
394
|
-
this.paginationIndex = 0;
|
|
395
|
-
}}"
|
|
396
|
-
></or-mwc-input>
|
|
397
|
-
</div>
|
|
398
|
-
${until(this.getPaginationControls(), html `${i18next.t('loading')}`)}
|
|
399
|
-
</div>
|
|
400
|
-
</div>
|
|
401
|
-
`;
|
|
402
|
-
})}
|
|
403
|
-
</div>
|
|
404
|
-
`;
|
|
36
|
+
|
|
37
|
+
.mdc-data-table.has-sticky-first-column tr th:first-of-type {
|
|
38
|
+
z-index: 2;
|
|
405
39
|
}
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
*/
|
|
410
|
-
getTableContent(content) {
|
|
411
|
-
if (typeof content === 'string' || typeof content === 'number') {
|
|
412
|
-
return content;
|
|
413
|
-
}
|
|
414
|
-
else if (content instanceof Date) {
|
|
415
|
-
return moment(content).format("lll");
|
|
416
|
-
}
|
|
417
|
-
else {
|
|
418
|
-
return content;
|
|
419
|
-
}
|
|
40
|
+
|
|
41
|
+
thead th {
|
|
42
|
+
box-shadow: 0 1px 0 0 rgb(229, 229, 229);
|
|
420
43
|
}
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
onRowClick(ev, item) {
|
|
425
|
-
if (this.config.multiSelect) {
|
|
426
|
-
const elem = ev.target;
|
|
427
|
-
if (elem.nodeName === "OR-MWC-INPUT" && elem.id.includes('checkbox')) {
|
|
428
|
-
return; // if checkbox is clicked, the regular "click on row" should not trigger.
|
|
429
|
-
}
|
|
430
|
-
}
|
|
431
|
-
this.dispatchEvent(new OrMwcTableRowClickEvent(this.rows.indexOf(item)));
|
|
44
|
+
|
|
45
|
+
.mdc-data-table.has-sticky-first-column tr td:first-of-type {
|
|
46
|
+
box-shadow: 1px 0 0 0 rgb(229, 229, 229);
|
|
432
47
|
}
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
*/
|
|
437
|
-
onCheckChanged(event, checked, type, item) {
|
|
438
|
-
var _a, _b, _c;
|
|
439
|
-
event.stopPropagation();
|
|
440
|
-
if (type === "all") {
|
|
441
|
-
if (checked) {
|
|
442
|
-
this.selectedRows = this.rows;
|
|
443
|
-
}
|
|
444
|
-
else {
|
|
445
|
-
this.selectedRows = [];
|
|
446
|
-
}
|
|
447
|
-
// Dispatch events to parent component
|
|
448
|
-
(_a = this.rows) === null || _a === void 0 ? void 0 : _a.forEach((_, index) => this.dispatchEvent(new OrMwcTableRowSelectEvent(index, checked)));
|
|
449
|
-
}
|
|
450
|
-
else {
|
|
451
|
-
if (checked) {
|
|
452
|
-
if (this.selectedRows === undefined) {
|
|
453
|
-
this.selectedRows = [item];
|
|
454
|
-
}
|
|
455
|
-
else if (this.selectedRows.indexOf(item) === -1) {
|
|
456
|
-
this.selectedRows.push(item);
|
|
457
|
-
this.requestUpdate('selectedRows');
|
|
458
|
-
}
|
|
459
|
-
}
|
|
460
|
-
else {
|
|
461
|
-
this.selectedRows = (_b = this.selectedRows) === null || _b === void 0 ? void 0 : _b.filter((e) => e !== item);
|
|
462
|
-
}
|
|
463
|
-
// Dispatch events to parent component
|
|
464
|
-
const index = (_c = this.rows) === null || _c === void 0 ? void 0 : _c.indexOf(item);
|
|
465
|
-
if (index !== undefined && index > -1) {
|
|
466
|
-
this.dispatchEvent(new OrMwcTableRowSelectEvent(index, checked));
|
|
467
|
-
}
|
|
468
|
-
}
|
|
48
|
+
|
|
49
|
+
thead th:first-of-type {
|
|
50
|
+
box-shadow: 1px 1px 0 0 rgb(229, 229, 229);
|
|
469
51
|
}
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
if (this.config.multiSelect) {
|
|
476
|
-
const elem = ev.target;
|
|
477
|
-
if (elem.nodeName === "OR-MWC-INPUT" && elem.id.includes('checkbox')) {
|
|
478
|
-
return; // if checkbox is clicked, sort should not trigger.
|
|
479
|
-
}
|
|
480
|
-
}
|
|
481
|
-
const newDirection = (sortDirection == 'ASC') ? 'DESC' : 'ASC';
|
|
482
|
-
this.sortDirection = newDirection;
|
|
483
|
-
this.sortIndex = index;
|
|
484
|
-
if (this.rows && this.rows.length > 0) {
|
|
485
|
-
// If string array of rows,
|
|
486
|
-
if (Array.isArray(this.rows[0])) {
|
|
487
|
-
this.rows.sort((a, b) => {
|
|
488
|
-
return this.sortPrimitiveRows(a, b, index, newDirection);
|
|
489
|
-
});
|
|
490
|
-
}
|
|
491
|
-
// Else if row is TableRow
|
|
492
|
-
else {
|
|
493
|
-
this.rows.sort((a, b) => {
|
|
494
|
-
return this.sortObjectRows(a, b, index, newDirection);
|
|
495
|
-
});
|
|
496
|
-
}
|
|
497
|
-
}
|
|
498
|
-
});
|
|
52
|
+
|
|
53
|
+
th {
|
|
54
|
+
position: sticky;
|
|
55
|
+
top: 0;
|
|
56
|
+
background-color: ${a(m)};
|
|
499
57
|
}
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
sortPrimitiveRows(rowA, rowB, cIndex, sortDirection) {
|
|
504
|
-
const cellA = rowA[cIndex];
|
|
505
|
-
const cellB = rowB[cIndex];
|
|
506
|
-
if (!cellA && !cellB) {
|
|
507
|
-
return 0;
|
|
508
|
-
}
|
|
509
|
-
else if (!cellA || cellA.toString().length === 0) {
|
|
510
|
-
return sortDirection === 'DESC' ? 1 : -1;
|
|
511
|
-
}
|
|
512
|
-
else if (!cellB || cellB.toString().length === 0) {
|
|
513
|
-
return sortDirection === 'DESC' ? -1 : 1;
|
|
514
|
-
}
|
|
515
|
-
else {
|
|
516
|
-
if (typeof cellA === 'string' && typeof cellB === 'string') {
|
|
517
|
-
if (sortDirection === 'DESC') {
|
|
518
|
-
return cellB.localeCompare(cellA, 'en', { numeric: true });
|
|
519
|
-
}
|
|
520
|
-
else {
|
|
521
|
-
return cellA.localeCompare(cellB, 'en', { numeric: true });
|
|
522
|
-
}
|
|
523
|
-
}
|
|
524
|
-
else if (typeof cellA === 'number' && typeof cellB === 'number') {
|
|
525
|
-
if (sortDirection === 'DESC') {
|
|
526
|
-
return cellA > cellB ? -1 : 1;
|
|
527
|
-
}
|
|
528
|
-
else {
|
|
529
|
-
return cellA > cellB ? 1 : -1;
|
|
530
|
-
}
|
|
531
|
-
}
|
|
532
|
-
else {
|
|
533
|
-
console.warn("sortPrimitiveRows() was called using neither a number nor a string.");
|
|
534
|
-
return 1;
|
|
535
|
-
}
|
|
536
|
-
}
|
|
58
|
+
|
|
59
|
+
th, td {
|
|
60
|
+
cursor: default;
|
|
537
61
|
}
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
const cellA = (_a = rowA.content) === null || _a === void 0 ? void 0 : _a[cIndex];
|
|
544
|
-
const cellB = (_b = rowB.content) === null || _b === void 0 ? void 0 : _b[cIndex];
|
|
545
|
-
const isSortable = (content) => (typeof content === 'string' || typeof content === 'number');
|
|
546
|
-
const isTemplate = (content) => (content.strings !== undefined && content.values !== undefined);
|
|
547
|
-
if (!cellA || !cellB || isSortable(cellA) || isSortable(cellB)) {
|
|
548
|
-
return this.sortPrimitiveRows([cellA], [cellB], 0, sortDirection);
|
|
549
|
-
}
|
|
550
|
-
else if (cellA instanceof Date && cellB instanceof Date) {
|
|
551
|
-
return this.sortDateRows(cellA, cellB, 0, sortDirection);
|
|
552
|
-
}
|
|
553
|
-
else if (isTemplate(cellA) || isTemplate(cellB)) {
|
|
554
|
-
return this.sortTemplateRows(cellA, cellB, 0, sortDirection);
|
|
555
|
-
}
|
|
556
|
-
return 1;
|
|
62
|
+
|
|
63
|
+
.mdc-data-table__header-cell {
|
|
64
|
+
font-weight: bold;
|
|
65
|
+
color: ${a(h)};
|
|
66
|
+
font-size: 14px;
|
|
557
67
|
}
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
}
|
|
562
|
-
else {
|
|
563
|
-
return dateA > dateB ? 1 : -1;
|
|
564
|
-
}
|
|
68
|
+
|
|
69
|
+
.mdc-data-table__pagination-rows-per-page-select {
|
|
70
|
+
/*min-width: 112px;*/
|
|
565
71
|
}
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
const valueA = (_a = cellA.values.filter(v => typeof v === 'string' || typeof v === 'number').map(v => v.toString())) === null || _a === void 0 ? void 0 : _a[0];
|
|
574
|
-
const valueB = (_b = cellB.values.filter(v => typeof v === 'string' || typeof v === 'number').map(v => v.toString())) === null || _b === void 0 ? void 0 : _b[0];
|
|
575
|
-
if (valueA !== undefined && valueB !== undefined) {
|
|
576
|
-
return this.sortPrimitiveRows([valueA], [valueB], 0, sortDirection);
|
|
577
|
-
}
|
|
578
|
-
else {
|
|
579
|
-
return 1;
|
|
580
|
-
}
|
|
72
|
+
|
|
73
|
+
.mdc-data-table__pagination {
|
|
74
|
+
min-height: 64px;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.mdc-data-table__cell--clickable {
|
|
78
|
+
cursor: pointer;
|
|
581
79
|
}
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
${title}
|
|
590
|
-
</div>
|
|
591
|
-
<button class="mdc-icon-button material-icons ${arrowOnLeft ? 'sort-button-reverse' : 'sort-button'} ${this.sortIndex === index ? '' : 'hidden'}"
|
|
592
|
-
aria-label="Sort by ${title}" aria-describedby="${title}-status-label" aria-hidden="${!(this.sortIndex === index)}">
|
|
593
|
-
<or-icon icon="${sortDirection == 'ASC' ? "arrow-up" : "arrow-down"}"></or-icon>
|
|
594
|
-
</button>
|
|
595
|
-
<div class="mdc-data-table__sort-status-label" aria-hidden="true" id="${title}-status-label">
|
|
596
|
-
</div>
|
|
597
|
-
</div>
|
|
598
|
-
`;
|
|
599
|
-
});
|
|
80
|
+
|
|
81
|
+
.sort-button {
|
|
82
|
+
padding-right: 0;
|
|
83
|
+
border: none;
|
|
84
|
+
color: ${a(h)};
|
|
85
|
+
background-color: transparent;
|
|
86
|
+
cursor: pointer;
|
|
600
87
|
}
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
let end = this.paginationIndex * this.paginationSize + this.paginationSize;
|
|
608
|
-
if (end > max) {
|
|
609
|
-
end = max;
|
|
610
|
-
}
|
|
611
|
-
return html `
|
|
612
|
-
<div class="mdc-data-table__pagination-navigation">
|
|
613
|
-
<div class="mdc-data-table__pagination-total">
|
|
614
|
-
<span>${start}-${end} of ${max}</span>
|
|
615
|
-
</div>
|
|
616
|
-
<or-mwc-input class="mdc-data-table__pagination-button" .type="${InputType.BUTTON}"
|
|
617
|
-
data-first-page="true" icon="page-first" .disabled="${this.paginationIndex == 0}"
|
|
618
|
-
@or-mwc-input-changed="${() => this.paginationIndex = 0}"></or-mwc-input>
|
|
619
|
-
<or-mwc-input class="mdc-data-table__pagination-button" .type="${InputType.BUTTON}"
|
|
620
|
-
data-prev-page="true" icon="chevron-left" .disabled="${this.paginationIndex == 0}"
|
|
621
|
-
@or-mwc-input-changed="${() => this.paginationIndex--}"></or-mwc-input>
|
|
622
|
-
<or-mwc-input class="mdc-data-table__pagination-button" .type="${InputType.BUTTON}"
|
|
623
|
-
data-next-page="true" icon="chevron-right"
|
|
624
|
-
.disabled="${this.paginationIndex * this.paginationSize + this.paginationSize >= max}"
|
|
625
|
-
@or-mwc-input-changed="${() => this.paginationIndex++}"></or-mwc-input>
|
|
626
|
-
<or-mwc-input class="mdc-data-table__pagination-button" .type="${InputType.BUTTON}"
|
|
627
|
-
data-last-page="true" icon="page-last"
|
|
628
|
-
.disabled="${this.paginationIndex * this.paginationSize + this.paginationSize >= max}"
|
|
629
|
-
@or-mwc-input-changed="${() => __awaiter(this, void 0, void 0, function* () {
|
|
630
|
-
let pages = max / this.paginationSize;
|
|
631
|
-
pages = pages.toString().includes('.') ? Math.floor(pages) : (pages - 1);
|
|
632
|
-
this.paginationIndex = pages;
|
|
633
|
-
})}"
|
|
634
|
-
></or-mwc-input>
|
|
635
|
-
</div>
|
|
636
|
-
`;
|
|
637
|
-
});
|
|
88
|
+
|
|
89
|
+
.sort-button-reverse {
|
|
90
|
+
padding-left: 0;
|
|
91
|
+
border: none;
|
|
92
|
+
color: ${a(h)};
|
|
93
|
+
cursor: pointer;
|
|
638
94
|
}
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
var _a, _b;
|
|
644
|
-
if ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length) {
|
|
645
|
-
return (_b = this.rows) === null || _b === void 0 ? void 0 : _b.length;
|
|
646
|
-
}
|
|
647
|
-
if (!tableElem) {
|
|
648
|
-
tableElem = yield this.getTableElem(wait);
|
|
649
|
-
}
|
|
650
|
-
const rowElems = tableElem === null || tableElem === void 0 ? void 0 : tableElem.querySelectorAll('tr');
|
|
651
|
-
return rowElems.length;
|
|
652
|
-
});
|
|
95
|
+
|
|
96
|
+
.sortable {
|
|
97
|
+
flex-direction: row;
|
|
98
|
+
cursor: pointer;
|
|
653
99
|
}
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
}
|
|
659
|
-
return this._dataTable ? this._dataTable.root : this.shadowRoot.querySelector('.mdc-data-table');
|
|
660
|
-
});
|
|
100
|
+
|
|
101
|
+
.sortable-reverse {
|
|
102
|
+
flex-direction: row-reverse;
|
|
103
|
+
cursor: pointer;
|
|
661
104
|
}
|
|
662
|
-
|
|
663
|
-
|
|
105
|
+
|
|
106
|
+
.hidden {
|
|
107
|
+
visibility: hidden;
|
|
664
108
|
}
|
|
665
|
-
|
|
666
|
-
|
|
109
|
+
|
|
110
|
+
#column-1 {
|
|
111
|
+
width: var(--or-mwc-table-column-width-1, unset);
|
|
112
|
+
}
|
|
113
|
+
#column-2 {
|
|
114
|
+
width: var(--or-mwc-table-column-width-2, unset);
|
|
115
|
+
}
|
|
116
|
+
#column-3 {
|
|
117
|
+
width: var(--or-mwc-table-column-width-3, unset);
|
|
118
|
+
}
|
|
119
|
+
#column-4 {
|
|
120
|
+
width: var(--or-mwc-table-column-width-4, unset);
|
|
121
|
+
}
|
|
122
|
+
#column-5 {
|
|
123
|
+
width: var(--or-mwc-table-column-width-5, unset);
|
|
124
|
+
}
|
|
125
|
+
#column-6 {
|
|
126
|
+
width: var(--or-mwc-table-column-width-6, unset);
|
|
127
|
+
}
|
|
128
|
+
#column-7 {
|
|
129
|
+
width: var(--or-mwc-table-column-width-7, unset);
|
|
130
|
+
}
|
|
131
|
+
#column-8 {
|
|
132
|
+
width: var(--or-mwc-table-column-width-8, unset);
|
|
133
|
+
}
|
|
134
|
+
#column-9 {
|
|
135
|
+
width: var(--or-mwc-table-column-width-9, unset);
|
|
136
|
+
}
|
|
137
|
+
#column-10 {
|
|
138
|
+
width: var(--or-mwc-table-column-width-10, unset);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
@media screen and (max-width: 768px) {
|
|
142
|
+
.hide-mobile {
|
|
143
|
+
display: none;
|
|
144
|
+
}
|
|
667
145
|
}
|
|
668
|
-
};
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
146
|
+
`;export class OrMwcTableRowClickEvent extends CustomEvent{constructor(t){super(OrMwcTableRowClickEvent.NAME,{detail:{index:t},bubbles:!0,composed:!0})}}OrMwcTableRowClickEvent.NAME="or-mwc-table-row-click";export class OrMwcTableRowSelectEvent extends CustomEvent{constructor(t,e){super(OrMwcTableRowSelectEvent.NAME,{detail:{index:t,state:e},bubbles:!0,composed:!0})}}OrMwcTableRowSelectEvent.NAME="or-mwc-table-row-select";let OrMwcTable=class extends i{constructor(){super(...arguments),this.config={columnFilter:[],stickyFirstColumn:!0,fullHeight:!1,pagination:{enable:!1}},this.paginationIndex=0,this.paginationSize=10,this.sortDirection="ASC",this.sortIndex=-1,this.selectedRows=[]}static get styles(){return[t`${a(dataTableStyle)}`,style]}firstUpdated(t){let e=this.shadowRoot.querySelector(".mdc-data-table");this._dataTable=new c(e)}updated(t){var e;if((t.has("paginationIndex")||t.has("paginationSize"))&&(null==(e=this.config.pagination)?void 0:e.enable)){let t=this._dataTable?this._dataTable.root.children[0]:this.shadowRoot.querySelector(".mdc-data-table__table-container");new IntersectionObserver((t,e)=>{t[0].target.scrollTop=0,e.unobserve(t[0].target)}).observe(t),this.selectedRows=[]}}render(){var t,i,a,o;let n={"mdc-data-table":!0,"mdc-data-table__paginated":!!(null==(t=this.config.pagination)?void 0:t.enable),"mdc-data-table__fullheight":!!this.config.fullHeight,"has-sticky-first-column":!!this.config.stickyFirstColumn},l=(null==(i=this.config.pagination)?void 0:i.enable)&&(!!this.rowsTemplate||this.rows&&this.rows.length>this.paginationSize),c=null==(o=null==(a=this.shadowRoot)?void 0:a.firstElementChild)?void 0:o.clientWidth;return e`
|
|
147
|
+
<div class="${r(n)}">
|
|
148
|
+
<div class="mdc-data-table__table-container" style="flex: 1;">
|
|
149
|
+
<table class="mdc-data-table__table">
|
|
150
|
+
<!-- Header row that normally includes entries like 'id' and 'name'. You can use either a template or a list of columns -->
|
|
151
|
+
${d(this.columnsTemplate,()=>this.columnsTemplate,()=>this.columns?e`
|
|
152
|
+
<thead>
|
|
153
|
+
<tr class="mdc-data-table__header-row">
|
|
154
|
+
${this.columns.map((t,i)=>{var a,o;let n={width:this.getColumnWidth(i,this.columns,c),maxWidth:this.getMaxColumnWidth(i,this.columns,c)};if(0===i&&this.config.multiSelect){let n=this.rows&&this.rows.length>0&&(null==(a=this.selectedRows)?void 0:a.length)===(null==(o=this.rows)?void 0:o.length),l=!n&&this.selectedRows&&this.selectedRows.length>0;return e`
|
|
155
|
+
<th class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox"
|
|
156
|
+
role="columnheader" scope="col">
|
|
157
|
+
<or-mwc-input type="${b.CHECKBOX}" id="checkbox"
|
|
158
|
+
.indeterminate="${l}" .value="${n}"
|
|
159
|
+
@or-mwc-input-changed="${t=>this.onCheckChanged(t,t.detail.value,"all")}">
|
|
160
|
+
</or-mwc-input>
|
|
161
|
+
</th>
|
|
162
|
+
${"string"==typeof t?e`
|
|
163
|
+
<th class="mdc-data-table__header-cell ${this.config.multiSelect?"mdc-data-table__header-cell":""}" id="column-${i+1}"
|
|
164
|
+
role="columnheader" scope="col"
|
|
165
|
+
title="${t}">
|
|
166
|
+
column
|
|
167
|
+
</th>
|
|
168
|
+
`:e`
|
|
169
|
+
<th class="mdc-data-table__header-cell ${r({"mdc-data-table__cell--numeric":!!t.isNumeric,"hide-mobile":!!t.hideMobile,"mdc-data-table__header-cell--with-sort":!!t.isSortable})}"
|
|
170
|
+
role="columnheader" scope="col" title="${t.title}" data-column-id="${t.title}"
|
|
171
|
+
@click="${e=>t.isSortable?this.onColumnSort(e,i,this.sortDirection):""}">
|
|
172
|
+
${!t.isSortable?t.title:s(this.getSortHeader(i,t.title,this.sortDirection),e`${p.t("loading")}`)}
|
|
173
|
+
</th>
|
|
174
|
+
`}`}return"string"==typeof t?e`
|
|
175
|
+
<th class="mdc-data-table__header-cell ${this.config.multiSelect?"mdc-data-table__header-cell":""}" id="column-${i+1}" role="columnheader" scope="col"
|
|
176
|
+
title="${t}">
|
|
177
|
+
${t}
|
|
178
|
+
</th>
|
|
179
|
+
`:e`
|
|
180
|
+
<th class="mdc-data-table__header-cell ${r({"mdc-data-table__cell--numeric":!!t.isNumeric,"hide-mobile":!!t.hideMobile,"mdc-data-table__header-cell--with-sort":!!t.isSortable})}"
|
|
181
|
+
style="${w(n)}"
|
|
182
|
+
role="columnheader" scope="col" title="${t.title}" data-column-id="${t.title}"
|
|
183
|
+
@click="${e=>t.isSortable?this.onColumnSort(e,i,this.sortDirection?this.sortDirection:"ASC"):""}">
|
|
184
|
+
${!t.isSortable?t.title:s(this.getSortHeader(i,t.title,this.sortDirection,!!t.isNumeric),e`${p.t("loading")}`)}
|
|
185
|
+
</th>
|
|
186
|
+
`})}
|
|
187
|
+
</tr>
|
|
188
|
+
</thead>
|
|
189
|
+
`:void 0)}
|
|
190
|
+
<!-- Table content, where either the template or an array of rows is displayed -->
|
|
191
|
+
<tbody class="mdc-data-table__content">
|
|
192
|
+
${d(this.rowsTemplate,()=>{var t;return(null==(t=this.config.pagination)?void 0:t.enable)&&this.updateComplete.then(()=>__awaiter(this,void 0,void 0,function*(){let t=yield this.getTableElem(!1),e=null==t?void 0:t.querySelectorAll("tr");null==e||e.forEach((t,e)=>{let i=(e<=this.paginationIndex*this.paginationSize||e>this.paginationIndex*this.paginationSize+this.paginationSize)&&!t.classList.contains("mdc-data-table__header-row");t.style.display=i?"none":"table-row"})})),e`${this.rowsTemplate}`},()=>this.rows?this.rows.filter((t,e)=>{var i;return!(null==(i=this.config.pagination)?void 0:i.enable)||e>=this.paginationIndex*this.paginationSize&&e<this.paginationIndex*this.paginationSize+this.paginationSize}).map(t=>{let i=Array.isArray(t)?t:t.content;return e`
|
|
193
|
+
<tr class="mdc-data-table__row" @click="${e=>this.onRowClick(e,t)}">
|
|
194
|
+
${null==i?void 0:i.map((i,a)=>{let o={"mdc-data-table__cell":!0,"mdc-data-table__cell--numeric":"number"==typeof i,"mdc-data-table__cell--clickable":!Array.isArray(t)&&t.clickable,"hide-mobile":this.columns&&"string"!=typeof this.columns[a]&&this.columns[a].hideMobile},n={maxWidth:this.getMaxColumnWidth(a,this.columns,c)};return e`
|
|
195
|
+
${d(0===a&&this.config.multiSelect,()=>{var i;return e`
|
|
196
|
+
<td class="mdc-data-table__cell mdc-data-table__cell--checkbox" >
|
|
197
|
+
<div class="">
|
|
198
|
+
<or-mwc-input type="${b.CHECKBOX}" id="checkbox-${a}"
|
|
199
|
+
@or-mwc-input-changed="${e=>this.onCheckChanged(e,e.detail.value,"single",t)}"
|
|
200
|
+
.value="${null==(i=this.selectedRows)?void 0:i.includes(t)}"
|
|
201
|
+
></or-mwc-input>
|
|
202
|
+
</div>
|
|
203
|
+
</td>
|
|
204
|
+
`})}
|
|
205
|
+
<td class="${r(o)}" title="${"object"==typeof i?"":i}" style="${w(n)}">
|
|
206
|
+
${s(this.getTableContent(i))}
|
|
207
|
+
</td>
|
|
208
|
+
`})}
|
|
209
|
+
</tr>
|
|
210
|
+
`}):void 0)}
|
|
211
|
+
</tbody>
|
|
212
|
+
</table>
|
|
213
|
+
</div>
|
|
214
|
+
<!-- Pagination HTML, shown on the bottom right. Same as Material Design spec -->
|
|
215
|
+
${d(l,()=>{var t;let i=(null==(t=this.config.pagination)?void 0:t.options)||[10,25,100];return e`
|
|
216
|
+
<div class="mdc-data-table__pagination">
|
|
217
|
+
<div class="mdc-data-table__pagination-trailing">
|
|
218
|
+
<div class="mdc-data-table__pagination-rows-per-page">
|
|
219
|
+
<div class="mdc-data-table__pagination-rows-per-page-label">
|
|
220
|
+
${p.t("rowsPerPage")}
|
|
221
|
+
</div>
|
|
222
|
+
<or-mwc-input class="mdc-data-table__pagination-rows-per-page-select"
|
|
223
|
+
.type="${b.SELECT}" compact comfortable outlined .readonly="${1===i.length}"
|
|
224
|
+
.value="${this.paginationSize}" .options="${i}"
|
|
225
|
+
@or-mwc-input-changed="${t=>{this.paginationSize=t.detail.value,this.paginationIndex=0}}"
|
|
226
|
+
></or-mwc-input>
|
|
227
|
+
</div>
|
|
228
|
+
${s(this.getPaginationControls(),e`${p.t("loading")}`)}
|
|
229
|
+
</div>
|
|
230
|
+
</div>
|
|
231
|
+
`})}
|
|
232
|
+
</div>
|
|
233
|
+
`}getTableContent(t){return"string"==typeof t||"number"==typeof t?t:t instanceof Date?g(t).format("lll"):t}onRowClick(t,e){if(this.config.multiSelect){let e=t.target;if("OR-MWC-INPUT"===e.nodeName&&e.id.includes("checkbox"))return}this.dispatchEvent(new OrMwcTableRowClickEvent(this.rows.indexOf(e)))}onCheckChanged(t,e,i,a){var o,n,l;if(t.stopPropagation(),"all"===i)e?this.selectedRows=this.rows:this.selectedRows=[],null==(o=this.rows)||o.forEach((t,i)=>this.dispatchEvent(new OrMwcTableRowSelectEvent(i,e)));else{e?void 0===this.selectedRows?this.selectedRows=[a]:-1===this.selectedRows.indexOf(a)&&(this.selectedRows.push(a),this.requestUpdate("selectedRows")):this.selectedRows=null==(n=this.selectedRows)?void 0:n.filter(t=>t!==a);let t=null==(l=this.rows)?void 0:l.indexOf(a);void 0!==t&&t>-1&&this.dispatchEvent(new OrMwcTableRowSelectEvent(t,e))}}onColumnSort(t,e,i){return __awaiter(this,void 0,void 0,function*(){if(this.config.multiSelect){let e=t.target;if("OR-MWC-INPUT"===e.nodeName&&e.id.includes("checkbox"))return}let a="ASC"==i?"DESC":"ASC";this.sortDirection=a,this.sortIndex=e,this.rows&&this.rows.length>0&&(Array.isArray(this.rows[0])?this.rows.sort((t,i)=>this.sortPrimitiveRows(t,i,e,a)):this.rows.sort((t,i)=>this.sortObjectRows(t,i,e,a)))})}sortPrimitiveRows(t,e,i,a){let o=t[i],n=e[i];if(!o&&!n)return 0;if(!o||0===o.toString().length)return"DESC"===a?1:-1;if(!n||0===n.toString().length)return"DESC"===a?-1:1;if("string"==typeof o&&"string"==typeof n)if("DESC"===a)return n.localeCompare(o,"en",{numeric:!0});else return o.localeCompare(n,"en",{numeric:!0});if("number"!=typeof o||"number"!=typeof n)return console.warn("sortPrimitiveRows() was called using neither a number nor a string."),1;else if("DESC"===a)return o>n?-1:1;else return o>n?1:-1}sortObjectRows(t,e,i,a){var o,n;let l=null==(o=t.content)?void 0:o[i],r=null==(n=e.content)?void 0:n[i],s=t=>"string"==typeof t||"number"==typeof t,c=t=>void 0!==t.strings&&void 0!==t.values;return!l||!r||s(l)||s(r)?this.sortPrimitiveRows([l],[r],0,a):l instanceof Date&&r instanceof Date?this.sortDateRows(l,r,0,a):c(l)||c(r)?this.sortTemplateRows(l,r,0,a):1}sortDateRows(t,e,i,a){return"DESC"===a?t>e?-1:1:t>e?1:-1}sortTemplateRows(t,e,i,a){var o,n;let l=null==(o=t.values.filter(t=>"string"==typeof t||"number"==typeof t).map(t=>t.toString()))?void 0:o[0],r=null==(n=e.values.filter(t=>"string"==typeof t||"number"==typeof t).map(t=>t.toString()))?void 0:n[0];return void 0!==l&&void 0!==r?this.sortPrimitiveRows([l],[r],0,a):1}getSortHeader(t,i,a){return __awaiter(this,arguments,void 0,function*(t,i,a,o=!1){return -1===this.sortIndex&&(this.sortIndex=t),e`
|
|
234
|
+
<div class="mdc-data-table__header-cell-wrapper ${o?"sortable-reverse":"sortable"}">
|
|
235
|
+
<div class="mdc-data-table__header-cell-label">
|
|
236
|
+
${i}
|
|
237
|
+
</div>
|
|
238
|
+
<button class="mdc-icon-button material-icons ${o?"sort-button-reverse":"sort-button"} ${this.sortIndex===t?"":"hidden"}"
|
|
239
|
+
aria-label="Sort by ${i}" aria-describedby="${i}-status-label" aria-hidden="${this.sortIndex!==t}">
|
|
240
|
+
<or-icon icon="${"ASC"==a?"arrow-up":"arrow-down"}"></or-icon>
|
|
241
|
+
</button>
|
|
242
|
+
<div class="mdc-data-table__sort-status-label" aria-hidden="true" id="${i}-status-label">
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
`})}getPaginationControls(){return __awaiter(this,void 0,void 0,function*(){let t=yield this.getRowCount(),i=this.paginationIndex*this.paginationSize+1,a=this.paginationIndex*this.paginationSize+this.paginationSize;return a>t&&(a=t),e`
|
|
246
|
+
<div class="mdc-data-table__pagination-navigation">
|
|
247
|
+
<div class="mdc-data-table__pagination-total">
|
|
248
|
+
<span>${i}-${a} of ${t}</span>
|
|
249
|
+
</div>
|
|
250
|
+
<or-mwc-input class="mdc-data-table__pagination-button" .type="${b.BUTTON}"
|
|
251
|
+
data-first-page="true" icon="page-first" .disabled="${0==this.paginationIndex}"
|
|
252
|
+
@or-mwc-input-changed="${()=>this.paginationIndex=0}"></or-mwc-input>
|
|
253
|
+
<or-mwc-input class="mdc-data-table__pagination-button" .type="${b.BUTTON}"
|
|
254
|
+
data-prev-page="true" icon="chevron-left" .disabled="${0==this.paginationIndex}"
|
|
255
|
+
@or-mwc-input-changed="${()=>this.paginationIndex--}"></or-mwc-input>
|
|
256
|
+
<or-mwc-input class="mdc-data-table__pagination-button" .type="${b.BUTTON}"
|
|
257
|
+
data-next-page="true" icon="chevron-right"
|
|
258
|
+
.disabled="${this.paginationIndex*this.paginationSize+this.paginationSize>=t}"
|
|
259
|
+
@or-mwc-input-changed="${()=>this.paginationIndex++}"></or-mwc-input>
|
|
260
|
+
<or-mwc-input class="mdc-data-table__pagination-button" .type="${b.BUTTON}"
|
|
261
|
+
data-last-page="true" icon="page-last"
|
|
262
|
+
.disabled="${this.paginationIndex*this.paginationSize+this.paginationSize>=t}"
|
|
263
|
+
@or-mwc-input-changed="${()=>__awaiter(this,void 0,void 0,function*(){let e=t/this.paginationSize;e=e.toString().includes(".")?Math.floor(e):e-1,this.paginationIndex=e})}"
|
|
264
|
+
></or-mwc-input>
|
|
265
|
+
</div>
|
|
266
|
+
`})}getRowCount(){return __awaiter(this,arguments,void 0,function*(t=!0,e){var i,a;return(null==(i=this.rows)?void 0:i.length)?null==(a=this.rows)?void 0:a.length:(e||(e=yield this.getTableElem(t)),(null==e?void 0:e.querySelectorAll("tr")).length)})}getTableElem(){return __awaiter(this,arguments,void 0,function*(t=!1){return t&&(yield this.updateComplete),this._dataTable?this._dataTable.root:this.shadowRoot.querySelector(".mdc-data-table")})}getColumnWidth(t,e,i){}getMaxColumnWidth(t,e,i){return i?`${i/((null==e?void 0:e.length)||2)}px`:void 0}};__decorate([n({type:Array})],OrMwcTable.prototype,"columns",void 0),__decorate([n({type:Object})],OrMwcTable.prototype,"columnsTemplate",void 0),__decorate([n({type:Array})],OrMwcTable.prototype,"rows",void 0),__decorate([n({type:Object})],OrMwcTable.prototype,"rowsTemplate",void 0),__decorate([n({type:Array})],OrMwcTable.prototype,"config",void 0),__decorate([n({type:Number})],OrMwcTable.prototype,"paginationIndex",void 0),__decorate([n({type:Number})],OrMwcTable.prototype,"paginationSize",void 0),__decorate([l()],OrMwcTable.prototype,"_dataTable",void 0),__decorate([n({type:String})],OrMwcTable.prototype,"sortDirection",void 0),__decorate([n({type:Number})],OrMwcTable.prototype,"sortIndex",void 0),__decorate([n({type:Array})],OrMwcTable.prototype,"selectedRows",void 0),OrMwcTable=__decorate([o("or-mwc-table")],OrMwcTable);export{OrMwcTable};
|