@brightspace-ui/core 3.123.2 → 3.124.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/inputs/demo/input-group.html +7 -9
- package/components/inputs/docs/input-radio.md +1 -1
- package/components/inputs/input-fieldset.js +18 -4
- package/components/inputs/input-group.js +1 -1
- package/components/list/demo/demo-list-nav.js +162 -0
- package/components/list/demo/list-demo-scenarios.js +52 -1
- package/components/list/demo/list-nested.html +17 -8
- package/custom-elements.json +17 -0
- package/package.json +1 -1
@@ -26,20 +26,18 @@
|
|
26
26
|
<d2l-form>
|
27
27
|
<d2l-input-group>
|
28
28
|
<d2l-input-text label="Name" required></d2l-input-text>
|
29
|
-
<d2l-input-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
<d2l-input-fieldset label="Address" label-hidden>
|
29
|
+
<d2l-input-textarea label="Description" rows="3"></d2l-input-textarea>
|
30
|
+
<d2l-input-checkbox-group label="Options">
|
31
|
+
<d2l-input-checkbox>Option 1</d2l-input-checkbox>
|
32
|
+
<d2l-input-checkbox checked>Option 2</d2l-input-checkbox>
|
33
|
+
<d2l-input-checkbox>Option 3</d2l-input-checkbox>
|
34
|
+
</d2l-input-checkbox-group>
|
35
|
+
<d2l-input-fieldset label="Address" label-style="heading">
|
37
36
|
<d2l-input-group>
|
38
37
|
<d2l-input-text label="Street" required></d2l-input-text>
|
39
38
|
<d2l-input-text label="City" required></d2l-input-text>
|
40
39
|
</d2l-input-group>
|
41
40
|
</d2l-input-fieldset>
|
42
|
-
<d2l-input-textarea label="Description" rows="3"></d2l-input-textarea>
|
43
41
|
</d2l-input-group>
|
44
42
|
</d2l-form>
|
45
43
|
<d2l-floating-buttons>
|
@@ -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
|
});
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import { css, html, LitElement } from 'lit';
|
2
2
|
import { classMap } from 'lit/directives/class-map.js';
|
3
3
|
import { getUniqueId } from '../../helpers/uniqueId.js';
|
4
|
+
import { heading4Styles } from '../typography/styles.js';
|
4
5
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
5
6
|
import { InputInlineHelpMixin } from './input-inline-help.js';
|
6
7
|
import { inputLabelStyles } from './input-label-styles.js';
|
@@ -26,6 +27,11 @@ class InputFieldset extends PropertyRequiredMixin(InputInlineHelpMixin(SkeletonM
|
|
26
27
|
* @type {boolean}
|
27
28
|
*/
|
28
29
|
labelHidden: { type: Boolean, attribute: 'label-hidden', reflect: true },
|
30
|
+
/**
|
31
|
+
* Style of the fieldset label
|
32
|
+
* @type {'default'|'heading'}
|
33
|
+
*/
|
34
|
+
labelStyle: { type: String, attribute: 'label-style', reflect: true },
|
29
35
|
/**
|
30
36
|
* Indicates that a value is required for inputs in the fieldset
|
31
37
|
* @type {boolean}
|
@@ -35,7 +41,7 @@ class InputFieldset extends PropertyRequiredMixin(InputInlineHelpMixin(SkeletonM
|
|
35
41
|
}
|
36
42
|
|
37
43
|
static get styles() {
|
38
|
-
return [ super.styles, inputLabelStyles, offscreenStyles,
|
44
|
+
return [ super.styles, heading4Styles, inputLabelStyles, offscreenStyles,
|
39
45
|
css`
|
40
46
|
:host {
|
41
47
|
display: block;
|
@@ -43,6 +49,13 @@ class InputFieldset extends PropertyRequiredMixin(InputInlineHelpMixin(SkeletonM
|
|
43
49
|
:host([hidden]) {
|
44
50
|
display: none;
|
45
51
|
}
|
52
|
+
:host([label-style="heading"]:not([label-hidden])) {
|
53
|
+
margin-block-start: 0.3rem;
|
54
|
+
}
|
55
|
+
legend.d2l-heading-4 {
|
56
|
+
margin-block: 0 0.6rem;
|
57
|
+
padding: 0;
|
58
|
+
}
|
46
59
|
`
|
47
60
|
];
|
48
61
|
}
|
@@ -50,21 +63,22 @@ class InputFieldset extends PropertyRequiredMixin(InputInlineHelpMixin(SkeletonM
|
|
50
63
|
constructor() {
|
51
64
|
super();
|
52
65
|
this.labelHidden = false;
|
66
|
+
this.labelStyle = 'default';
|
53
67
|
this.required = false;
|
54
68
|
this._inlineHelpId = getUniqueId();
|
55
69
|
}
|
56
70
|
|
57
71
|
render() {
|
58
72
|
const legendClasses = {
|
59
|
-
'd2l-
|
73
|
+
'd2l-heading-4': this.labelStyle === 'heading',
|
74
|
+
'd2l-input-label': this.labelStyle !== 'heading',
|
60
75
|
'd2l-offscreen': this.labelHidden,
|
61
76
|
'd2l-skeletize': true
|
62
77
|
};
|
63
78
|
return html`
|
64
79
|
<fieldset
|
65
80
|
class="d2l-input-label-fieldset"
|
66
|
-
aria-describedby="${ifDefined(this._hasInlineHelp ? this._inlineHelpId : undefined)}"
|
67
|
-
>
|
81
|
+
aria-describedby="${ifDefined(this._hasInlineHelp ? this._inlineHelpId : undefined)}">
|
68
82
|
<legend class="${classMap(legendClasses)}">${this.label}</legend>
|
69
83
|
<slot></slot>
|
70
84
|
${this._renderInlineHelp(this._inlineHelpId)}
|
@@ -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
@@ -6406,6 +6406,12 @@
|
|
6406
6406
|
"type": "boolean",
|
6407
6407
|
"default": "false"
|
6408
6408
|
},
|
6409
|
+
{
|
6410
|
+
"name": "label-style",
|
6411
|
+
"description": "Style of the fieldset label",
|
6412
|
+
"type": "'default'|'heading'",
|
6413
|
+
"default": "\"default\""
|
6414
|
+
},
|
6409
6415
|
{
|
6410
6416
|
"name": "required",
|
6411
6417
|
"description": "Indicates that a value is required for inputs in the fieldset",
|
@@ -6432,6 +6438,13 @@
|
|
6432
6438
|
"type": "boolean",
|
6433
6439
|
"default": "false"
|
6434
6440
|
},
|
6441
|
+
{
|
6442
|
+
"name": "labelStyle",
|
6443
|
+
"attribute": "label-style",
|
6444
|
+
"description": "Style of the fieldset label",
|
6445
|
+
"type": "'default'|'heading'",
|
6446
|
+
"default": "\"default\""
|
6447
|
+
},
|
6435
6448
|
{
|
6436
6449
|
"name": "required",
|
6437
6450
|
"attribute": "required",
|
@@ -8364,6 +8377,10 @@
|
|
8364
8377
|
}
|
8365
8378
|
]
|
8366
8379
|
},
|
8380
|
+
{
|
8381
|
+
"name": "d2l-demo-list-nav",
|
8382
|
+
"path": "./components/list/demo/demo-list-nav.js"
|
8383
|
+
},
|
8367
8384
|
{
|
8368
8385
|
"name": "d2l-demo-list-nested-iterations-helper",
|
8369
8386
|
"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.
|
3
|
+
"version": "3.124.0",
|
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",
|