@brightspace-ui/core 2.114.1 → 2.115.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/list/demo/list-nested.html +97 -5
- package/components/selection/selection-mixin.js +9 -0
- package/components/selection/selection-select-all-pages.js +4 -1
- package/components/tabs/tab-internal.js +24 -5
- package/components/tabs/tabs.js +8 -2
- package/custom-elements.json +34 -0
- package/package.json +2 -2
|
@@ -28,6 +28,94 @@
|
|
|
28
28
|
|
|
29
29
|
<h2>Nested</h2>
|
|
30
30
|
|
|
31
|
+
<d2l-demo-snippet>
|
|
32
|
+
<template>
|
|
33
|
+
<d2l-list grid>
|
|
34
|
+
<d2l-list-item key="L1-1" label="Label for L1-1">
|
|
35
|
+
<d2l-list-item-content>
|
|
36
|
+
<div>Earth Sciences (L1)</div>
|
|
37
|
+
<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>
|
|
38
|
+
</d2l-list-item-content>
|
|
39
|
+
<d2l-list slot="nested" grid separators="all">
|
|
40
|
+
<d2l-list-item key="L2-1" label="Label for L2-1">
|
|
41
|
+
<d2l-list-item-content>
|
|
42
|
+
<div>Introductory Earth Sciences (L2)</div>
|
|
43
|
+
<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>
|
|
44
|
+
</d2l-list-item-content>
|
|
45
|
+
<d2l-list slot="nested" grid separators="all">
|
|
46
|
+
<d2l-list-item key="L3-1" label="Label for L3-1">
|
|
47
|
+
<d2l-list-item-content>
|
|
48
|
+
<div>Glaciation (L3)</div>
|
|
49
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
50
|
+
</d2l-list-item-content>
|
|
51
|
+
<d2l-list slot="nested" grid separators="all">
|
|
52
|
+
<d2l-list-item key="L4-1" label="Label for L4-1">
|
|
53
|
+
<d2l-list-item-content>
|
|
54
|
+
<div>Ice Sheets (L4)</div>
|
|
55
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
56
|
+
</d2l-list-item-content>
|
|
57
|
+
</d2l-list-item>
|
|
58
|
+
<d2l-list-item key="L4-2" label="Label for L4-2">
|
|
59
|
+
<d2l-list-item-content>
|
|
60
|
+
<div>Alpine Glaciers (L4)</div>
|
|
61
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
62
|
+
</d2l-list-item-content>
|
|
63
|
+
</d2l-list-item>
|
|
64
|
+
</d2l-list>
|
|
65
|
+
</d2l-list-item>
|
|
66
|
+
<d2l-list-item key="L3-2" label="Label for L3-2">
|
|
67
|
+
<d2l-list-item-content>
|
|
68
|
+
<div>Weathering (L3)</div>
|
|
69
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
70
|
+
</d2l-list-item-content>
|
|
71
|
+
</d2l-list-item>
|
|
72
|
+
<d2l-list-item key="L3-3" label="Label for L3-3">
|
|
73
|
+
<d2l-list-item-content>
|
|
74
|
+
<div>Volcanism (L3)</div>
|
|
75
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
76
|
+
</d2l-list-item-content>
|
|
77
|
+
</d2l-list-item>
|
|
78
|
+
</d2l-list>
|
|
79
|
+
</d2l-list-item>
|
|
80
|
+
<d2l-list-item key="L2-2" label="Label for L2-2">
|
|
81
|
+
<d2l-list-item-content>
|
|
82
|
+
<div>Flow and Transport Through Fractured Rocks (L2)</div>
|
|
83
|
+
<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>
|
|
84
|
+
</d2l-list-item-content>
|
|
85
|
+
</d2l-list-item>
|
|
86
|
+
<d2l-list-item key="L2-3" label="Label for L2-3">
|
|
87
|
+
<d2l-list-item-content>
|
|
88
|
+
<div>Applied Wetland Science (L2)</div>
|
|
89
|
+
<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>
|
|
90
|
+
</d2l-list-item-content>
|
|
91
|
+
</d2l-list-item>
|
|
92
|
+
</d2l-list>
|
|
93
|
+
<div slot="actions">
|
|
94
|
+
<d2l-button-icon text="My Button" icon="tier1:preview"></d2l-button-icon>
|
|
95
|
+
<d2l-dropdown-more text="Open!">
|
|
96
|
+
<d2l-dropdown-menu>
|
|
97
|
+
<d2l-menu label="Astronomy">
|
|
98
|
+
<d2l-menu-item text="Introduction"></d2l-menu-item>
|
|
99
|
+
<d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
|
|
100
|
+
</d2l-menu>
|
|
101
|
+
</d2l-dropdown-menu>
|
|
102
|
+
</d2l-dropdown-more>
|
|
103
|
+
</div>
|
|
104
|
+
</d2l-list-item>
|
|
105
|
+
<d2l-list-item key="L1-2" label="Label for L1-2">
|
|
106
|
+
<div>Biology (L1)</div>
|
|
107
|
+
</d2l-list-item>
|
|
108
|
+
<d2l-list-item key="L1-3" label="Label for L1-3">
|
|
109
|
+
<div>Computer Science (L1)</div>
|
|
110
|
+
</d2l-list-item>
|
|
111
|
+
<d2l-pager-load-more slot="pager" has-more page-size="5">
|
|
112
|
+
</d2l-pager-load-more>
|
|
113
|
+
</d2l-list>
|
|
114
|
+
</template>
|
|
115
|
+
</d2l-demo-snippet>
|
|
116
|
+
|
|
117
|
+
<h2>Nested - Selectable</h2>
|
|
118
|
+
|
|
31
119
|
<d2l-demo-snippet>
|
|
32
120
|
<template>
|
|
33
121
|
<d2l-list grid>
|
|
@@ -138,13 +226,17 @@
|
|
|
138
226
|
|
|
139
227
|
<script>
|
|
140
228
|
setTimeout(() => {
|
|
141
|
-
document.
|
|
142
|
-
|
|
229
|
+
document.querySelectorAll('d2l-list').forEach(list => {
|
|
230
|
+
list.addEventListener('d2l-list-selection-changes', (e) => {
|
|
231
|
+
console.log('d2l-list-selection-changes', e.detail);
|
|
232
|
+
});
|
|
143
233
|
});
|
|
144
234
|
|
|
145
|
-
document.
|
|
146
|
-
|
|
147
|
-
|
|
235
|
+
document.querySelectorAll('d2l-pager-load-more').forEach(pager => {
|
|
236
|
+
pager.addEventListener('d2l-pager-load-more', (e) => {
|
|
237
|
+
console.log('Load more requested!');
|
|
238
|
+
setTimeout(() => e.detail.complete(), 2000);
|
|
239
|
+
});
|
|
148
240
|
});
|
|
149
241
|
}, 1000);
|
|
150
242
|
</script>
|
|
@@ -133,6 +133,15 @@ export const SelectionMixin = superclass => class extends RtlMixin(CollectionMix
|
|
|
133
133
|
this._updateSelectionObservers();
|
|
134
134
|
}
|
|
135
135
|
|
|
136
|
+
_focusSelectAll() {
|
|
137
|
+
for (const observer of this._selectionObservers.values()) {
|
|
138
|
+
if (observer.tagName === 'D2L-SELECTION-SELECT-ALL') {
|
|
139
|
+
observer.focus();
|
|
140
|
+
break;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
136
145
|
_handleRadioKeyDown(e) {
|
|
137
146
|
// check composed path for radio (e.target could be d2l-list-item or other element due to retargeting)
|
|
138
147
|
if (!e.composedPath()[0].classList.contains('d2l-selection-input-radio')) return;
|
|
@@ -40,7 +40,10 @@ class SelectAllPages extends FocusMixin(LocalizeCoreElement(SelectionObserverMix
|
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
_handleClick() {
|
|
43
|
-
if (this._provider)
|
|
43
|
+
if (!this._provider) return;
|
|
44
|
+
|
|
45
|
+
this._provider.setSelectionForAll(true, true);
|
|
46
|
+
this._provider._focusSelectAll();
|
|
44
47
|
}
|
|
45
48
|
|
|
46
49
|
}
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import { css, html, LitElement, unsafeCSS } from 'lit';
|
|
3
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
3
4
|
import { getFocusPseudoClass } from '../../helpers/focus.js';
|
|
4
5
|
import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
|
|
6
|
+
import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
|
|
5
7
|
|
|
6
8
|
const keyCodes = {
|
|
7
9
|
ENTER: 13,
|
|
8
10
|
SPACE: 32
|
|
9
11
|
};
|
|
10
12
|
|
|
11
|
-
class Tab extends RtlMixin(LitElement) {
|
|
13
|
+
class Tab extends SkeletonMixin(RtlMixin(LitElement)) {
|
|
12
14
|
|
|
13
15
|
static get properties() {
|
|
14
16
|
return {
|
|
@@ -20,7 +22,7 @@ class Tab extends RtlMixin(LitElement) {
|
|
|
20
22
|
}
|
|
21
23
|
|
|
22
24
|
static get styles() {
|
|
23
|
-
return css`
|
|
25
|
+
return [super.styles, css`
|
|
24
26
|
:host {
|
|
25
27
|
box-sizing: border-box;
|
|
26
28
|
display: inline-block;
|
|
@@ -36,6 +38,10 @@ class Tab extends RtlMixin(LitElement) {
|
|
|
36
38
|
text-overflow: ellipsis;
|
|
37
39
|
white-space: nowrap;
|
|
38
40
|
}
|
|
41
|
+
:host([skeleton]) .d2l-tab-text.d2l-skeletize::before {
|
|
42
|
+
bottom: 0.15rem;
|
|
43
|
+
top: 0.15rem;
|
|
44
|
+
}
|
|
39
45
|
:host(:first-child) .d2l-tab-text {
|
|
40
46
|
margin-left: 0;
|
|
41
47
|
}
|
|
@@ -55,6 +61,12 @@ class Tab extends RtlMixin(LitElement) {
|
|
|
55
61
|
transition: box-shadow 0.2s;
|
|
56
62
|
width: calc(100% - 1.2rem);
|
|
57
63
|
}
|
|
64
|
+
:host([skeleton]) .d2l-tab-selected-indicator {
|
|
65
|
+
position: absolute; /* make sure skeleton styles do not override this */
|
|
66
|
+
}
|
|
67
|
+
.d2l-tab-text-skeletize-override {
|
|
68
|
+
min-width: 50px;
|
|
69
|
+
}
|
|
58
70
|
:host(:first-child) .d2l-tab-selected-indicator {
|
|
59
71
|
margin-left: 0;
|
|
60
72
|
width: calc(100% - 0.6rem);
|
|
@@ -89,7 +101,7 @@ class Tab extends RtlMixin(LitElement) {
|
|
|
89
101
|
transition: none;
|
|
90
102
|
}
|
|
91
103
|
}
|
|
92
|
-
|
|
104
|
+
`];
|
|
93
105
|
}
|
|
94
106
|
|
|
95
107
|
constructor() {
|
|
@@ -116,9 +128,16 @@ class Tab extends RtlMixin(LitElement) {
|
|
|
116
128
|
}
|
|
117
129
|
|
|
118
130
|
render() {
|
|
131
|
+
const overrideSkeletonText = this.skeleton && (!this.text || this.text.length === 0);
|
|
132
|
+
const textClasses = {
|
|
133
|
+
'd2l-tab-text': true,
|
|
134
|
+
'd2l-skeletize': true,
|
|
135
|
+
'd2l-tab-text-skeletize-override': overrideSkeletonText
|
|
136
|
+
};
|
|
137
|
+
|
|
119
138
|
return html`
|
|
120
|
-
<div class="
|
|
121
|
-
<div class="d2l-tab-selected-indicator"></div>
|
|
139
|
+
<div class="${classMap(textClasses)}">${overrideSkeletonText ? html` ` : this.text}</div>
|
|
140
|
+
<div class="d2l-tab-selected-indicator d2l-skeletize-container"></div>
|
|
122
141
|
`;
|
|
123
142
|
}
|
|
124
143
|
|
package/components/tabs/tabs.js
CHANGED
|
@@ -12,6 +12,7 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
|
12
12
|
import { repeat } from 'lit/directives/repeat.js';
|
|
13
13
|
import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
|
|
14
14
|
import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
|
|
15
|
+
import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
|
|
15
16
|
import { styleMap } from 'lit/directives/style-map.js';
|
|
16
17
|
|
|
17
18
|
const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
@@ -52,7 +53,7 @@ if (!Array.prototype.findIndex) {
|
|
|
52
53
|
* @slot ext - Additional content (e.g., a button) positioned at right
|
|
53
54
|
* @fires d2l-tabs-initialized - Dispatched when the component is initialized
|
|
54
55
|
*/
|
|
55
|
-
class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(LitElement))) {
|
|
56
|
+
class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(RtlMixin(LitElement)))) {
|
|
56
57
|
|
|
57
58
|
static get properties() {
|
|
58
59
|
return {
|
|
@@ -72,7 +73,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(LitElement))) {
|
|
|
72
73
|
}
|
|
73
74
|
|
|
74
75
|
static get styles() {
|
|
75
|
-
return [bodyCompactStyles, css`
|
|
76
|
+
return [super.styles, bodyCompactStyles, css`
|
|
76
77
|
:host {
|
|
77
78
|
--d2l-tabs-background-color: white;
|
|
78
79
|
box-sizing: border-box;
|
|
@@ -192,6 +193,9 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(LitElement))) {
|
|
|
192
193
|
.d2l-tabs-scroll-button:${unsafeCSS(getFocusPseudoClass())} {
|
|
193
194
|
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
|
|
194
195
|
}
|
|
196
|
+
:host([skeleton]) .d2l-tabs-scroll-button {
|
|
197
|
+
visibility: hidden;
|
|
198
|
+
}
|
|
195
199
|
.d2l-panels-container-no-whitespace ::slotted(*) {
|
|
196
200
|
margin-top: 0;
|
|
197
201
|
-webkit-transition: margin-top 200ms ease-out;
|
|
@@ -310,6 +314,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(LitElement))) {
|
|
|
310
314
|
const tabsLayoutClasses = {
|
|
311
315
|
'd2l-tabs-layout': true,
|
|
312
316
|
'd2l-body-compact': true,
|
|
317
|
+
'd2l-skeletize-container': true,
|
|
313
318
|
'd2l-tabs-layout-anim': this._state === 'anim',
|
|
314
319
|
'd2l-tabs-layout-shown': this._state === 'shown'
|
|
315
320
|
};
|
|
@@ -348,6 +353,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(LitElement))) {
|
|
|
348
353
|
<d2l-tab-internal aria-selected="${tabInfo.selected ? 'true' : 'false'}"
|
|
349
354
|
.controlsPanel="${tabInfo.id}"
|
|
350
355
|
data-state="${tabInfo.state}"
|
|
356
|
+
?skeleton="${this.skeleton}"
|
|
351
357
|
tabindex="${tabInfo.activeFocusable ? 0 : -1}"
|
|
352
358
|
text="${tabInfo.text}">
|
|
353
359
|
</d2l-tab-internal>
|
package/custom-elements.json
CHANGED
|
@@ -8964,6 +8964,14 @@
|
|
|
8964
8964
|
}
|
|
8965
8965
|
]
|
|
8966
8966
|
},
|
|
8967
|
+
{
|
|
8968
|
+
"name": "d2l-nested-list-iterations-separate",
|
|
8969
|
+
"path": "./components/list/test/nested-list-iterations-helper.js"
|
|
8970
|
+
},
|
|
8971
|
+
{
|
|
8972
|
+
"name": "d2l-nested-list-iterations-combined",
|
|
8973
|
+
"path": "./components/list/test/nested-list-iterations-helper.js"
|
|
8974
|
+
},
|
|
8967
8975
|
{
|
|
8968
8976
|
"name": "d2l-loading-spinner-demo-override",
|
|
8969
8977
|
"path": "./components/loading-spinner/demo/loading-spinner-override.js",
|
|
@@ -11940,6 +11948,12 @@
|
|
|
11940
11948
|
"name": "role",
|
|
11941
11949
|
"type": "string",
|
|
11942
11950
|
"default": "\"tab\""
|
|
11951
|
+
},
|
|
11952
|
+
{
|
|
11953
|
+
"name": "skeleton",
|
|
11954
|
+
"description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
|
|
11955
|
+
"type": "boolean",
|
|
11956
|
+
"default": "false"
|
|
11943
11957
|
}
|
|
11944
11958
|
],
|
|
11945
11959
|
"properties": [
|
|
@@ -11969,6 +11983,13 @@
|
|
|
11969
11983
|
"name": "tabIndex",
|
|
11970
11984
|
"type": "number",
|
|
11971
11985
|
"default": "-1"
|
|
11986
|
+
},
|
|
11987
|
+
{
|
|
11988
|
+
"name": "skeleton",
|
|
11989
|
+
"attribute": "skeleton",
|
|
11990
|
+
"description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
|
|
11991
|
+
"type": "boolean",
|
|
11992
|
+
"default": "false"
|
|
11972
11993
|
}
|
|
11973
11994
|
],
|
|
11974
11995
|
"events": [
|
|
@@ -12049,6 +12070,12 @@
|
|
|
12049
12070
|
"description": "Limit the number of tabs to initially display",
|
|
12050
12071
|
"type": "number",
|
|
12051
12072
|
"default": "-1"
|
|
12073
|
+
},
|
|
12074
|
+
{
|
|
12075
|
+
"name": "skeleton",
|
|
12076
|
+
"description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
|
|
12077
|
+
"type": "boolean",
|
|
12078
|
+
"default": "false"
|
|
12052
12079
|
}
|
|
12053
12080
|
],
|
|
12054
12081
|
"properties": [
|
|
@@ -12072,6 +12099,13 @@
|
|
|
12072
12099
|
"name": "arrowKeysNoWrap",
|
|
12073
12100
|
"type": "boolean",
|
|
12074
12101
|
"default": "false"
|
|
12102
|
+
},
|
|
12103
|
+
{
|
|
12104
|
+
"name": "skeleton",
|
|
12105
|
+
"attribute": "skeleton",
|
|
12106
|
+
"description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
|
|
12107
|
+
"type": "boolean",
|
|
12108
|
+
"default": "false"
|
|
12075
12109
|
}
|
|
12076
12110
|
],
|
|
12077
12111
|
"events": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.115.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",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"axe-core": "^4",
|
|
58
58
|
"chalk": "^5",
|
|
59
59
|
"eslint": "^8",
|
|
60
|
-
"eslint-config-brightspace": "^0.
|
|
60
|
+
"eslint-config-brightspace": "^0.23",
|
|
61
61
|
"glob-all": "^3",
|
|
62
62
|
"lit-analyzer": "^1",
|
|
63
63
|
"messageformat-validator": "^2",
|