@brightspace-ui/core 2.119.1 → 2.120.1
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/input-date.js +6 -3
- package/components/list/README.md +1 -0
- package/components/list/demo/demo-list-nested-iterations-helper.js +149 -0
- package/components/list/demo/list-nested.html +26 -0
- package/components/list/list.js +9 -1
- package/custom-elements.json +32 -8
- package/package.json +2 -2
|
@@ -123,6 +123,9 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
|
|
|
123
123
|
visibility: hidden;
|
|
124
124
|
width: auto;
|
|
125
125
|
}
|
|
126
|
+
.d2l-input-date-hidden-text > div {
|
|
127
|
+
padding-left: 2rem; /* simulates space taken up by the icon */
|
|
128
|
+
}
|
|
126
129
|
d2l-calendar {
|
|
127
130
|
padding: 0.25rem 0.6rem;
|
|
128
131
|
}
|
|
@@ -268,9 +271,9 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
|
|
|
268
271
|
</d2l-dropdown-content>` : null;
|
|
269
272
|
return html`
|
|
270
273
|
<div aria-hidden="true" class="d2l-input-date-hidden-text">
|
|
271
|
-
<div
|
|
272
|
-
<div
|
|
273
|
-
<div
|
|
274
|
+
<div>${formattedWideDate}</div>
|
|
275
|
+
<div>${shortDateFormat}</div>
|
|
276
|
+
<div>${this.emptyText}</div>
|
|
274
277
|
</div>
|
|
275
278
|
${errorTooltip}
|
|
276
279
|
${infoTooltip}
|
|
@@ -135,6 +135,7 @@ The `d2l-list` is the container to create a styled list of items using `d2l-list
|
|
|
135
135
|
|---|---|---|
|
|
136
136
|
| `drag-multiple` | Boolean | Whether the user can drag multiple items |
|
|
137
137
|
| `grid` | Boolean | Enables keyboard grid for supported list items. See [Accessibility](#accessibility). |
|
|
138
|
+
| `label` | String | Sets an accessible label. For use when the list context is unclear. This property is only valid on top-level lists and will have no effect on nested lists. |
|
|
138
139
|
| `selection-single` | Boolean | Whether to render with single selection behaviour. If `selection-single` is specified, the list-items will render with radios instead of checkboxes, and the list component will maintain a single selected item. |
|
|
139
140
|
| `separators` | String | Display separators (`all` (default), `between`, `none`) |
|
|
140
141
|
| `extend-separators` | Boolean | Whether to extend the separators beyond the content's edge |
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
import '../../colors/colors.js';
|
|
2
|
+
import '../list-item-content.js';
|
|
3
|
+
import '../list-item.js';
|
|
4
|
+
import '../list.js';
|
|
5
|
+
import { css, html, LitElement, nothing } from 'lit';
|
|
6
|
+
|
|
7
|
+
class ListNestedIterationsHelper extends LitElement {
|
|
8
|
+
static get properties() {
|
|
9
|
+
return {
|
|
10
|
+
draggable: { type: Boolean }
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
static get styles() {
|
|
15
|
+
return css`
|
|
16
|
+
:host {
|
|
17
|
+
display: block;
|
|
18
|
+
}
|
|
19
|
+
table {
|
|
20
|
+
border-collapse: collapse;
|
|
21
|
+
font-size: 0.8rem;
|
|
22
|
+
table-layout: fixed;
|
|
23
|
+
width: 100%;
|
|
24
|
+
}
|
|
25
|
+
table > * > tr > * {
|
|
26
|
+
border: 1px solid var(--d2l-color-mica);
|
|
27
|
+
font-weight: 400;
|
|
28
|
+
height: 41px;
|
|
29
|
+
padding: 0.5rem 1rem;
|
|
30
|
+
text-align: start;
|
|
31
|
+
vertical-align: middle;
|
|
32
|
+
}
|
|
33
|
+
table > * > tr > td {
|
|
34
|
+
vertical-align: top;
|
|
35
|
+
}
|
|
36
|
+
table > thead > tr > th,
|
|
37
|
+
table > * > tr.header > th {
|
|
38
|
+
background-color: var(--d2l-color-regolith);
|
|
39
|
+
font-size: 0.7rem;
|
|
40
|
+
height: 27px;
|
|
41
|
+
line-height: 0.9rem;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
d2l-list:not([slot="nested"]) {
|
|
45
|
+
border: solid 1px black;
|
|
46
|
+
margin: 1rem;
|
|
47
|
+
padding: 1rem;
|
|
48
|
+
}
|
|
49
|
+
.minimize-width {
|
|
50
|
+
width: 4.5rem;
|
|
51
|
+
}
|
|
52
|
+
`;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
constructor() {
|
|
56
|
+
super();
|
|
57
|
+
this.draggable = false;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
render() {
|
|
61
|
+
const selectableOptions = [
|
|
62
|
+
{ name: 'All are Selectable', parent: true, child: true },
|
|
63
|
+
{ name: 'None are Selectable', parent: false, child: false },
|
|
64
|
+
{ name: 'Children Selectable (Parent Not)', parent: false, child: true },
|
|
65
|
+
{ name: 'Parent Selectable (Children Not)', parent: true, child: false }
|
|
66
|
+
];
|
|
67
|
+
|
|
68
|
+
const tableRows = selectableOptions.map(option => html`
|
|
69
|
+
<tr class="header">
|
|
70
|
+
<th rowspan="2" scope="rowgroup">${option.name}</th>
|
|
71
|
+
<th scope="row">Exp/Collapsible Children</th>
|
|
72
|
+
<td>${this._createList([option.parent, true], [option.child, true])}</td>
|
|
73
|
+
<td>${this._createList([option.parent, false], [option.child, true])}</td>
|
|
74
|
+
</tr>
|
|
75
|
+
<tr class="header">
|
|
76
|
+
<th scope="row">Non-Exp/Collapsible Children</th>
|
|
77
|
+
<td>${this._createList([option.parent, true], [option.child, false])}</td>
|
|
78
|
+
<td>${this._createList([option.parent, false], [option.child, false])}</td>
|
|
79
|
+
</tr>
|
|
80
|
+
`);
|
|
81
|
+
|
|
82
|
+
return html`
|
|
83
|
+
<table>
|
|
84
|
+
<thead>
|
|
85
|
+
<tr>
|
|
86
|
+
<th class="minimize-width"></th>
|
|
87
|
+
<th class="minimize-width"></th>
|
|
88
|
+
<th scope="col">Exp/Collapsible Parent</th>
|
|
89
|
+
<th scope="col">Non-Exp/Collapsible Parent</th>
|
|
90
|
+
</tr>
|
|
91
|
+
</thead>
|
|
92
|
+
<tbody>
|
|
93
|
+
${tableRows}
|
|
94
|
+
</tbody>
|
|
95
|
+
</table>
|
|
96
|
+
`;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
_createList(parentOptions, childrenOptions) {
|
|
100
|
+
return html`
|
|
101
|
+
<d2l-list>
|
|
102
|
+
${this._getParentItems(parentOptions, this._getChildItems(childrenOptions))}
|
|
103
|
+
</d2l-list>
|
|
104
|
+
`;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
_getChildItems(childOptions) {
|
|
108
|
+
const childL2Text = 'L2 List Item';
|
|
109
|
+
const childL3Text = 'L3 List Item';
|
|
110
|
+
const items = [];
|
|
111
|
+
|
|
112
|
+
for (let i = 0; i < 3; i++) {
|
|
113
|
+
const childKey = `child-${i}-${childOptions[0]}-${childOptions[1]}`;
|
|
114
|
+
items.push(html`
|
|
115
|
+
<d2l-list-item key="${childKey}" label="${childL2Text}" ?selectable="${!!childOptions[0]}" ?draggable="${this.draggable}" ?expandable="${childOptions[1] && i !== 1}">
|
|
116
|
+
<d2l-list-item-content>${childL2Text}</d2l-list-item-content>
|
|
117
|
+
${i === 1 || !childOptions[1] ? nothing : html`
|
|
118
|
+
<d2l-list slot="nested">
|
|
119
|
+
<d2l-list-item key="${`${childKey}-child`}" label="${childL3Text}" ?selectable="${!!childOptions[0]}" ?draggable="${this.draggable}">
|
|
120
|
+
<d2l-list-item-content>${childL3Text}</d2l-list-item-content>
|
|
121
|
+
</d2l-list-item>
|
|
122
|
+
</d2l-list>
|
|
123
|
+
`}
|
|
124
|
+
</d2l-list-item>
|
|
125
|
+
`);
|
|
126
|
+
}
|
|
127
|
+
return items;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
_getParentItems(parentOptions, nested) {
|
|
131
|
+
const parentText = 'L1 List Item';
|
|
132
|
+
const items = [];
|
|
133
|
+
|
|
134
|
+
for (let i = 0; i < 3; i++) {
|
|
135
|
+
const parentKey = `parent-${i}-${parentOptions[0]}-${parentOptions[1]}`;
|
|
136
|
+
items.push(html`
|
|
137
|
+
<d2l-list-item key="${parentKey}" label="${parentText}" ?selectable="${!!parentOptions[0]}" ?draggable="${this.draggable}" ?expandable="${parentOptions[1] && i !== 1}" ?expanded="${parentOptions[1] && i === 0}">
|
|
138
|
+
<d2l-list-item-content>${parentText}</d2l-list-item-content>
|
|
139
|
+
${i === 1 || (i === 2 && !parentOptions[1]) ? nothing : html`
|
|
140
|
+
<d2l-list slot="nested">${nested}</d2l-list>
|
|
141
|
+
`}
|
|
142
|
+
</d2l-list-item>
|
|
143
|
+
`);
|
|
144
|
+
}
|
|
145
|
+
return items;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
customElements.define('d2l-demo-list-nested-iterations-helper', ListNestedIterationsHelper);
|
|
@@ -20,6 +20,9 @@
|
|
|
20
20
|
import '../../menu/menu-item.js';
|
|
21
21
|
import '../../paging/pager-load-more.js';
|
|
22
22
|
import '../../selection/selection-action.js';
|
|
23
|
+
import '../../switch/switch.js';
|
|
24
|
+
|
|
25
|
+
import './demo-list-nested-iterations-helper.js';
|
|
23
26
|
</script>
|
|
24
27
|
</head>
|
|
25
28
|
<body unresolved>
|
|
@@ -222,6 +225,15 @@
|
|
|
222
225
|
</template>
|
|
223
226
|
</d2l-demo-snippet>
|
|
224
227
|
|
|
228
|
+
<h2>All Iterations</h2>
|
|
229
|
+
|
|
230
|
+
<d2l-demo-snippet full-width>
|
|
231
|
+
<template>
|
|
232
|
+
<d2l-switch id="draggable-switch" text="Draggable"></d2l-switch>
|
|
233
|
+
<d2l-demo-list-nested-iterations-helper></d2l-demo-list-nested-iterations-helper>
|
|
234
|
+
</template>
|
|
235
|
+
</d2l-demo-snippet>
|
|
236
|
+
|
|
225
237
|
</d2l-demo-page>
|
|
226
238
|
|
|
227
239
|
<script>
|
|
@@ -238,6 +250,20 @@
|
|
|
238
250
|
setTimeout(() => e.detail.complete(), 2000);
|
|
239
251
|
});
|
|
240
252
|
});
|
|
253
|
+
|
|
254
|
+
const setupSwitch = () => {
|
|
255
|
+
const draggableSwitch = document.querySelector('#draggable-switch');
|
|
256
|
+
if (!draggableSwitch) {
|
|
257
|
+
setTimeout(setupSwitch, 1000);
|
|
258
|
+
} else {
|
|
259
|
+
draggableSwitch.addEventListener('change', (e) => {
|
|
260
|
+
const listIterations = document.querySelector('d2l-demo-list-nested-iterations-helper');
|
|
261
|
+
listIterations.draggable = e.target.on;
|
|
262
|
+
});
|
|
263
|
+
}
|
|
264
|
+
};
|
|
265
|
+
|
|
266
|
+
setupSwitch();
|
|
241
267
|
}, 1000);
|
|
242
268
|
</script>
|
|
243
269
|
|
package/components/list/list.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { css, html, LitElement } from 'lit';
|
|
2
2
|
import { getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
|
|
3
3
|
import { SelectionInfo, SelectionMixin } from '../selection/selection-mixin.js';
|
|
4
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
4
5
|
import { PageableMixin } from '../paging/pageable-mixin.js';
|
|
5
6
|
import { SubscriberRegistryController } from '../../controllers/subscriber/subscriberControllers.js';
|
|
6
7
|
|
|
@@ -36,6 +37,11 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
|
|
|
36
37
|
* @type {boolean}
|
|
37
38
|
*/
|
|
38
39
|
grid: { type: Boolean },
|
|
40
|
+
/**
|
|
41
|
+
* Sets an accessible label. For use when the list context is unclear. This property is only valid on top-level lists and will have no effect on nested lists.
|
|
42
|
+
* @type {string}
|
|
43
|
+
*/
|
|
44
|
+
label: { type: String },
|
|
39
45
|
/**
|
|
40
46
|
* Display separators. Valid values are "all" (default), "between", "none"
|
|
41
47
|
* @type {'all'|'between'|'none'}
|
|
@@ -64,6 +70,7 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
|
|
|
64
70
|
this.dragMultiple = false;
|
|
65
71
|
this.extendSeparators = false;
|
|
66
72
|
this.grid = false;
|
|
73
|
+
this.label = undefined;
|
|
67
74
|
this._listItemChanges = [];
|
|
68
75
|
this._childHasExpandCollapseToggle = false;
|
|
69
76
|
|
|
@@ -117,10 +124,11 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
|
|
|
117
124
|
|
|
118
125
|
render() {
|
|
119
126
|
const role = !this.grid ? 'list' : 'application';
|
|
127
|
+
const ariaLabel = this.slot !== 'nested' ? this.label : undefined;
|
|
120
128
|
return html`
|
|
121
129
|
<slot name="controls"></slot>
|
|
122
130
|
<slot name="header"></slot>
|
|
123
|
-
<div role="${role}">
|
|
131
|
+
<div role="${role}" aria-label="${ifDefined(ariaLabel)}">
|
|
124
132
|
<slot @keydown="${this._handleKeyDown}" @slotchange="${this._handleSlotChange}"></slot>
|
|
125
133
|
</div>
|
|
126
134
|
${this._renderPagerContainer()}
|
package/custom-elements.json
CHANGED
|
@@ -7592,6 +7592,25 @@
|
|
|
7592
7592
|
}
|
|
7593
7593
|
]
|
|
7594
7594
|
},
|
|
7595
|
+
{
|
|
7596
|
+
"name": "d2l-demo-list-nested-iterations-helper",
|
|
7597
|
+
"path": "./components/list/demo/demo-list-nested-iterations-helper.js",
|
|
7598
|
+
"attributes": [
|
|
7599
|
+
{
|
|
7600
|
+
"name": "draggable",
|
|
7601
|
+
"type": "boolean",
|
|
7602
|
+
"default": "false"
|
|
7603
|
+
}
|
|
7604
|
+
],
|
|
7605
|
+
"properties": [
|
|
7606
|
+
{
|
|
7607
|
+
"name": "draggable",
|
|
7608
|
+
"attribute": "draggable",
|
|
7609
|
+
"type": "boolean",
|
|
7610
|
+
"default": "false"
|
|
7611
|
+
}
|
|
7612
|
+
]
|
|
7613
|
+
},
|
|
7595
7614
|
{
|
|
7596
7615
|
"name": "d2l-demo-list-nested-lazy-load",
|
|
7597
7616
|
"path": "./components/list/demo/demo-list-nested-lazy-load.js"
|
|
@@ -8899,6 +8918,12 @@
|
|
|
8899
8918
|
"type": "boolean",
|
|
8900
8919
|
"default": "false"
|
|
8901
8920
|
},
|
|
8921
|
+
{
|
|
8922
|
+
"name": "label",
|
|
8923
|
+
"description": "Sets an accessible label. For use when the list context is unclear. This property is only valid on top-level lists and will have no effect on nested lists.",
|
|
8924
|
+
"type": "string",
|
|
8925
|
+
"default": "\"undefined\""
|
|
8926
|
+
},
|
|
8902
8927
|
{
|
|
8903
8928
|
"name": "item-count",
|
|
8904
8929
|
"description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
|
|
@@ -8945,6 +8970,13 @@
|
|
|
8945
8970
|
"type": "boolean",
|
|
8946
8971
|
"default": "false"
|
|
8947
8972
|
},
|
|
8973
|
+
{
|
|
8974
|
+
"name": "label",
|
|
8975
|
+
"attribute": "label",
|
|
8976
|
+
"description": "Sets an accessible label. For use when the list context is unclear. This property is only valid on top-level lists and will have no effect on nested lists.",
|
|
8977
|
+
"type": "string",
|
|
8978
|
+
"default": "\"undefined\""
|
|
8979
|
+
},
|
|
8948
8980
|
{
|
|
8949
8981
|
"name": "itemCount",
|
|
8950
8982
|
"attribute": "item-count",
|
|
@@ -8994,14 +9026,6 @@
|
|
|
8994
9026
|
}
|
|
8995
9027
|
]
|
|
8996
9028
|
},
|
|
8997
|
-
{
|
|
8998
|
-
"name": "d2l-nested-list-iterations-separate",
|
|
8999
|
-
"path": "./components/list/test/nested-list-iterations-helper.js"
|
|
9000
|
-
},
|
|
9001
|
-
{
|
|
9002
|
-
"name": "d2l-nested-list-iterations-combined",
|
|
9003
|
-
"path": "./components/list/test/nested-list-iterations-helper.js"
|
|
9004
|
-
},
|
|
9005
9029
|
{
|
|
9006
9030
|
"name": "d2l-loading-spinner-demo-override",
|
|
9007
9031
|
"path": "./components/loading-spinner/demo/loading-spinner-override.js",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.120.1",
|
|
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",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"glob-all": "^3",
|
|
62
62
|
"lit-analyzer": "^1",
|
|
63
63
|
"messageformat-validator": "^2",
|
|
64
|
-
"node-sass": "^
|
|
64
|
+
"node-sass": "^9",
|
|
65
65
|
"rollup": "^3",
|
|
66
66
|
"rollup-plugin-copy": "^3",
|
|
67
67
|
"rollup-plugin-delete": "^2",
|