@brightspace-ui/core 3.123.2 → 3.123.3
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.
|
@@ -62,7 +62,7 @@ When provided with a `name`, the group will participate in forms with the `value
|
|
|
62
62
|
When the radio group's state changes, it dispatches the `change` event:
|
|
63
63
|
|
|
64
64
|
```javascript
|
|
65
|
-
|
|
65
|
+
group.addEventListener('change', e => {
|
|
66
66
|
const newValue = e.target.detail.value;
|
|
67
67
|
const oldValue = e.target.detail.oldValue; // may be undefined
|
|
68
68
|
});
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
import '../../icons/icon.js';
|
|
2
|
+
import '../list-item-content.js';
|
|
3
|
+
import '../list-item-nav-button.js';
|
|
4
|
+
import '../list.js';
|
|
5
|
+
import '../../tooltip/tooltip-help.js';
|
|
6
|
+
import { css, html, LitElement, nothing } from 'lit';
|
|
7
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
8
|
+
import { listDemos } from './list-demo-scenarios.js';
|
|
9
|
+
import { moveLocations } from '../list-item-drag-drop-mixin.js';
|
|
10
|
+
import { repeat } from 'lit/directives/repeat.js';
|
|
11
|
+
|
|
12
|
+
class ListDemoNav extends LitElement {
|
|
13
|
+
|
|
14
|
+
static get properties() {
|
|
15
|
+
return {
|
|
16
|
+
_currentItem: { state: true }
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
static get styles() {
|
|
21
|
+
return [
|
|
22
|
+
css`
|
|
23
|
+
:host {
|
|
24
|
+
display: block;
|
|
25
|
+
max-width: 400px;
|
|
26
|
+
}
|
|
27
|
+
d2l-icon {
|
|
28
|
+
margin-right: 0.7rem;
|
|
29
|
+
}
|
|
30
|
+
d2l-tooltip-help {
|
|
31
|
+
padding: 5px;
|
|
32
|
+
}
|
|
33
|
+
`
|
|
34
|
+
];
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
constructor() {
|
|
38
|
+
super();
|
|
39
|
+
this._currentItem = null;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
render() {
|
|
43
|
+
return html`
|
|
44
|
+
<div @d2l-list-items-move="${this._handleListItemsMove}">
|
|
45
|
+
<d2l-list
|
|
46
|
+
grid
|
|
47
|
+
drag-multiple
|
|
48
|
+
@d2l-list-item-button-click="${this._handleItemClick}">
|
|
49
|
+
${repeat(this.#list, (item) => item.key, (item) => this._renderItem(item))}
|
|
50
|
+
</d2l-list>
|
|
51
|
+
</div>
|
|
52
|
+
`;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
#list = listDemos.nav;
|
|
56
|
+
|
|
57
|
+
_handleItemClick(e) {
|
|
58
|
+
if (!e.target.expandable) {
|
|
59
|
+
this._currentItem = e.target;
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
if (this._currentItem !== e.target) {
|
|
64
|
+
e.target.expanded = true;
|
|
65
|
+
this._currentItem = e.target;
|
|
66
|
+
} else {
|
|
67
|
+
e.target.expanded = !e.target.expanded;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
async _handleListItemsMove(e) {
|
|
72
|
+
|
|
73
|
+
const sourceListItems = e.detail.sourceItems;
|
|
74
|
+
const target = e.detail.target;
|
|
75
|
+
|
|
76
|
+
// helper that gets the array containing item data, the item data, and the index within the array
|
|
77
|
+
const getItemInfo = (items, key) => {
|
|
78
|
+
for (let i = 0; i < items.length; i++) {
|
|
79
|
+
if (items[i].key === key) {
|
|
80
|
+
return { owner: items, item: items[i], index: i };
|
|
81
|
+
}
|
|
82
|
+
if (items[i].items && items[i].items.length > 0) {
|
|
83
|
+
const tempItemData = getItemInfo(items[i].items, key);
|
|
84
|
+
if (tempItemData) return tempItemData;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
const dataToMove = [];
|
|
90
|
+
|
|
91
|
+
// remove data elements from original locations
|
|
92
|
+
sourceListItems.forEach(sourceListItem => {
|
|
93
|
+
const info = getItemInfo(this.#list, sourceListItem.key);
|
|
94
|
+
if (info?.owner) {
|
|
95
|
+
info.owner.splice(info.index, 1);
|
|
96
|
+
}
|
|
97
|
+
if (info?.item) {
|
|
98
|
+
dataToMove.push(info.item);
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
|
|
102
|
+
// append data elements to new location
|
|
103
|
+
const targetInfo = getItemInfo(this.#list, target.item.key);
|
|
104
|
+
let targetItems;
|
|
105
|
+
let targetIndex;
|
|
106
|
+
if (target.location === moveLocations.nest) {
|
|
107
|
+
if (!targetInfo.item.items) targetInfo.item.items = [];
|
|
108
|
+
targetItems = targetInfo.item.items;
|
|
109
|
+
targetIndex = targetItems.length;
|
|
110
|
+
} else {
|
|
111
|
+
targetItems = targetInfo?.owner;
|
|
112
|
+
if (!targetItems) return;
|
|
113
|
+
if (target.location === moveLocations.above) targetIndex = targetInfo.index;
|
|
114
|
+
else if (target.location === moveLocations.below) targetIndex = targetInfo.index + 1;
|
|
115
|
+
}
|
|
116
|
+
for (let i = dataToMove.length - 1; i >= 0; i--) {
|
|
117
|
+
targetItems.splice(targetIndex, 0, dataToMove[i]);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
this.requestUpdate();
|
|
121
|
+
await this.updateComplete;
|
|
122
|
+
|
|
123
|
+
if (e.detail.keyboardActive) {
|
|
124
|
+
setTimeout(() => {
|
|
125
|
+
if (!this.shadowRoot) return;
|
|
126
|
+
const newItem = this.shadowRoot.querySelector('d2l-list').getListItemByKey(sourceListItems[0].key);
|
|
127
|
+
newItem.activateDragHandle();
|
|
128
|
+
});
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
_renderItem(item) {
|
|
133
|
+
const hasSubList = item.items && item.items.length > 0;
|
|
134
|
+
return html`
|
|
135
|
+
<d2l-list-item-nav-button
|
|
136
|
+
key="${ifDefined(item.key)}"
|
|
137
|
+
draggable
|
|
138
|
+
drag-handle-text="${item.primaryText}"
|
|
139
|
+
color="${ifDefined(item.color)}"
|
|
140
|
+
?expandable="${hasSubList}"
|
|
141
|
+
?expanded="${hasSubList}"
|
|
142
|
+
drop-nested
|
|
143
|
+
label="${item.primaryText}">
|
|
144
|
+
<d2l-list-item-content>
|
|
145
|
+
<div>${item.hasIcon ? html`<d2l-icon icon="tier2:file-document"></d2l-icon>` : nothing}${item.primaryText}</div>
|
|
146
|
+
${item.tooltipOpenerText && item.tooltipText
|
|
147
|
+
? html`<div slot="secondary"><d2l-tooltip-help text="${item.tooltipOpenerText}">${item.tooltipText}</d2l-tooltip-help></div>`
|
|
148
|
+
: nothing
|
|
149
|
+
}
|
|
150
|
+
</d2l-list-item-content>
|
|
151
|
+
${hasSubList ? html`
|
|
152
|
+
<d2l-list slot="nested">
|
|
153
|
+
${repeat(item.items, (subItem) => subItem.key, (subItem) => this._renderItem(subItem))}
|
|
154
|
+
</d2l-list>`
|
|
155
|
+
: nothing
|
|
156
|
+
}
|
|
157
|
+
</d2l-list-item-nav-button>
|
|
158
|
+
`;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
customElements.define('d2l-demo-list-nav', ListDemoNav);
|
|
@@ -317,5 +317,56 @@ export const listDemos = {
|
|
|
317
317
|
primaryText: 'Applied Wetland Science',
|
|
318
318
|
dropNested: true,
|
|
319
319
|
items: []
|
|
320
|
-
}]
|
|
320
|
+
}],
|
|
321
|
+
nav: [{
|
|
322
|
+
key: '1',
|
|
323
|
+
primaryText: 'Introductory Earth Sciences',
|
|
324
|
+
dropNested: true,
|
|
325
|
+
color: '#006fbf',
|
|
326
|
+
items: [{
|
|
327
|
+
key: '1-1',
|
|
328
|
+
primaryText: 'Glaciation',
|
|
329
|
+
dropNested: true,
|
|
330
|
+
items: [],
|
|
331
|
+
color: '#29a6ff',
|
|
332
|
+
tooltipText: 'Starts: 2023-09-01, Ends: 2023-12-01',
|
|
333
|
+
tooltipOpenerText: 'Due: 2023-10-10',
|
|
334
|
+
hasIcon: true
|
|
335
|
+
}, {
|
|
336
|
+
key: '1-2',
|
|
337
|
+
primaryText: 'Weathering',
|
|
338
|
+
dropNested: true,
|
|
339
|
+
items: [],
|
|
340
|
+
color: '#29a6ff',
|
|
341
|
+
tooltipText: 'Starts: 2023-10-01, Ends: 2023-12-01',
|
|
342
|
+
tooltipOpenerText: 'Due: 2023-11-10',
|
|
343
|
+
hasIcon: true
|
|
344
|
+
}, {
|
|
345
|
+
key: '1-3',
|
|
346
|
+
primaryText: 'Volcanism',
|
|
347
|
+
dropNested: true,
|
|
348
|
+
items: [],
|
|
349
|
+
color: '#29a6ff',
|
|
350
|
+
hasIcon: true
|
|
351
|
+
}]
|
|
352
|
+
}, {
|
|
353
|
+
key: '2',
|
|
354
|
+
primaryText: 'Applied Wetland Science',
|
|
355
|
+
color: '#cd2026',
|
|
356
|
+
items: [{
|
|
357
|
+
key: '2-1',
|
|
358
|
+
primaryText: 'Carbon & Nitrogen Cycling',
|
|
359
|
+
dropNested: true,
|
|
360
|
+
items: [],
|
|
361
|
+
color: '#ff575a',
|
|
362
|
+
hasIcon: true
|
|
363
|
+
}, {
|
|
364
|
+
key: '2-2',
|
|
365
|
+
primaryText: 'Wetland Engineering',
|
|
366
|
+
dropNested: true,
|
|
367
|
+
items: [],
|
|
368
|
+
color: '#ff575a',
|
|
369
|
+
hasIcon: true
|
|
370
|
+
}]
|
|
371
|
+
}],
|
|
321
372
|
};
|
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
import '../../switch/switch.js';
|
|
26
26
|
import '../../tooltip/tooltip-help.js';
|
|
27
27
|
|
|
28
|
+
import './demo-list-nav.js';
|
|
28
29
|
import './demo-list-nested-iterations-helper.js';
|
|
29
30
|
</script>
|
|
30
31
|
</head>
|
|
@@ -226,36 +227,36 @@
|
|
|
226
227
|
</template>
|
|
227
228
|
</d2l-demo-snippet>
|
|
228
229
|
|
|
229
|
-
<h2>Side nav
|
|
230
|
+
<h2>Side nav list (simple)</h2>
|
|
230
231
|
|
|
231
232
|
<d2l-demo-snippet>
|
|
232
233
|
<template>
|
|
233
234
|
<d2l-list grid style="width: 334px;">
|
|
234
|
-
<d2l-list-item-nav-button key="L1-1" label="Welcome!" color="#006fbf" expandable expanded
|
|
235
|
+
<d2l-list-item-nav-button key="L1-1" label="Welcome!" color="#006fbf" expandable expanded>
|
|
235
236
|
<d2l-list-item-content>
|
|
236
237
|
<div>Welcome!</div>
|
|
237
238
|
</d2l-list-item-content>
|
|
238
239
|
<d2l-list slot="nested" grid>
|
|
239
|
-
<d2l-list-item-nav-button key="L2-1" label="Syallabus Confirmation"
|
|
240
|
+
<d2l-list-item-nav-button key="L2-1" label="Syallabus Confirmation">
|
|
240
241
|
<d2l-list-item-content>
|
|
241
242
|
<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Syallabus Confirmation</div>
|
|
242
|
-
<div slot="secondary"><d2l-tooltip-help text="Due: May 2, 2023 at 2 pm">
|
|
243
|
+
<div slot="secondary"><d2l-tooltip-help text="Due: May 2, 2023 at 2 pm" style="padding: 5px;">Start: May 1, 2023 at 12:01 AM</d2l-tooltip-help></div>
|
|
243
244
|
</d2l-list-item-content>
|
|
244
245
|
</d2l-list-item-nav-button>
|
|
245
246
|
</d2l-list>
|
|
246
247
|
</d2l-list-item-nav-button>
|
|
247
|
-
<d2l-list-item-nav-button key="L2-2" label="Unit 1: Poetry" color="#29a6ff" expandable expanded
|
|
248
|
+
<d2l-list-item-nav-button key="L2-2" label="Unit 1: Poetry" color="#29a6ff" expandable expanded>
|
|
248
249
|
<d2l-list-item-content>
|
|
249
250
|
<div>Unit 1: Fiction</div>
|
|
250
|
-
<div slot="secondary"><d2l-tooltip-help text="
|
|
251
|
+
<div slot="secondary"><d2l-tooltip-help text="Due: May 2, 2023 at 5 pm" style="padding: 5px;">Starts: May 1, 2023 at 12:01 AM</d2l-tooltip-help></div>
|
|
251
252
|
</d2l-list-item-content>
|
|
252
253
|
<d2l-list slot="nested" grid>
|
|
253
|
-
<d2l-list-item-nav-button key="L3-2" label="Fiction"
|
|
254
|
+
<d2l-list-item-nav-button key="L3-2" label="Fiction">
|
|
254
255
|
<d2l-list-item-content>
|
|
255
256
|
<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Fiction</div>
|
|
256
257
|
</d2l-list-item-content>
|
|
257
258
|
</d2l-list-item-nav-button>
|
|
258
|
-
<d2l-list-item-nav-button key="L3-2" label="Ten rules for writing fiction"
|
|
259
|
+
<d2l-list-item-nav-button key="L3-2" label="Ten rules for writing fiction">
|
|
259
260
|
<d2l-list-item-content>
|
|
260
261
|
<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Ten rules for writing fiction</div>
|
|
261
262
|
</d2l-list-item-content>
|
|
@@ -286,6 +287,14 @@
|
|
|
286
287
|
</template>
|
|
287
288
|
</d2l-demo-snippet>
|
|
288
289
|
|
|
290
|
+
<h2>Side nav list (more complex with drag & drop)</h2>
|
|
291
|
+
|
|
292
|
+
<d2l-demo-snippet>
|
|
293
|
+
<template>
|
|
294
|
+
<d2l-demo-list-nav></d2l-demo-list-nav>
|
|
295
|
+
</template>
|
|
296
|
+
</d2l-demo-snippet>
|
|
297
|
+
|
|
289
298
|
<h2>All Iterations</h2>
|
|
290
299
|
|
|
291
300
|
<d2l-demo-snippet full-width>
|
package/custom-elements.json
CHANGED
|
@@ -8364,6 +8364,10 @@
|
|
|
8364
8364
|
}
|
|
8365
8365
|
]
|
|
8366
8366
|
},
|
|
8367
|
+
{
|
|
8368
|
+
"name": "d2l-demo-list-nav",
|
|
8369
|
+
"path": "./components/list/demo/demo-list-nav.js"
|
|
8370
|
+
},
|
|
8367
8371
|
{
|
|
8368
8372
|
"name": "d2l-demo-list-nested-iterations-helper",
|
|
8369
8373
|
"path": "./components/list/demo/demo-list-nested-iterations-helper.js",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.123.
|
|
3
|
+
"version": "3.123.3",
|
|
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",
|