@brightspace-ui/core 2.45.3 → 2.46.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/alert/alert-toast.js +7 -0
- package/components/alert/demo/alert-toast.html +6 -1
- package/components/description-list/README.md +175 -0
- package/components/description-list/demo/description-list-test.js +134 -0
- package/components/description-list/demo/description-list.html +43 -0
- package/components/description-list/description-list-wrapper.js +97 -0
- package/components/list/list-item-generic-layout.js +15 -10
- package/components/list/list-item-mixin.js +8 -2
- package/custom-elements.json +56 -0
- package/package.json +1 -1
|
@@ -15,6 +15,7 @@ const states = {
|
|
|
15
15
|
/**
|
|
16
16
|
* A component for communicating important information relating to the state of the system and the user's work flow, displayed as a pop-up at the bottom of the screen that automatically dismisses itself by default.
|
|
17
17
|
* @slot - Default content placed inside of the component
|
|
18
|
+
* @fires d2l-alert-toast-button-press - Dispatched when the toast's action button is clicked
|
|
18
19
|
* @fires d2l-alert-toast-close - Dispatched when the toast is closed
|
|
19
20
|
*/
|
|
20
21
|
class AlertToast extends LitElement {
|
|
@@ -149,6 +150,7 @@ class AlertToast extends LitElement {
|
|
|
149
150
|
<d2l-alert
|
|
150
151
|
@blur=${this._onBlur}
|
|
151
152
|
button-text="${ifDefined(this.buttonText)}"
|
|
153
|
+
@d2l-alert-button-press=${this._handleButtonPress}
|
|
152
154
|
@d2l-alert-close=${this._onCloseClicked}
|
|
153
155
|
@focus=${this._onFocus}
|
|
154
156
|
?has-close-button="${!this.hideCloseButton}"
|
|
@@ -198,6 +200,11 @@ class AlertToast extends LitElement {
|
|
|
198
200
|
clearTimeout(this._setTimeoutId);
|
|
199
201
|
}
|
|
200
202
|
|
|
203
|
+
_handleButtonPress(e) {
|
|
204
|
+
e.stopPropagation();
|
|
205
|
+
this.dispatchEvent(new CustomEvent('d2l-alert-toast-button-press'));
|
|
206
|
+
}
|
|
207
|
+
|
|
201
208
|
_onBlur() {
|
|
202
209
|
this._hasFocus = false;
|
|
203
210
|
this._closeTimerStart();
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
</template>
|
|
41
41
|
</d2l-demo-snippet>
|
|
42
42
|
|
|
43
|
-
<h2>With Subtext</h2>
|
|
43
|
+
<h2>With Subtext and Button</h2>
|
|
44
44
|
<d2l-demo-snippet>
|
|
45
45
|
<template>
|
|
46
46
|
<d2l-alert-toast id="toast4" type="success" button-text="Do it!" has-close-button
|
|
@@ -68,6 +68,11 @@
|
|
|
68
68
|
});
|
|
69
69
|
});
|
|
70
70
|
|
|
71
|
+
const buttonAlertToast = document.querySelector('#toast4');
|
|
72
|
+
buttonAlertToast.addEventListener('d2l-alert-toast-button-press', (e) => {
|
|
73
|
+
console.log('d2l-alert-toast-button-press', e);
|
|
74
|
+
});
|
|
75
|
+
|
|
71
76
|
document.body.addEventListener('d2l-alert-toast-close', (e) => {
|
|
72
77
|
console.log('d2l-alert-toast-close', e);
|
|
73
78
|
});
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
# Description List
|
|
2
|
+
A Description List displays information in a vertical list of key-value pairs. Common usages could include terms & definitions, or fields & values.
|
|
3
|
+
|
|
4
|
+
<!-- docs: demo -->
|
|
5
|
+
```html
|
|
6
|
+
<script type="module">
|
|
7
|
+
import '@brightspace-ui/core/components/description-list/demo/description-list-test.js';
|
|
8
|
+
</script>
|
|
9
|
+
<d2l-test-dl></d2l-test-dl>
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## Best Practices
|
|
13
|
+
<!-- docs: start best practices -->
|
|
14
|
+
<!-- docs: start dos -->
|
|
15
|
+
* Terms and descriptions are 1-to-1
|
|
16
|
+
<!-- docs: end dos -->
|
|
17
|
+
|
|
18
|
+
<!-- docs: start donts -->
|
|
19
|
+
* Don't have a term without a description
|
|
20
|
+
* Don't have a description without a term
|
|
21
|
+
* Don't have multiple terms for a description
|
|
22
|
+
* Don't have multiple descriptions for a term
|
|
23
|
+
<!-- docs: end donts -->
|
|
24
|
+
<!-- docs: end best practices -->
|
|
25
|
+
|
|
26
|
+
## Responsive Behavior
|
|
27
|
+
When the component width is less than the `breakpoint` property, the side-by-side pairs will appear in a stacked layout.
|
|
28
|
+
|
|
29
|
+
<!-- docs: demo -->
|
|
30
|
+
```html
|
|
31
|
+
<script type="module">
|
|
32
|
+
import { css, html, LitElement } from 'lit';
|
|
33
|
+
import { descriptionListStyles } from '@brightspace-ui/core/components/description-list/description-list-wrapper.js';
|
|
34
|
+
|
|
35
|
+
class TestDescriptionList extends LitElement {
|
|
36
|
+
|
|
37
|
+
static get styles() {
|
|
38
|
+
return descriptionListStyles;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
render() {
|
|
42
|
+
return html`
|
|
43
|
+
<d2l-dl-wrapper breakpoint="600">
|
|
44
|
+
<dl>
|
|
45
|
+
<dt>Course Code That Represents The Course as a Short String</dt>
|
|
46
|
+
<dd>A short string that represents the course, often with important information such as section or room number.</dd>
|
|
47
|
+
|
|
48
|
+
<dt>Availability Dates</dt>
|
|
49
|
+
<dd>The start and end date for the course. Learners can't access courses outside these dates.</dd>
|
|
50
|
+
</dl>
|
|
51
|
+
</d2l-dl-wrapper>
|
|
52
|
+
`;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
}
|
|
56
|
+
customElements.define('d2l-test-dl', TestDescriptionList);
|
|
57
|
+
</script>
|
|
58
|
+
<d2l-test-dl></d2l-test-dl>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Description List Wrapper [d2l-dl-wrapper]
|
|
62
|
+
|
|
63
|
+
The `d2l-dl-wrapper` can be combined with `descriptionListStyles` to apply styling and resize behavior to native `dl` elements.
|
|
64
|
+
|
|
65
|
+
<!-- docs: demo live name:d2l-test-dl -->
|
|
66
|
+
```html
|
|
67
|
+
<script type="module">
|
|
68
|
+
import { html, LitElement } from 'lit';
|
|
69
|
+
import { descriptionListStyles } from '@brightspace-ui/core/components/description-list/description-list-wrapper.js';
|
|
70
|
+
|
|
71
|
+
class TestDescriptionList extends LitElement {
|
|
72
|
+
|
|
73
|
+
static get styles() {
|
|
74
|
+
return descriptionListStyles;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
static get properties() {
|
|
78
|
+
return {
|
|
79
|
+
breakpoint: { type: Number },
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
render() {
|
|
84
|
+
return html`
|
|
85
|
+
<d2l-dl-wrapper breakpoint="${this.breakpoint}">
|
|
86
|
+
<dl>
|
|
87
|
+
<dt>Course Code That Represents The Course as a Short String</dt>
|
|
88
|
+
<dd>A short string that represents the course, often with important information such as section or room number.</dd>
|
|
89
|
+
|
|
90
|
+
<dt>Availability Dates</dt>
|
|
91
|
+
<dd>The start and end date for the course. Learners can't access courses outside these dates.</dd>
|
|
92
|
+
</dl>
|
|
93
|
+
</d2l-dl-wrapper>
|
|
94
|
+
`;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
customElements.define('d2l-test-dl', TestDescriptionList);
|
|
98
|
+
</script>
|
|
99
|
+
<d2l-test-dl></d2l-test-dl>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
<!-- docs: start hidden content -->
|
|
103
|
+
### Properties
|
|
104
|
+
|
|
105
|
+
| Property | Type | Description | Default Value
|
|
106
|
+
|---|---|---|---|
|
|
107
|
+
| `breakpoint` | Number | Width for component to use a stacked layout. | 240 |
|
|
108
|
+
|
|
109
|
+
<!-- docs: end hidden content -->
|
|
110
|
+
|
|
111
|
+
## Slotted Content [slotted-content]
|
|
112
|
+
The `dt` and `dd` elements can contain non-text content such as links or profile images.
|
|
113
|
+
|
|
114
|
+
<!-- docs: demo -->
|
|
115
|
+
```html
|
|
116
|
+
<script type="module">
|
|
117
|
+
import { css, html, LitElement } from 'lit';
|
|
118
|
+
import { descriptionListStyles } from '@brightspace-ui/core/components/description-list/description-list-wrapper.js';
|
|
119
|
+
|
|
120
|
+
class TestDescriptionList extends LitElement {
|
|
121
|
+
|
|
122
|
+
static get styles() {
|
|
123
|
+
return [
|
|
124
|
+
descriptionListStyles, css`
|
|
125
|
+
.user {
|
|
126
|
+
align-items: center;
|
|
127
|
+
display: flex;
|
|
128
|
+
gap: 0.5rem;
|
|
129
|
+
}
|
|
130
|
+
.avatar {
|
|
131
|
+
align-items: center;
|
|
132
|
+
background-color: var(--d2l-color-cinnabar-minus-1);
|
|
133
|
+
border-radius: 0.25rem;
|
|
134
|
+
color: white;
|
|
135
|
+
display: flex;
|
|
136
|
+
font-size: 0.7rem;
|
|
137
|
+
font-weight: 700;
|
|
138
|
+
height: 1.5rem;
|
|
139
|
+
justify-content: center;
|
|
140
|
+
width: 1.5rem;
|
|
141
|
+
}
|
|
142
|
+
`];
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
render() {
|
|
146
|
+
return html`
|
|
147
|
+
<d2l-dl-wrapper>
|
|
148
|
+
<dl style="align-items: center">
|
|
149
|
+
<dt>User</dt>
|
|
150
|
+
<dd><div class="user"><div class="avatar">JS</div>John Smith</div></dd>
|
|
151
|
+
|
|
152
|
+
<dt>Submitted</dt>
|
|
153
|
+
<dd>Dec 30, 2021 5:34 PM</dd>
|
|
154
|
+
</dl>
|
|
155
|
+
</d2l-dl-wrapper>
|
|
156
|
+
`;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
}
|
|
160
|
+
customElements.define('d2l-test-dl', TestDescriptionList);
|
|
161
|
+
</script>
|
|
162
|
+
<d2l-test-dl></d2l-test-dl>
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
```html
|
|
166
|
+
<d2l-dl-wrapper>
|
|
167
|
+
<dl>
|
|
168
|
+
<dt>User</dt>
|
|
169
|
+
<dd><d2l-user name="John Smith"></d2l-user></dd>
|
|
170
|
+
|
|
171
|
+
<dt>Submitted</dt>
|
|
172
|
+
<dd>Dec 30, 2021 5:34 PM</dd>
|
|
173
|
+
</dl>
|
|
174
|
+
</d2l-dl-wrapper>
|
|
175
|
+
```
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import '../../colors/colors.js';
|
|
2
|
+
import { css, html, LitElement } from 'lit';
|
|
3
|
+
import { descriptionListStyles } from '../description-list-wrapper.js';
|
|
4
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
|
+
|
|
6
|
+
class TestDescriptionList extends LitElement {
|
|
7
|
+
static get properties() {
|
|
8
|
+
return {
|
|
9
|
+
/**
|
|
10
|
+
* Width for component to use a stacked layout
|
|
11
|
+
* @type {number}
|
|
12
|
+
*/
|
|
13
|
+
breakpoint: { type: Number, reflect: true },
|
|
14
|
+
/**
|
|
15
|
+
* @ignore
|
|
16
|
+
*/
|
|
17
|
+
type: { type: String, reflect: true },
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
static get styles() {
|
|
22
|
+
return [descriptionListStyles, css`
|
|
23
|
+
.user {
|
|
24
|
+
align-items: center;
|
|
25
|
+
display: flex;
|
|
26
|
+
gap: 0.5rem;
|
|
27
|
+
}
|
|
28
|
+
.avatar {
|
|
29
|
+
align-items: center;
|
|
30
|
+
background-color: var(--d2l-color-cinnabar-minus-1);
|
|
31
|
+
border-radius: 0.25rem;
|
|
32
|
+
color: white;
|
|
33
|
+
display: flex;
|
|
34
|
+
font-size: 0.7rem;
|
|
35
|
+
font-weight: 700;
|
|
36
|
+
height: 1.5rem;
|
|
37
|
+
justify-content: center;
|
|
38
|
+
width: 1.5rem;
|
|
39
|
+
}
|
|
40
|
+
`];
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
constructor() {
|
|
44
|
+
super();
|
|
45
|
+
this.type = 'default';
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
render() {
|
|
49
|
+
return html`
|
|
50
|
+
<d2l-dl-wrapper breakpoint="${ifDefined(this.breakpoint)}">
|
|
51
|
+
${this._renderExample()}
|
|
52
|
+
</d2l-dl-wrapper>
|
|
53
|
+
`;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
_renderExample() {
|
|
57
|
+
if (this.type === 'default') {
|
|
58
|
+
return html`
|
|
59
|
+
<dl>
|
|
60
|
+
<dt>Course Name</dt>
|
|
61
|
+
<dd>Brightspace 101B</dd>
|
|
62
|
+
|
|
63
|
+
<dt>Course Code</dt>
|
|
64
|
+
<dd>BSPC 101B</dd>
|
|
65
|
+
|
|
66
|
+
<dt>Start Date</dt>
|
|
67
|
+
<dd>June 14 2022</dd>
|
|
68
|
+
|
|
69
|
+
<dt>Semester</dt>
|
|
70
|
+
<dd>2022 Summer</dd>
|
|
71
|
+
</dl>
|
|
72
|
+
`;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
if (this.type === 'long') {
|
|
76
|
+
return html`
|
|
77
|
+
<dl>
|
|
78
|
+
<dt>Course Code That Represents The Course as a Short String</dt>
|
|
79
|
+
<dd>A short string that represents the course, often with important information such as section or room number.</dd>
|
|
80
|
+
|
|
81
|
+
<dt>Availability Dates</dt>
|
|
82
|
+
<dd>The start and end date for the course. Learners can't access courses outside these dates.</dd>
|
|
83
|
+
</dl>
|
|
84
|
+
`;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
if (this.type === 'activity-display') {
|
|
88
|
+
return html`
|
|
89
|
+
<dl>
|
|
90
|
+
<dt>Submission type</dt>
|
|
91
|
+
<dd>File submission</dd>
|
|
92
|
+
|
|
93
|
+
<dt>Files allowed per submission</dt>
|
|
94
|
+
<dd>Unlimited</dd>
|
|
95
|
+
|
|
96
|
+
<dt>File extension</dt>
|
|
97
|
+
<dd>PDF</dd>
|
|
98
|
+
|
|
99
|
+
<dt>Allowed Submissions</dt>
|
|
100
|
+
<dd>Only one submission allowed</dd>
|
|
101
|
+
</dl>
|
|
102
|
+
`;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
if (this.type === 'bulk-course-import') {
|
|
106
|
+
return html`
|
|
107
|
+
<dl>
|
|
108
|
+
<dt>Course code</dt>
|
|
109
|
+
<dd>fd6b9fd8-29bd-44ef-8322-d6b379b71411</dd>
|
|
110
|
+
|
|
111
|
+
<dt>Course name</dt>
|
|
112
|
+
<dd>Telkom MOMP Course 1</dd>
|
|
113
|
+
|
|
114
|
+
<dt>Course ID</dt>
|
|
115
|
+
<dd>250003</dd>
|
|
116
|
+
</dl>
|
|
117
|
+
`;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
if (this.type === 'slotted') {
|
|
121
|
+
return html`
|
|
122
|
+
<dl style="align-items: center">
|
|
123
|
+
<dt>User</dt>
|
|
124
|
+
<dd><div class="user"><div class="avatar">JS</div>John Smith</div></dd>
|
|
125
|
+
|
|
126
|
+
<dt>Submitted</dt>
|
|
127
|
+
<dd>Dec 30, 2021 5:34 PM</dd>
|
|
128
|
+
</dl>
|
|
129
|
+
`;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
customElements.define('d2l-test-dl', TestDescriptionList);
|
|
@@ -0,0 +1,43 @@
|
|
|
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 '../../demo/demo-page.js';
|
|
9
|
+
|
|
10
|
+
import './description-list-test.js';
|
|
11
|
+
</script>
|
|
12
|
+
</head>
|
|
13
|
+
<body unresolved>
|
|
14
|
+
<d2l-demo-page page-title="d2l-description-list">
|
|
15
|
+
|
|
16
|
+
<h2>Short</h2>
|
|
17
|
+
<d2l-demo-snippet fullscreen>
|
|
18
|
+
<d2l-test-dl></d2l-test-dl>
|
|
19
|
+
</d2l-demo-snippet>
|
|
20
|
+
|
|
21
|
+
<h2>Long</h2>
|
|
22
|
+
<d2l-demo-snippet fullscreen>
|
|
23
|
+
<d2l-test-dl type="long" breakpoint="300"></d2l-test-dl>
|
|
24
|
+
</d2l-demo-snippet>
|
|
25
|
+
|
|
26
|
+
<h2>Activity Display</h2>
|
|
27
|
+
<d2l-demo-snippet fullscreen>
|
|
28
|
+
<d2l-test-dl type="activity-display"></d2l-test-dl>
|
|
29
|
+
</d2l-demo-snippet>
|
|
30
|
+
|
|
31
|
+
<h2>Bulk Course Import</h2>
|
|
32
|
+
<d2l-demo-snippet fullscreen>
|
|
33
|
+
<d2l-test-dl type="bulk-course-import"></d2l-test-dl>
|
|
34
|
+
</d2l-demo-snippet>
|
|
35
|
+
|
|
36
|
+
<h2>Slotted content</h2>
|
|
37
|
+
<d2l-demo-snippet fullscreen>
|
|
38
|
+
<d2l-test-dl type="slotted"></d2l-test-dl>
|
|
39
|
+
</d2l-demo-snippet>
|
|
40
|
+
|
|
41
|
+
</d2l-demo-page>
|
|
42
|
+
</body>
|
|
43
|
+
</html>
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { _generateBodyCompactStyles, _generateLabelStyles } from '../typography/styles.js';
|
|
2
|
+
import { css, html, LitElement } from 'lit';
|
|
3
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
4
|
+
import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
|
|
5
|
+
|
|
6
|
+
export const descriptionListStyles = [
|
|
7
|
+
_generateLabelStyles('dt'),
|
|
8
|
+
_generateBodyCompactStyles('dd'),
|
|
9
|
+
css`
|
|
10
|
+
:host {
|
|
11
|
+
--d2l-dl-wrapper-dt-min-width: min-content;
|
|
12
|
+
--d2l-dl-wrapper-dt-max-width: 10rem;
|
|
13
|
+
--d2l-dl-wrapper-dd-min-width: 50%;
|
|
14
|
+
}
|
|
15
|
+
dl {
|
|
16
|
+
align-items: baseline;
|
|
17
|
+
display: var(--d2l-dl-wrapper-dl-display, grid);
|
|
18
|
+
gap: 0.3rem 1.5rem;
|
|
19
|
+
grid-auto-flow: row;
|
|
20
|
+
grid-template-columns: minmax(var(--d2l-dl-wrapper-dt-min-width), auto) minmax(var(--d2l-dl-wrapper-dd-min-width), 1fr);
|
|
21
|
+
}
|
|
22
|
+
dt {
|
|
23
|
+
margin: var(--d2l-dl-wrapper-dt-margin, 0);
|
|
24
|
+
max-width: var(--d2l-dl-wrapper-dt-max-width);
|
|
25
|
+
}
|
|
26
|
+
dd {
|
|
27
|
+
margin: var(--d2l-dl-wrapper-dd-margin, 0);
|
|
28
|
+
}
|
|
29
|
+
`,
|
|
30
|
+
];
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Wraps a native <dl> element, providing styling and resize behavior.
|
|
34
|
+
* @slot - Content to wrap
|
|
35
|
+
*/
|
|
36
|
+
class DescriptionListWrapper extends LitElement {
|
|
37
|
+
static get properties() {
|
|
38
|
+
return {
|
|
39
|
+
/**
|
|
40
|
+
* Width for component to use a stacked layout
|
|
41
|
+
* @type {number}
|
|
42
|
+
*/
|
|
43
|
+
breakpoint: { type: Number, reflect: true },
|
|
44
|
+
_stacked: { state: true },
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
static get styles() {
|
|
49
|
+
return css`
|
|
50
|
+
:host {
|
|
51
|
+
display: block;
|
|
52
|
+
}
|
|
53
|
+
:host([hidden]) {
|
|
54
|
+
display: none;
|
|
55
|
+
}
|
|
56
|
+
.stacked {
|
|
57
|
+
--d2l-dl-wrapper-dl-display: block;
|
|
58
|
+
--d2l-dl-wrapper-dt-max-width: unset;
|
|
59
|
+
--d2l-dl-wrapper-dt-margin: 0 0 0.3rem 0;
|
|
60
|
+
--d2l-dl-wrapper-dd-margin: 0 0 0.9rem 0;
|
|
61
|
+
}
|
|
62
|
+
`;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
constructor() {
|
|
66
|
+
super();
|
|
67
|
+
this.breakpoint = 240;
|
|
68
|
+
this._resizeObserver = new ResizeObserver(this._onResize.bind(this));
|
|
69
|
+
this._stacked = false;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
connectedCallback() {
|
|
73
|
+
super.connectedCallback();
|
|
74
|
+
this._resizeObserver.observe(this);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
disconnectedCallback() {
|
|
78
|
+
super.disconnectedCallback();
|
|
79
|
+
this._resizeObserver.disconnect();
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
render() {
|
|
83
|
+
const classes = {
|
|
84
|
+
'stacked': this._stacked,
|
|
85
|
+
};
|
|
86
|
+
return html`<slot class="${classMap(classes)}"></slot>`;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
_onResize(entries) {
|
|
90
|
+
if (!entries || entries.length === 0) return;
|
|
91
|
+
const entry = entries[0];
|
|
92
|
+
|
|
93
|
+
this._stacked = entry.contentRect.width < this.breakpoint;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
customElements.define('d2l-dl-wrapper', DescriptionListWrapper);
|
|
@@ -208,17 +208,13 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
|
208
208
|
if (!cell) return;
|
|
209
209
|
|
|
210
210
|
const firstFocusable = getFirstFocusableDescendant(cell);
|
|
211
|
-
if (!firstFocusable)
|
|
212
|
-
const listItem = findComposedAncestor(this, node => node.role === 'rowgroup');
|
|
213
|
-
if (listItem) {
|
|
214
|
-
const nextFocusable = previous ? getPreviousFocusable(listItem) : getNextFocusable(listItem);
|
|
215
|
-
if (nextFocusable) nextFocusable.focus();
|
|
216
|
-
}
|
|
217
|
-
return;
|
|
218
|
-
}
|
|
211
|
+
if (!firstFocusable) return;
|
|
219
212
|
|
|
220
|
-
if (itemNum === 1
|
|
213
|
+
if (itemNum === 1) {
|
|
221
214
|
firstFocusable.focus();
|
|
215
|
+
return firstFocusable;
|
|
216
|
+
} else {
|
|
217
|
+
return this._focusNextWithinCell(firstFocusable, itemNum);
|
|
222
218
|
}
|
|
223
219
|
}
|
|
224
220
|
|
|
@@ -290,7 +286,16 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
|
290
286
|
|
|
291
287
|
if (!listItem) return;
|
|
292
288
|
const listItemRow = listItem.shadowRoot.querySelector('[role="gridrow"]');
|
|
293
|
-
listItemRow._focusCellItem(previous, this._cellNum, this._cellFocusedItem);
|
|
289
|
+
const focusedCellItem = listItemRow._focusCellItem(previous, this._cellNum, this._cellFocusedItem);
|
|
290
|
+
|
|
291
|
+
if (!focusedCellItem) {
|
|
292
|
+
// could not focus on same cell in adjacent list-item so try general focus on item
|
|
293
|
+
if (!listItem._tryFocus()) {
|
|
294
|
+
// ultimate fallback to generic method for getting next/previous focusable
|
|
295
|
+
const nextFocusable = previous ? getPreviousFocusable(listItem) : getNextFocusable(listItem);
|
|
296
|
+
if (nextFocusable) nextFocusable.focus();
|
|
297
|
+
}
|
|
298
|
+
}
|
|
294
299
|
|
|
295
300
|
}
|
|
296
301
|
|
|
@@ -398,8 +398,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
398
398
|
}
|
|
399
399
|
|
|
400
400
|
focus() {
|
|
401
|
-
|
|
402
|
-
if (node) node.focus();
|
|
401
|
+
this._tryFocus();
|
|
403
402
|
}
|
|
404
403
|
|
|
405
404
|
async highlight() {
|
|
@@ -623,4 +622,11 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
623
622
|
`;
|
|
624
623
|
}
|
|
625
624
|
|
|
625
|
+
_tryFocus() {
|
|
626
|
+
const node = getFirstFocusableDescendant(this);
|
|
627
|
+
if (!node) return false;
|
|
628
|
+
node.focus();
|
|
629
|
+
return true;
|
|
630
|
+
}
|
|
631
|
+
|
|
626
632
|
};
|
package/custom-elements.json
CHANGED
|
@@ -84,6 +84,10 @@
|
|
|
84
84
|
}
|
|
85
85
|
],
|
|
86
86
|
"events": [
|
|
87
|
+
{
|
|
88
|
+
"name": "d2l-alert-toast-button-press",
|
|
89
|
+
"description": "Dispatched when the toast's action button is clicked"
|
|
90
|
+
},
|
|
87
91
|
{
|
|
88
92
|
"name": "d2l-alert-toast-close",
|
|
89
93
|
"description": "Dispatched when the toast is closed"
|
|
@@ -1441,6 +1445,58 @@
|
|
|
1441
1445
|
}
|
|
1442
1446
|
]
|
|
1443
1447
|
},
|
|
1448
|
+
{
|
|
1449
|
+
"name": "d2l-test-dl",
|
|
1450
|
+
"path": "./components/description-list/demo/description-list-test.js",
|
|
1451
|
+
"attributes": [
|
|
1452
|
+
{
|
|
1453
|
+
"name": "breakpoint",
|
|
1454
|
+
"description": "Width for component to use a stacked layout",
|
|
1455
|
+
"type": "number"
|
|
1456
|
+
}
|
|
1457
|
+
],
|
|
1458
|
+
"properties": [
|
|
1459
|
+
{
|
|
1460
|
+
"name": "breakpoint",
|
|
1461
|
+
"attribute": "breakpoint",
|
|
1462
|
+
"description": "Width for component to use a stacked layout",
|
|
1463
|
+
"type": "number"
|
|
1464
|
+
},
|
|
1465
|
+
{
|
|
1466
|
+
"name": "type",
|
|
1467
|
+
"type": "string",
|
|
1468
|
+
"default": "\"default\""
|
|
1469
|
+
}
|
|
1470
|
+
]
|
|
1471
|
+
},
|
|
1472
|
+
{
|
|
1473
|
+
"name": "d2l-dl-wrapper",
|
|
1474
|
+
"path": "./components/description-list/description-list-wrapper.js",
|
|
1475
|
+
"description": "Wraps a native <dl> element, providing styling and resize behavior.",
|
|
1476
|
+
"attributes": [
|
|
1477
|
+
{
|
|
1478
|
+
"name": "breakpoint",
|
|
1479
|
+
"description": "Width for component to use a stacked layout",
|
|
1480
|
+
"type": "number",
|
|
1481
|
+
"default": "240"
|
|
1482
|
+
}
|
|
1483
|
+
],
|
|
1484
|
+
"properties": [
|
|
1485
|
+
{
|
|
1486
|
+
"name": "breakpoint",
|
|
1487
|
+
"attribute": "breakpoint",
|
|
1488
|
+
"description": "Width for component to use a stacked layout",
|
|
1489
|
+
"type": "number",
|
|
1490
|
+
"default": "240"
|
|
1491
|
+
}
|
|
1492
|
+
],
|
|
1493
|
+
"slots": [
|
|
1494
|
+
{
|
|
1495
|
+
"name": "",
|
|
1496
|
+
"description": "Content to wrap"
|
|
1497
|
+
}
|
|
1498
|
+
]
|
|
1499
|
+
},
|
|
1444
1500
|
{
|
|
1445
1501
|
"name": "d2l-dialog-demo-async-content",
|
|
1446
1502
|
"path": "./components/dialog/demo/dialog-async-content.js",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.46.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",
|