@spectrum-web-components/table 0.0.2-table.2695 → 0.1.0
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 +5 -5
- package/custom-elements.json +20 -0
- package/elements.dev.js +9 -0
- package/elements.dev.js.map +7 -0
- package/elements.js +2 -19
- package/elements.js.map +7 -1
- package/package.json +80 -18
- package/sp-table-body.dev.js +4 -0
- package/sp-table-body.dev.js.map +7 -0
- package/sp-table-body.js +2 -14
- package/sp-table-body.js.map +7 -1
- package/sp-table-cell.dev.js +4 -0
- package/sp-table-cell.dev.js.map +7 -0
- package/sp-table-cell.js +2 -14
- package/sp-table-cell.js.map +7 -1
- package/sp-table-checkbox-cell.dev.js +4 -0
- package/sp-table-checkbox-cell.dev.js.map +7 -0
- package/sp-table-checkbox-cell.js +2 -14
- package/sp-table-checkbox-cell.js.map +7 -1
- package/sp-table-head-cell.dev.js +4 -0
- package/sp-table-head-cell.dev.js.map +7 -0
- package/sp-table-head-cell.js +2 -14
- package/sp-table-head-cell.js.map +7 -1
- package/sp-table-head.dev.js +4 -0
- package/sp-table-head.dev.js.map +7 -0
- package/sp-table-head.js +2 -14
- package/sp-table-head.js.map +7 -1
- package/sp-table-row.dev.js +4 -0
- package/sp-table-row.dev.js.map +7 -0
- package/sp-table-row.js +2 -14
- package/sp-table-row.js.map +7 -1
- package/sp-table.dev.js +4 -0
- package/sp-table.dev.js.map +7 -0
- package/sp-table.js +2 -14
- package/sp-table.js.map +7 -1
- package/src/Table.d.ts +1 -0
- package/src/Table.dev.js +392 -0
- package/src/Table.dev.js.map +7 -0
- package/src/Table.js +13 -383
- package/src/Table.js.map +7 -1
- package/src/TableBody.d.ts +2 -0
- package/src/TableBody.dev.js +55 -0
- package/src/TableBody.dev.js.map +7 -0
- package/src/TableBody.js +3 -35
- package/src/TableBody.js.map +7 -1
- package/src/TableCell.dev.js +36 -0
- package/src/TableCell.dev.js.map +7 -0
- package/src/TableCell.js +3 -35
- package/src/TableCell.js.map +7 -1
- package/src/TableCheckboxCell.dev.js +71 -0
- package/src/TableCheckboxCell.dev.js.map +7 -0
- package/src/TableCheckboxCell.js +4 -62
- package/src/TableCheckboxCell.js.map +7 -1
- package/src/TableHead.dev.js +55 -0
- package/src/TableHead.dev.js.map +7 -0
- package/src/TableHead.js +3 -52
- package/src/TableHead.js.map +7 -1
- package/src/TableHeadCell.dev.js +93 -0
- package/src/TableHeadCell.dev.js.map +7 -0
- package/src/TableHeadCell.js +5 -92
- package/src/TableHeadCell.js.map +7 -1
- package/src/TableRow.dev.js +104 -0
- package/src/TableRow.dev.js.map +7 -0
- package/src/TableRow.js +3 -96
- package/src/TableRow.js.map +7 -1
- package/src/index.d.ts +6 -0
- package/src/index.dev.js +9 -0
- package/src/index.dev.js.map +7 -0
- package/src/index.js +2 -13
- package/src/index.js.map +7 -1
- package/src/spectrum-table-body.css.dev.js +17 -0
- package/src/spectrum-table-body.css.dev.js.map +7 -0
- package/src/spectrum-table-body.css.js +3 -16
- package/src/spectrum-table-body.css.js.map +7 -1
- package/src/spectrum-table-cell.css.dev.js +27 -0
- package/src/spectrum-table-cell.css.dev.js.map +7 -0
- package/src/spectrum-table-cell.css.js +3 -16
- package/src/spectrum-table-cell.css.js.map +7 -1
- package/src/spectrum-table-checkbox-cell.css.dev.js +13 -0
- package/src/spectrum-table-checkbox-cell.css.dev.js.map +7 -0
- package/src/spectrum-table-checkbox-cell.css.js +3 -16
- package/src/spectrum-table-checkbox-cell.css.js.map +7 -1
- package/src/spectrum-table-head-cell.css.dev.js +61 -0
- package/src/spectrum-table-head-cell.css.dev.js.map +7 -0
- package/src/spectrum-table-head-cell.css.js +3 -16
- package/src/spectrum-table-head-cell.css.js.map +7 -1
- package/src/spectrum-table-head.css.dev.js +7 -0
- package/src/spectrum-table-head.css.dev.js.map +7 -0
- package/src/spectrum-table-head.css.js +3 -16
- package/src/spectrum-table-head.css.js.map +7 -1
- package/src/spectrum-table-row.css.dev.js +33 -0
- package/src/spectrum-table-row.css.dev.js.map +7 -0
- package/src/spectrum-table-row.css.js +3 -16
- package/src/spectrum-table-row.css.js.map +7 -1
- package/src/spectrum-table.css.dev.js +513 -0
- package/src/spectrum-table.css.dev.js.map +7 -0
- package/src/spectrum-table.css.js +3 -16
- package/src/spectrum-table.css.js.map +7 -1
- package/src/table-body.css.dev.js +17 -0
- package/src/table-body.css.dev.js.map +7 -0
- package/src/table-body.css.js +4 -17
- package/src/table-body.css.js.map +7 -1
- package/src/table-cell.css.dev.js +27 -0
- package/src/table-cell.css.dev.js.map +7 -0
- package/src/table-cell.css.js +3 -16
- package/src/table-cell.css.js.map +7 -1
- package/src/table-checkbox-cell.css.dev.js +13 -0
- package/src/table-checkbox-cell.css.dev.js.map +7 -0
- package/src/table-checkbox-cell.css.js +3 -16
- package/src/table-checkbox-cell.css.js.map +7 -1
- package/src/table-head-cell.css.dev.js +61 -0
- package/src/table-head-cell.css.dev.js.map +7 -0
- package/src/table-head-cell.css.js +3 -16
- package/src/table-head-cell.css.js.map +7 -1
- package/src/table-head.css.dev.js +7 -0
- package/src/table-head.css.dev.js.map +7 -0
- package/src/table-head.css.js +3 -16
- package/src/table-head.css.js.map +7 -1
- package/src/table-row.css.dev.js +33 -0
- package/src/table-row.css.dev.js.map +7 -0
- package/src/table-row.css.js +3 -16
- package/src/table-row.css.js.map +7 -1
- package/src/table.css.dev.js +513 -0
- package/src/table.css.dev.js.map +7 -0
- package/src/table.css.js +4 -17
- package/src/table.css.js.map +7 -1
- package/stories/index.js +17 -27
- package/stories/index.js.map +7 -1
- package/stories/table-elements.stories.js +58 -102
- package/stories/table-elements.stories.js.map +7 -1
- package/stories/table-virtualized.stories.js +142 -128
- package/stories/table-virtualized.stories.js.map +7 -1
- package/test/benchmark/basic-test.js +7 -17
- package/test/benchmark/basic-test.js.map +7 -1
- package/test/table-elements.test-vrt.js +5 -15
- package/test/table-elements.test-vrt.js.map +7 -1
- package/test/table-selects.test.js +193 -170
- package/test/table-selects.test.js.map +7 -1
- package/test/table-virtualized.test-vrt.js +5 -15
- package/test/table-virtualized.test-vrt.js.map +7 -1
- package/test/table.test.js +117 -101
- package/test/table.test.js.map +7 -1
- package/test/virtualized-table-selects.test.js +386 -300
- package/test/virtualized-table-selects.test.js.map +7 -1
- package/test/virtualized-table.test.js +213 -182
- package/test/virtualized-table.test.js.map +7 -1
package/src/Table.js
CHANGED
|
@@ -1,389 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
Copyright 2022 Adobe. All rights reserved.
|
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
|
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import { __decorate } from "tslib";
|
|
13
|
-
import { html, render, SizedMixin, SpectrumElement, } from '@spectrum-web-components/base';
|
|
14
|
-
import '../sp-table-row.js';
|
|
15
|
-
import '../sp-table-checkbox-cell.js';
|
|
16
|
-
import '../sp-table-body.js';
|
|
17
|
-
import { property } from '@spectrum-web-components/base/src/decorators.js';
|
|
18
|
-
import styles from './table.css.js';
|
|
19
|
-
import { virtualize, } from '@lit-labs/virtualizer/virtualize.js';
|
|
20
|
-
export var RowType;
|
|
21
|
-
(function (RowType) {
|
|
22
|
-
RowType[RowType["ITEM"] = 0] = "ITEM";
|
|
23
|
-
RowType[RowType["INFORMATION"] = 1] = "INFORMATION";
|
|
24
|
-
})(RowType || (RowType = {}));
|
|
25
|
-
export class RangeChangedEvent extends Event {
|
|
26
|
-
constructor(range) {
|
|
27
|
-
super(RangeChangedEvent.eventName, { bubbles: true });
|
|
28
|
-
this.first = range.first;
|
|
29
|
-
this.last = range.last;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
RangeChangedEvent.eventName = 'rangeChanged';
|
|
33
|
-
/**
|
|
34
|
-
* @element sp-table
|
|
35
|
-
*
|
|
36
|
-
* @fires rangeChanged - Announces a change in the range of visible cells on the table body
|
|
37
|
-
* @event change - Announces a change in the `selected` property of a table row
|
|
38
|
-
*/
|
|
39
|
-
export class Table extends SizedMixin(SpectrumElement, {
|
|
40
|
-
validSizes: ['s', 'm'],
|
|
41
|
-
defaultSize: 'm',
|
|
42
|
-
}) {
|
|
43
|
-
constructor() {
|
|
44
|
-
super(...arguments);
|
|
45
|
-
this._renderItem = () => html ``;
|
|
46
|
-
this.role = 'grid';
|
|
47
|
-
/**
|
|
48
|
-
* An array of <sp-row> values that have been selected.
|
|
49
|
-
*/
|
|
50
|
-
this.selected = [];
|
|
51
|
-
this.selectedSet = new Set();
|
|
52
|
-
/**
|
|
53
|
-
* The content of the rows rendered by the virtualized table. The key is the value of the sp-table-row, and the value is the sp-table-row's content (not the row itself).
|
|
54
|
-
*/
|
|
55
|
-
this.items = [];
|
|
56
|
-
/**
|
|
57
|
-
* The value of an item. By default, it is set to the index of the sp-table-row.
|
|
58
|
-
*/
|
|
59
|
-
this.itemValue = (_item, index) => {
|
|
60
|
-
return `${index}`;
|
|
61
|
-
};
|
|
62
|
-
/**
|
|
63
|
-
* Whether or not the virtualized table has a scroll bar. If this is set to true, make sure to specify a height in the sp-table's inline styles.
|
|
64
|
-
*/
|
|
65
|
-
this.scroller = false;
|
|
66
|
-
}
|
|
67
|
-
static get styles() {
|
|
68
|
-
return [styles];
|
|
69
|
-
}
|
|
70
|
-
get renderItem() {
|
|
71
|
-
return this._renderItem;
|
|
72
|
-
}
|
|
73
|
-
set renderItem(fn) {
|
|
74
|
-
this._renderItem = (item, index) => {
|
|
75
|
-
const value = this.itemValue(item, index);
|
|
76
|
-
const selected = this.selected.includes(value);
|
|
77
|
-
const hasCheckbox = this.selects && (item === null || item === void 0 ? void 0 : item._$rowType$) !== 1;
|
|
78
|
-
return html `
|
|
1
|
+
"use strict";var u=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=(h,c,e,l)=>{for(var t=l>1?void 0:l?p(c,e):c,s=h.length-1,i;s>=0;s--)(i=h[s])&&(t=(l?i(c,e,t):i(t))||t);return l&&t&&u(c,e,t),t};import{html as r,render as m,SizedMixin as f,SpectrumElement as C}from"@spectrum-web-components/base";import"../sp-table-row.js";import"../sp-table-checkbox-cell.js";import"../sp-table-body.js";import{property as d}from"@spectrum-web-components/base/src/decorators.js";import k from"./table.css.js";import{virtualize as g}from"@lit-labs/virtualizer/virtualize.js";export var RowType=(e=>(e[e.ITEM=0]="ITEM",e[e.INFORMATION=1]="INFORMATION",e))(RowType||{});const n=class extends Event{constructor(e){super(n.eventName,{bubbles:!0});this.first=e.first,this.last=e.last}};export let RangeChangedEvent=n;RangeChangedEvent.eventName="rangeChanged";export class Table extends f(C,{validSizes:["s","m"],defaultSize:"m"}){constructor(){super(...arguments);this._renderItem=()=>r``;this.role="grid";this.selected=[];this.selectedSet=new Set;this.items=[];this.itemValue=(e,l)=>`${l}`;this.scroller=!1}static get styles(){return[k]}get renderItem(){return this._renderItem}set renderItem(e){this._renderItem=(l,t)=>{const s=this.itemValue(l,t),i=this.selected.includes(s),b=this.selects&&(l==null?void 0:l._$rowType$)!==1;return r`
|
|
79
2
|
<sp-table-row
|
|
80
|
-
value=${
|
|
81
|
-
aria-rowindex=${
|
|
82
|
-
?selected=${
|
|
3
|
+
value=${s}
|
|
4
|
+
aria-rowindex=${t+1}
|
|
5
|
+
?selected=${i}
|
|
83
6
|
>
|
|
84
|
-
${
|
|
85
|
-
? html `
|
|
7
|
+
${b?r`
|
|
86
8
|
<sp-table-checkbox-cell
|
|
87
|
-
?checked=${
|
|
9
|
+
?checked=${i}
|
|
88
10
|
></sp-table-checkbox-cell>
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
${fn(item, index)}
|
|
11
|
+
`:r``}
|
|
12
|
+
${e(l,t)}
|
|
92
13
|
</sp-table-row>
|
|
93
|
-
|
|
94
|
-
};
|
|
95
|
-
}
|
|
96
|
-
get tableHead() {
|
|
97
|
-
return this.querySelector('sp-table-head');
|
|
98
|
-
}
|
|
99
|
-
get tableRows() {
|
|
100
|
-
if (this.isVirtualized) {
|
|
101
|
-
return [];
|
|
102
|
-
}
|
|
103
|
-
return [...this.querySelectorAll('sp-table-row')];
|
|
104
|
-
}
|
|
105
|
-
get isVirtualized() {
|
|
106
|
-
return !!this.items.length;
|
|
107
|
-
}
|
|
108
|
-
focus() {
|
|
109
|
-
const sortableHeadCell = this.querySelector('sp-table-head-cell[sortable]');
|
|
110
|
-
if (sortableHeadCell) {
|
|
111
|
-
sortableHeadCell.focus();
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
selectAllRows() {
|
|
115
|
-
if (this.isVirtualized) {
|
|
116
|
-
this.items.forEach((item, index) => {
|
|
117
|
-
if (item._$rowType$ !== 1) {
|
|
118
|
-
this.selectedSet.add(this.itemValue(item, index));
|
|
119
|
-
}
|
|
120
|
-
});
|
|
121
|
-
this.selected = [...this.selectedSet];
|
|
122
|
-
}
|
|
123
|
-
else {
|
|
124
|
-
this.tableRows.forEach((row) => {
|
|
125
|
-
row.selected = true; // Visually
|
|
126
|
-
this.selectedSet.add(row.value); // Prepares table state
|
|
127
|
-
});
|
|
128
|
-
this.selected = [...this.selectedSet];
|
|
129
|
-
}
|
|
130
|
-
if (!this.tableHeadCheckboxCell)
|
|
131
|
-
return;
|
|
132
|
-
this.tableHeadCheckboxCell.checked = true;
|
|
133
|
-
this.tableHeadCheckboxCell.indeterminate = false;
|
|
134
|
-
}
|
|
135
|
-
deselectAllRows() {
|
|
136
|
-
this.selectedSet.clear();
|
|
137
|
-
this.selected = [];
|
|
138
|
-
if (!this.isVirtualized) {
|
|
139
|
-
const selectedRows = [
|
|
140
|
-
...this.querySelectorAll('[selected]'),
|
|
141
|
-
];
|
|
142
|
-
selectedRows.forEach((row) => {
|
|
143
|
-
row.selected = false;
|
|
144
|
-
});
|
|
145
|
-
}
|
|
146
|
-
if (!this.tableHeadCheckboxCell)
|
|
147
|
-
return;
|
|
148
|
-
this.tableHeadCheckboxCell.checked = false;
|
|
149
|
-
this.tableHeadCheckboxCell.indeterminate = false;
|
|
150
|
-
}
|
|
151
|
-
manageSelects() {
|
|
152
|
-
const checkboxes = this.querySelectorAll('sp-table-checkbox-cell');
|
|
153
|
-
const checkbox = document.createElement('sp-table-checkbox-cell');
|
|
154
|
-
if (!!this.selects) {
|
|
155
|
-
let allSelected = false;
|
|
156
|
-
if (this.isVirtualized) {
|
|
157
|
-
allSelected =
|
|
158
|
-
this.selected.length > 0 &&
|
|
159
|
-
this.selected.length === this.items.length;
|
|
160
|
-
}
|
|
161
|
-
else {
|
|
162
|
-
this.tableRows.forEach((row) => {
|
|
163
|
-
row.selected = this.selectedSet.has(row.value);
|
|
164
|
-
if (!row.querySelector(':scope > sp-table-checkbox-cell')) {
|
|
165
|
-
const clonedCheckbox = checkbox.cloneNode();
|
|
166
|
-
row.insertAdjacentElement('afterbegin', clonedCheckbox);
|
|
167
|
-
checkbox.checked = row.selected;
|
|
168
|
-
}
|
|
169
|
-
});
|
|
170
|
-
allSelected = this.selected.length === this.tableRows.length;
|
|
171
|
-
}
|
|
172
|
-
if (!this.tableHeadCheckboxCell) {
|
|
173
|
-
this.tableHeadCheckboxCell = document.createElement('sp-table-checkbox-cell');
|
|
174
|
-
this.tableHead.insertAdjacentElement('afterbegin', this.tableHeadCheckboxCell);
|
|
175
|
-
}
|
|
176
|
-
this.manageHeadCheckbox(allSelected);
|
|
177
|
-
}
|
|
178
|
-
else {
|
|
179
|
-
checkboxes.forEach((box) => {
|
|
180
|
-
box.remove();
|
|
181
|
-
});
|
|
182
|
-
delete this.tableHeadCheckboxCell;
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
manageSelected() {
|
|
186
|
-
this.selectedSet = new Set(this.selected);
|
|
187
|
-
if (this.isVirtualized)
|
|
188
|
-
return;
|
|
189
|
-
this.tableRows.forEach((row) => {
|
|
190
|
-
row.selected = this.selectedSet.has(row.value);
|
|
191
|
-
});
|
|
192
|
-
if (this.tableHeadCheckboxCell) {
|
|
193
|
-
this.tableHeadCheckboxCell.checked =
|
|
194
|
-
this.selected.length === this.tableRows.length;
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
manageCheckboxes() {
|
|
198
|
-
var _a;
|
|
199
|
-
if (!!this.selects) {
|
|
200
|
-
this.tableHeadCheckboxCell = document.createElement('sp-table-checkbox-cell');
|
|
201
|
-
const allSelected = this.selected.length === this.tableRows.length;
|
|
202
|
-
this.manageHeadCheckbox(allSelected);
|
|
203
|
-
this.tableHead.insertAdjacentElement('afterbegin', this.tableHeadCheckboxCell);
|
|
204
|
-
this.tableRows.forEach((row) => {
|
|
205
|
-
const checkbox = document.createElement('sp-table-checkbox-cell');
|
|
206
|
-
row.insertAdjacentElement('afterbegin', checkbox);
|
|
207
|
-
row.selected = this.selectedSet.has(row.value);
|
|
208
|
-
checkbox.checked = row.selected;
|
|
209
|
-
});
|
|
210
|
-
}
|
|
211
|
-
else {
|
|
212
|
-
(_a = this.tableHead.querySelector('sp-table-checkbox-cell')) === null || _a === void 0 ? void 0 : _a.remove();
|
|
213
|
-
this.tableRows.forEach((row) => {
|
|
214
|
-
var _a;
|
|
215
|
-
(_a = row.checkboxCells[0]) === null || _a === void 0 ? void 0 : _a.remove();
|
|
216
|
-
if (this.selected.length) {
|
|
217
|
-
row.selected = this.selectedSet.has(row.value);
|
|
218
|
-
}
|
|
219
|
-
});
|
|
220
|
-
}
|
|
221
|
-
}
|
|
222
|
-
manageHeadCheckbox(allSelected) {
|
|
223
|
-
if (!this.tableHeadCheckboxCell)
|
|
224
|
-
return;
|
|
225
|
-
this.tableHeadCheckboxCell.selectsSingle = this.selects === 'single';
|
|
226
|
-
this.tableHeadCheckboxCell.checked = allSelected;
|
|
227
|
-
this.tableHeadCheckboxCell.indeterminate =
|
|
228
|
-
this.selected.length > 0 && !allSelected;
|
|
229
|
-
}
|
|
230
|
-
handleChange(event) {
|
|
231
|
-
event.stopPropagation();
|
|
232
|
-
const previousSelectedSet = new Set(this.selectedSet);
|
|
233
|
-
const previousSelected = [...this.selected];
|
|
234
|
-
const { target } = event;
|
|
235
|
-
const { parentElement: rowItem } = target;
|
|
236
|
-
if (!rowItem.value) {
|
|
237
|
-
const { checkbox } = target;
|
|
238
|
-
if (checkbox.checked || checkbox.indeterminate) {
|
|
239
|
-
this.selectAllRows();
|
|
240
|
-
}
|
|
241
|
-
else {
|
|
242
|
-
this.deselectAllRows();
|
|
243
|
-
}
|
|
244
|
-
}
|
|
245
|
-
else {
|
|
246
|
-
switch (this.selects) {
|
|
247
|
-
case 'single': {
|
|
248
|
-
this.deselectAllRows();
|
|
249
|
-
if (rowItem.selected) {
|
|
250
|
-
this.selectedSet.add(rowItem.value);
|
|
251
|
-
this.selected = [...this.selectedSet];
|
|
252
|
-
}
|
|
253
|
-
break;
|
|
254
|
-
}
|
|
255
|
-
case 'multiple': {
|
|
256
|
-
if (rowItem.selected) {
|
|
257
|
-
this.selectedSet.add(rowItem.value);
|
|
258
|
-
}
|
|
259
|
-
else {
|
|
260
|
-
this.selectedSet.delete(rowItem.value);
|
|
261
|
-
}
|
|
262
|
-
this.selected = [...this.selectedSet];
|
|
263
|
-
const allSelected = this.selected.length === this.tableRows.length;
|
|
264
|
-
if (!this.tableHeadCheckboxCell)
|
|
265
|
-
return;
|
|
266
|
-
this.tableHeadCheckboxCell.checked = allSelected;
|
|
267
|
-
this.tableHeadCheckboxCell.indeterminate =
|
|
268
|
-
this.selected.length > 0 && !allSelected;
|
|
269
|
-
break;
|
|
270
|
-
}
|
|
271
|
-
default: {
|
|
272
|
-
break;
|
|
273
|
-
}
|
|
274
|
-
}
|
|
275
|
-
}
|
|
276
|
-
const applyDefault = this.dispatchEvent(new Event('change', {
|
|
277
|
-
cancelable: true,
|
|
278
|
-
bubbles: true,
|
|
279
|
-
composed: true,
|
|
280
|
-
}));
|
|
281
|
-
if (!applyDefault) {
|
|
282
|
-
event.preventDefault();
|
|
283
|
-
this.selectedSet = previousSelectedSet;
|
|
284
|
-
this.selected = previousSelected;
|
|
285
|
-
}
|
|
286
|
-
}
|
|
287
|
-
scrollToIndex(index) {
|
|
288
|
-
if (index) {
|
|
289
|
-
this.renderVirtualizedItems(index);
|
|
290
|
-
}
|
|
291
|
-
}
|
|
292
|
-
render() {
|
|
293
|
-
return html `
|
|
14
|
+
`}}get tableHead(){return this.querySelector("sp-table-head")}get tableRows(){return this.isVirtualized?[]:[...this.querySelectorAll("sp-table-row")]}get isVirtualized(){return!!this.items.length}focus(){const e=this.querySelector("sp-table-head-cell[sortable]");e&&e.focus()}selectAllRows(){this.isVirtualized?this.items.forEach((e,l)=>{e._$rowType$!==1&&this.selectedSet.add(this.itemValue(e,l))}):this.tableRows.forEach(e=>{e.selected=!0,this.selectedSet.add(e.value)}),this.selected=[...this.selectedSet],this.tableHeadCheckboxCell&&(this.tableHeadCheckboxCell.checked=!0,this.tableHeadCheckboxCell.indeterminate=!1)}deselectAllRows(){this.selectedSet.clear(),this.selected=[],this.isVirtualized||[...this.querySelectorAll("[selected]")].forEach(l=>{l.selected=!1}),this.tableHeadCheckboxCell&&(this.tableHeadCheckboxCell.checked=!1,this.tableHeadCheckboxCell.indeterminate=!1)}manageSelects(){const e=this.querySelectorAll("sp-table-checkbox-cell"),l=document.createElement("sp-table-checkbox-cell");if(this.selects){let t=!1;this.isVirtualized?t=this.selected.length>0&&this.selected.length===this.items.length:(this.tableRows.forEach(s=>{if(s.selected=this.selectedSet.has(s.value),!s.querySelector(":scope > sp-table-checkbox-cell")){const i=l.cloneNode();s.insertAdjacentElement("afterbegin",i),l.checked=s.selected}}),t=this.selected.length===this.tableRows.length),this.tableHeadCheckboxCell||(this.tableHeadCheckboxCell=document.createElement("sp-table-checkbox-cell"),this.tableHead.insertAdjacentElement("afterbegin",this.tableHeadCheckboxCell)),this.manageHeadCheckbox(t)}else e.forEach(t=>{t.remove()}),delete this.tableHeadCheckboxCell}validateSelected(){const e=new Set;this.isVirtualized?this.items.forEach((t,s)=>{const i=this.itemValue(t,s);e.add(i)}):this.tableRows.forEach(t=>{e.add(t.value)});const l=this.selected.length;this.selected=this.selected.filter(t=>e.has(t)),l!==this.selected.length&&this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0,composed:!0})),this.selectedSet=new Set(this.selected)}manageSelected(){this.validateSelected(),!this.isVirtualized&&(this.tableRows.forEach(e=>{e.selected=this.selectedSet.has(e.value)}),this.tableHeadCheckboxCell&&(this.tableHeadCheckboxCell.checked=this.selected.length===this.tableRows.length))}manageCheckboxes(){var e;if(this.selects){this.tableHeadCheckboxCell=document.createElement("sp-table-checkbox-cell");const l=this.selected.length===this.tableRows.length;this.manageHeadCheckbox(l),this.tableHead.insertAdjacentElement("afterbegin",this.tableHeadCheckboxCell),this.tableRows.forEach(t=>{const s=document.createElement("sp-table-checkbox-cell");t.insertAdjacentElement("afterbegin",s),t.selected=this.selectedSet.has(t.value),s.checked=t.selected})}else(e=this.tableHead.querySelector("sp-table-checkbox-cell"))==null||e.remove(),this.tableRows.forEach(l=>{var t;(t=l.checkboxCells[0])==null||t.remove(),this.selected.length&&(l.selected=this.selectedSet.has(l.value))})}manageHeadCheckbox(e){!this.tableHeadCheckboxCell||(this.tableHeadCheckboxCell.selectsSingle=this.selects==="single",this.tableHeadCheckboxCell.checked=e,this.tableHeadCheckboxCell.indeterminate=this.selected.length>0&&!e)}handleChange(e){e.stopPropagation();const l=new Set(this.selectedSet),t=[...this.selected],{target:s}=e,{parentElement:i}=s;if(i.value)switch(this.selects){case"single":{this.deselectAllRows(),i.selected&&(this.selectedSet.add(i.value),this.selected=[...this.selectedSet]);break}case"multiple":{i.selected?this.selectedSet.add(i.value):this.selectedSet.delete(i.value),this.selected=[...this.selectedSet];const o=this.selected.length===this.tableRows.length;if(!this.tableHeadCheckboxCell)return;this.tableHeadCheckboxCell.checked=o,this.tableHeadCheckboxCell.indeterminate=this.selected.length>0&&!o;break}default:break}else{const{checkbox:o}=s;o.checked||o.indeterminate?this.selectAllRows():this.deselectAllRows()}this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0,composed:!0}))||(e.preventDefault(),this.selectedSet=l,this.selected=t)}scrollToIndex(e){e&&this.renderVirtualizedItems(e)}render(){return r`
|
|
294
15
|
<slot @change=${this.handleChange}></slot>
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
const rowValues = new Set();
|
|
300
|
-
if (this.isVirtualized) {
|
|
301
|
-
this.items.forEach((item, index) => {
|
|
302
|
-
const value = this.itemValue(item, index);
|
|
303
|
-
rowValues.add(value);
|
|
304
|
-
});
|
|
305
|
-
}
|
|
306
|
-
else {
|
|
307
|
-
this.tableRows.forEach((row) => {
|
|
308
|
-
rowValues.add(row.value);
|
|
309
|
-
});
|
|
310
|
-
}
|
|
311
|
-
const oldSelectedCount = this.selected.length;
|
|
312
|
-
this.selected = this.selected.filter((selectedItem) => rowValues.has(selectedItem));
|
|
313
|
-
if (oldSelectedCount !== this.selected.length) {
|
|
314
|
-
this.dispatchEvent(new Event('change', {
|
|
315
|
-
cancelable: true,
|
|
316
|
-
bubbles: true,
|
|
317
|
-
composed: true,
|
|
318
|
-
}));
|
|
319
|
-
}
|
|
320
|
-
this.selectedSet = new Set(this.selected);
|
|
321
|
-
this.manageCheckboxes();
|
|
322
|
-
}
|
|
323
|
-
if (changed.has('selects')) {
|
|
324
|
-
this.manageSelects();
|
|
325
|
-
}
|
|
326
|
-
if (changed.has('selected') && this.hasUpdated) {
|
|
327
|
-
this.manageSelected();
|
|
328
|
-
}
|
|
329
|
-
}
|
|
330
|
-
updated() {
|
|
331
|
-
if (this.items.length) {
|
|
332
|
-
this.renderVirtualizedItems();
|
|
333
|
-
}
|
|
334
|
-
}
|
|
335
|
-
renderVirtualizedItems(index) {
|
|
336
|
-
if (!this.tableBody) {
|
|
337
|
-
this.tableBody = this.querySelector('sp-table-body');
|
|
338
|
-
if (!this.tableBody) {
|
|
339
|
-
this.tableBody = document.createElement('sp-table-body');
|
|
340
|
-
this.append(this.tableBody);
|
|
341
|
-
}
|
|
342
|
-
this.tableBody.addEventListener('rangeChanged', (event) => {
|
|
343
|
-
this.dispatchEvent(new RangeChangedEvent({
|
|
344
|
-
first: event.first,
|
|
345
|
-
last: event.last,
|
|
346
|
-
}));
|
|
347
|
-
});
|
|
348
|
-
}
|
|
349
|
-
const config = {
|
|
350
|
-
items: this.items,
|
|
351
|
-
renderItem: this.renderItem,
|
|
352
|
-
scroller: this.scroller,
|
|
353
|
-
};
|
|
354
|
-
if (index) {
|
|
355
|
-
config.scrollToIndex = {
|
|
356
|
-
index,
|
|
357
|
-
};
|
|
358
|
-
}
|
|
359
|
-
render(html `
|
|
360
|
-
${virtualize(config)}
|
|
361
|
-
`, this.tableBody);
|
|
362
|
-
}
|
|
363
|
-
disconnectedCallback() {
|
|
364
|
-
if (this.tableBody) {
|
|
365
|
-
this.tableBody.remove();
|
|
366
|
-
delete this.tableBody;
|
|
367
|
-
}
|
|
368
|
-
super.disconnectedCallback();
|
|
369
|
-
}
|
|
370
|
-
}
|
|
371
|
-
__decorate([
|
|
372
|
-
property({ reflect: true })
|
|
373
|
-
], Table.prototype, "role", void 0);
|
|
374
|
-
__decorate([
|
|
375
|
-
property({ type: String, reflect: true })
|
|
376
|
-
], Table.prototype, "selects", void 0);
|
|
377
|
-
__decorate([
|
|
378
|
-
property({ type: Array })
|
|
379
|
-
], Table.prototype, "selected", void 0);
|
|
380
|
-
__decorate([
|
|
381
|
-
property({ type: Array })
|
|
382
|
-
], Table.prototype, "items", void 0);
|
|
383
|
-
__decorate([
|
|
384
|
-
property({ type: Object })
|
|
385
|
-
], Table.prototype, "itemValue", void 0);
|
|
386
|
-
__decorate([
|
|
387
|
-
property({ type: Boolean, reflect: true })
|
|
388
|
-
], Table.prototype, "scroller", void 0);
|
|
389
|
-
//# sourceMappingURL=Table.js.map
|
|
16
|
+
`}willUpdate(e){this.hasUpdated||(this.validateSelected(),this.manageCheckboxes()),e.has("selects")&&this.manageSelects(),e.has("selected")&&this.hasUpdated&&this.manageSelected()}updated(){this.items.length&&this.renderVirtualizedItems()}renderVirtualizedItems(e){if(!this.isConnected)return;this.tableBody||(this.tableBody=this.querySelector("sp-table-body"),this.tableBody||(this.tableBody=document.createElement("sp-table-body"),this.append(this.tableBody)),this.tableBody.addEventListener("rangeChanged",t=>{this.dispatchEvent(new RangeChangedEvent({first:t.first,last:t.last}))}));const l={items:this.items,renderItem:this.renderItem,scroller:this.scroller};e&&(l.scrollToIndex={index:e}),m(r`
|
|
17
|
+
${g(l)}
|
|
18
|
+
`,this.tableBody)}disconnectedCallback(){super.disconnectedCallback()}}a([d({reflect:!0})],Table.prototype,"role",2),a([d({type:String,reflect:!0})],Table.prototype,"selects",2),a([d({type:Array})],Table.prototype,"selected",2),a([d({type:Array})],Table.prototype,"items",2),a([d({type:Object})],Table.prototype,"itemValue",2),a([d({type:Boolean,reflect:!0})],Table.prototype,"scroller",2);
|
|
19
|
+
//# sourceMappingURL=Table.js.map
|
package/src/Table.js.map
CHANGED
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sourceRoot":"","sources":["Table.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EAEH,IAAI,EAEJ,MAAM,EACN,UAAU,EACV,eAAe,GAElB,MAAM,+BAA+B,CAAC;AACvC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,8BAA8B,CAAC;AACtC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC;AAC3E,OAAO,MAAM,MAAM,gBAAgB,CAAC;AAMpC,OAAO,EACH,UAAU,GAEb,MAAM,qCAAqC,CAAC;AAO7C,MAAM,CAAN,IAAY,OAGX;AAHD,WAAY,OAAO;IACf,qCAAQ,CAAA;IACR,mDAAe,CAAA;AACnB,CAAC,EAHW,OAAO,KAAP,OAAO,QAGlB;AAMD,MAAM,OAAO,iBAAkB,SAAQ,KAAK;IAMxC,YAAY,KAAY;QACpB,KAAK,CAAC,iBAAiB,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACtD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;IAC3B,CAAC;;AATM,2BAAS,GAAG,cAAc,CAAC;AAYtC;;;;;GAKG;AAEH,MAAM,OAAO,KAAM,SAAQ,UAAU,CAAC,eAAe,EAAE;IACnD,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;IACtB,WAAW,EAAE,GAAG;CACnB,CAAC;IAHF;;QA6CY,gBAAW,GAGG,GAAG,EAAE,CAAC,IAAI,CAAA,EAAE,CAAC;QAG5B,SAAI,GAAG,MAAM,CAAC;QAQrB;;WAEG;QAEI,aAAQ,GAAa,EAAE,CAAC;QAEvB,gBAAW,GAAG,IAAI,GAAG,EAAU,CAAC;QAExC;;WAEG;QAEI,UAAK,GAA8B,EAAE,CAAC;QAE7C;;WAEG;QAEI,cAAS,GAAG,CAAC,KAAc,EAAE,KAAa,EAAU,EAAE;YACzD,OAAO,GAAG,KAAK,EAAE,CAAC;QACtB,CAAC,CAAC;QAEF;;WAEG;QAEI,aAAQ,GAAG,KAAK,CAAC;IA6U5B,CAAC;IA9ZU,MAAM,KAAc,MAAM;QAC7B,OAAO,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC;IAED,IAAI,UAAU;QAIV,OAAO,IAAI,CAAC,WAAW,CAAC;IAC5B,CAAC;IAED,IAAI,UAAU,CACV,EAAoE;QAEpE,IAAI,CAAC,WAAW,GAAG,CACf,IAA6B,EAC7B,KAAa,EACC,EAAE;YAChB,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YAC1C,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YAC/C,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,MAAK,CAAC,CAAC;YAE3D,OAAO,IAAI,CAAA;;4BAEK,KAAK;oCACG,KAAK,GAAG,CAAC;gCACb,QAAQ;;sBAElB,WAAW;gBACT,CAAC,CAAC,IAAI,CAAA;;6CAEe,QAAQ;;2BAE1B;gBACH,CAAC,CAAC,IAAI,CAAA,EAAE;sBACV,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC;;aAExB,CAAC;QACN,CAAC,CAAC;IACN,CAAC;IAgDD,IAAY,SAAS;QACjB,OAAO,IAAI,CAAC,aAAa,CAAC,eAAe,CAAc,CAAC;IAC5D,CAAC;IAED,IAAY,SAAS;QACjB,IAAI,IAAI,CAAC,aAAa,EAAE;YACpB,OAAO,EAAE,CAAC;SACb;QACD,OAAO,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAe,CAAC;IACpE,CAAC;IAED,IAAY,aAAa;QACrB,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;IAC/B,CAAC;IAEe,KAAK;QACjB,MAAM,gBAAgB,GAAG,IAAI,CAAC,aAAa,CACvC,8BAA8B,CAChB,CAAC;QACnB,IAAI,gBAAgB,EAAE;YAClB,gBAAgB,CAAC,KAAK,EAAE,CAAC;SAC5B;IACL,CAAC;IAEO,aAAa;QACjB,IAAI,IAAI,CAAC,aAAa,EAAE;YACpB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAa,EAAE,EAAE;gBACvC,IAAI,IAAI,CAAC,UAAU,KAAK,CAAC,EAAE;oBACvB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;iBACrD;YACL,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC;SACzC;aAAM;YACH,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;gBAC3B,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,WAAW;gBAChC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,uBAAuB;YAC5D,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC;SACzC;QAED,IAAI,CAAC,IAAI,CAAC,qBAAqB;YAAE,OAAO;QACxC,IAAI,CAAC,qBAAqB,CAAC,OAAO,GAAG,IAAI,CAAC;QAC1C,IAAI,CAAC,qBAAqB,CAAC,aAAa,GAAG,KAAK,CAAC;IACrD,CAAC;IAEO,eAAe;QACnB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;QACzB,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;QAEnB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACrB,MAAM,YAAY,GAAG;gBACjB,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC;aAC3B,CAAC;YAEhB,YAAY,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;gBACzB,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;YACzB,CAAC,CAAC,CAAC;SACN;QAED,IAAI,CAAC,IAAI,CAAC,qBAAqB;YAAE,OAAO;QACxC,IAAI,CAAC,qBAAqB,CAAC,OAAO,GAAG,KAAK,CAAC;QAC3C,IAAI,CAAC,qBAAqB,CAAC,aAAa,GAAG,KAAK,CAAC;IACrD,CAAC;IAES,aAAa;QACnB,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC;QACnE,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;QAClE,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,WAAW,GAAG,KAAK,CAAC;YACxB,IAAI,IAAI,CAAC,aAAa,EAAE;gBACpB,WAAW;oBACP,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;wBACxB,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;aAClD;iBAAM;gBACH,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;oBAC3B,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;oBAC/C,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,iCAAiC,CAAC,EAAE;wBACvD,MAAM,cAAc,GAChB,QAAQ,CAAC,SAAS,EAAuB,CAAC;wBAC9C,GAAG,CAAC,qBAAqB,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;wBACxD,QAAQ,CAAC,OAAO,GAAG,GAAG,CAAC,QAAQ,CAAC;qBACnC;gBACL,CAAC,CAAC,CAAC;gBACH,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;aAChE;YAED,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE;gBAC7B,IAAI,CAAC,qBAAqB,GAAG,QAAQ,CAAC,aAAa,CAC/C,wBAAwB,CACN,CAAC;gBACvB,IAAI,CAAC,SAAS,CAAC,qBAAqB,CAChC,YAAY,EACZ,IAAI,CAAC,qBAAqB,CAC7B,CAAC;aACL;YACD,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;SACxC;aAAM;YACH,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;gBACvB,GAAG,CAAC,MAAM,EAAE,CAAC;YACjB,CAAC,CAAC,CAAC;YACH,OAAO,IAAI,CAAC,qBAAqB,CAAC;SACrC;IACL,CAAC;IAES,cAAc;QACpB,IAAI,CAAC,WAAW,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAE1C,IAAI,IAAI,CAAC,aAAa;YAAE,OAAO;QAE/B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YAC3B,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACnD,CAAC,CAAC,CAAC;QACH,IAAI,IAAI,CAAC,qBAAqB,EAAE;YAC5B,IAAI,CAAC,qBAAqB,CAAC,OAAO;gBAC9B,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;SACtD;IACL,CAAC;IAES,gBAAgB;;QACtB,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,qBAAqB,GAAG,QAAQ,CAAC,aAAa,CAC/C,wBAAwB,CAC3B,CAAC;YACF,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;YAEnE,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;YAErC,IAAI,CAAC,SAAS,CAAC,qBAAqB,CAChC,YAAY,EACZ,IAAI,CAAC,qBAAqB,CAC7B,CAAC;YAEF,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;gBAC3B,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CACnC,wBAAwB,CAC3B,CAAC;gBACF,GAAG,CAAC,qBAAqB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;gBAClD,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;gBAC/C,QAAQ,CAAC,OAAO,GAAG,GAAG,CAAC,QAAQ,CAAC;YACpC,CAAC,CAAC,CAAC;SACN;aAAM;YACH,MAAA,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,wBAAwB,CAAC,0CAAE,MAAM,EAAE,CAAC;YACjE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;;gBAC3B,MAAA,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC,0CAAE,MAAM,EAAE,CAAC;gBAC/B,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;oBACtB,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;iBAClD;YACL,CAAC,CAAC,CAAC;SACN;IACL,CAAC;IAES,kBAAkB,CAAC,WAAoB;QAC7C,IAAI,CAAC,IAAI,CAAC,qBAAqB;YAAE,OAAO;QAExC,IAAI,CAAC,qBAAqB,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC;QACrE,IAAI,CAAC,qBAAqB,CAAC,OAAO,GAAG,WAAW,CAAC;QACjD,IAAI,CAAC,qBAAqB,CAAC,aAAa;YACpC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;IACjD,CAAC;IAES,YAAY,CAAC,KAAY;QAC/B,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,MAAM,mBAAmB,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACtD,MAAM,gBAAgB,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;QAE5C,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;QACzB,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,MAElC,CAAC;QACF,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;YAChB,MAAM,EAAE,QAAQ,EAAE,GAAG,MAA2B,CAAC;YACjD,IAAI,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,aAAa,EAAE;gBAC5C,IAAI,CAAC,aAAa,EAAE,CAAC;aACxB;iBAAM;gBACH,IAAI,CAAC,eAAe,EAAE,CAAC;aAC1B;SACJ;aAAM;YACH,QAAQ,IAAI,CAAC,OAAO,EAAE;gBAClB,KAAK,QAAQ,CAAC,CAAC;oBACX,IAAI,CAAC,eAAe,EAAE,CAAC;oBACvB,IAAI,OAAO,CAAC,QAAQ,EAAE;wBAClB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;wBACpC,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC;qBACzC;oBACD,MAAM;iBACT;gBACD,KAAK,UAAU,CAAC,CAAC;oBACb,IAAI,OAAO,CAAC,QAAQ,EAAE;wBAClB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;qBACvC;yBAAM;wBACH,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;qBAC1C;oBACD,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC;oBAEtC,MAAM,WAAW,GACb,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;oBAEnD,IAAI,CAAC,IAAI,CAAC,qBAAqB;wBAAE,OAAO;oBACxC,IAAI,CAAC,qBAAqB,CAAC,OAAO,GAAG,WAAW,CAAC;oBACjD,IAAI,CAAC,qBAAqB,CAAC,aAAa;wBACpC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;oBAC7C,MAAM;iBACT;gBACD,OAAO,CAAC,CAAC;oBACL,MAAM;iBACT;aACJ;SACJ;QACD,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CACnC,IAAI,KAAK,CAAC,QAAQ,EAAE;YAChB,UAAU,EAAE,IAAI;YAChB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACjB,CAAC,CACL,CAAC;QACF,IAAI,CAAC,YAAY,EAAE;YACf,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC;YACvC,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC;SACpC;IACL,CAAC;IAEM,aAAa,CAAC,KAAc;QAC/B,IAAI,KAAK,EAAE;YACP,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC;SACtC;IACL,CAAC;IAEkB,MAAM;QACrB,OAAO,IAAI,CAAA;4BACS,IAAI,CAAC,YAAY;SACpC,CAAC;IACN,CAAC;IAEkB,UAAU,CAAC,OAA6B;QACvD,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB,MAAM,SAAS,GAAG,IAAI,GAAG,EAAU,CAAC;YAEpC,IAAI,IAAI,CAAC,aAAa,EAAE;gBACpB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;oBAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;oBAC1C,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;gBACzB,CAAC,CAAC,CAAC;aACN;iBAAM;gBACH,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;oBAC3B,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;gBAC7B,CAAC,CAAC,CAAC;aACN;YAED,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;YAE9C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,YAAY,EAAE,EAAE,CAClD,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAC9B,CAAC;YACF,IAAI,gBAAgB,KAAK,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;gBAC3C,IAAI,CAAC,aAAa,CACd,IAAI,KAAK,CAAC,QAAQ,EAAE;oBAChB,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACjB,CAAC,CACL,CAAC;aACL;YACD,IAAI,CAAC,WAAW,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAE1C,IAAI,CAAC,gBAAgB,EAAE,CAAC;SAC3B;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YACxB,IAAI,CAAC,aAAa,EAAE,CAAC;SACxB;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE;YAC5C,IAAI,CAAC,cAAc,EAAE,CAAC;SACzB;IACL,CAAC;IAEkB,OAAO;QACtB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACnB,IAAI,CAAC,sBAAsB,EAAE,CAAC;SACjC;IACL,CAAC;IAES,sBAAsB,CAAC,KAAc;QAC3C,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACjB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAAc,CAAC;YAClE,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACjB,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;gBACzD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;aAC/B;YACD,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAC3B,cAAc,EACd,CAAC,KAAwB,EAAE,EAAE;gBACzB,IAAI,CAAC,aAAa,CACd,IAAI,iBAAiB,CAAC;oBAClB,KAAK,EAAE,KAAK,CAAC,KAAK;oBAClB,IAAI,EAAE,KAAK,CAAC,IAAI;iBACnB,CAAC,CACL,CAAC;YACN,CAAC,CACJ,CAAC;SACL;QACD,MAAM,MAAM,GAAuD;YAC/D,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QACF,IAAI,KAAK,EAAE;YACP,MAAM,CAAC,aAAa,GAAG;gBACnB,KAAK;aACR,CAAC;SACL;QACD,MAAM,CACF,IAAI,CAAA;kBACE,UAAU,CAAC,MAAM,CAAC;aACvB,EACD,IAAI,CAAC,SAAS,CACjB,CAAC;IACN,CAAC;IAEQ,oBAAoB;QACzB,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;YACxB,OAAO,IAAI,CAAC,SAAS,CAAC;SACzB;QACD,KAAK,CAAC,oBAAoB,EAAE,CAAC;IACjC,CAAC;CACJ;AA/WG;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCACP;AAMrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACQ;AAMlD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;uCACK;AAQ/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oCACmB;AAM7C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAGzB;AAMF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACnB","sourcesContent":["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n render,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport '../sp-table-row.js';\nimport '../sp-table-checkbox-cell.js';\nimport '../sp-table-body.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport styles from './table.css.js';\nimport { TableBody } from './TableBody.js';\nimport type { TableCheckboxCell } from './TableCheckboxCell.js';\nimport type { TableHead } from './TableHead.js';\nimport type { TableHeadCell } from './TableHeadCell.js';\nimport type { TableRow } from './TableRow.js';\nimport {\n virtualize,\n VirtualizeDirectiveConfig,\n} from '@lit-labs/virtualizer/virtualize.js';\n\ninterface Range {\n first: number;\n last: number;\n}\n\nexport enum RowType {\n ITEM = 0,\n INFORMATION = 1,\n}\n\nexport interface TableItem extends Record<string, unknown> {\n _$rowType$?: RowType;\n}\n\nexport class RangeChangedEvent extends Event {\n static eventName = 'rangeChanged';\n\n first: number;\n last: number;\n\n constructor(range: Range) {\n super(RangeChangedEvent.eventName, { bubbles: true });\n this.first = range.first;\n this.last = range.last;\n }\n}\n\n/**\n * @element sp-table\n *\n * @fires rangeChanged - Announces a change in the range of visible cells on the table body\n * @event change - Announces a change in the `selected` property of a table row\n */\n\nexport class Table extends SizedMixin(SpectrumElement, {\n validSizes: ['s', 'm'],\n defaultSize: 'm',\n}) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n get renderItem(): (\n item: Record<string, unknown>,\n index: number\n ) => TemplateResult {\n return this._renderItem;\n }\n\n set renderItem(\n fn: (item: Record<string, unknown>, index: number) => TemplateResult\n ) {\n this._renderItem = (\n item: Record<string, unknown>,\n index: number\n ): TemplateResult => {\n const value = this.itemValue(item, index);\n const selected = this.selected.includes(value);\n const hasCheckbox = this.selects && item?._$rowType$ !== 1;\n\n return html`\n <sp-table-row\n value=${value}\n aria-rowindex=${index + 1}\n ?selected=${selected}\n >\n ${hasCheckbox\n ? html`\n <sp-table-checkbox-cell\n ?checked=${selected}\n ></sp-table-checkbox-cell>\n `\n : html``}\n ${fn(item, index)}\n </sp-table-row>\n `;\n };\n }\n\n private _renderItem: (\n item: Record<string, unknown>,\n index: number\n ) => TemplateResult = () => html``;\n\n @property({ reflect: true })\n public role = 'grid';\n\n /**\n * Whether the Table allows users to select a row or rows, and thus controls whether or not the Table also renders checkboxes.\n */\n @property({ type: String, reflect: true })\n public selects: undefined | 'single' | 'multiple';\n\n /**\n * An array of <sp-row> values that have been selected.\n */\n @property({ type: Array })\n public selected: string[] = [];\n\n private selectedSet = new Set<string>();\n\n /**\n * The content of the rows rendered by the virtualized table. The key is the value of the sp-table-row, and the value is the sp-table-row's content (not the row itself).\n */\n @property({ type: Array })\n public items: Record<string, unknown>[] = [];\n\n /**\n * The value of an item. By default, it is set to the index of the sp-table-row.\n */\n @property({ type: Object })\n public itemValue = (_item: unknown, index: number): string => {\n return `${index}`;\n };\n\n /**\n * Whether or not the virtualized table has a scroll bar. If this is set to true, make sure to specify a height in the sp-table's inline styles.\n */\n @property({ type: Boolean, reflect: true })\n public scroller = false;\n\n private tableBody?: TableBody;\n\n private tableHeadCheckboxCell?: TableCheckboxCell;\n\n private get tableHead(): TableHead {\n return this.querySelector('sp-table-head') as TableHead;\n }\n\n private get tableRows(): TableRow[] {\n if (this.isVirtualized) {\n return [];\n }\n return [...this.querySelectorAll('sp-table-row')] as TableRow[];\n }\n\n private get isVirtualized(): boolean {\n return !!this.items.length;\n }\n\n public override focus(): void {\n const sortableHeadCell = this.querySelector(\n 'sp-table-head-cell[sortable]'\n ) as TableHeadCell;\n if (sortableHeadCell) {\n sortableHeadCell.focus();\n }\n }\n\n private selectAllRows(): void {\n if (this.isVirtualized) {\n this.items.forEach((item, index: number) => {\n if (item._$rowType$ !== 1) {\n this.selectedSet.add(this.itemValue(item, index));\n }\n });\n this.selected = [...this.selectedSet];\n } else {\n this.tableRows.forEach((row) => {\n row.selected = true; // Visually\n this.selectedSet.add(row.value); // Prepares table state\n });\n this.selected = [...this.selectedSet];\n }\n\n if (!this.tableHeadCheckboxCell) return;\n this.tableHeadCheckboxCell.checked = true;\n this.tableHeadCheckboxCell.indeterminate = false;\n }\n\n private deselectAllRows(): void {\n this.selectedSet.clear();\n this.selected = [];\n\n if (!this.isVirtualized) {\n const selectedRows = [\n ...this.querySelectorAll('[selected]'),\n ] as TableRow[];\n\n selectedRows.forEach((row) => {\n row.selected = false;\n });\n }\n\n if (!this.tableHeadCheckboxCell) return;\n this.tableHeadCheckboxCell.checked = false;\n this.tableHeadCheckboxCell.indeterminate = false;\n }\n\n protected manageSelects(): void {\n const checkboxes = this.querySelectorAll('sp-table-checkbox-cell');\n const checkbox = document.createElement('sp-table-checkbox-cell');\n if (!!this.selects) {\n let allSelected = false;\n if (this.isVirtualized) {\n allSelected =\n this.selected.length > 0 &&\n this.selected.length === this.items.length;\n } else {\n this.tableRows.forEach((row) => {\n row.selected = this.selectedSet.has(row.value);\n if (!row.querySelector(':scope > sp-table-checkbox-cell')) {\n const clonedCheckbox =\n checkbox.cloneNode() as TableCheckboxCell;\n row.insertAdjacentElement('afterbegin', clonedCheckbox);\n checkbox.checked = row.selected;\n }\n });\n allSelected = this.selected.length === this.tableRows.length;\n }\n\n if (!this.tableHeadCheckboxCell) {\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n this.tableHead.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n }\n this.manageHeadCheckbox(allSelected);\n } else {\n checkboxes.forEach((box) => {\n box.remove();\n });\n delete this.tableHeadCheckboxCell;\n }\n }\n\n protected manageSelected(): void {\n this.selectedSet = new Set(this.selected);\n\n if (this.isVirtualized) return;\n\n this.tableRows.forEach((row) => {\n row.selected = this.selectedSet.has(row.value);\n });\n if (this.tableHeadCheckboxCell) {\n this.tableHeadCheckboxCell.checked =\n this.selected.length === this.tableRows.length;\n }\n }\n\n protected manageCheckboxes(): void {\n if (!!this.selects) {\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n );\n const allSelected = this.selected.length === this.tableRows.length;\n\n this.manageHeadCheckbox(allSelected);\n\n this.tableHead.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n\n this.tableRows.forEach((row) => {\n const checkbox = document.createElement(\n 'sp-table-checkbox-cell'\n );\n row.insertAdjacentElement('afterbegin', checkbox);\n row.selected = this.selectedSet.has(row.value);\n checkbox.checked = row.selected;\n });\n } else {\n this.tableHead.querySelector('sp-table-checkbox-cell')?.remove();\n this.tableRows.forEach((row) => {\n row.checkboxCells[0]?.remove();\n if (this.selected.length) {\n row.selected = this.selectedSet.has(row.value);\n }\n });\n }\n }\n\n protected manageHeadCheckbox(allSelected: boolean): void {\n if (!this.tableHeadCheckboxCell) return;\n\n this.tableHeadCheckboxCell.selectsSingle = this.selects === 'single';\n this.tableHeadCheckboxCell.checked = allSelected;\n this.tableHeadCheckboxCell.indeterminate =\n this.selected.length > 0 && !allSelected;\n }\n\n protected handleChange(event: Event): void {\n event.stopPropagation();\n\n const previousSelectedSet = new Set(this.selectedSet);\n const previousSelected = [...this.selected];\n\n const { target } = event;\n const { parentElement: rowItem } = target as HTMLElement & {\n parentElement: TableRow;\n };\n if (!rowItem.value) {\n const { checkbox } = target as TableCheckboxCell;\n if (checkbox.checked || checkbox.indeterminate) {\n this.selectAllRows();\n } else {\n this.deselectAllRows();\n }\n } else {\n switch (this.selects) {\n case 'single': {\n this.deselectAllRows();\n if (rowItem.selected) {\n this.selectedSet.add(rowItem.value);\n this.selected = [...this.selectedSet];\n }\n break;\n }\n case 'multiple': {\n if (rowItem.selected) {\n this.selectedSet.add(rowItem.value);\n } else {\n this.selectedSet.delete(rowItem.value);\n }\n this.selected = [...this.selectedSet];\n\n const allSelected =\n this.selected.length === this.tableRows.length;\n\n if (!this.tableHeadCheckboxCell) return;\n this.tableHeadCheckboxCell.checked = allSelected;\n this.tableHeadCheckboxCell.indeterminate =\n this.selected.length > 0 && !allSelected;\n break;\n }\n default: {\n break;\n }\n }\n }\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n if (!applyDefault) {\n event.preventDefault();\n this.selectedSet = previousSelectedSet;\n this.selected = previousSelected;\n }\n }\n\n public scrollToIndex(index?: number): void {\n if (index) {\n this.renderVirtualizedItems(index);\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot @change=${this.handleChange}></slot>\n `;\n }\n\n protected override willUpdate(changed: PropertyValues<this>): void {\n if (!this.hasUpdated) {\n const rowValues = new Set<string>();\n\n if (this.isVirtualized) {\n this.items.forEach((item, index) => {\n const value = this.itemValue(item, index);\n rowValues.add(value);\n });\n } else {\n this.tableRows.forEach((row) => {\n rowValues.add(row.value);\n });\n }\n\n const oldSelectedCount = this.selected.length;\n\n this.selected = this.selected.filter((selectedItem) =>\n rowValues.has(selectedItem)\n );\n if (oldSelectedCount !== this.selected.length) {\n this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n }\n this.selectedSet = new Set(this.selected);\n\n this.manageCheckboxes();\n }\n if (changed.has('selects')) {\n this.manageSelects();\n }\n\n if (changed.has('selected') && this.hasUpdated) {\n this.manageSelected();\n }\n }\n\n protected override updated(): void {\n if (this.items.length) {\n this.renderVirtualizedItems();\n }\n }\n\n protected renderVirtualizedItems(index?: number): void {\n if (!this.tableBody) {\n this.tableBody = this.querySelector('sp-table-body') as TableBody;\n if (!this.tableBody) {\n this.tableBody = document.createElement('sp-table-body');\n this.append(this.tableBody);\n }\n this.tableBody.addEventListener(\n 'rangeChanged',\n (event: RangeChangedEvent) => {\n this.dispatchEvent(\n new RangeChangedEvent({\n first: event.first,\n last: event.last,\n })\n );\n }\n );\n }\n const config: VirtualizeDirectiveConfig<Record<string, unknown>> = {\n items: this.items,\n renderItem: this.renderItem,\n scroller: this.scroller,\n };\n if (index) {\n config.scrollToIndex = {\n index,\n };\n }\n render(\n html`\n ${virtualize(config)}\n `,\n this.tableBody\n );\n }\n\n override disconnectedCallback(): void {\n if (this.tableBody) {\n this.tableBody.remove();\n delete this.tableBody;\n }\n super.disconnectedCallback();\n }\n}\n"]}
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["Table.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n render,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport '../sp-table-row.js';\nimport '../sp-table-checkbox-cell.js';\nimport '../sp-table-body.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport styles from './table.css.js';\nimport { TableBody } from './TableBody.js';\nimport type { TableCheckboxCell } from './TableCheckboxCell.js';\nimport type { TableHead } from './TableHead.js';\nimport type { TableHeadCell } from './TableHeadCell.js';\nimport type { TableRow } from './TableRow.js';\nimport {\n virtualize,\n VirtualizeDirectiveConfig,\n} from '@lit-labs/virtualizer/virtualize.js';\n\ninterface Range {\n first: number;\n last: number;\n}\n\nexport enum RowType {\n ITEM = 0,\n INFORMATION = 1,\n}\n\nexport interface TableItem extends Record<string, unknown> {\n _$rowType$?: RowType;\n}\n\nexport class RangeChangedEvent extends Event {\n static eventName = 'rangeChanged';\n\n first: number;\n last: number;\n\n constructor(range: Range) {\n super(RangeChangedEvent.eventName, { bubbles: true });\n this.first = range.first;\n this.last = range.last;\n }\n}\n\n/**\n * @element sp-table\n *\n * @fires rangeChanged - Announces a change in the range of visible cells on the table body\n * @event change - Announces a change in the `selected` property of a table row\n */\n\nexport class Table extends SizedMixin(SpectrumElement, {\n validSizes: ['s', 'm'],\n defaultSize: 'm',\n}) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n get renderItem(): (\n item: Record<string, unknown>,\n index: number\n ) => TemplateResult {\n return this._renderItem;\n }\n\n set renderItem(\n fn: (item: Record<string, unknown>, index: number) => TemplateResult\n ) {\n this._renderItem = (\n item: Record<string, unknown>,\n index: number\n ): TemplateResult => {\n const value = this.itemValue(item, index);\n const selected = this.selected.includes(value);\n const hasCheckbox = this.selects && item?._$rowType$ !== 1;\n\n return html`\n <sp-table-row\n value=${value}\n aria-rowindex=${index + 1}\n ?selected=${selected}\n >\n ${hasCheckbox\n ? html`\n <sp-table-checkbox-cell\n ?checked=${selected}\n ></sp-table-checkbox-cell>\n `\n : html``}\n ${fn(item, index)}\n </sp-table-row>\n `;\n };\n }\n\n private _renderItem: (\n item: Record<string, unknown>,\n index: number\n ) => TemplateResult = /* c8 ignore next */ () => html``;\n\n @property({ reflect: true })\n public role = 'grid';\n\n /**\n * Whether the Table allows users to select a row or rows, and thus controls whether or not the Table also renders checkboxes.\n */\n @property({ type: String, reflect: true })\n public selects: undefined | 'single' | 'multiple';\n\n /**\n * An array of <sp-row> values that have been selected.\n */\n @property({ type: Array })\n public selected: string[] = [];\n\n private selectedSet = new Set<string>();\n\n /**\n * The content of the rows rendered by the virtualized table. The key is the value of the sp-table-row, and the value is the sp-table-row's content (not the row itself).\n */\n @property({ type: Array })\n public items: Record<string, unknown>[] = [];\n\n /**\n * The value of an item. By default, it is set to the index of the sp-table-row.\n */\n @property({ type: Object })\n public itemValue = (_item: unknown, index: number): string => {\n return `${index}`;\n };\n\n /**\n * Whether or not the virtualized table has a scroll bar. If this is set to true, make sure to specify a height in the sp-table's inline styles.\n */\n @property({ type: Boolean, reflect: true })\n public scroller = false;\n\n private tableBody?: TableBody;\n\n private tableHeadCheckboxCell?: TableCheckboxCell;\n\n private get tableHead(): TableHead {\n return this.querySelector('sp-table-head') as TableHead;\n }\n\n private get tableRows(): TableRow[] {\n if (this.isVirtualized) {\n return [];\n }\n return [...this.querySelectorAll('sp-table-row')] as TableRow[];\n }\n\n private get isVirtualized(): boolean {\n return !!this.items.length;\n }\n\n public override focus(): void {\n const sortableHeadCell = this.querySelector(\n 'sp-table-head-cell[sortable]'\n ) as TableHeadCell;\n if (sortableHeadCell) {\n sortableHeadCell.focus();\n }\n }\n\n private selectAllRows(): void {\n if (this.isVirtualized) {\n this.items.forEach((item, index: number) => {\n if (item._$rowType$ !== 1) {\n this.selectedSet.add(this.itemValue(item, index));\n }\n });\n } else {\n this.tableRows.forEach((row) => {\n row.selected = true; // Visually\n this.selectedSet.add(row.value); // Prepares table state\n });\n }\n this.selected = [...this.selectedSet];\n\n if (!this.tableHeadCheckboxCell) /* c8 ignore next */ return;\n this.tableHeadCheckboxCell.checked = true;\n this.tableHeadCheckboxCell.indeterminate = false;\n }\n\n private deselectAllRows(): void {\n this.selectedSet.clear();\n this.selected = [];\n\n if (!this.isVirtualized) {\n const selectedRows = [\n ...this.querySelectorAll('[selected]'),\n ] as TableRow[];\n\n selectedRows.forEach((row) => {\n row.selected = false;\n });\n }\n\n if (!this.tableHeadCheckboxCell) /* c8 ignore next */ return;\n this.tableHeadCheckboxCell.checked = false;\n this.tableHeadCheckboxCell.indeterminate = false;\n }\n\n protected manageSelects(): void {\n const checkboxes = this.querySelectorAll('sp-table-checkbox-cell');\n const checkbox = document.createElement('sp-table-checkbox-cell');\n if (!!this.selects) {\n let allSelected = false;\n if (this.isVirtualized) {\n allSelected =\n this.selected.length > 0 &&\n this.selected.length === this.items.length;\n } else {\n this.tableRows.forEach((row) => {\n row.selected = this.selectedSet.has(row.value);\n if (!row.querySelector(':scope > sp-table-checkbox-cell')) {\n const clonedCheckbox =\n checkbox.cloneNode() as TableCheckboxCell;\n row.insertAdjacentElement('afterbegin', clonedCheckbox);\n checkbox.checked = row.selected;\n }\n });\n allSelected = this.selected.length === this.tableRows.length;\n }\n\n if (!this.tableHeadCheckboxCell) {\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n this.tableHead.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n }\n this.manageHeadCheckbox(allSelected);\n } else {\n checkboxes.forEach((box) => {\n box.remove();\n });\n delete this.tableHeadCheckboxCell;\n }\n }\n\n protected validateSelected(): void {\n const rowValues = new Set<string>();\n\n if (this.isVirtualized) {\n this.items.forEach((item, index) => {\n const value = this.itemValue(item, index);\n rowValues.add(value);\n });\n } else {\n this.tableRows.forEach((row) => {\n rowValues.add(row.value);\n });\n }\n\n const oldSelectedCount = this.selected.length;\n\n this.selected = this.selected.filter((selectedItem) =>\n rowValues.has(selectedItem)\n );\n if (oldSelectedCount !== this.selected.length) {\n this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n }\n this.selectedSet = new Set(this.selected);\n }\n\n protected manageSelected(): void {\n this.validateSelected();\n\n if (this.isVirtualized) return;\n\n this.tableRows.forEach((row) => {\n row.selected = this.selectedSet.has(row.value);\n });\n if (this.tableHeadCheckboxCell) {\n this.tableHeadCheckboxCell.checked =\n this.selected.length === this.tableRows.length;\n }\n }\n\n protected manageCheckboxes(): void {\n if (!!this.selects) {\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n );\n const allSelected = this.selected.length === this.tableRows.length;\n\n this.manageHeadCheckbox(allSelected);\n\n this.tableHead.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n\n this.tableRows.forEach((row) => {\n const checkbox = document.createElement(\n 'sp-table-checkbox-cell'\n );\n row.insertAdjacentElement('afterbegin', checkbox);\n row.selected = this.selectedSet.has(row.value);\n checkbox.checked = row.selected;\n });\n } else {\n this.tableHead.querySelector('sp-table-checkbox-cell')?.remove();\n this.tableRows.forEach((row) => {\n row.checkboxCells[0]?.remove();\n if (this.selected.length) {\n row.selected = this.selectedSet.has(row.value);\n }\n });\n }\n }\n\n protected manageHeadCheckbox(allSelected: boolean): void {\n if (!this.tableHeadCheckboxCell) /* c8 ignore next */ return;\n\n this.tableHeadCheckboxCell.selectsSingle = this.selects === 'single';\n this.tableHeadCheckboxCell.checked = allSelected;\n this.tableHeadCheckboxCell.indeterminate =\n this.selected.length > 0 && !allSelected;\n }\n\n protected handleChange(event: Event): void {\n event.stopPropagation();\n\n const previousSelectedSet = new Set(this.selectedSet);\n const previousSelected = [...this.selected];\n\n const { target } = event;\n const { parentElement: rowItem } = target as HTMLElement & {\n parentElement: TableRow;\n };\n if (!rowItem.value) {\n const { checkbox } = target as TableCheckboxCell;\n if (checkbox.checked || checkbox.indeterminate) {\n this.selectAllRows();\n } else {\n this.deselectAllRows();\n }\n } else {\n switch (this.selects) {\n case 'single': {\n this.deselectAllRows();\n if (rowItem.selected) {\n this.selectedSet.add(rowItem.value);\n this.selected = [...this.selectedSet];\n }\n break;\n }\n case 'multiple': {\n if (rowItem.selected) {\n this.selectedSet.add(rowItem.value);\n } else {\n this.selectedSet.delete(rowItem.value);\n }\n this.selected = [...this.selectedSet];\n\n const allSelected =\n this.selected.length === this.tableRows.length;\n\n if (!this.tableHeadCheckboxCell)\n /* c8 ignore next */ return;\n this.tableHeadCheckboxCell.checked = allSelected;\n this.tableHeadCheckboxCell.indeterminate =\n this.selected.length > 0 && !allSelected;\n break;\n }\n default: {\n break;\n }\n }\n }\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n if (!applyDefault) {\n event.preventDefault();\n this.selectedSet = previousSelectedSet;\n this.selected = previousSelected;\n }\n }\n\n public scrollToIndex(index?: number): void {\n if (index) {\n this.renderVirtualizedItems(index);\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot @change=${this.handleChange}></slot>\n `;\n }\n\n protected override willUpdate(changed: PropertyValues<this>): void {\n if (!this.hasUpdated) {\n this.validateSelected();\n this.manageCheckboxes();\n }\n if (changed.has('selects')) {\n this.manageSelects();\n }\n\n if (changed.has('selected') && this.hasUpdated) {\n this.manageSelected();\n }\n }\n\n protected override updated(): void {\n if (this.items.length) {\n this.renderVirtualizedItems();\n }\n }\n\n protected renderVirtualizedItems(index?: number): void {\n // Rendering updates into the table while disconnected can\n // cause runaway event binding in ancestor elements.\n if (!this.isConnected) return;\n if (!this.tableBody) {\n this.tableBody = this.querySelector('sp-table-body') as TableBody;\n if (!this.tableBody) {\n this.tableBody = document.createElement('sp-table-body');\n this.append(this.tableBody);\n }\n this.tableBody.addEventListener(\n 'rangeChanged',\n (event: RangeChangedEvent) => {\n this.dispatchEvent(\n new RangeChangedEvent({\n first: event.first,\n last: event.last,\n })\n );\n }\n );\n }\n const config: VirtualizeDirectiveConfig<Record<string, unknown>> = {\n items: this.items,\n renderItem: this.renderItem,\n scroller: this.scroller,\n };\n if (index) {\n config.scrollToIndex = {\n index,\n };\n }\n render(\n html`\n ${virtualize(config)}\n `,\n this.tableBody\n );\n }\n\n public override disconnectedCallback(): void {\n super.disconnectedCallback();\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["html", "render", "SizedMixin", "SpectrumElement", "property", "styles", "virtualize", "RowType", "_RangeChangedEvent", "range", "_item", "index", "fn", "item", "value", "selected", "hasCheckbox", "sortableHeadCell", "row", "checkboxes", "checkbox", "allSelected", "clonedCheckbox", "box", "rowValues", "oldSelectedCount", "selectedItem", "_a", "event", "previousSelectedSet", "previousSelected", "target", "rowItem", "changed", "config", "__decorateClass"]
|
|
7
|
+
}
|
package/src/TableBody.d.ts
CHANGED
|
@@ -4,6 +4,8 @@ import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-c
|
|
|
4
4
|
*/
|
|
5
5
|
export declare class TableBody extends SpectrumElement {
|
|
6
6
|
static get styles(): CSSResultArray;
|
|
7
|
+
constructor();
|
|
8
|
+
protected shouldHaveTabIndex(): void;
|
|
7
9
|
role: string;
|
|
8
10
|
protected render(): TemplateResult;
|
|
9
11
|
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
5
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
6
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
7
|
+
if (decorator = decorators[i])
|
|
8
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
9
|
+
if (kind && result)
|
|
10
|
+
__defProp(target, key, result);
|
|
11
|
+
return result;
|
|
12
|
+
};
|
|
13
|
+
import {
|
|
14
|
+
html,
|
|
15
|
+
SpectrumElement
|
|
16
|
+
} from "@spectrum-web-components/base";
|
|
17
|
+
import { property } from "@spectrum-web-components/base/src/decorators.js";
|
|
18
|
+
import styles from "./table-body.css.js";
|
|
19
|
+
import { MutationController } from "@lit-labs/observers/mutation_controller.js";
|
|
20
|
+
export class TableBody extends SpectrumElement {
|
|
21
|
+
constructor() {
|
|
22
|
+
super();
|
|
23
|
+
this.role = "rowgroup";
|
|
24
|
+
new MutationController(this, {
|
|
25
|
+
config: {
|
|
26
|
+
childList: true,
|
|
27
|
+
subtree: true
|
|
28
|
+
},
|
|
29
|
+
callback: () => {
|
|
30
|
+
requestAnimationFrame(() => {
|
|
31
|
+
this.shouldHaveTabIndex();
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
static get styles() {
|
|
37
|
+
return [styles];
|
|
38
|
+
}
|
|
39
|
+
shouldHaveTabIndex() {
|
|
40
|
+
if (this.offsetHeight < this.scrollHeight) {
|
|
41
|
+
this.tabIndex = 0;
|
|
42
|
+
} else {
|
|
43
|
+
this.removeAttribute("tabindex");
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
render() {
|
|
47
|
+
return html`
|
|
48
|
+
<slot></slot>
|
|
49
|
+
`;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
__decorateClass([
|
|
53
|
+
property({ reflect: true })
|
|
54
|
+
], TableBody.prototype, "role", 2);
|
|
55
|
+
//# sourceMappingURL=TableBody.dev.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["TableBody.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n CSSResultArray,\n html,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport styles from './table-body.css.js';\nimport { MutationController } from '@lit-labs/observers/mutation_controller.js';\n\n/**\n * @element sp-table\n */\nexport class TableBody extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n constructor() {\n super();\n new MutationController(this, {\n config: {\n childList: true,\n subtree: true,\n },\n callback: () => {\n requestAnimationFrame(() => {\n this.shouldHaveTabIndex();\n });\n },\n });\n }\n\n protected shouldHaveTabIndex(): void {\n if (this.offsetHeight < this.scrollHeight) {\n this.tabIndex = 0;\n } else {\n this.removeAttribute('tabindex');\n }\n }\n\n @property({ reflect: true })\n public role = 'rowgroup';\n\n protected override render(): TemplateResult {\n return html`\n <slot></slot>\n `;\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;AAWA;AAAA,EAEI;AAAA,EACA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB,OAAO,YAAY;AACnB,SAAS,0BAA0B;AAK5B,aAAM,kBAAkB,gBAAgB;AAAA,EAK3C,cAAc;AACV,UAAM;AAuBV,SAAO,OAAO;AAtBV,QAAI,mBAAmB,MAAM;AAAA,MACzB,QAAQ;AAAA,QACJ,WAAW;AAAA,QACX,SAAS;AAAA,MACb;AAAA,MACA,UAAU,MAAM;AACZ,8BAAsB,MAAM;AACxB,eAAK,mBAAmB;AAAA,QAC5B,CAAC;AAAA,MACL;AAAA,IACJ,CAAC;AAAA,EACL;AAAA,EAjBA,WAA2B,SAAyB;AAChD,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA,EAiBU,qBAA2B;AACjC,QAAI,KAAK,eAAe,KAAK,cAAc;AACvC,WAAK,WAAW;AAAA,IACpB,OAAO;AACH,WAAK,gBAAgB,UAAU;AAAA,IACnC;AAAA,EACJ;AAAA,EAKmB,SAAyB;AACxC,WAAO;AAAA;AAAA;AAAA,EAGX;AACJ;AAPW;AAAA,EADN,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GA5BlB,UA6BF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/src/TableBody.js
CHANGED
|
@@ -1,36 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
/*
|
|
3
|
-
Copyright 2022 Adobe. All rights reserved.
|
|
4
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
5
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
|
6
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
-
|
|
8
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
9
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
10
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
11
|
-
governing permissions and limitations under the License.
|
|
12
|
-
*/
|
|
13
|
-
import { html, SpectrumElement, } from '@spectrum-web-components/base';
|
|
14
|
-
import { property } from '@spectrum-web-components/base/src/decorators.js';
|
|
15
|
-
import styles from './table-body.css.js';
|
|
16
|
-
/**
|
|
17
|
-
* @element sp-table
|
|
18
|
-
*/
|
|
19
|
-
export class TableBody extends SpectrumElement {
|
|
20
|
-
constructor() {
|
|
21
|
-
super(...arguments);
|
|
22
|
-
this.role = 'rowgroup';
|
|
23
|
-
}
|
|
24
|
-
static get styles() {
|
|
25
|
-
return [styles];
|
|
26
|
-
}
|
|
27
|
-
render() {
|
|
28
|
-
return html `
|
|
1
|
+
"use strict";var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=(o,t,s,r)=>{for(var e=r>1?void 0:r?m(t,s):t,i=o.length-1,l;i>=0;i--)(l=o[i])&&(e=(r?l(t,s,e):l(e))||e);return r&&e&&a(t,s,e),e};import{html as n,SpectrumElement as p}from"@spectrum-web-components/base";import{property as c}from"@spectrum-web-components/base/src/decorators.js";import d from"./table-body.css.js";import{MutationController as h}from"@lit-labs/observers/mutation_controller.js";export class TableBody extends p{constructor(){super();this.role="rowgroup";new h(this,{config:{childList:!0,subtree:!0},callback:()=>{requestAnimationFrame(()=>{this.shouldHaveTabIndex()})}})}static get styles(){return[d]}shouldHaveTabIndex(){this.offsetHeight<this.scrollHeight?this.tabIndex=0:this.removeAttribute("tabindex")}render(){return n`
|
|
29
2
|
<slot></slot>
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
33
|
-
__decorate([
|
|
34
|
-
property({ reflect: true })
|
|
35
|
-
], TableBody.prototype, "role", void 0);
|
|
36
|
-
//# sourceMappingURL=TableBody.js.map
|
|
3
|
+
`}}u([c({reflect:!0})],TableBody.prototype,"role",2);
|
|
4
|
+
//# sourceMappingURL=TableBody.js.map
|