@openremote/or-mwc-components 1.8.0-snapshot.20250725074716 → 1.8.0-snapshot.20250725120001
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 +329 -76
- package/lib/or-mwc-drawer.js +114 -10
- package/lib/or-mwc-input.js +1760 -439
- package/lib/or-mwc-list.js +283 -71
- package/lib/or-mwc-menu.js +237 -45
- package/lib/or-mwc-snackbar.js +141 -17
- package/lib/or-mwc-table.js +685 -245
- package/lib/or-mwc-tabs.js +173 -53
- package/lib/style.js +125 -121
- 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,266 +1,706 @@
|
|
|
1
|
-
var __decorate
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
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
|
+
});
|
|
5
184
|
}
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
185
|
+
}
|
|
186
|
+
OrMwcTableRowClickEvent.NAME = "or-mwc-table-row-click";
|
|
187
|
+
export class OrMwcTableRowSelectEvent extends CustomEvent {
|
|
188
|
+
constructor(index, state) {
|
|
189
|
+
super(OrMwcTableRowSelectEvent.NAME, {
|
|
190
|
+
detail: {
|
|
191
|
+
index: index,
|
|
192
|
+
state: state
|
|
193
|
+
},
|
|
194
|
+
bubbles: true,
|
|
195
|
+
composed: true
|
|
196
|
+
});
|
|
9
197
|
}
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
198
|
+
}
|
|
199
|
+
OrMwcTableRowSelectEvent.NAME = "or-mwc-table-row-select";
|
|
200
|
+
let OrMwcTable = class OrMwcTable extends LitElement {
|
|
201
|
+
constructor() {
|
|
202
|
+
super(...arguments);
|
|
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 = [];
|
|
15
216
|
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
217
|
+
static get styles() {
|
|
218
|
+
return [
|
|
219
|
+
css `${unsafeCSS(dataTableStyle)}`,
|
|
220
|
+
style
|
|
221
|
+
];
|
|
21
222
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
223
|
+
/* ------------------- */
|
|
224
|
+
firstUpdated(changedProperties) {
|
|
225
|
+
const elem = this.shadowRoot.querySelector('.mdc-data-table');
|
|
226
|
+
this._dataTable = new MDCDataTable(elem);
|
|
26
227
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
thead th {
|
|
42
|
-
box-shadow: 0 1px 0 0 rgb(229, 229, 229);
|
|
228
|
+
updated(changedProperties) {
|
|
229
|
+
var _a;
|
|
230
|
+
if ((changedProperties.has('paginationIndex') || changedProperties.has('paginationSize')) && ((_a = this.config.pagination) === null || _a === void 0 ? void 0 : _a.enable)) {
|
|
231
|
+
const elem = (this._dataTable ? this._dataTable.root.children[0] : this.shadowRoot.querySelector('.mdc-data-table__table-container'));
|
|
232
|
+
// Using an observer to prevent forced reflow / DOM measurements; prevents blocking the thread
|
|
233
|
+
const observer = new IntersectionObserver((entries, observer) => {
|
|
234
|
+
entries[0].target.scrollTop = 0;
|
|
235
|
+
observer.unobserve(entries[0].target);
|
|
236
|
+
});
|
|
237
|
+
observer.observe(elem);
|
|
238
|
+
// Reset selected rows properties
|
|
239
|
+
this.selectedRows = [];
|
|
240
|
+
}
|
|
43
241
|
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
242
|
+
render() {
|
|
243
|
+
var _a, _b, _c, _d;
|
|
244
|
+
const tableClasses = {
|
|
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
|
+
`;
|
|
47
405
|
}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
406
|
+
/**
|
|
407
|
+
* Function that is responsible for formatting the table content.
|
|
408
|
+
* For example; dates should be formatted differently than strings, numbers and HTML templates.
|
|
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
|
+
}
|
|
51
420
|
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
421
|
+
/**
|
|
422
|
+
* "When user clicks on a row", it dispatches an {@link OrMwcTableRowClickEvent} to the parent component / listeners.
|
|
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)));
|
|
57
432
|
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
433
|
+
/**
|
|
434
|
+
* "When user clicks on a checkbox" when multiselect is enabled,
|
|
435
|
+
* it dispatches an {@link OrMwcTableRowSelectEvent} to the parent component / listeners.
|
|
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
|
+
}
|
|
61
469
|
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
470
|
+
/**
|
|
471
|
+
* Event handling function for when users try to sort the rows within a column.
|
|
472
|
+
*/
|
|
473
|
+
onColumnSort(ev, index, sortDirection) {
|
|
474
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
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
|
+
});
|
|
67
499
|
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
500
|
+
/**
|
|
501
|
+
* Sorts either numbers incrementally or strings alphabetically depending on the sorting direction.
|
|
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
|
+
}
|
|
71
537
|
}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
538
|
+
/**
|
|
539
|
+
* Function that handles several sorts of table content; from dates to HTML templates.
|
|
540
|
+
* */
|
|
541
|
+
sortObjectRows(rowA, rowB, cIndex, sortDirection) {
|
|
542
|
+
var _a, _b;
|
|
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;
|
|
75
557
|
}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
558
|
+
sortDateRows(dateA, dateB, cIndex, sortDirection) {
|
|
559
|
+
if (sortDirection === 'DESC') {
|
|
560
|
+
return dateA > dateB ? -1 : 1;
|
|
561
|
+
}
|
|
562
|
+
else {
|
|
563
|
+
return dateA > dateB ? 1 : -1;
|
|
564
|
+
}
|
|
79
565
|
}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
566
|
+
/**
|
|
567
|
+
* Uses the {@link TemplateResult} content to identify and analyze the content.
|
|
568
|
+
* See the documentation here; https://lit.dev/docs/v2/api/templates/#TemplateResult
|
|
569
|
+
* Sometimes it cannot analyze the HTML; if so, it will retain the same order.
|
|
570
|
+
*/
|
|
571
|
+
sortTemplateRows(cellA, cellB, cIndex, sortDirection) {
|
|
572
|
+
var _a, _b;
|
|
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
|
+
}
|
|
87
581
|
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
582
|
+
// HTML for the sort header, that adds click functionality and a up/down arrow.
|
|
583
|
+
getSortHeader(index_1, title_1, sortDirection_1) {
|
|
584
|
+
return __awaiter(this, arguments, void 0, function* (index, title, sortDirection, arrowOnLeft = false) {
|
|
585
|
+
this.sortIndex === -1 ? this.sortIndex = index : '';
|
|
586
|
+
return html `
|
|
587
|
+
<div class="mdc-data-table__header-cell-wrapper ${arrowOnLeft ? 'sortable-reverse' : 'sortable'}">
|
|
588
|
+
<div class="mdc-data-table__header-cell-label">
|
|
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
|
+
});
|
|
94
600
|
}
|
|
95
|
-
|
|
96
|
-
.
|
|
97
|
-
|
|
98
|
-
|
|
601
|
+
// HTML for the controls on the bottom of the table.
|
|
602
|
+
// Includes basic pagination for browsing pages, with calculations of where to go.
|
|
603
|
+
getPaginationControls() {
|
|
604
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
605
|
+
const max = yield this.getRowCount();
|
|
606
|
+
const start = (this.paginationIndex * this.paginationSize) + 1;
|
|
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
|
+
});
|
|
99
638
|
}
|
|
100
|
-
|
|
101
|
-
.
|
|
102
|
-
|
|
103
|
-
|
|
639
|
+
// Getting the amount of rows/entries in the table.
|
|
640
|
+
// Makes sure that both the rows, and rowsTemplate properties work.
|
|
641
|
+
getRowCount() {
|
|
642
|
+
return __awaiter(this, arguments, void 0, function* (wait = true, tableElem) {
|
|
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
|
+
});
|
|
104
653
|
}
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
654
|
+
getTableElem() {
|
|
655
|
+
return __awaiter(this, arguments, void 0, function* (wait = false) {
|
|
656
|
+
if (wait) {
|
|
657
|
+
yield this.updateComplete;
|
|
658
|
+
}
|
|
659
|
+
return this._dataTable ? this._dataTable.root : this.shadowRoot.querySelector('.mdc-data-table');
|
|
660
|
+
});
|
|
108
661
|
}
|
|
109
|
-
|
|
110
|
-
|
|
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);
|
|
662
|
+
getColumnWidth(index, columns, tableWidthPx) {
|
|
663
|
+
return undefined;
|
|
139
664
|
}
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
.hide-mobile {
|
|
143
|
-
display: none;
|
|
144
|
-
}
|
|
665
|
+
getMaxColumnWidth(index, columns, tableWidthPx) {
|
|
666
|
+
return tableWidthPx ? (`${tableWidthPx / ((columns === null || columns === void 0 ? void 0 : columns.length) || 2)}px`) : undefined;
|
|
145
667
|
}
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
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};
|
|
668
|
+
};
|
|
669
|
+
__decorate([
|
|
670
|
+
property({ type: Array })
|
|
671
|
+
], OrMwcTable.prototype, "columns", void 0);
|
|
672
|
+
__decorate([
|
|
673
|
+
property({ type: Object }) // to manually control HTML
|
|
674
|
+
], OrMwcTable.prototype, "columnsTemplate", void 0);
|
|
675
|
+
__decorate([
|
|
676
|
+
property({ type: Array })
|
|
677
|
+
], OrMwcTable.prototype, "rows", void 0);
|
|
678
|
+
__decorate([
|
|
679
|
+
property({ type: Object }) // to manually control HTML (requires td and tr elements)
|
|
680
|
+
], OrMwcTable.prototype, "rowsTemplate", void 0);
|
|
681
|
+
__decorate([
|
|
682
|
+
property({ type: Array })
|
|
683
|
+
], OrMwcTable.prototype, "config", void 0);
|
|
684
|
+
__decorate([
|
|
685
|
+
property({ type: Number })
|
|
686
|
+
], OrMwcTable.prototype, "paginationIndex", void 0);
|
|
687
|
+
__decorate([
|
|
688
|
+
property({ type: Number })
|
|
689
|
+
], OrMwcTable.prototype, "paginationSize", void 0);
|
|
690
|
+
__decorate([
|
|
691
|
+
state()
|
|
692
|
+
], OrMwcTable.prototype, "_dataTable", void 0);
|
|
693
|
+
__decorate([
|
|
694
|
+
property({ type: String })
|
|
695
|
+
], OrMwcTable.prototype, "sortDirection", void 0);
|
|
696
|
+
__decorate([
|
|
697
|
+
property({ type: Number })
|
|
698
|
+
], OrMwcTable.prototype, "sortIndex", void 0);
|
|
699
|
+
__decorate([
|
|
700
|
+
property({ type: Array })
|
|
701
|
+
], OrMwcTable.prototype, "selectedRows", void 0);
|
|
702
|
+
OrMwcTable = __decorate([
|
|
703
|
+
customElement("or-mwc-table")
|
|
704
|
+
], OrMwcTable);
|
|
705
|
+
export { OrMwcTable };
|
|
706
|
+
//# sourceMappingURL=or-mwc-table.js.map
|