@spectrum-web-components/table 1.11.1-snapshot.20260129124754 → 1.11.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +61 -1
- package/custom-elements.json +82 -0
- package/package.json +5 -5
- package/src/Table.d.ts +18 -1
- package/src/Table.dev.js +47 -7
- package/src/Table.dev.js.map +2 -2
- package/src/Table.js +10 -9
- package/src/Table.js.map +3 -3
- package/src/TableCheckboxCell.d.ts +12 -1
- package/src/TableCheckboxCell.dev.js +28 -1
- package/src/TableCheckboxCell.dev.js.map +2 -2
- package/src/TableCheckboxCell.js +3 -3
- package/src/TableCheckboxCell.js.map +3 -3
package/README.md
CHANGED
|
@@ -93,6 +93,34 @@ A table consists of the following parts:
|
|
|
93
93
|
|
|
94
94
|
The `selects` attribute enables row selection functionality. When `selects="single"`, users can select one row at a time. When `selects="multiple"`, users can select multiple rows and a checkbox column is automatically added to the table header for select all functionality.
|
|
95
95
|
|
|
96
|
+
#### Accessible checkbox labels
|
|
97
|
+
|
|
98
|
+
When using selection, checkboxes are automatically given accessible labels for screen readers:
|
|
99
|
+
|
|
100
|
+
- **Header row checkbox**: Uses the `select-all-label` attribute (defaults to "Select All")
|
|
101
|
+
- **Body row checkboxes**: Uses the text content of the first `<sp-table-cell>` in each row
|
|
102
|
+
|
|
103
|
+
You can customize the header checkbox label using the `select-all-label` attribute:
|
|
104
|
+
|
|
105
|
+
```html demo
|
|
106
|
+
<sp-table selects="multiple" select-all-label="Select all files">
|
|
107
|
+
<sp-table-head>
|
|
108
|
+
<sp-table-head-cell>File name</sp-table-head-cell>
|
|
109
|
+
<sp-table-head-cell>Type</sp-table-head-cell>
|
|
110
|
+
</sp-table-head>
|
|
111
|
+
<sp-table-body>
|
|
112
|
+
<sp-table-row value="row1">
|
|
113
|
+
<sp-table-cell>Budget</sp-table-cell>
|
|
114
|
+
<sp-table-cell>PDF</sp-table-cell>
|
|
115
|
+
</sp-table-row>
|
|
116
|
+
<sp-table-row value="row2">
|
|
117
|
+
<sp-table-cell>Onboarding</sp-table-cell>
|
|
118
|
+
<sp-table-cell>XLS</sp-table-cell>
|
|
119
|
+
</sp-table-row>
|
|
120
|
+
</sp-table-body>
|
|
121
|
+
</sp-table>
|
|
122
|
+
```
|
|
123
|
+
|
|
96
124
|
```html demo
|
|
97
125
|
<sp-table selects="multiple" selected='["row1", "row2"]'>
|
|
98
126
|
<sp-table-head>
|
|
@@ -474,6 +502,14 @@ Please note that there is a bug when attempting to select all virtualised elemen
|
|
|
474
502
|
|
|
475
503
|
By default the `selected` property will surface an array of item indexes that are currently selected. However, when making a selection on a virtualized table, it can be useful to track selection as something other than indexes. To do so, set a custom method for the `itemValue` property. The `itemValue` method accepts an item and its index as arguments and should return the value you would like to track in the `selected` property.
|
|
476
504
|
|
|
505
|
+
##### Accessible labels for virtualized tables
|
|
506
|
+
|
|
507
|
+
For accessibility, each checkbox in a virtualized table needs an accessible label. By default, the label is "Select row N" where N is the row number. You can customize this using the `itemLabel` property to provide more meaningful labels based on your item data:
|
|
508
|
+
|
|
509
|
+
```javascript
|
|
510
|
+
table.itemLabel = (item, index) => item.name || `Select row ${index + 1}`;
|
|
511
|
+
```
|
|
512
|
+
|
|
477
513
|
```html-live
|
|
478
514
|
<sp-table
|
|
479
515
|
id="table-item-value-demo"
|
|
@@ -829,7 +865,31 @@ When using row selection:
|
|
|
829
865
|
|
|
830
866
|
- `aria-selected` is applied to selectable rows
|
|
831
867
|
- Selection state is announced to screen readers
|
|
832
|
-
- Checkboxes in selection cells are properly
|
|
868
|
+
- Checkboxes in selection cells are properly labelled for screen readers
|
|
869
|
+
|
|
870
|
+
##### Checkbox labeling
|
|
871
|
+
|
|
872
|
+
All selection checkboxes have accessible labels to comply with WCAG 4.1.2 (Name, Role, Value). The labels are applied via `aria-label` on the checkbox's internal input element.
|
|
873
|
+
|
|
874
|
+
| Checkbox location | Default label | Customization |
|
|
875
|
+
| --------------------------- | ------------------------- | -------------------------------- |
|
|
876
|
+
| Header (select all) | "Select All" | Use `select-all-label` attribute |
|
|
877
|
+
| Body rows (non-virtualized) | First cell's text content | Automatic |
|
|
878
|
+
| Body rows (virtualized) | "Select row N" | Use `itemLabel` property |
|
|
879
|
+
|
|
880
|
+
Example of customizing labels:
|
|
881
|
+
|
|
882
|
+
```html
|
|
883
|
+
<!-- Custom header checkbox label -->
|
|
884
|
+
<sp-table selects="multiple" select-all-label="Select all documents">
|
|
885
|
+
...
|
|
886
|
+
</sp-table>
|
|
887
|
+
```
|
|
888
|
+
|
|
889
|
+
```javascript
|
|
890
|
+
// Custom labels for virtualized tables
|
|
891
|
+
table.itemLabel = (item, index) => `Select ${item.fileName}`;
|
|
892
|
+
```
|
|
833
893
|
|
|
834
894
|
#### Keyboard navigation
|
|
835
895
|
|
package/custom-elements.json
CHANGED
|
@@ -164,6 +164,17 @@
|
|
|
164
164
|
"description": "An array of <sp-row> values that have been selected.",
|
|
165
165
|
"attribute": "selected"
|
|
166
166
|
},
|
|
167
|
+
{
|
|
168
|
+
"kind": "field",
|
|
169
|
+
"name": "selectAllLabel",
|
|
170
|
+
"type": {
|
|
171
|
+
"text": "string"
|
|
172
|
+
},
|
|
173
|
+
"privacy": "public",
|
|
174
|
+
"default": "'Select All'",
|
|
175
|
+
"description": "The accessible label for the \"select all\" checkbox in the table header.\nDefaults to 'Select All'.",
|
|
176
|
+
"attribute": "select-all-label"
|
|
177
|
+
},
|
|
167
178
|
{
|
|
168
179
|
"kind": "field",
|
|
169
180
|
"name": "selectedSet",
|
|
@@ -188,6 +199,13 @@
|
|
|
188
199
|
"description": "The value of an item. By default, it is set to the index of the sp-table-row.",
|
|
189
200
|
"attribute": "itemValue"
|
|
190
201
|
},
|
|
202
|
+
{
|
|
203
|
+
"kind": "field",
|
|
204
|
+
"name": "itemLabel",
|
|
205
|
+
"privacy": "public",
|
|
206
|
+
"description": "A function to extract the accessible label for a row's checkbox from an item.\nBy default, returns a generic label based on the row index.\nOverride this to provide more meaningful labels for accessibility in virtualized tables.",
|
|
207
|
+
"attribute": "itemLabel"
|
|
208
|
+
},
|
|
191
209
|
{
|
|
192
210
|
"kind": "field",
|
|
193
211
|
"name": "scroller",
|
|
@@ -278,6 +296,25 @@
|
|
|
278
296
|
"privacy": "private",
|
|
279
297
|
"readonly": true
|
|
280
298
|
},
|
|
299
|
+
{
|
|
300
|
+
"kind": "method",
|
|
301
|
+
"name": "getRowCheckboxLabel",
|
|
302
|
+
"privacy": "protected",
|
|
303
|
+
"return": {
|
|
304
|
+
"type": {
|
|
305
|
+
"text": "string"
|
|
306
|
+
}
|
|
307
|
+
},
|
|
308
|
+
"parameters": [
|
|
309
|
+
{
|
|
310
|
+
"name": "row",
|
|
311
|
+
"type": {
|
|
312
|
+
"text": "TableRow"
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
],
|
|
316
|
+
"description": "Gets the accessible label for a row's checkbox based on the first cell's text content.\nFalls back to using the row's value attribute if no cell content is available."
|
|
317
|
+
},
|
|
281
318
|
{
|
|
282
319
|
"kind": "method",
|
|
283
320
|
"name": "focus",
|
|
@@ -458,6 +495,15 @@
|
|
|
458
495
|
"description": "An array of <sp-row> values that have been selected.",
|
|
459
496
|
"fieldName": "selected"
|
|
460
497
|
},
|
|
498
|
+
{
|
|
499
|
+
"name": "select-all-label",
|
|
500
|
+
"type": {
|
|
501
|
+
"text": "string"
|
|
502
|
+
},
|
|
503
|
+
"default": "'Select All'",
|
|
504
|
+
"description": "The accessible label for the \"select all\" checkbox in the table header.\nDefaults to 'Select All'.",
|
|
505
|
+
"fieldName": "selectAllLabel"
|
|
506
|
+
},
|
|
461
507
|
{
|
|
462
508
|
"name": "items",
|
|
463
509
|
"type": {
|
|
@@ -472,6 +518,11 @@
|
|
|
472
518
|
"description": "The value of an item. By default, it is set to the index of the sp-table-row.",
|
|
473
519
|
"fieldName": "itemValue"
|
|
474
520
|
},
|
|
521
|
+
{
|
|
522
|
+
"name": "itemLabel",
|
|
523
|
+
"description": "A function to extract the accessible label for a row's checkbox from an item.\nBy default, returns a generic label based on the row index.\nOverride this to provide more meaningful labels for accessibility in virtualized tables.",
|
|
524
|
+
"fieldName": "itemLabel"
|
|
525
|
+
},
|
|
475
526
|
{
|
|
476
527
|
"name": "scroller",
|
|
477
528
|
"type": {
|
|
@@ -735,6 +786,17 @@
|
|
|
735
786
|
"attribute": "emphasized",
|
|
736
787
|
"reflects": true
|
|
737
788
|
},
|
|
789
|
+
{
|
|
790
|
+
"kind": "field",
|
|
791
|
+
"name": "label",
|
|
792
|
+
"type": {
|
|
793
|
+
"text": "string"
|
|
794
|
+
},
|
|
795
|
+
"privacy": "public",
|
|
796
|
+
"default": "''",
|
|
797
|
+
"description": "The accessible label for the checkbox. For header rows, this defaults to 'Select All'.\nFor body rows, this should be set to the text content of the first cell in the row.",
|
|
798
|
+
"attribute": "label"
|
|
799
|
+
},
|
|
738
800
|
{
|
|
739
801
|
"kind": "method",
|
|
740
802
|
"name": "click",
|
|
@@ -744,6 +806,17 @@
|
|
|
744
806
|
"text": "void"
|
|
745
807
|
}
|
|
746
808
|
}
|
|
809
|
+
},
|
|
810
|
+
{
|
|
811
|
+
"kind": "method",
|
|
812
|
+
"name": "updateInputAriaLabel",
|
|
813
|
+
"privacy": "private",
|
|
814
|
+
"return": {
|
|
815
|
+
"type": {
|
|
816
|
+
"text": "void"
|
|
817
|
+
}
|
|
818
|
+
},
|
|
819
|
+
"description": "Updates the aria-label on the checkbox's internal input element."
|
|
747
820
|
}
|
|
748
821
|
],
|
|
749
822
|
"attributes": [
|
|
@@ -803,6 +876,15 @@
|
|
|
803
876
|
},
|
|
804
877
|
"default": "false",
|
|
805
878
|
"fieldName": "emphasized"
|
|
879
|
+
},
|
|
880
|
+
{
|
|
881
|
+
"name": "label",
|
|
882
|
+
"type": {
|
|
883
|
+
"text": "string"
|
|
884
|
+
},
|
|
885
|
+
"default": "''",
|
|
886
|
+
"description": "The accessible label for the checkbox. For header rows, this defaults to 'Select All'.\nFor body rows, this should be set to the text content of the first cell in the row.",
|
|
887
|
+
"fieldName": "label"
|
|
806
888
|
}
|
|
807
889
|
],
|
|
808
890
|
"superclass": {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/table",
|
|
3
|
-
"version": "1.11.
|
|
3
|
+
"version": "1.11.2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -129,10 +129,10 @@
|
|
|
129
129
|
"dependencies": {
|
|
130
130
|
"@lit-labs/observers": "2.0.2",
|
|
131
131
|
"@lit-labs/virtualizer": "2.0.12",
|
|
132
|
-
"@spectrum-web-components/base": "1.11.
|
|
133
|
-
"@spectrum-web-components/checkbox": "1.11.
|
|
134
|
-
"@spectrum-web-components/icon": "1.11.
|
|
135
|
-
"@spectrum-web-components/icons-ui": "1.11.
|
|
132
|
+
"@spectrum-web-components/base": "1.11.2",
|
|
133
|
+
"@spectrum-web-components/checkbox": "1.11.2",
|
|
134
|
+
"@spectrum-web-components/icon": "1.11.2",
|
|
135
|
+
"@spectrum-web-components/icons-ui": "1.11.2"
|
|
136
136
|
},
|
|
137
137
|
"types": "./src/index.d.ts",
|
|
138
138
|
"customElements": "custom-elements.json",
|
package/src/Table.d.ts
CHANGED
|
@@ -13,6 +13,7 @@ import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from
|
|
|
13
13
|
import '@spectrum-web-components/table/sp-table-body.js';
|
|
14
14
|
import '@spectrum-web-components/table/sp-table-row.js';
|
|
15
15
|
import '@spectrum-web-components/table/sp-table-checkbox-cell.js';
|
|
16
|
+
import type { TableRow } from './TableRow.js';
|
|
16
17
|
export declare enum RowType {
|
|
17
18
|
ITEM = 0,
|
|
18
19
|
INFORMATION = 1
|
|
@@ -23,7 +24,7 @@ export interface TableItem extends Record<string, unknown> {
|
|
|
23
24
|
declare const Table_base: typeof SpectrumElement & {
|
|
24
25
|
new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
|
|
25
26
|
prototype: import("@spectrum-web-components/base").SizedElementInterface;
|
|
26
|
-
} & import("@spectrum-web-components/base").SizedElementConstructor;
|
|
27
|
+
} & import("@spectrum-web-components/core/shared/base/sizedMixin.js").SizedElementConstructor;
|
|
27
28
|
/**
|
|
28
29
|
* @element sp-table
|
|
29
30
|
*
|
|
@@ -44,6 +45,11 @@ export declare class Table extends Table_base {
|
|
|
44
45
|
* An array of <sp-row> values that have been selected.
|
|
45
46
|
*/
|
|
46
47
|
selected: string[];
|
|
48
|
+
/**
|
|
49
|
+
* The accessible label for the "select all" checkbox in the table header.
|
|
50
|
+
* Defaults to 'Select All'.
|
|
51
|
+
*/
|
|
52
|
+
selectAllLabel: string;
|
|
47
53
|
private selectedSet;
|
|
48
54
|
/**
|
|
49
55
|
* 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).
|
|
@@ -53,6 +59,12 @@ export declare class Table extends Table_base {
|
|
|
53
59
|
* The value of an item. By default, it is set to the index of the sp-table-row.
|
|
54
60
|
*/
|
|
55
61
|
itemValue: (_item: unknown, index: number) => string;
|
|
62
|
+
/**
|
|
63
|
+
* A function to extract the accessible label for a row's checkbox from an item.
|
|
64
|
+
* By default, returns a generic label based on the row index.
|
|
65
|
+
* Override this to provide more meaningful labels for accessibility in virtualized tables.
|
|
66
|
+
*/
|
|
67
|
+
itemLabel: (_item: Record<string, unknown>, index: number) => string;
|
|
56
68
|
/**
|
|
57
69
|
* 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.
|
|
58
70
|
*/
|
|
@@ -74,6 +86,11 @@ export declare class Table extends Table_base {
|
|
|
74
86
|
private get tableHead();
|
|
75
87
|
private get tableRows();
|
|
76
88
|
private get isVirtualized();
|
|
89
|
+
/**
|
|
90
|
+
* Gets the accessible label for a row's checkbox based on the first cell's text content.
|
|
91
|
+
* Falls back to using the row's value attribute if no cell content is available.
|
|
92
|
+
*/
|
|
93
|
+
protected getRowCheckboxLabel(row: TableRow): string;
|
|
77
94
|
focus(): void;
|
|
78
95
|
private selectAllRows;
|
|
79
96
|
private deselectAllRows;
|
package/src/Table.dev.js
CHANGED
|
@@ -44,11 +44,15 @@ export class Table extends SizedMixin(SpectrumElement, {
|
|
|
44
44
|
() => html``;
|
|
45
45
|
this.role = "grid";
|
|
46
46
|
this.selected = [];
|
|
47
|
+
this.selectAllLabel = "Select All";
|
|
47
48
|
this.selectedSet = /* @__PURE__ */ new Set();
|
|
48
49
|
this.items = [];
|
|
49
50
|
this.itemValue = (_item, index) => {
|
|
50
51
|
return `${index}`;
|
|
51
52
|
};
|
|
53
|
+
this.itemLabel = (_item, index) => {
|
|
54
|
+
return `Select row ${index + 1}`;
|
|
55
|
+
};
|
|
52
56
|
this.scroller = false;
|
|
53
57
|
this.emphasized = false;
|
|
54
58
|
this.quiet = false;
|
|
@@ -64,6 +68,7 @@ export class Table extends SizedMixin(SpectrumElement, {
|
|
|
64
68
|
const value = this.itemValue(item, index);
|
|
65
69
|
const selected = this.selected.includes(value);
|
|
66
70
|
const hasCheckbox = this.selects && (item == null ? void 0 : item._$rowType$) !== 1;
|
|
71
|
+
const checkboxLabel = hasCheckbox ? this.itemLabel(item, index) : "";
|
|
67
72
|
return html`
|
|
68
73
|
<sp-table-row
|
|
69
74
|
value=${value}
|
|
@@ -73,6 +78,7 @@ export class Table extends SizedMixin(SpectrumElement, {
|
|
|
73
78
|
${hasCheckbox ? html`
|
|
74
79
|
<sp-table-checkbox-cell
|
|
75
80
|
?checked=${selected}
|
|
81
|
+
label=${checkboxLabel}
|
|
76
82
|
></sp-table-checkbox-cell>
|
|
77
83
|
` : nothing}
|
|
78
84
|
${fn(item, index)}
|
|
@@ -92,6 +98,19 @@ export class Table extends SizedMixin(SpectrumElement, {
|
|
|
92
98
|
get isVirtualized() {
|
|
93
99
|
return !!this.items.length;
|
|
94
100
|
}
|
|
101
|
+
/**
|
|
102
|
+
* Gets the accessible label for a row's checkbox based on the first cell's text content.
|
|
103
|
+
* Falls back to using the row's value attribute if no cell content is available.
|
|
104
|
+
*/
|
|
105
|
+
getRowCheckboxLabel(row) {
|
|
106
|
+
var _a;
|
|
107
|
+
const firstCell = row.querySelector("sp-table-cell");
|
|
108
|
+
const cellText = (_a = firstCell == null ? void 0 : firstCell.textContent) == null ? void 0 : _a.trim();
|
|
109
|
+
if (cellText) {
|
|
110
|
+
return cellText;
|
|
111
|
+
}
|
|
112
|
+
return row.value ? `Select ${row.value}` : "Select row";
|
|
113
|
+
}
|
|
95
114
|
focus() {
|
|
96
115
|
const sortableHeadCell = this.querySelector(
|
|
97
116
|
"sp-table-head-cell[sortable]"
|
|
@@ -137,19 +156,26 @@ export class Table extends SizedMixin(SpectrumElement, {
|
|
|
137
156
|
var _a;
|
|
138
157
|
const checkboxes = this.querySelectorAll("sp-table-checkbox-cell");
|
|
139
158
|
const checkbox = document.createElement("sp-table-checkbox-cell");
|
|
140
|
-
if (
|
|
159
|
+
if (this.selects) {
|
|
141
160
|
let allSelected = false;
|
|
142
161
|
if (this.isVirtualized) {
|
|
143
162
|
allSelected = this.selected.length > 0 && this.selected.length === this.items.length;
|
|
144
163
|
} else {
|
|
145
164
|
this.tableRows.forEach((row) => {
|
|
146
165
|
row.selected = this.selectedSet.has(row.value);
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
166
|
+
let existingCheckbox = row.querySelector(
|
|
167
|
+
":scope > sp-table-checkbox-cell"
|
|
168
|
+
);
|
|
169
|
+
if (!existingCheckbox) {
|
|
170
|
+
existingCheckbox = checkbox.cloneNode();
|
|
171
|
+
row.insertAdjacentElement(
|
|
172
|
+
"afterbegin",
|
|
173
|
+
existingCheckbox
|
|
174
|
+
);
|
|
152
175
|
}
|
|
176
|
+
existingCheckbox.emphasized = this.emphasized;
|
|
177
|
+
existingCheckbox.label = this.getRowCheckboxLabel(row);
|
|
178
|
+
existingCheckbox.checked = row.selected;
|
|
153
179
|
});
|
|
154
180
|
allSelected = this.selected.length === this.tableRows.length;
|
|
155
181
|
}
|
|
@@ -159,10 +185,13 @@ export class Table extends SizedMixin(SpectrumElement, {
|
|
|
159
185
|
);
|
|
160
186
|
this.tableHeadCheckboxCell.headCell = true;
|
|
161
187
|
this.tableHeadCheckboxCell.emphasized = this.emphasized;
|
|
188
|
+
this.tableHeadCheckboxCell.label = this.selectAllLabel;
|
|
162
189
|
(_a = this.tableHead) == null ? void 0 : _a.insertAdjacentElement(
|
|
163
190
|
"afterbegin",
|
|
164
191
|
this.tableHeadCheckboxCell
|
|
165
192
|
);
|
|
193
|
+
} else {
|
|
194
|
+
this.tableHeadCheckboxCell.label = this.selectAllLabel;
|
|
166
195
|
}
|
|
167
196
|
this.manageHeadCheckbox(allSelected);
|
|
168
197
|
} else {
|
|
@@ -211,12 +240,13 @@ export class Table extends SizedMixin(SpectrumElement, {
|
|
|
211
240
|
}
|
|
212
241
|
manageCheckboxes() {
|
|
213
242
|
var _a, _b, _c;
|
|
214
|
-
if (
|
|
243
|
+
if (this.selects) {
|
|
215
244
|
this.tableHeadCheckboxCell = document.createElement(
|
|
216
245
|
"sp-table-checkbox-cell"
|
|
217
246
|
);
|
|
218
247
|
this.tableHeadCheckboxCell.headCell = true;
|
|
219
248
|
this.tableHeadCheckboxCell.emphasized = this.emphasized;
|
|
249
|
+
this.tableHeadCheckboxCell.label = this.selectAllLabel;
|
|
220
250
|
const allSelected = this.selected.length === this.tableRows.length;
|
|
221
251
|
this.manageHeadCheckbox(allSelected);
|
|
222
252
|
(_a = this.tableHead) == null ? void 0 : _a.insertAdjacentElement(
|
|
@@ -228,6 +258,7 @@ export class Table extends SizedMixin(SpectrumElement, {
|
|
|
228
258
|
"sp-table-checkbox-cell"
|
|
229
259
|
);
|
|
230
260
|
checkbox.emphasized = this.emphasized;
|
|
261
|
+
checkbox.label = this.getRowCheckboxLabel(row);
|
|
231
262
|
row.insertAdjacentElement("afterbegin", checkbox);
|
|
232
263
|
row.selected = this.selectedSet.has(row.value);
|
|
233
264
|
checkbox.checked = row.selected;
|
|
@@ -331,6 +362,9 @@ export class Table extends SizedMixin(SpectrumElement, {
|
|
|
331
362
|
if (changed.has("selected") && this.hasUpdated) {
|
|
332
363
|
this.manageSelected();
|
|
333
364
|
}
|
|
365
|
+
if (changed.has("selectAllLabel") && this.tableHeadCheckboxCell) {
|
|
366
|
+
this.tableHeadCheckboxCell.label = this.selectAllLabel;
|
|
367
|
+
}
|
|
334
368
|
}
|
|
335
369
|
updated() {
|
|
336
370
|
if (this.items.length) {
|
|
@@ -396,12 +430,18 @@ __decorateClass([
|
|
|
396
430
|
__decorateClass([
|
|
397
431
|
property({ type: Array })
|
|
398
432
|
], Table.prototype, "selected", 2);
|
|
433
|
+
__decorateClass([
|
|
434
|
+
property({ type: String, attribute: "select-all-label" })
|
|
435
|
+
], Table.prototype, "selectAllLabel", 2);
|
|
399
436
|
__decorateClass([
|
|
400
437
|
property({ type: Array })
|
|
401
438
|
], Table.prototype, "items", 2);
|
|
402
439
|
__decorateClass([
|
|
403
440
|
property({ type: Object })
|
|
404
441
|
], Table.prototype, "itemValue", 2);
|
|
442
|
+
__decorateClass([
|
|
443
|
+
property({ type: Object })
|
|
444
|
+
], Table.prototype, "itemLabel", 2);
|
|
405
445
|
__decorateClass([
|
|
406
446
|
property({ type: Boolean, reflect: true })
|
|
407
447
|
], Table.prototype, "scroller", 2);
|
package/src/Table.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Table.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n render,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\n// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225\nimport '@spectrum-web-components/table/sp-table-body.js';\nimport '@spectrum-web-components/table/sp-table-row.js';\nimport '@spectrum-web-components/table/sp-table-checkbox-cell.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport styles from './table.css.js';\nimport { TableBody } from './TableBody.dev.js'\nimport type { TableCheckboxCell } from './TableCheckboxCell.dev.js'\nimport type { TableHead } from './TableHead.dev.js'\nimport type { TableHeadCell } from './TableHeadCell.dev.js'\nimport type { TableRow } from './TableRow.dev.js'\nimport {\n virtualize,\n VirtualizeDirectiveConfig,\n virtualizerRef,\n} from '@lit-labs/virtualizer/virtualize.js';\nimport { Virtualizer } from '@lit-labs/virtualizer/Virtualizer.js';\nimport {\n RangeChangedEvent,\n VisibilityChangedEvent,\n} from '@lit-labs/virtualizer/events.js';\n\nexport enum RowType {\n ITEM = 0,\n INFORMATION = 1,\n}\n\nexport interface TableItem extends Record<string, unknown> {\n _$rowType$?: RowType;\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', 'l', 'xl'],\n noDefaultSize: true,\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 : nothing}\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 override 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 /**\n * Deliver the Table with additional visual emphasis to selected rows.\n */\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n /**\n * Display with \"quiet\" variant styles.\n */\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n /**\n * Changes the spacing around table cell content.\n */\n @property({ type: String, reflect: true })\n public density?: 'compact' | 'spacious';\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\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 // Create and initialize checkboxes in all rows within the table body.\n if (!row.querySelector(':scope > sp-table-checkbox-cell')) {\n const clonedCheckbox =\n checkbox.cloneNode() as TableCheckboxCell;\n checkbox.emphasized = this.emphasized;\n row.insertAdjacentElement('afterbegin', clonedCheckbox);\n checkbox.checked = row.selected;\n }\n });\n allSelected = this.selected.length === this.tableRows.length;\n }\n\n // Create and initialize table head checkbox cell.\n if (!this.tableHeadCheckboxCell) {\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n this.tableHeadCheckboxCell.headCell = true;\n this.tableHeadCheckboxCell.emphasized = this.emphasized;\n this.tableHead?.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n }\n this.manageHeadCheckbox(allSelected);\n } else {\n // Remove all checkbox cells.\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 // Create and initialize table head checkbox cell.\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n this.tableHeadCheckboxCell.headCell = true;\n this.tableHeadCheckboxCell.emphasized = this.emphasized;\n\n const allSelected = this.selected.length === this.tableRows.length;\n this.manageHeadCheckbox(allSelected);\n\n this.tableHead?.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n\n // Create and initialize checkboxes in all rows within the table body.\n this.tableRows.forEach((row) => {\n const checkbox = document.createElement(\n 'sp-table-checkbox-cell'\n );\n checkbox.emphasized = this.emphasized;\n row.insertAdjacentElement('afterbegin', checkbox);\n row.selected = this.selectedSet.has(row.value);\n checkbox.checked = row.selected;\n });\n } else {\n // Remove all checkbox cells.\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.emphasized = this.emphasized;\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) return;\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 && !!this.tableBody) {\n const virtualizerParent = this.tableBody as unknown as {\n [virtualizerRef]: Virtualizer;\n };\n const item = virtualizerParent[virtualizerRef].element(index);\n if (item) {\n item.scrollIntoView();\n }\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 } else {\n this.removeAttribute('aria-rowcount');\n }\n }\n\n protected renderVirtualizedItems(): 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 this.tableBody.addEventListener(\n 'visibilityChanged',\n (event: VisibilityChangedEvent) => {\n this.dispatchEvent(\n new VisibilityChangedEvent({\n first: event.first,\n last: event.last,\n })\n );\n }\n );\n }\n\n // Ensures screenreaders can announce the true size of the table\n // despite virtualization only rendering a subset of rows.\n this.setAttribute('aria-rowcount', `${this.items.length}`);\n\n const config: VirtualizeDirectiveConfig<Record<string, unknown>> = {\n items: this.items,\n renderItem: this.renderItem,\n scroller: this.scroller,\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": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OAEG;
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n render,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\n// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225\n/* eslint-disable import/no-extraneous-dependencies */\nimport '@spectrum-web-components/table/sp-table-body.js';\nimport '@spectrum-web-components/table/sp-table-row.js';\nimport '@spectrum-web-components/table/sp-table-checkbox-cell.js';\n/* eslint-enable import/no-extraneous-dependencies */\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport styles from './table.css.js';\nimport { TableBody } from './TableBody.dev.js'\nimport type { TableCheckboxCell } from './TableCheckboxCell.dev.js'\nimport type { TableHead } from './TableHead.dev.js'\nimport type { TableHeadCell } from './TableHeadCell.dev.js'\nimport type { TableRow } from './TableRow.dev.js'\nimport {\n virtualize,\n VirtualizeDirectiveConfig,\n virtualizerRef,\n} from '@lit-labs/virtualizer/virtualize.js';\nimport { Virtualizer } from '@lit-labs/virtualizer/Virtualizer.js';\nimport {\n RangeChangedEvent,\n VisibilityChangedEvent,\n} from '@lit-labs/virtualizer/events.js';\n\nexport enum RowType {\n ITEM = 0,\n INFORMATION = 1,\n}\n\nexport interface TableItem extends Record<string, unknown> {\n _$rowType$?: RowType;\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', 'l', 'xl'],\n noDefaultSize: true,\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 const checkboxLabel = hasCheckbox\n ? this.itemLabel(item, index)\n : '';\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 label=${checkboxLabel}\n ></sp-table-checkbox-cell>\n `\n : nothing}\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 override 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 /**\n * The accessible label for the \"select all\" checkbox in the table header.\n * Defaults to 'Select All'.\n */\n @property({ type: String, attribute: 'select-all-label' })\n public selectAllLabel = 'Select All';\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 * A function to extract the accessible label for a row's checkbox from an item.\n * By default, returns a generic label based on the row index.\n * Override this to provide more meaningful labels for accessibility in virtualized tables.\n */\n @property({ type: Object })\n public itemLabel = (\n _item: Record<string, unknown>,\n index: number\n ): string => {\n return `Select row ${index + 1}`;\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 /**\n * Deliver the Table with additional visual emphasis to selected rows.\n */\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n /**\n * Display with \"quiet\" variant styles.\n */\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n /**\n * Changes the spacing around table cell content.\n */\n @property({ type: String, reflect: true })\n public density?: 'compact' | 'spacious';\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 /**\n * Gets the accessible label for a row's checkbox based on the first cell's text content.\n * Falls back to using the row's value attribute if no cell content is available.\n */\n protected getRowCheckboxLabel(row: TableRow): string {\n const firstCell = row.querySelector('sp-table-cell');\n const cellText = firstCell?.textContent?.trim();\n if (cellText) {\n return cellText;\n }\n // Fallback to row value or a generic label\n return row.value ? `Select ${row.value}` : 'Select row';\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\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 // Create and initialize checkboxes in all rows within the table body.\n let existingCheckbox = row.querySelector(\n ':scope > sp-table-checkbox-cell'\n ) as TableCheckboxCell | null;\n if (!existingCheckbox) {\n existingCheckbox =\n checkbox.cloneNode() as TableCheckboxCell;\n row.insertAdjacentElement(\n 'afterbegin',\n existingCheckbox\n );\n }\n existingCheckbox.emphasized = this.emphasized;\n existingCheckbox.label = this.getRowCheckboxLabel(row);\n existingCheckbox.checked = row.selected;\n });\n allSelected = this.selected.length === this.tableRows.length;\n }\n\n // Create and initialize table head checkbox cell.\n if (!this.tableHeadCheckboxCell) {\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n this.tableHeadCheckboxCell.headCell = true;\n this.tableHeadCheckboxCell.emphasized = this.emphasized;\n this.tableHeadCheckboxCell.label = this.selectAllLabel;\n this.tableHead?.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n } else {\n // Update the label if it has changed.\n this.tableHeadCheckboxCell.label = this.selectAllLabel;\n }\n this.manageHeadCheckbox(allSelected);\n } else {\n // Remove all checkbox cells.\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 // Create and initialize table head checkbox cell.\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n this.tableHeadCheckboxCell.headCell = true;\n this.tableHeadCheckboxCell.emphasized = this.emphasized;\n this.tableHeadCheckboxCell.label = this.selectAllLabel;\n\n const allSelected = this.selected.length === this.tableRows.length;\n this.manageHeadCheckbox(allSelected);\n\n this.tableHead?.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n\n // Create and initialize checkboxes in all rows within the table body.\n this.tableRows.forEach((row) => {\n const checkbox = document.createElement(\n 'sp-table-checkbox-cell'\n );\n checkbox.emphasized = this.emphasized;\n checkbox.label = this.getRowCheckboxLabel(row);\n row.insertAdjacentElement('afterbegin', checkbox);\n row.selected = this.selectedSet.has(row.value);\n checkbox.checked = row.selected;\n });\n } else {\n // Remove all checkbox cells.\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.emphasized = this.emphasized;\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) return;\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 && !!this.tableBody) {\n const virtualizerParent = this.tableBody as unknown as {\n [virtualizerRef]: Virtualizer;\n };\n const item = virtualizerParent[virtualizerRef].element(index);\n if (item) {\n item.scrollIntoView();\n }\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 if (changed.has('selectAllLabel') && this.tableHeadCheckboxCell) {\n this.tableHeadCheckboxCell.label = this.selectAllLabel;\n }\n }\n\n protected override updated(): void {\n if (this.items.length) {\n this.renderVirtualizedItems();\n } else {\n this.removeAttribute('aria-rowcount');\n }\n }\n\n protected renderVirtualizedItems(): 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 this.tableBody.addEventListener(\n 'visibilityChanged',\n (event: VisibilityChangedEvent) => {\n this.dispatchEvent(\n new VisibilityChangedEvent({\n first: event.first,\n last: event.last,\n })\n );\n }\n );\n }\n\n // Ensures screenreaders can announce the true size of the table\n // despite virtualization only rendering a subset of rows.\n this.setAttribute('aria-rowcount', `${this.items.length}`);\n\n const config: VirtualizeDirectiveConfig<Record<string, unknown>> = {\n items: this.items,\n renderItem: this.renderItem,\n scroller: this.scroller,\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
6
|
"names": ["RowType", "_a"]
|
|
7
7
|
}
|
package/src/Table.js
CHANGED
|
@@ -1,19 +1,20 @@
|
|
|
1
|
-
"use strict";var b=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var
|
|
1
|
+
"use strict";var b=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var c=(n,o,e,t)=>{for(var l=t>1?void 0:t?u(o,e):o,i=n.length-1,s;i>=0;i--)(s=n[i])&&(l=(t?s(o,e,l):s(l))||l);return t&&l&&b(o,e,l),l};import{html as d,nothing as p,render as m,SizedMixin as C,SpectrumElement as f}from"@spectrum-web-components/base";import"@spectrum-web-components/table/sp-table-body.js";import"@spectrum-web-components/table/sp-table-row.js";import"@spectrum-web-components/table/sp-table-checkbox-cell.js";import{property as r}from"@spectrum-web-components/base/src/decorators.js";import k from"./table.css.js";import{virtualize as g,virtualizerRef as x}from"@lit-labs/virtualizer/virtualize.js";import{RangeChangedEvent as v,VisibilityChangedEvent as S}from"@lit-labs/virtualizer/events.js";export var RowType=(e=>(e[e.ITEM=0]="ITEM",e[e.INFORMATION=1]="INFORMATION",e))(RowType||{});export class Table extends C(f,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments);this._renderItem=()=>d``;this.role="grid";this.selected=[];this.selectAllLabel="Select All";this.selectedSet=new Set;this.items=[];this.itemValue=(e,t)=>`${t}`;this.itemLabel=(e,t)=>`Select row ${t+1}`;this.scroller=!1;this.emphasized=!1;this.quiet=!1}static get styles(){return[k]}get renderItem(){return this._renderItem}set renderItem(e){this._renderItem=(t,l)=>{const i=this.itemValue(t,l),s=this.selected.includes(i),a=this.selects&&(t==null?void 0:t._$rowType$)!==1,h=a?this.itemLabel(t,l):"";return d`
|
|
2
2
|
<sp-table-row
|
|
3
3
|
value=${i}
|
|
4
|
-
aria-rowindex=${
|
|
5
|
-
?selected=${
|
|
4
|
+
aria-rowindex=${l+1}
|
|
5
|
+
?selected=${s}
|
|
6
6
|
>
|
|
7
|
-
${
|
|
7
|
+
${a?d`
|
|
8
8
|
<sp-table-checkbox-cell
|
|
9
|
-
?checked=${
|
|
9
|
+
?checked=${s}
|
|
10
|
+
label=${h}
|
|
10
11
|
></sp-table-checkbox-cell>
|
|
11
12
|
`:p}
|
|
12
|
-
${e(t,
|
|
13
|
+
${e(t,l)}
|
|
13
14
|
</sp-table-row>
|
|
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,t)=>{e._$rowType$!==1&&this.selectedSet.add(this.itemValue(e,t))}):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(t=>{t.selected=!1}),this.tableHeadCheckboxCell&&(this.tableHeadCheckboxCell.checked=!1,this.tableHeadCheckboxCell.indeterminate=!1)}manageSelects(){var
|
|
15
|
+
`}}get tableHead(){return this.querySelector("sp-table-head")}get tableRows(){return this.isVirtualized?[]:[...this.querySelectorAll("sp-table-row")]}get isVirtualized(){return!!this.items.length}getRowCheckboxLabel(e){var i;const t=e.querySelector("sp-table-cell"),l=(i=t==null?void 0:t.textContent)==null?void 0:i.trim();return l||(e.value?`Select ${e.value}`:"Select row")}focus(){const e=this.querySelector("sp-table-head-cell[sortable]");e&&e.focus()}selectAllRows(){this.isVirtualized?this.items.forEach((e,t)=>{e._$rowType$!==1&&this.selectedSet.add(this.itemValue(e,t))}):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(t=>{t.selected=!1}),this.tableHeadCheckboxCell&&(this.tableHeadCheckboxCell.checked=!1,this.tableHeadCheckboxCell.indeterminate=!1)}manageSelects(){var l;const e=this.querySelectorAll("sp-table-checkbox-cell"),t=document.createElement("sp-table-checkbox-cell");if(this.selects){let i=!1;this.isVirtualized?i=this.selected.length>0&&this.selected.length===this.items.length:(this.tableRows.forEach(s=>{s.selected=this.selectedSet.has(s.value);let a=s.querySelector(":scope > sp-table-checkbox-cell");a||(a=t.cloneNode(),s.insertAdjacentElement("afterbegin",a)),a.emphasized=this.emphasized,a.label=this.getRowCheckboxLabel(s),a.checked=s.selected}),i=this.selected.length===this.tableRows.length),this.tableHeadCheckboxCell?this.tableHeadCheckboxCell.label=this.selectAllLabel:(this.tableHeadCheckboxCell=document.createElement("sp-table-checkbox-cell"),this.tableHeadCheckboxCell.headCell=!0,this.tableHeadCheckboxCell.emphasized=this.emphasized,this.tableHeadCheckboxCell.label=this.selectAllLabel,(l=this.tableHead)==null||l.insertAdjacentElement("afterbegin",this.tableHeadCheckboxCell)),this.manageHeadCheckbox(i)}else e.forEach(i=>{i.remove()}),delete this.tableHeadCheckboxCell}validateSelected(){const e=new Set;this.isVirtualized?this.items.forEach((l,i)=>{const s=this.itemValue(l,i);e.add(s)}):this.tableRows.forEach(l=>{e.add(l.value)});const t=this.selected.length;this.selected=this.selected.filter(l=>e.has(l)),t!==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,t,l;if(this.selects){this.tableHeadCheckboxCell=document.createElement("sp-table-checkbox-cell"),this.tableHeadCheckboxCell.headCell=!0,this.tableHeadCheckboxCell.emphasized=this.emphasized,this.tableHeadCheckboxCell.label=this.selectAllLabel;const i=this.selected.length===this.tableRows.length;this.manageHeadCheckbox(i),(e=this.tableHead)==null||e.insertAdjacentElement("afterbegin",this.tableHeadCheckboxCell),this.tableRows.forEach(s=>{const a=document.createElement("sp-table-checkbox-cell");a.emphasized=this.emphasized,a.label=this.getRowCheckboxLabel(s),s.insertAdjacentElement("afterbegin",a),s.selected=this.selectedSet.has(s.value),a.checked=s.selected})}else(l=(t=this.tableHead)==null?void 0:t.querySelector("sp-table-checkbox-cell"))==null||l.remove(),this.tableRows.forEach(i=>{var s;(s=i.checkboxCells[0])==null||s.remove(),this.selected.length&&(i.selected=this.selectedSet.has(i.value))})}manageHeadCheckbox(e){this.tableHeadCheckboxCell&&(this.tableHeadCheckboxCell.selectsSingle=this.selects==="single",this.tableHeadCheckboxCell.emphasized=this.emphasized,this.tableHeadCheckboxCell.checked=e,this.tableHeadCheckboxCell.indeterminate=this.selected.length>0&&!e)}handleChange(e){e.stopPropagation();const t=new Set(this.selectedSet),l=[...this.selected],{target:i}=e,{parentElement:s}=i;if(s.value)switch(this.selects){case"single":{this.deselectAllRows(),s.selected&&(this.selectedSet.add(s.value),this.selected=[...this.selectedSet]);break}case"multiple":{s.selected?this.selectedSet.add(s.value):this.selectedSet.delete(s.value),this.selected=[...this.selectedSet];const h=this.selected.length===this.tableRows.length;if(!this.tableHeadCheckboxCell)return;this.tableHeadCheckboxCell.checked=h,this.tableHeadCheckboxCell.indeterminate=this.selected.length>0&&!h;break}default:break}else{const{checkbox:h}=i;if(!h)return;h.checked||h.indeterminate?this.selectAllRows():this.deselectAllRows()}this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0,composed:!0}))||(e.preventDefault(),this.selectedSet=t,this.selected=l)}scrollToIndex(e){if(e&&this.tableBody){const l=this.tableBody[x].element(e);l&&l.scrollIntoView()}}render(){return d`
|
|
15
16
|
<slot @change=${this.handleChange}></slot>
|
|
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():this.removeAttribute("aria-rowcount")}renderVirtualizedItems(){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
|
|
17
|
+
`}willUpdate(e){this.hasUpdated||(this.validateSelected(),this.manageCheckboxes()),e.has("selects")&&this.manageSelects(),e.has("selected")&&this.hasUpdated&&this.manageSelected(),e.has("selectAllLabel")&&this.tableHeadCheckboxCell&&(this.tableHeadCheckboxCell.label=this.selectAllLabel)}updated(){this.items.length?this.renderVirtualizedItems():this.removeAttribute("aria-rowcount")}renderVirtualizedItems(){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 v({first:t.first,last:t.last}))}),this.tableBody.addEventListener("visibilityChanged",t=>{this.dispatchEvent(new S({first:t.first,last:t.last}))})),this.setAttribute("aria-rowcount",`${this.items.length}`);const e={items:this.items,renderItem:this.renderItem,scroller:this.scroller};m(d`
|
|
17
18
|
${g(e)}
|
|
18
|
-
`,this.tableBody)}disconnectedCallback(){super.disconnectedCallback()}}
|
|
19
|
+
`,this.tableBody)}disconnectedCallback(){super.disconnectedCallback()}}c([r({reflect:!0})],Table.prototype,"role",2),c([r({type:String,reflect:!0})],Table.prototype,"selects",2),c([r({type:Array})],Table.prototype,"selected",2),c([r({type:String,attribute:"select-all-label"})],Table.prototype,"selectAllLabel",2),c([r({type:Array})],Table.prototype,"items",2),c([r({type:Object})],Table.prototype,"itemValue",2),c([r({type:Object})],Table.prototype,"itemLabel",2),c([r({type:Boolean,reflect:!0})],Table.prototype,"scroller",2),c([r({type:Boolean,reflect:!0})],Table.prototype,"emphasized",2),c([r({type:Boolean,reflect:!0})],Table.prototype,"quiet",2),c([r({type:String,reflect:!0})],Table.prototype,"density",2);
|
|
19
20
|
//# sourceMappingURL=Table.js.map
|
package/src/Table.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Table.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n render,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\n// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225\nimport '@spectrum-web-components/table/sp-table-body.js';\nimport '@spectrum-web-components/table/sp-table-row.js';\nimport '@spectrum-web-components/table/sp-table-checkbox-cell.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 virtualizerRef,\n} from '@lit-labs/virtualizer/virtualize.js';\nimport { Virtualizer } from '@lit-labs/virtualizer/Virtualizer.js';\nimport {\n RangeChangedEvent,\n VisibilityChangedEvent,\n} from '@lit-labs/virtualizer/events.js';\n\nexport enum RowType {\n ITEM = 0,\n INFORMATION = 1,\n}\n\nexport interface TableItem extends Record<string, unknown> {\n _$rowType$?: RowType;\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', 'l', 'xl'],\n noDefaultSize: true,\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 : nothing}\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 override 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 /**\n * Deliver the Table with additional visual emphasis to selected rows.\n */\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n /**\n * Display with \"quiet\" variant styles.\n */\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n /**\n * Changes the spacing around table cell content.\n */\n @property({ type: String, reflect: true })\n public density?: 'compact' | 'spacious';\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\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 // Create and initialize checkboxes in all rows within the table body.\n if (!row.querySelector(':scope > sp-table-checkbox-cell')) {\n const clonedCheckbox =\n checkbox.cloneNode() as TableCheckboxCell;\n checkbox.emphasized = this.emphasized;\n row.insertAdjacentElement('afterbegin', clonedCheckbox);\n checkbox.checked = row.selected;\n }\n });\n allSelected = this.selected.length === this.tableRows.length;\n }\n\n // Create and initialize table head checkbox cell.\n if (!this.tableHeadCheckboxCell) {\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n this.tableHeadCheckboxCell.headCell = true;\n this.tableHeadCheckboxCell.emphasized = this.emphasized;\n this.tableHead?.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n }\n this.manageHeadCheckbox(allSelected);\n } else {\n // Remove all checkbox cells.\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 // Create and initialize table head checkbox cell.\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n this.tableHeadCheckboxCell.headCell = true;\n this.tableHeadCheckboxCell.emphasized = this.emphasized;\n\n const allSelected = this.selected.length === this.tableRows.length;\n this.manageHeadCheckbox(allSelected);\n\n this.tableHead?.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n\n // Create and initialize checkboxes in all rows within the table body.\n this.tableRows.forEach((row) => {\n const checkbox = document.createElement(\n 'sp-table-checkbox-cell'\n );\n checkbox.emphasized = this.emphasized;\n row.insertAdjacentElement('afterbegin', checkbox);\n row.selected = this.selectedSet.has(row.value);\n checkbox.checked = row.selected;\n });\n } else {\n // Remove all checkbox cells.\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.emphasized = this.emphasized;\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) return;\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 && !!this.tableBody) {\n const virtualizerParent = this.tableBody as unknown as {\n [virtualizerRef]: Virtualizer;\n };\n const item = virtualizerParent[virtualizerRef].element(index);\n if (item) {\n item.scrollIntoView();\n }\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 } else {\n this.removeAttribute('aria-rowcount');\n }\n }\n\n protected renderVirtualizedItems(): 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 this.tableBody.addEventListener(\n 'visibilityChanged',\n (event: VisibilityChangedEvent) => {\n this.dispatchEvent(\n new VisibilityChangedEvent({\n first: event.first,\n last: event.last,\n })\n );\n }\n );\n }\n\n // Ensures screenreaders can announce the true size of the table\n // despite virtualization only rendering a subset of rows.\n this.setAttribute('aria-rowcount', `${this.items.length}`);\n\n const config: VirtualizeDirectiveConfig<Record<string, unknown>> = {\n items: this.items,\n renderItem: this.renderItem,\n scroller: this.scroller,\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": "qNAYA,OAEI,QAAAA,EACA,WAAAC,EAEA,UAAAC,EACA,cAAAC,EACA,mBAAAC,MAEG,
|
|
6
|
-
"names": ["html", "nothing", "render", "SizedMixin", "SpectrumElement", "property", "styles", "virtualize", "virtualizerRef", "RangeChangedEvent", "VisibilityChangedEvent", "RowType", "_item", "index", "fn", "item", "value", "selected", "hasCheckbox", "
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n render,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\n// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225\n/* eslint-disable import/no-extraneous-dependencies */\nimport '@spectrum-web-components/table/sp-table-body.js';\nimport '@spectrum-web-components/table/sp-table-row.js';\nimport '@spectrum-web-components/table/sp-table-checkbox-cell.js';\n/* eslint-enable import/no-extraneous-dependencies */\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 virtualizerRef,\n} from '@lit-labs/virtualizer/virtualize.js';\nimport { Virtualizer } from '@lit-labs/virtualizer/Virtualizer.js';\nimport {\n RangeChangedEvent,\n VisibilityChangedEvent,\n} from '@lit-labs/virtualizer/events.js';\n\nexport enum RowType {\n ITEM = 0,\n INFORMATION = 1,\n}\n\nexport interface TableItem extends Record<string, unknown> {\n _$rowType$?: RowType;\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', 'l', 'xl'],\n noDefaultSize: true,\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 const checkboxLabel = hasCheckbox\n ? this.itemLabel(item, index)\n : '';\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 label=${checkboxLabel}\n ></sp-table-checkbox-cell>\n `\n : nothing}\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 override 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 /**\n * The accessible label for the \"select all\" checkbox in the table header.\n * Defaults to 'Select All'.\n */\n @property({ type: String, attribute: 'select-all-label' })\n public selectAllLabel = 'Select All';\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 * A function to extract the accessible label for a row's checkbox from an item.\n * By default, returns a generic label based on the row index.\n * Override this to provide more meaningful labels for accessibility in virtualized tables.\n */\n @property({ type: Object })\n public itemLabel = (\n _item: Record<string, unknown>,\n index: number\n ): string => {\n return `Select row ${index + 1}`;\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 /**\n * Deliver the Table with additional visual emphasis to selected rows.\n */\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n /**\n * Display with \"quiet\" variant styles.\n */\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n /**\n * Changes the spacing around table cell content.\n */\n @property({ type: String, reflect: true })\n public density?: 'compact' | 'spacious';\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 /**\n * Gets the accessible label for a row's checkbox based on the first cell's text content.\n * Falls back to using the row's value attribute if no cell content is available.\n */\n protected getRowCheckboxLabel(row: TableRow): string {\n const firstCell = row.querySelector('sp-table-cell');\n const cellText = firstCell?.textContent?.trim();\n if (cellText) {\n return cellText;\n }\n // Fallback to row value or a generic label\n return row.value ? `Select ${row.value}` : 'Select row';\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\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 // Create and initialize checkboxes in all rows within the table body.\n let existingCheckbox = row.querySelector(\n ':scope > sp-table-checkbox-cell'\n ) as TableCheckboxCell | null;\n if (!existingCheckbox) {\n existingCheckbox =\n checkbox.cloneNode() as TableCheckboxCell;\n row.insertAdjacentElement(\n 'afterbegin',\n existingCheckbox\n );\n }\n existingCheckbox.emphasized = this.emphasized;\n existingCheckbox.label = this.getRowCheckboxLabel(row);\n existingCheckbox.checked = row.selected;\n });\n allSelected = this.selected.length === this.tableRows.length;\n }\n\n // Create and initialize table head checkbox cell.\n if (!this.tableHeadCheckboxCell) {\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n this.tableHeadCheckboxCell.headCell = true;\n this.tableHeadCheckboxCell.emphasized = this.emphasized;\n this.tableHeadCheckboxCell.label = this.selectAllLabel;\n this.tableHead?.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n } else {\n // Update the label if it has changed.\n this.tableHeadCheckboxCell.label = this.selectAllLabel;\n }\n this.manageHeadCheckbox(allSelected);\n } else {\n // Remove all checkbox cells.\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 // Create and initialize table head checkbox cell.\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n this.tableHeadCheckboxCell.headCell = true;\n this.tableHeadCheckboxCell.emphasized = this.emphasized;\n this.tableHeadCheckboxCell.label = this.selectAllLabel;\n\n const allSelected = this.selected.length === this.tableRows.length;\n this.manageHeadCheckbox(allSelected);\n\n this.tableHead?.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n\n // Create and initialize checkboxes in all rows within the table body.\n this.tableRows.forEach((row) => {\n const checkbox = document.createElement(\n 'sp-table-checkbox-cell'\n );\n checkbox.emphasized = this.emphasized;\n checkbox.label = this.getRowCheckboxLabel(row);\n row.insertAdjacentElement('afterbegin', checkbox);\n row.selected = this.selectedSet.has(row.value);\n checkbox.checked = row.selected;\n });\n } else {\n // Remove all checkbox cells.\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.emphasized = this.emphasized;\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) return;\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 && !!this.tableBody) {\n const virtualizerParent = this.tableBody as unknown as {\n [virtualizerRef]: Virtualizer;\n };\n const item = virtualizerParent[virtualizerRef].element(index);\n if (item) {\n item.scrollIntoView();\n }\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 if (changed.has('selectAllLabel') && this.tableHeadCheckboxCell) {\n this.tableHeadCheckboxCell.label = this.selectAllLabel;\n }\n }\n\n protected override updated(): void {\n if (this.items.length) {\n this.renderVirtualizedItems();\n } else {\n this.removeAttribute('aria-rowcount');\n }\n }\n\n protected renderVirtualizedItems(): 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 this.tableBody.addEventListener(\n 'visibilityChanged',\n (event: VisibilityChangedEvent) => {\n this.dispatchEvent(\n new VisibilityChangedEvent({\n first: event.first,\n last: event.last,\n })\n );\n }\n );\n }\n\n // Ensures screenreaders can announce the true size of the table\n // despite virtualization only rendering a subset of rows.\n this.setAttribute('aria-rowcount', `${this.items.length}`);\n\n const config: VirtualizeDirectiveConfig<Record<string, unknown>> = {\n items: this.items,\n renderItem: this.renderItem,\n scroller: this.scroller,\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", "nothing", "render", "SizedMixin", "SpectrumElement", "property", "styles", "virtualize", "virtualizerRef", "RangeChangedEvent", "VisibilityChangedEvent", "RowType", "_item", "index", "fn", "item", "value", "selected", "hasCheckbox", "checkboxLabel", "row", "_a", "firstCell", "cellText", "sortableHeadCell", "checkboxes", "checkbox", "allSelected", "existingCheckbox", "box", "rowValues", "oldSelectedCount", "selectedItem", "_b", "_c", "event", "previousSelectedSet", "previousSelected", "target", "rowItem", "changed", "config", "__decorateClass"]
|
|
7
7
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
|
-
import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
12
|
+
import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
13
13
|
import '@spectrum-web-components/checkbox/sp-checkbox.js';
|
|
14
14
|
import { Checkbox } from '@spectrum-web-components/checkbox';
|
|
15
15
|
/**
|
|
@@ -28,6 +28,17 @@ export declare class TableCheckboxCell extends SpectrumElement {
|
|
|
28
28
|
disabled: boolean;
|
|
29
29
|
selectsSingle: boolean;
|
|
30
30
|
emphasized: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* The accessible label for the checkbox. For header rows, this defaults to 'Select All'.
|
|
33
|
+
* For body rows, this should be set to the text content of the first cell in the row.
|
|
34
|
+
*/
|
|
35
|
+
label: string;
|
|
31
36
|
click(): void;
|
|
37
|
+
/**
|
|
38
|
+
* Updates the aria-label on the checkbox's internal input element.
|
|
39
|
+
*/
|
|
40
|
+
private updateInputAriaLabel;
|
|
41
|
+
protected updated(changed: PropertyValues): Promise<void>;
|
|
42
|
+
protected firstUpdated(changed: PropertyValues): Promise<void>;
|
|
32
43
|
protected render(): TemplateResult;
|
|
33
44
|
}
|
|
@@ -30,6 +30,7 @@ export class TableCheckboxCell extends SpectrumElement {
|
|
|
30
30
|
this.disabled = false;
|
|
31
31
|
this.selectsSingle = false;
|
|
32
32
|
this.emphasized = false;
|
|
33
|
+
this.label = "";
|
|
33
34
|
}
|
|
34
35
|
static get styles() {
|
|
35
36
|
return [styles];
|
|
@@ -37,6 +38,29 @@ export class TableCheckboxCell extends SpectrumElement {
|
|
|
37
38
|
click() {
|
|
38
39
|
this.checkbox.click();
|
|
39
40
|
}
|
|
41
|
+
/**
|
|
42
|
+
* Updates the aria-label on the checkbox's internal input element.
|
|
43
|
+
*/
|
|
44
|
+
updateInputAriaLabel() {
|
|
45
|
+
var _a;
|
|
46
|
+
if (((_a = this.checkbox) == null ? void 0 : _a.inputElement) && this.label) {
|
|
47
|
+
this.checkbox.inputElement.setAttribute("aria-label", this.label);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
async updated(changed) {
|
|
51
|
+
var _a;
|
|
52
|
+
super.updated(changed);
|
|
53
|
+
if (changed.has("label")) {
|
|
54
|
+
await ((_a = this.checkbox) == null ? void 0 : _a.updateComplete);
|
|
55
|
+
this.updateInputAriaLabel();
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
async firstUpdated(changed) {
|
|
59
|
+
var _a;
|
|
60
|
+
super.firstUpdated(changed);
|
|
61
|
+
await ((_a = this.checkbox) == null ? void 0 : _a.updateComplete);
|
|
62
|
+
this.updateInputAriaLabel();
|
|
63
|
+
}
|
|
40
64
|
render() {
|
|
41
65
|
return html`
|
|
42
66
|
<sp-checkbox
|
|
@@ -44,7 +68,7 @@ export class TableCheckboxCell extends SpectrumElement {
|
|
|
44
68
|
?indeterminate=${this.indeterminate}
|
|
45
69
|
?disabled=${this.disabled}
|
|
46
70
|
?emphasized=${this.emphasized}
|
|
47
|
-
aria-hidden=${ifDefined(this.selectsSingle)}
|
|
71
|
+
aria-hidden=${ifDefined(this.selectsSingle ? true : void 0)}
|
|
48
72
|
class="checkbox"
|
|
49
73
|
></sp-checkbox>
|
|
50
74
|
`;
|
|
@@ -74,4 +98,7 @@ __decorateClass([
|
|
|
74
98
|
__decorateClass([
|
|
75
99
|
property({ type: Boolean, reflect: true })
|
|
76
100
|
], TableCheckboxCell.prototype, "emphasized", 2);
|
|
101
|
+
__decorateClass([
|
|
102
|
+
property({ type: String })
|
|
103
|
+
], TableCheckboxCell.prototype, "label", 2);
|
|
77
104
|
//# sourceMappingURL=TableCheckboxCell.dev.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["TableCheckboxCell.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {\n CSSResultArray,\n html,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport styles from './table-checkbox-cell.css.js';\nimport { Checkbox } from '@spectrum-web-components/checkbox';\n\n/**\n * @element sp-table-checkbox-cell\n */\nexport class TableCheckboxCell extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n /**\n * Whether or not the checkbox cell is in the table head.\n */\n @property({ type: Boolean, reflect: true, attribute: 'head-cell' })\n public headCell = false;\n\n @property({ reflect: true })\n public override role = 'gridcell';\n\n @query('.checkbox')\n public checkbox!: Checkbox;\n\n @property({ type: Boolean })\n public indeterminate = false;\n\n @property({ type: Boolean })\n public checked = false;\n\n @property({ type: Boolean })\n public disabled = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'selects-single' })\n public selectsSingle = false;\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n public override click(): void {\n this.checkbox.click();\n }\n\n protected override render(): TemplateResult {\n return html`\n <sp-checkbox\n ?checked=${this.checked}\n ?indeterminate=${this.indeterminate}\n ?disabled=${this.disabled}\n ?emphasized=${this.emphasized}\n aria-hidden=${ifDefined(this.selectsSingle)}\n class=\"checkbox\"\n ></sp-checkbox>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;AAWA;AAAA,EAEI;AAAA,
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport styles from './table-checkbox-cell.css.js';\nimport { Checkbox } from '@spectrum-web-components/checkbox';\n\n/**\n * @element sp-table-checkbox-cell\n */\nexport class TableCheckboxCell extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n /**\n * Whether or not the checkbox cell is in the table head.\n */\n @property({ type: Boolean, reflect: true, attribute: 'head-cell' })\n public headCell = false;\n\n @property({ reflect: true })\n public override role = 'gridcell';\n\n @query('.checkbox')\n public checkbox!: Checkbox;\n\n @property({ type: Boolean })\n public indeterminate = false;\n\n @property({ type: Boolean })\n public checked = false;\n\n @property({ type: Boolean })\n public disabled = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'selects-single' })\n public selectsSingle = false;\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n /**\n * The accessible label for the checkbox. For header rows, this defaults to 'Select All'.\n * For body rows, this should be set to the text content of the first cell in the row.\n */\n @property({ type: String })\n public label = '';\n\n public override click(): void {\n this.checkbox.click();\n }\n\n /**\n * Updates the aria-label on the checkbox's internal input element.\n */\n private updateInputAriaLabel(): void {\n if (this.checkbox?.inputElement && this.label) {\n this.checkbox.inputElement.setAttribute('aria-label', this.label);\n }\n }\n\n protected override async updated(changed: PropertyValues): Promise<void> {\n super.updated(changed);\n if (changed.has('label')) {\n // Wait for the checkbox to render before updating aria-label.\n await this.checkbox?.updateComplete;\n this.updateInputAriaLabel();\n }\n }\n\n protected override async firstUpdated(\n changed: PropertyValues\n ): Promise<void> {\n super.firstUpdated(changed);\n // Wait for the checkbox to render before updating aria-label.\n await this.checkbox?.updateComplete;\n this.updateInputAriaLabel();\n }\n\n protected override render(): TemplateResult {\n return html`\n <sp-checkbox\n ?checked=${this.checked}\n ?indeterminate=${this.indeterminate}\n ?disabled=${this.disabled}\n ?emphasized=${this.emphasized}\n aria-hidden=${ifDefined(this.selectsSingle ? true : undefined)}\n class=\"checkbox\"\n ></sp-checkbox>\n `;\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;AAWA;AAAA,EAEI;AAAA,EAEA;AAAA,OAEG;AACP,OAAO;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,iBAAiB;AAC1B,OAAO,YAAY;AAMZ,aAAM,0BAA0B,gBAAgB;AAAA,EAAhD;AAAA;AASH,SAAO,WAAW;AAGlB,SAAgB,OAAO;AAMvB,SAAO,gBAAgB;AAGvB,SAAO,UAAU;AAGjB,SAAO,WAAW;AAGlB,SAAO,gBAAgB;AAGvB,SAAO,aAAa;AAOpB,SAAO,QAAQ;AAAA;AAAA,EApCf,WAA2B,SAAyB;AAChD,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA,EAoCgB,QAAc;AAC1B,SAAK,SAAS,MAAM;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA,EAKQ,uBAA6B;AA5EzC;AA6EQ,UAAI,UAAK,aAAL,mBAAe,iBAAgB,KAAK,OAAO;AAC3C,WAAK,SAAS,aAAa,aAAa,cAAc,KAAK,KAAK;AAAA,IACpE;AAAA,EACJ;AAAA,EAEA,MAAyB,QAAQ,SAAwC;AAlF7E;AAmFQ,UAAM,QAAQ,OAAO;AACrB,QAAI,QAAQ,IAAI,OAAO,GAAG;AAEtB,cAAM,UAAK,aAAL,mBAAe;AACrB,WAAK,qBAAqB;AAAA,IAC9B;AAAA,EACJ;AAAA,EAEA,MAAyB,aACrB,SACa;AA7FrB;AA8FQ,UAAM,aAAa,OAAO;AAE1B,YAAM,UAAK,aAAL,mBAAe;AACrB,SAAK,qBAAqB;AAAA,EAC9B;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA;AAAA,2BAEY,KAAK,OAAO;AAAA,iCACN,KAAK,aAAa;AAAA,4BACvB,KAAK,QAAQ;AAAA,8BACX,KAAK,UAAU;AAAA,8BACf,UAAU,KAAK,gBAAgB,OAAO,MAAS,CAAC;AAAA;AAAA;AAAA;AAAA,EAI1E;AACJ;AAzEW;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,YAAY,CAAC;AAAA,GARzD,kBASF;AAGS;AAAA,EADf,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAXlB,kBAYO;AAGT;AAAA,EADN,MAAM,WAAW;AAAA,GAdT,kBAeF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAjBlB,kBAkBF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GApBlB,kBAqBF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAvBlB,kBAwBF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,iBAAiB,CAAC;AAAA,GA1B9D,kBA2BF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA7BjC,kBA8BF;AAOA;AAAA,EADN,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApCjB,kBAqCF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/TableCheckboxCell.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
"use strict";var d=Object.defineProperty;var
|
|
1
|
+
"use strict";var d=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var i=(a,p,e,t)=>{for(var s=t>1?void 0:t?o(p,e):p,l=a.length-1,c;l>=0;l--)(c=a[l])&&(s=(t?c(p,e,s):c(s))||s);return t&&s&&d(p,e,s),s};import{html as u,SpectrumElement as n}from"@spectrum-web-components/base";import"@spectrum-web-components/checkbox/sp-checkbox.js";import{property as r,query as h}from"@spectrum-web-components/base/src/decorators.js";import{ifDefined as m}from"@spectrum-web-components/base/src/directives.js";import f from"./table-checkbox-cell.css.js";export class TableCheckboxCell extends n{constructor(){super(...arguments);this.headCell=!1;this.role="gridcell";this.indeterminate=!1;this.checked=!1;this.disabled=!1;this.selectsSingle=!1;this.emphasized=!1;this.label=""}static get styles(){return[f]}click(){this.checkbox.click()}updateInputAriaLabel(){var e;(e=this.checkbox)!=null&&e.inputElement&&this.label&&this.checkbox.inputElement.setAttribute("aria-label",this.label)}async updated(e){var t;super.updated(e),e.has("label")&&(await((t=this.checkbox)==null?void 0:t.updateComplete),this.updateInputAriaLabel())}async firstUpdated(e){var t;super.firstUpdated(e),await((t=this.checkbox)==null?void 0:t.updateComplete),this.updateInputAriaLabel()}render(){return u`
|
|
2
2
|
<sp-checkbox
|
|
3
3
|
?checked=${this.checked}
|
|
4
4
|
?indeterminate=${this.indeterminate}
|
|
5
5
|
?disabled=${this.disabled}
|
|
6
6
|
?emphasized=${this.emphasized}
|
|
7
|
-
aria-hidden=${
|
|
7
|
+
aria-hidden=${m(this.selectsSingle?!0:void 0)}
|
|
8
8
|
class="checkbox"
|
|
9
9
|
></sp-checkbox>
|
|
10
|
-
`}}
|
|
10
|
+
`}}i([r({type:Boolean,reflect:!0,attribute:"head-cell"})],TableCheckboxCell.prototype,"headCell",2),i([r({reflect:!0})],TableCheckboxCell.prototype,"role",2),i([h(".checkbox")],TableCheckboxCell.prototype,"checkbox",2),i([r({type:Boolean})],TableCheckboxCell.prototype,"indeterminate",2),i([r({type:Boolean})],TableCheckboxCell.prototype,"checked",2),i([r({type:Boolean})],TableCheckboxCell.prototype,"disabled",2),i([r({type:Boolean,reflect:!0,attribute:"selects-single"})],TableCheckboxCell.prototype,"selectsSingle",2),i([r({type:Boolean,reflect:!0})],TableCheckboxCell.prototype,"emphasized",2),i([r({type:String})],TableCheckboxCell.prototype,"label",2);
|
|
11
11
|
//# sourceMappingURL=TableCheckboxCell.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["TableCheckboxCell.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {\n CSSResultArray,\n html,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport styles from './table-checkbox-cell.css.js';\nimport { Checkbox } from '@spectrum-web-components/checkbox';\n\n/**\n * @element sp-table-checkbox-cell\n */\nexport class TableCheckboxCell extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n /**\n * Whether or not the checkbox cell is in the table head.\n */\n @property({ type: Boolean, reflect: true, attribute: 'head-cell' })\n public headCell = false;\n\n @property({ reflect: true })\n public override role = 'gridcell';\n\n @query('.checkbox')\n public checkbox!: Checkbox;\n\n @property({ type: Boolean })\n public indeterminate = false;\n\n @property({ type: Boolean })\n public checked = false;\n\n @property({ type: Boolean })\n public disabled = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'selects-single' })\n public selectsSingle = false;\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n public override click(): void {\n this.checkbox.click();\n }\n\n protected override render(): TemplateResult {\n return html`\n <sp-checkbox\n ?checked=${this.checked}\n ?indeterminate=${this.indeterminate}\n ?disabled=${this.disabled}\n ?emphasized=${this.emphasized}\n aria-hidden=${ifDefined(this.selectsSingle)}\n class=\"checkbox\"\n ></sp-checkbox>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": "qNAWA,OAEI,QAAAA,
|
|
6
|
-
"names": ["html", "SpectrumElement", "property", "query", "ifDefined", "styles", "__decorateClass"]
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport styles from './table-checkbox-cell.css.js';\nimport { Checkbox } from '@spectrum-web-components/checkbox';\n\n/**\n * @element sp-table-checkbox-cell\n */\nexport class TableCheckboxCell extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n /**\n * Whether or not the checkbox cell is in the table head.\n */\n @property({ type: Boolean, reflect: true, attribute: 'head-cell' })\n public headCell = false;\n\n @property({ reflect: true })\n public override role = 'gridcell';\n\n @query('.checkbox')\n public checkbox!: Checkbox;\n\n @property({ type: Boolean })\n public indeterminate = false;\n\n @property({ type: Boolean })\n public checked = false;\n\n @property({ type: Boolean })\n public disabled = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'selects-single' })\n public selectsSingle = false;\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n /**\n * The accessible label for the checkbox. For header rows, this defaults to 'Select All'.\n * For body rows, this should be set to the text content of the first cell in the row.\n */\n @property({ type: String })\n public label = '';\n\n public override click(): void {\n this.checkbox.click();\n }\n\n /**\n * Updates the aria-label on the checkbox's internal input element.\n */\n private updateInputAriaLabel(): void {\n if (this.checkbox?.inputElement && this.label) {\n this.checkbox.inputElement.setAttribute('aria-label', this.label);\n }\n }\n\n protected override async updated(changed: PropertyValues): Promise<void> {\n super.updated(changed);\n if (changed.has('label')) {\n // Wait for the checkbox to render before updating aria-label.\n await this.checkbox?.updateComplete;\n this.updateInputAriaLabel();\n }\n }\n\n protected override async firstUpdated(\n changed: PropertyValues\n ): Promise<void> {\n super.firstUpdated(changed);\n // Wait for the checkbox to render before updating aria-label.\n await this.checkbox?.updateComplete;\n this.updateInputAriaLabel();\n }\n\n protected override render(): TemplateResult {\n return html`\n <sp-checkbox\n ?checked=${this.checked}\n ?indeterminate=${this.indeterminate}\n ?disabled=${this.disabled}\n ?emphasized=${this.emphasized}\n aria-hidden=${ifDefined(this.selectsSingle ? true : undefined)}\n class=\"checkbox\"\n ></sp-checkbox>\n `;\n }\n}\n"],
|
|
5
|
+
"mappings": "qNAWA,OAEI,QAAAA,EAEA,mBAAAC,MAEG,gCACP,MAAO,mDACP,OACI,YAAAC,EACA,SAAAC,MACG,kDACP,OAAS,aAAAC,MAAiB,kDAC1B,OAAOC,MAAY,+BAMZ,aAAM,0BAA0BJ,CAAgB,CAAhD,kCASH,KAAO,SAAW,GAGlB,KAAgB,KAAO,WAMvB,KAAO,cAAgB,GAGvB,KAAO,QAAU,GAGjB,KAAO,SAAW,GAGlB,KAAO,cAAgB,GAGvB,KAAO,WAAa,GAOpB,KAAO,MAAQ,GApCf,WAA2B,QAAyB,CAChD,MAAO,CAACI,CAAM,CAClB,CAoCgB,OAAc,CAC1B,KAAK,SAAS,MAAM,CACxB,CAKQ,sBAA6B,CA5EzC,IAAAC,GA6EYA,EAAA,KAAK,WAAL,MAAAA,EAAe,cAAgB,KAAK,OACpC,KAAK,SAAS,aAAa,aAAa,aAAc,KAAK,KAAK,CAExE,CAEA,MAAyB,QAAQC,EAAwC,CAlF7E,IAAAD,EAmFQ,MAAM,QAAQC,CAAO,EACjBA,EAAQ,IAAI,OAAO,IAEnB,OAAMD,EAAA,KAAK,WAAL,YAAAA,EAAe,gBACrB,KAAK,qBAAqB,EAElC,CAEA,MAAyB,aACrBC,EACa,CA7FrB,IAAAD,EA8FQ,MAAM,aAAaC,CAAO,EAE1B,OAAMD,EAAA,KAAK,WAAL,YAAAA,EAAe,gBACrB,KAAK,qBAAqB,CAC9B,CAEmB,QAAyB,CACxC,OAAON;AAAA;AAAA,2BAEY,KAAK,OAAO;AAAA,iCACN,KAAK,aAAa;AAAA,4BACvB,KAAK,QAAQ;AAAA,8BACX,KAAK,UAAU;AAAA,8BACfI,EAAU,KAAK,cAAgB,GAAO,MAAS,CAAC;AAAA;AAAA;AAAA,SAI1E,CACJ,CAzEWI,EAAA,CADNN,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,UAAW,WAAY,CAAC,GARzD,kBASF,wBAGSM,EAAA,CADfN,EAAS,CAAE,QAAS,EAAK,CAAC,GAXlB,kBAYO,oBAGTM,EAAA,CADNL,EAAM,WAAW,GAdT,kBAeF,wBAGAK,EAAA,CADNN,EAAS,CAAE,KAAM,OAAQ,CAAC,GAjBlB,kBAkBF,6BAGAM,EAAA,CADNN,EAAS,CAAE,KAAM,OAAQ,CAAC,GApBlB,kBAqBF,uBAGAM,EAAA,CADNN,EAAS,CAAE,KAAM,OAAQ,CAAC,GAvBlB,kBAwBF,wBAGAM,EAAA,CADNN,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,UAAW,gBAAiB,CAAC,GA1B9D,kBA2BF,6BAGAM,EAAA,CADNN,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA7BjC,kBA8BF,0BAOAM,EAAA,CADNN,EAAS,CAAE,KAAM,MAAO,CAAC,GApCjB,kBAqCF",
|
|
6
|
+
"names": ["html", "SpectrumElement", "property", "query", "ifDefined", "styles", "_a", "changed", "__decorateClass"]
|
|
7
7
|
}
|