@brightspace-ui/core 1.186.0 → 1.189.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/filter/filter.js +23 -2
- package/components/html-block/demo/html-block.html +1 -10
- package/components/inputs/input-date-time.js +5 -11
- package/components/inputs/input-date.js +4 -11
- package/components/inputs/input-number.js +4 -10
- package/components/inputs/input-percent.js +4 -14
- package/components/inputs/input-text.js +11 -8
- package/components/inputs/input-textarea.js +4 -8
- package/components/inputs/input-time.js +3 -10
- package/components/list/demo/list-item-custom.js +83 -0
- package/components/list/demo/list-nested.html +193 -0
- package/components/list/list-item-checkbox-mixin.js +29 -16
- package/components/list/list-item-mixin.js +3 -3
- package/components/selection/selection-mixin.js +4 -0
- package/components/tooltip/tooltip.js +1 -0
- package/custom-elements.json +419 -83
- package/helpers/framed.js +1 -1
- package/helpers/mathjax.js +10 -2
- package/mixins/labelled-mixin.js +3 -3
- package/package.json +1 -1
|
@@ -0,0 +1,193 @@
|
|
|
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 '../../button/button-subtle.js';
|
|
9
|
+
import '../../button/button-icon.js';
|
|
10
|
+
import '../../demo/demo-page.js';
|
|
11
|
+
import '../../dropdown/dropdown-menu.js';
|
|
12
|
+
import '../../dropdown/dropdown-more.js';
|
|
13
|
+
import '../list-item-button.js';
|
|
14
|
+
import '../list-item-content.js';
|
|
15
|
+
import './list-item-custom.js';
|
|
16
|
+
import '../list-item.js';
|
|
17
|
+
import '../list-header.js';
|
|
18
|
+
import '../list.js';
|
|
19
|
+
import '../../menu/menu.js';
|
|
20
|
+
import '../../menu/menu-item.js';
|
|
21
|
+
import '../../selection/selection-action.js';
|
|
22
|
+
</script>
|
|
23
|
+
</head>
|
|
24
|
+
<body unresolved>
|
|
25
|
+
|
|
26
|
+
<d2l-demo-page page-title="d2l-list-item (nested)">
|
|
27
|
+
|
|
28
|
+
<h2>Nested</h2>
|
|
29
|
+
|
|
30
|
+
<d2l-demo-snippet>
|
|
31
|
+
<template>
|
|
32
|
+
<d2l-list>
|
|
33
|
+
<d2l-list-header slot="header">
|
|
34
|
+
<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
|
|
35
|
+
<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
|
|
36
|
+
</d2l-list-header>
|
|
37
|
+
<d2l-list-item selectable key="L1-1">
|
|
38
|
+
<d2l-list-item-content>
|
|
39
|
+
<div>Earth Sciences (L1)</div>
|
|
40
|
+
<div slot="supporting-info">Earth science or geoscience includes all fields of natural science related to planet Earth. This is a branch of science dealing with the physical and chemical constitution of Earth and its atmosphere. Earth science can be considered to be a branch of planetary science, but with a much older history.</div>
|
|
41
|
+
</d2l-list-item-content>
|
|
42
|
+
<d2l-list slot="nested" separators="all">
|
|
43
|
+
<d2l-list-item selectable key="L2-1">
|
|
44
|
+
<d2l-list-item-content>
|
|
45
|
+
<div>Introductory Earth Sciences (L2)</div>
|
|
46
|
+
<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering. Students will gain an appreciation of how these processes have controlled the evolution of our planet and the role of geology in meeting society's current and future demand for sustainable energy and mineral resources.</div>
|
|
47
|
+
</d2l-list-item-content>
|
|
48
|
+
<d2l-list slot="nested" separators="all">
|
|
49
|
+
<d2l-list-item selectable key="L3-1">
|
|
50
|
+
<d2l-list-item-content>
|
|
51
|
+
<div>Glaciation (L3)</div>
|
|
52
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
53
|
+
</d2l-list-item-content>
|
|
54
|
+
<d2l-list slot="nested" separators="all">
|
|
55
|
+
<d2l-list-item selectable key="L4-1">
|
|
56
|
+
<d2l-list-item-content>
|
|
57
|
+
<div>Ice Sheets (L4)</div>
|
|
58
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
59
|
+
</d2l-list-item-content>
|
|
60
|
+
<d2l-list slot="nested" separators="all">
|
|
61
|
+
<d2l-list-item selectable key="L5-1">
|
|
62
|
+
<d2l-list-item-content>
|
|
63
|
+
<div>Topic 1 (L5)</div>
|
|
64
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
65
|
+
</d2l-list-item-content>
|
|
66
|
+
</d2l-list-item>
|
|
67
|
+
<d2l-list-item selectable key="L5-2">
|
|
68
|
+
<d2l-list-item-content>
|
|
69
|
+
<div>Topic 2 (L5)</div>
|
|
70
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
71
|
+
</d2l-list-item-content>
|
|
72
|
+
<d2l-list slot="nested" separators="all">
|
|
73
|
+
<d2l-list-item selectable key="L6-1">
|
|
74
|
+
<d2l-list-item-content>
|
|
75
|
+
<div>Sub-Topic 1 (L6)</div>
|
|
76
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
77
|
+
</d2l-list-item-content>
|
|
78
|
+
<d2l-list slot="nested" separators="all">
|
|
79
|
+
<d2l-list-item selectable key="L7-1">
|
|
80
|
+
<d2l-list-item-content>
|
|
81
|
+
<div>Sub-Topic 1 (L7)</div>
|
|
82
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
83
|
+
</d2l-list-item-content>
|
|
84
|
+
<d2l-list slot="nested" separators="all">
|
|
85
|
+
<d2l-list-item selectable selected key="L8-1">
|
|
86
|
+
<d2l-list-item-content>
|
|
87
|
+
<div>Sub-Topic 1 (L8)</div>
|
|
88
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
89
|
+
</d2l-list-item-content>
|
|
90
|
+
</d2l-list-item>
|
|
91
|
+
<d2l-list-item selectable key="L8-2">
|
|
92
|
+
<d2l-list-item-content>
|
|
93
|
+
<div>Sub-Topic 2 (L8)</div>
|
|
94
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
95
|
+
</d2l-list-item-content>
|
|
96
|
+
</d2l-list-item>
|
|
97
|
+
</d2l-list>
|
|
98
|
+
</d2l-list-item>
|
|
99
|
+
<d2l-list-item selectable key="L7-2">
|
|
100
|
+
<d2l-list-item-content>
|
|
101
|
+
<div>Sub-Topic 2 (L7)</div>
|
|
102
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
103
|
+
</d2l-list-item-content>
|
|
104
|
+
</d2l-list-item>
|
|
105
|
+
</d2l-list>
|
|
106
|
+
</d2l-list-item>
|
|
107
|
+
<d2l-list-item selectable key="L6-2">
|
|
108
|
+
<d2l-list-item-content>
|
|
109
|
+
<div>Sub-Topic 2 (L6)</div>
|
|
110
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
111
|
+
</d2l-list-item-content>
|
|
112
|
+
</d2l-list-item>
|
|
113
|
+
</d2l-list>
|
|
114
|
+
</d2l-list-item>
|
|
115
|
+
</d2l-list>
|
|
116
|
+
</d2l-list-item>
|
|
117
|
+
<d2l-list-item selectable key="L4-2">
|
|
118
|
+
<d2l-list-item-content>
|
|
119
|
+
<div>Alpine Glaciers (L4)</div>
|
|
120
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
121
|
+
</d2l-list-item-content>
|
|
122
|
+
</d2l-list-item>
|
|
123
|
+
</d2l-list>
|
|
124
|
+
</d2l-list-item>
|
|
125
|
+
<d2l-list-item selectable key="L3-2">
|
|
126
|
+
<d2l-list-item-content>
|
|
127
|
+
<div>Weathering (L3)</div>
|
|
128
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
129
|
+
</d2l-list-item-content>
|
|
130
|
+
</d2l-list-item>
|
|
131
|
+
<d2l-list-item selectable key="L3-3">
|
|
132
|
+
<d2l-list-item-content>
|
|
133
|
+
<div>Volcanism (L3)</div>
|
|
134
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
135
|
+
</d2l-list-item-content>
|
|
136
|
+
</d2l-list-item>
|
|
137
|
+
</d2l-list>
|
|
138
|
+
</d2l-list-item>
|
|
139
|
+
<d2l-list-item selectable key="L2-2">
|
|
140
|
+
<d2l-list-item-content>
|
|
141
|
+
<div>Flow and Transport Through Fractured Rocks (L2)</div>
|
|
142
|
+
<div slot="supporting-info">Fractures are ubiquitous in geologic media and important in disciplines such as physical and contaminant hydrogeology, geotechnical engineering, civil and environmental engineering, petroleum engineering among other areas. Despite the importance of fractures, its characterization and predictions of groundwater flow and contaminant transport are fraught with significant difficulties. Students are taught to deal with fractures in hydrogeology, to conceptualize them, and to build reliable models for predicting groundwater flow and contaminant transport.</div>
|
|
143
|
+
</d2l-list-item-content>
|
|
144
|
+
</d2l-list-item>
|
|
145
|
+
<d2l-list-item selectable key="L2-3">
|
|
146
|
+
<d2l-list-item-content>
|
|
147
|
+
<div>Applied Wetland Science (L2)</div>
|
|
148
|
+
<div slot="supporting-info">Advanced concepts on wetland ecosystems in the context of regional and global earth systems processes such as carbon and nitrogen cycling and climate change, applications of wetland paleoecology, use of isotopes and other geochemical tools in wetland science, and wetland engineering in landscape rehabilitation and ecotechnology. Current issues in Canada and abroad will be examined.</div>
|
|
149
|
+
</d2l-list-item-content>
|
|
150
|
+
</d2l-list-item>
|
|
151
|
+
</d2l-list>
|
|
152
|
+
<div slot="actions">
|
|
153
|
+
<d2l-button-icon text="My Button" icon="tier1:preview"></d2l-button-icon>
|
|
154
|
+
<d2l-dropdown-more text="Open!">
|
|
155
|
+
<d2l-dropdown-menu>
|
|
156
|
+
<d2l-menu label="Astronomy">
|
|
157
|
+
<d2l-menu-item text="Introduction"></d2l-menu-item>
|
|
158
|
+
<d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
|
|
159
|
+
</d2l-menu>
|
|
160
|
+
</d2l-dropdown-menu>
|
|
161
|
+
</d2l-dropdown-more>
|
|
162
|
+
</div>
|
|
163
|
+
</d2l-list-item>
|
|
164
|
+
<d2l-list-item selectable key="L1-2">
|
|
165
|
+
<div>Biology (L1)</div>
|
|
166
|
+
</d2l-list-item>
|
|
167
|
+
<d2l-list-item selectable key="L1-3">
|
|
168
|
+
<div>Computer Science (L1)</div>
|
|
169
|
+
</d2l-list-item>
|
|
170
|
+
</d2l-list>
|
|
171
|
+
</template>
|
|
172
|
+
</d2l-demo-snippet>
|
|
173
|
+
|
|
174
|
+
<h2>Nested Custom</h2>
|
|
175
|
+
|
|
176
|
+
<d2l-demo-snippet>
|
|
177
|
+
<template>
|
|
178
|
+
<d2l-list>
|
|
179
|
+
<d2l-list-header slot="header">
|
|
180
|
+
<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
|
|
181
|
+
<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
|
|
182
|
+
</d2l-list-header>
|
|
183
|
+
<d2l-demo-list-item-custom key="L1-1"></d2l-demo-list-item-custom>
|
|
184
|
+
<d2l-demo-list-item-custom key="L1-2"></d2l-demo-list-item-custom>
|
|
185
|
+
<d2l-demo-list-item-custom key="L1-3"></d2l-demo-list-item-custom>
|
|
186
|
+
</d2l-list>
|
|
187
|
+
</template>
|
|
188
|
+
</d2l-demo-snippet>
|
|
189
|
+
|
|
190
|
+
</d2l-demo-page>
|
|
191
|
+
|
|
192
|
+
</body>
|
|
193
|
+
</html>
|
|
@@ -82,7 +82,7 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(L
|
|
|
82
82
|
if (this.selectable) {
|
|
83
83
|
if (!this.key) console.warn('ListItemCheckboxMixin requires a key.');
|
|
84
84
|
} else {
|
|
85
|
-
this.
|
|
85
|
+
this.labelRequired = false;
|
|
86
86
|
}
|
|
87
87
|
if (!this.key) this.setSelected(undefined, true);
|
|
88
88
|
}
|
|
@@ -124,21 +124,9 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(L
|
|
|
124
124
|
}
|
|
125
125
|
}
|
|
126
126
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
const nestedList = e.target.assignedNodes().find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'D2L-LIST'));
|
|
131
|
-
if (this._selectionProvider === nestedList) return;
|
|
132
|
-
|
|
133
|
-
if (this._selectionProvider && this._selectionProvider !== nestedList) {
|
|
134
|
-
this._selectionProvider.unsubscribeObserver(this);
|
|
135
|
-
this._selectionProvider = null;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
if (nestedList) {
|
|
139
|
-
this._selectionProvider = nestedList;
|
|
140
|
-
this._selectionProvider.subscribeObserver(this);
|
|
141
|
-
}
|
|
127
|
+
_onSelectionProviderConnected(e) {
|
|
128
|
+
e.stopPropagation();
|
|
129
|
+
this._updateNestedSelectionProvider();
|
|
142
130
|
}
|
|
143
131
|
|
|
144
132
|
_renderCheckbox() {
|
|
@@ -169,4 +157,29 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(L
|
|
|
169
157
|
</div>
|
|
170
158
|
` : nothing;
|
|
171
159
|
}
|
|
160
|
+
|
|
161
|
+
_updateNestedSelectionProvider() {
|
|
162
|
+
if (!this.selectable) return;
|
|
163
|
+
|
|
164
|
+
const nestedSlot = this.shadowRoot.querySelector('slot[name="nested"]');
|
|
165
|
+
let nestedNodes = nestedSlot.assignedNodes();
|
|
166
|
+
if (nestedNodes.length === 0) {
|
|
167
|
+
nestedNodes = [...nestedSlot.childNodes];
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
const nestedList = nestedNodes.find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'D2L-LIST'));
|
|
171
|
+
|
|
172
|
+
if (this._selectionProvider === nestedList) return;
|
|
173
|
+
|
|
174
|
+
if (this._selectionProvider && this._selectionProvider !== nestedList) {
|
|
175
|
+
this._selectionProvider.unsubscribeObserver(this);
|
|
176
|
+
this._selectionProvider = null;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
if (nestedList) {
|
|
180
|
+
this._selectionProvider = nestedList;
|
|
181
|
+
this._selectionProvider.subscribeObserver(this);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
|
|
172
185
|
};
|
|
@@ -333,7 +333,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
|
|
|
333
333
|
this._hovering = false;
|
|
334
334
|
}
|
|
335
335
|
|
|
336
|
-
_renderListItem({ illustration, content, actions } = {}) {
|
|
336
|
+
_renderListItem({ illustration, content, actions, nested } = {}) {
|
|
337
337
|
const classes = {
|
|
338
338
|
'd2l-visible-on-ancestor-target': true,
|
|
339
339
|
'd2l-list-item-content-extend-separators': this._extendSeparators,
|
|
@@ -388,8 +388,8 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
|
|
|
388
388
|
class="d2l-list-item-actions-container">
|
|
389
389
|
<slot name="actions" class="d2l-list-item-actions">${actions}</slot>
|
|
390
390
|
</div>
|
|
391
|
-
<div slot="nested">
|
|
392
|
-
<slot name="nested"
|
|
391
|
+
<div slot="nested" @d2l-selection-provider-connected="${this._onSelectionProviderConnected}">
|
|
392
|
+
<slot name="nested">${nested}</slot>
|
|
393
393
|
</div>
|
|
394
394
|
</d2l-list-item-generic-layout>
|
|
395
395
|
<div class="d2l-list-item-active-border"></div>
|
|
@@ -59,6 +59,10 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
|
|
|
59
59
|
this.addEventListener('d2l-selection-change', this._handleSelectionChange);
|
|
60
60
|
this.addEventListener('d2l-selection-observer-subscribe', this._handleSelectionObserverSubscribe);
|
|
61
61
|
this.addEventListener('d2l-selection-input-subscribe', this._handleSelectionInputSubscribe);
|
|
62
|
+
requestAnimationFrame(() => {
|
|
63
|
+
this.dispatchEvent(new CustomEvent('d2l-selection-provider-connected', { bubbles: true, composed: true }));
|
|
64
|
+
});
|
|
65
|
+
|
|
62
66
|
}
|
|
63
67
|
|
|
64
68
|
disconnectedCallback() {
|