@brightspace-ui/core 3.86.3 → 3.86.5
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/components/list/demo/list-selection.html +301 -0
- package/components/list/list-item-checkbox-mixin.js +6 -4
- package/components/list/list-item-mixin.js +1 -3
- package/components/list/list.js +20 -1
- package/components/selection/selection-mixin.js +5 -2
- package/components/table/table-wrapper.js +16 -19
- package/package.json +1 -1
|
@@ -0,0 +1,301 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
|
|
7
|
+
<script type="module">
|
|
8
|
+
import '../../demo/demo-page.js';
|
|
9
|
+
import '../list-item-content.js';
|
|
10
|
+
import '../list-item.js';
|
|
11
|
+
import '../list-controls.js';
|
|
12
|
+
import '../list.js';
|
|
13
|
+
import '../../selection/selection-action.js';
|
|
14
|
+
</script>
|
|
15
|
+
<style>
|
|
16
|
+
d2l-list::before {
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
color: var(--d2l-color-tungsten);
|
|
19
|
+
content: attr(data-selection-info);
|
|
20
|
+
font-size: 0.7rem;
|
|
21
|
+
inset-block-start: 0;
|
|
22
|
+
inset-inline-end: 0;
|
|
23
|
+
margin: 0 0.4rem;
|
|
24
|
+
padding: 0;
|
|
25
|
+
position: absolute;
|
|
26
|
+
}
|
|
27
|
+
</style>
|
|
28
|
+
</head>
|
|
29
|
+
<body unresolved>
|
|
30
|
+
|
|
31
|
+
<d2l-demo-page page-title="d2l-list (selection)">
|
|
32
|
+
|
|
33
|
+
<h2>Nested - 1 - all selectable</h2>
|
|
34
|
+
|
|
35
|
+
<d2l-demo-snippet>
|
|
36
|
+
<template>
|
|
37
|
+
<d2l-list grid>
|
|
38
|
+
<d2l-list-controls slot="controls">
|
|
39
|
+
<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
|
|
40
|
+
<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
|
|
41
|
+
</d2l-list-controls>
|
|
42
|
+
<d2l-list-item selectable key="Item-1" label="Label for Item-1">
|
|
43
|
+
<d2l-list-item-content>
|
|
44
|
+
<div>Item-1 - Earth Sciences</div>
|
|
45
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
46
|
+
</d2l-list-item-content>
|
|
47
|
+
<d2l-list slot="nested" grid separators="all">
|
|
48
|
+
<d2l-list-item selectable key="Item-1-1" label="Label for Item-1-1">
|
|
49
|
+
<d2l-list-item-content>
|
|
50
|
+
<div>Item-1-1 - Introductory Earth Sciences</div>
|
|
51
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
52
|
+
</d2l-list-item-content>
|
|
53
|
+
</d2l-list-item>
|
|
54
|
+
<d2l-list-item selectable key="Item-1-2" label="Label for Item-1-2">
|
|
55
|
+
<d2l-list-item-content>
|
|
56
|
+
<div>Item-1-2 - Flow and Transport Through Fractured Rocks</div>
|
|
57
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
58
|
+
</d2l-list-item-content>
|
|
59
|
+
</d2l-list-item>
|
|
60
|
+
<d2l-list-item selectable key="Item-1-3" label="Label for Item-1-3">
|
|
61
|
+
<d2l-list-item-content>
|
|
62
|
+
<div>Item-1-3 - Applied Wetland Science</div>
|
|
63
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
64
|
+
</d2l-list-item-content>
|
|
65
|
+
</d2l-list-item>
|
|
66
|
+
</d2l-list>
|
|
67
|
+
</d2l-list-item>
|
|
68
|
+
<d2l-list-item selectable key="Item-2" label="Label for Item-2">
|
|
69
|
+
<d2l-list-item-content>
|
|
70
|
+
<div>Item-2 - Biology</div>
|
|
71
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
72
|
+
</d2l-list-item-content>
|
|
73
|
+
</d2l-list-item>
|
|
74
|
+
<d2l-list-item selectable key="Item-3" label="Label for Item-3">
|
|
75
|
+
<d2l-list-item-content>
|
|
76
|
+
<div>Item-3 - Computer Science</div>
|
|
77
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
78
|
+
</d2l-list-item-content>
|
|
79
|
+
</d2l-list-item>
|
|
80
|
+
</d2l-list>
|
|
81
|
+
</template>
|
|
82
|
+
</d2l-demo-snippet>
|
|
83
|
+
|
|
84
|
+
<h2>Nested - 2 - L1 not selectable, L2 selectable</h2>
|
|
85
|
+
|
|
86
|
+
<d2l-demo-snippet>
|
|
87
|
+
<template>
|
|
88
|
+
<d2l-list grid>
|
|
89
|
+
<d2l-list-controls slot="controls">
|
|
90
|
+
<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
|
|
91
|
+
<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
|
|
92
|
+
</d2l-list-controls>
|
|
93
|
+
<d2l-list-item key="Item-1" label="Label for Item-1">
|
|
94
|
+
<d2l-list-item-content>
|
|
95
|
+
<div>Item-1 - Earth Sciences</div>
|
|
96
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
97
|
+
</d2l-list-item-content>
|
|
98
|
+
<d2l-list slot="nested" grid separators="all">
|
|
99
|
+
<d2l-list-item selectable key="Item-1-1" label="Label for Item-1-1">
|
|
100
|
+
<d2l-list-item-content>
|
|
101
|
+
<div>Item-1-1 - Introductory Earth Sciences</div>
|
|
102
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
103
|
+
</d2l-list-item-content>
|
|
104
|
+
</d2l-list-item>
|
|
105
|
+
<d2l-list-item selectable key="Item-1-2" label="Label for Item-1-2">
|
|
106
|
+
<d2l-list-item-content>
|
|
107
|
+
<div>Item-1-2 - Flow and Transport Through Fractured Rocks</div>
|
|
108
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
109
|
+
</d2l-list-item-content>
|
|
110
|
+
</d2l-list-item>
|
|
111
|
+
<d2l-list-item selectable key="Item-1-3" label="Label for Item-1-3">
|
|
112
|
+
<d2l-list-item-content>
|
|
113
|
+
<div>Item-1-3 - Applied Wetland Science</div>
|
|
114
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
115
|
+
</d2l-list-item-content>
|
|
116
|
+
</d2l-list-item>
|
|
117
|
+
</d2l-list>
|
|
118
|
+
</d2l-list-item>
|
|
119
|
+
<d2l-list-item key="Item-2" label="Label for Item-2">
|
|
120
|
+
<d2l-list-item-content>
|
|
121
|
+
<div>Item-2 - Biology</div>
|
|
122
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
123
|
+
</d2l-list-item-content>
|
|
124
|
+
</d2l-list-item>
|
|
125
|
+
<d2l-list-item key="Item-3" label="Label for Item-3">
|
|
126
|
+
<d2l-list-item-content>
|
|
127
|
+
<div>Item-3 - Computer Science</div>
|
|
128
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
129
|
+
</d2l-list-item-content>
|
|
130
|
+
</d2l-list-item>
|
|
131
|
+
</d2l-list>
|
|
132
|
+
</template>
|
|
133
|
+
</d2l-demo-snippet>
|
|
134
|
+
|
|
135
|
+
<h2>Nested - 3 - L1 selectable, L2 not selectable</h2>
|
|
136
|
+
|
|
137
|
+
<d2l-demo-snippet>
|
|
138
|
+
<template>
|
|
139
|
+
<d2l-list grid>
|
|
140
|
+
<d2l-list-controls slot="controls">
|
|
141
|
+
<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
|
|
142
|
+
<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
|
|
143
|
+
</d2l-list-controls>
|
|
144
|
+
<d2l-list-item selectable key="Item-1" label="Label for Item-1">
|
|
145
|
+
<d2l-list-item-content>
|
|
146
|
+
<div>Item-1 - Earth Sciences</div>
|
|
147
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
148
|
+
</d2l-list-item-content>
|
|
149
|
+
<d2l-list slot="nested" grid separators="all">
|
|
150
|
+
<d2l-list-item key="Item-1-1" label="Label for Item-1-1">
|
|
151
|
+
<d2l-list-item-content>
|
|
152
|
+
<div>Item-1-1 - Introductory Earth Sciences</div>
|
|
153
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
154
|
+
</d2l-list-item-content>
|
|
155
|
+
</d2l-list-item>
|
|
156
|
+
<d2l-list-item key="Item-1-2" label="Label for Item-1-2">
|
|
157
|
+
<d2l-list-item-content>
|
|
158
|
+
<div>Item-1-2 - Flow and Transport Through Fractured Rocks</div>
|
|
159
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
160
|
+
</d2l-list-item-content>
|
|
161
|
+
</d2l-list-item>
|
|
162
|
+
<d2l-list-item key="Item-1-3" label="Label for Item-1-3">
|
|
163
|
+
<d2l-list-item-content>
|
|
164
|
+
<div>Item-1-3 - Applied Wetland Science</div>
|
|
165
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
166
|
+
</d2l-list-item-content>
|
|
167
|
+
</d2l-list-item>
|
|
168
|
+
</d2l-list>
|
|
169
|
+
</d2l-list-item>
|
|
170
|
+
<d2l-list-item selectable key="Item-2" label="Label for Item-2">
|
|
171
|
+
<d2l-list-item-content>
|
|
172
|
+
<div>Item-2 - Biology</div>
|
|
173
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
174
|
+
</d2l-list-item-content>
|
|
175
|
+
</d2l-list-item>
|
|
176
|
+
<d2l-list-item selectable key="Item-3" label="Label for Item-3">
|
|
177
|
+
<d2l-list-item-content>
|
|
178
|
+
<div>Item-3 - Computer Science</div>
|
|
179
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
180
|
+
</d2l-list-item-content>
|
|
181
|
+
</d2l-list-item>
|
|
182
|
+
</d2l-list>
|
|
183
|
+
</template>
|
|
184
|
+
</d2l-demo-snippet>
|
|
185
|
+
|
|
186
|
+
<h2>Nested - 4 - L1 selectable, L2 not selectable, L3 selectable</h2>
|
|
187
|
+
|
|
188
|
+
<d2l-demo-snippet>
|
|
189
|
+
<template>
|
|
190
|
+
<d2l-list grid>
|
|
191
|
+
<d2l-list-controls slot="controls">
|
|
192
|
+
<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
|
|
193
|
+
<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
|
|
194
|
+
</d2l-list-controls>
|
|
195
|
+
<d2l-list-item selectable key="Item-1" label="Label for Item-1">
|
|
196
|
+
<d2l-list-item-content>
|
|
197
|
+
<div>Item-1 - Earth Sciences</div>
|
|
198
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
199
|
+
</d2l-list-item-content>
|
|
200
|
+
<d2l-list slot="nested" grid separators="all">
|
|
201
|
+
<d2l-list-item key="Item-1-1" label="Label for Item-1-1">
|
|
202
|
+
<d2l-list-item-content>
|
|
203
|
+
<div>Item-1-1 - Introductory Earth Sciences</div>
|
|
204
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
205
|
+
</d2l-list-item-content>
|
|
206
|
+
</d2l-list-item>
|
|
207
|
+
<d2l-list-item key="Item-1-2" label="Label for Item-1-2">
|
|
208
|
+
<d2l-list-item-content>
|
|
209
|
+
<div>Item-1-2 - Flow and Transport Through Fractured Rocks</div>
|
|
210
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
211
|
+
</d2l-list-item-content>
|
|
212
|
+
<d2l-list slot="nested" grid separators="all">
|
|
213
|
+
<d2l-list-item selectable key="Item-1-2-1" label="Label for Item-1-2-1">
|
|
214
|
+
<d2l-list-item-content>
|
|
215
|
+
<div>Item-1-2-1 - Hydraulic Properties of Fractures</div>
|
|
216
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
217
|
+
</d2l-list-item-content>
|
|
218
|
+
</d2l-list-item>
|
|
219
|
+
<d2l-list-item selectable key="Item-1-2-2" label="Label for Item-1-2-2">
|
|
220
|
+
<d2l-list-item-content>
|
|
221
|
+
<div>Item-1-2-2 - Contaminant Transport</div>
|
|
222
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
223
|
+
</d2l-list-item-content>
|
|
224
|
+
</d2l-list-item>
|
|
225
|
+
</d2l-list>
|
|
226
|
+
</d2l-list-item>
|
|
227
|
+
<d2l-list-item key="Item-1-3" label="Label for Item-1-3">
|
|
228
|
+
<d2l-list-item-content>
|
|
229
|
+
<div>Item-1-3 - Applied Wetland Science</div>
|
|
230
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
231
|
+
</d2l-list-item-content>
|
|
232
|
+
</d2l-list-item>
|
|
233
|
+
</d2l-list>
|
|
234
|
+
</d2l-list-item>
|
|
235
|
+
<d2l-list-item selectable key="Item-2" label="Label for Item-2">
|
|
236
|
+
<d2l-list-item-content>
|
|
237
|
+
<div>Item-2 - Biology</div>
|
|
238
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
239
|
+
</d2l-list-item-content>
|
|
240
|
+
</d2l-list-item>
|
|
241
|
+
<d2l-list-item selectable key="Item-3" label="Label for Item-3">
|
|
242
|
+
<d2l-list-item-content>
|
|
243
|
+
<div>Item-3 - Computer Science</div>
|
|
244
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
245
|
+
</d2l-list-item-content>
|
|
246
|
+
</d2l-list-item>
|
|
247
|
+
</d2l-list>
|
|
248
|
+
</template>
|
|
249
|
+
</d2l-demo-snippet>
|
|
250
|
+
|
|
251
|
+
<h2>Nested - 5 - L1 mixed</h2>
|
|
252
|
+
|
|
253
|
+
<d2l-demo-snippet>
|
|
254
|
+
<template>
|
|
255
|
+
<d2l-list grid>
|
|
256
|
+
<d2l-list-controls slot="controls">
|
|
257
|
+
<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
|
|
258
|
+
<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
|
|
259
|
+
</d2l-list-controls>
|
|
260
|
+
<d2l-list-item selectable key="Item-1" label="Label for Item-1">
|
|
261
|
+
<d2l-list-item-content>
|
|
262
|
+
<div>Item-1 - Earth Sciences</div>
|
|
263
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
264
|
+
</d2l-list-item-content>
|
|
265
|
+
</d2l-list-item>
|
|
266
|
+
<d2l-list-item key="Item-2" label="Label for Item-2">
|
|
267
|
+
<d2l-list-item-content>
|
|
268
|
+
<div>Item-2 - Biology</div>
|
|
269
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
270
|
+
</d2l-list-item-content>
|
|
271
|
+
</d2l-list-item>
|
|
272
|
+
<d2l-list-item selectable key="Item-3" label="Label for Item-3">
|
|
273
|
+
<d2l-list-item-content>
|
|
274
|
+
<div>Item-3 - Computer Science</div>
|
|
275
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
276
|
+
</d2l-list-item-content>
|
|
277
|
+
</d2l-list-item>
|
|
278
|
+
</d2l-list>
|
|
279
|
+
</template>
|
|
280
|
+
</d2l-demo-snippet>
|
|
281
|
+
|
|
282
|
+
</d2l-demo-page>
|
|
283
|
+
|
|
284
|
+
<script>
|
|
285
|
+
function updateSelectionInfoText(list) {
|
|
286
|
+
const info = list.getSelectionInfo(true);
|
|
287
|
+
list.setAttribute('data-selection-info', `Selection Info: ${info.state}, ${info.keys.length}`);
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
setTimeout(() => {
|
|
291
|
+
document.querySelectorAll('d2l-list').forEach(list => {
|
|
292
|
+
list.addEventListener('d2l-list-selection-changes', (e) => {
|
|
293
|
+
updateSelectionInfoText(e.target);
|
|
294
|
+
console.log('d2l-list-selection-changes', e.detail);
|
|
295
|
+
});
|
|
296
|
+
updateSelectionInfoText(list);
|
|
297
|
+
});
|
|
298
|
+
}, 1000);
|
|
299
|
+
</script>
|
|
300
|
+
</body>
|
|
301
|
+
</html>
|
|
@@ -70,7 +70,9 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
|
|
|
70
70
|
const oldVal = this._selectionInfo;
|
|
71
71
|
if (oldVal !== val) {
|
|
72
72
|
this._selectionInfo = val;
|
|
73
|
-
|
|
73
|
+
if (this._selectionInfo.state !== SelectionInfo.states.notSet) {
|
|
74
|
+
this.setSelected(this._selectionInfo.state === SelectionInfo.states.all);
|
|
75
|
+
}
|
|
74
76
|
this.requestUpdate('selectionInfo', oldVal);
|
|
75
77
|
}
|
|
76
78
|
}
|
|
@@ -86,7 +88,9 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
|
|
|
86
88
|
updated(changedProperties) {
|
|
87
89
|
super.updated(changedProperties);
|
|
88
90
|
if (!this._selectionProvider || !changedProperties.has('selectionInfo')) return;
|
|
89
|
-
|
|
91
|
+
if (this.selectionInfo.state !== SelectionInfo.states.notSet) {
|
|
92
|
+
this.selected = (this.selectionInfo.state === SelectionInfo.states.all);
|
|
93
|
+
}
|
|
90
94
|
}
|
|
91
95
|
|
|
92
96
|
willUpdate(changedProperties) {
|
|
@@ -174,8 +178,6 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
|
|
|
174
178
|
}
|
|
175
179
|
|
|
176
180
|
_updateNestedSelectionProvider() {
|
|
177
|
-
if (!this.selectable) return;
|
|
178
|
-
|
|
179
181
|
const nestedList = this._getNestedList();
|
|
180
182
|
if (this._selectionProvider === nestedList) return;
|
|
181
183
|
|
|
@@ -651,9 +651,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
651
651
|
}
|
|
652
652
|
|
|
653
653
|
_onNestedSlotChange() {
|
|
654
|
-
|
|
655
|
-
this._onNestedSlotChangeCheckboxMixin();
|
|
656
|
-
}
|
|
654
|
+
this._onNestedSlotChangeCheckboxMixin();
|
|
657
655
|
const nestedList = this._getNestedList();
|
|
658
656
|
if (this._hasNestedList !== !!nestedList) {
|
|
659
657
|
this._hasNestedList = !!nestedList;
|
package/components/list/list.js
CHANGED
|
@@ -274,15 +274,24 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
|
|
|
274
274
|
const selectionInfo = super.getSelectionInfo();
|
|
275
275
|
if (!includeNested) return selectionInfo;
|
|
276
276
|
|
|
277
|
+
let state = selectionInfo.state;
|
|
277
278
|
let keys = selectionInfo.keys;
|
|
278
279
|
|
|
279
280
|
this.getItems().forEach(item => {
|
|
280
281
|
if (item._selectionProvider) {
|
|
282
|
+
const itemSelectionInfo = item._selectionProvider.getSelectionInfo(true);
|
|
283
|
+
if (state === SelectionInfo.states.notSet) {
|
|
284
|
+
state = itemSelectionInfo.state;
|
|
285
|
+
} else if (state === SelectionInfo.states.none && itemSelectionInfo.state !== SelectionInfo.states.notSet && itemSelectionInfo.state !== SelectionInfo.states.none) {
|
|
286
|
+
state = SelectionInfo.states.some;
|
|
287
|
+
} else if (state === SelectionInfo.states.all && (itemSelectionInfo.state === SelectionInfo.states.some || itemSelectionInfo.state === SelectionInfo.states.none)) {
|
|
288
|
+
state = SelectionInfo.states.some;
|
|
289
|
+
}
|
|
281
290
|
keys = [...keys, ...item._selectionProvider.getSelectionInfo(true).keys];
|
|
282
291
|
}
|
|
283
292
|
});
|
|
284
293
|
|
|
285
|
-
return new SelectionInfo(keys,
|
|
294
|
+
return new SelectionInfo(keys, state);
|
|
286
295
|
}
|
|
287
296
|
|
|
288
297
|
resizedCallback(width, breakpointsChanged) {
|
|
@@ -300,6 +309,16 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
|
|
|
300
309
|
});
|
|
301
310
|
}
|
|
302
311
|
|
|
312
|
+
setSelectionForAll(selected, selectAllPages) {
|
|
313
|
+
super.setSelectionForAll(selected, selectAllPages);
|
|
314
|
+
// list-specific logic to push selection state deeper into tree - required to support intermediate nested lists with no direct selectables but with their own nested lists containing selectables
|
|
315
|
+
this.getItems().forEach(item => {
|
|
316
|
+
if (!item.selectable && item._selectionProvider) {
|
|
317
|
+
item._selectionProvider.setSelectionForAll(selected, selectAllPages);
|
|
318
|
+
}
|
|
319
|
+
});
|
|
320
|
+
}
|
|
321
|
+
|
|
303
322
|
_getItemByIndex(index) {
|
|
304
323
|
const items = this.getItems() || [];
|
|
305
324
|
return items[index];
|
|
@@ -16,6 +16,7 @@ export class SelectionInfo {
|
|
|
16
16
|
if (!allEnabledSelected) allEnabledSelected = false;
|
|
17
17
|
if (!keys) keys = [];
|
|
18
18
|
if (!state) state = SelectionInfo.states.none;
|
|
19
|
+
|
|
19
20
|
this.#allEnabledSelected = allEnabledSelected;
|
|
20
21
|
this.#keys = keys;
|
|
21
22
|
this.#state = state;
|
|
@@ -38,7 +39,8 @@ export class SelectionInfo {
|
|
|
38
39
|
none: 'none',
|
|
39
40
|
some: 'some',
|
|
40
41
|
all: 'all',
|
|
41
|
-
allPages: 'all-pages'
|
|
42
|
+
allPages: 'all-pages',
|
|
43
|
+
notSet: 'not-set'
|
|
42
44
|
};
|
|
43
45
|
}
|
|
44
46
|
|
|
@@ -98,12 +100,13 @@ export const SelectionMixin = superclass => class extends RtlMixin(CollectionMix
|
|
|
98
100
|
|
|
99
101
|
getSelectionInfo() {
|
|
100
102
|
let allEnabledSelected = true;
|
|
101
|
-
let state = SelectionInfo.states.none;
|
|
103
|
+
let state = (this._selectionSelectables.size > 0 ? SelectionInfo.states.none : SelectionInfo.states.notSet);
|
|
102
104
|
const keys = [];
|
|
103
105
|
|
|
104
106
|
if (this._selectAllPages) {
|
|
105
107
|
state = SelectionInfo.states.allPages;
|
|
106
108
|
} else {
|
|
109
|
+
|
|
107
110
|
this._selectionSelectables.forEach(selectable => {
|
|
108
111
|
if (selectable.selected) keys.push(selectable.key);
|
|
109
112
|
if (!selectable.disabled && !selectable.selected) allEnabledSelected = false;
|
|
@@ -589,26 +589,23 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
|
|
|
589
589
|
}
|
|
590
590
|
|
|
591
591
|
async _handleTableChange(mutationRecords) {
|
|
592
|
-
const flag = window.D2L?.LP?.Web?.UI?.Flags.Flag('table-update-filter-GAUD-6955', true) ?? true;
|
|
593
592
|
const updates = { count: true, classNames: true, sticky: true, syncWidths: true };
|
|
594
|
-
if (
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
updates.count ||= node.matches(SELECTORS.items);
|
|
611
|
-
}
|
|
593
|
+
if (mutationRecords) {
|
|
594
|
+
for (const key in updates) updates[key] = false;
|
|
595
|
+
for (const { type, removedNodes, addedNodes, target, attributeName } of mutationRecords) {
|
|
596
|
+
if (type === 'attributes') {
|
|
597
|
+
updates.classNames = attributeName === 'selected';
|
|
598
|
+
continue;
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
updates.sticky ||= target.matches(SELECTORS.headers);
|
|
602
|
+
const affectedNodes = [...removedNodes, ...addedNodes];
|
|
603
|
+
for (const node of affectedNodes) {
|
|
604
|
+
if (!(node instanceof Element)) continue;
|
|
605
|
+
updates.classNames ||= node.matches('tr, td, th');
|
|
606
|
+
updates.syncWidths ||= node.matches('tr');
|
|
607
|
+
updates.sticky ||= node.matches(SELECTORS.headers);
|
|
608
|
+
updates.count ||= node.matches(SELECTORS.items);
|
|
612
609
|
}
|
|
613
610
|
}
|
|
614
611
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.86.
|
|
3
|
+
"version": "3.86.5",
|
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|