@brightspace-ui/core 2.11.0 → 2.12.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/dialog/demo/dialog-fullscreen.html +27 -0
- package/components/dialog/demo/dialog-nested.html +27 -1
- package/components/dialog/demo/dialog.html +27 -0
- package/components/dialog/dialog-fullscreen.js +16 -11
- package/components/dialog/dialog-mixin.js +6 -6
- package/components/dialog/dialog-styles.js +19 -13
- package/components/dialog/dialog.js +0 -4
- package/components/inputs/demo/input-time-range.html +7 -0
- package/components/tag-list/README.md +11 -2
- package/components/tag-list/demo/tag-list.html +2 -2
- package/components/tag-list/tag-list-item-mixin.js +6 -6
- package/components/tag-list/tag-list.js +2 -2
- package/custom-elements.json +8 -20
- package/package.json +1 -1
|
@@ -13,8 +13,13 @@
|
|
|
13
13
|
import '../dialog-fullscreen.js';
|
|
14
14
|
import './dialog-async-content.js';
|
|
15
15
|
import '../../dropdown/dropdown.js';
|
|
16
|
+
import '../../dropdown/dropdown-button-subtle.js';
|
|
17
|
+
import '../../dropdown/dropdown-content.js';
|
|
16
18
|
import '../../dropdown/dropdown-more.js';
|
|
17
19
|
import '../../dropdown/dropdown-menu.js';
|
|
20
|
+
import '../../filter/filter.js';
|
|
21
|
+
import '../../filter/filter-dimension-set.js';
|
|
22
|
+
import '../../filter/filter-dimension-set-value.js';
|
|
18
23
|
import '../../menu/menu.js';
|
|
19
24
|
import '../../menu/menu-item.js';
|
|
20
25
|
import '../../tabs/tabs.js';
|
|
@@ -48,6 +53,28 @@
|
|
|
48
53
|
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
|
|
49
54
|
<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
|
|
50
55
|
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
|
|
56
|
+
<d2l-dropdown-button-subtle text="More">
|
|
57
|
+
<d2l-dropdown-content mobile-tray="bottom">
|
|
58
|
+
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
|
|
59
|
+
<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
|
|
60
|
+
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
|
|
61
|
+
</d2l-dropdown-content>
|
|
62
|
+
</d2l-dropdown-button-subtle>
|
|
63
|
+
<d2l-filter>
|
|
64
|
+
<d2l-filter-dimension-set key="course" text="Course" select-all>
|
|
65
|
+
<d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
|
|
66
|
+
<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
|
|
67
|
+
<d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
|
|
68
|
+
<d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
|
|
69
|
+
<d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
|
|
70
|
+
<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
|
|
71
|
+
<d2l-filter-dimension-set-value key="how-to" text="How To Write a How To Article With a Flashy Title"></d2l-filter-dimension-set-value>
|
|
72
|
+
<d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
|
|
73
|
+
<d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
|
|
74
|
+
<d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
|
|
75
|
+
<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
|
|
76
|
+
</d2l-filter-dimension-set>
|
|
77
|
+
</d2l-filter>
|
|
51
78
|
<d2l-button slot="footer" primary data-dialog-action="save">Save</d2l-button>
|
|
52
79
|
<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
|
|
53
80
|
</d2l-dialog-fullscreen>
|
|
@@ -10,8 +10,12 @@
|
|
|
10
10
|
<script type="module">
|
|
11
11
|
import '../../demo/demo-page.js';
|
|
12
12
|
import '../../button/button.js';
|
|
13
|
+
import '../../dropdown/dropdown-button-subtle.js';
|
|
14
|
+
import '../../dropdown/dropdown-content.js';
|
|
15
|
+
import '../../filter/filter.js';
|
|
16
|
+
import '../../filter/filter-dimension-set.js';
|
|
17
|
+
import '../../filter/filter-dimension-set-value.js';
|
|
13
18
|
import '../dialog.js';
|
|
14
|
-
import '../dialog-confirm.js';
|
|
15
19
|
</script>
|
|
16
20
|
<style>
|
|
17
21
|
#openChild {
|
|
@@ -40,6 +44,28 @@
|
|
|
40
44
|
<div>
|
|
41
45
|
Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.
|
|
42
46
|
Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.
|
|
47
|
+
<d2l-dropdown-button-subtle text="More">
|
|
48
|
+
<d2l-dropdown-content mobile-tray="left">
|
|
49
|
+
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
|
|
50
|
+
<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
|
|
51
|
+
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
|
|
52
|
+
</d2l-dropdown-content>
|
|
53
|
+
</d2l-dropdown-button-subtle>
|
|
54
|
+
<d2l-filter>
|
|
55
|
+
<d2l-filter-dimension-set key="course" text="Course" select-all>
|
|
56
|
+
<d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
|
|
57
|
+
<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
|
|
58
|
+
<d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
|
|
59
|
+
<d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
|
|
60
|
+
<d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
|
|
61
|
+
<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
|
|
62
|
+
<d2l-filter-dimension-set-value key="how-to" text="How To Write a How To Article With a Flashy Title"></d2l-filter-dimension-set-value>
|
|
63
|
+
<d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
|
|
64
|
+
<d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
|
|
65
|
+
<d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
|
|
66
|
+
<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
|
|
67
|
+
</d2l-filter-dimension-set>
|
|
68
|
+
</d2l-filter>
|
|
43
69
|
</div>
|
|
44
70
|
<d2l-button slot="footer" primary data-dialog-action="child ok">Child</d2l-button>
|
|
45
71
|
<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
|
|
@@ -10,6 +10,11 @@
|
|
|
10
10
|
<script type="module">
|
|
11
11
|
import '../../demo/demo-page.js';
|
|
12
12
|
import '../../button/button.js';
|
|
13
|
+
import '../../dropdown/dropdown-button-subtle.js';
|
|
14
|
+
import '../../dropdown/dropdown-content.js';
|
|
15
|
+
import '../../filter/filter.js';
|
|
16
|
+
import '../../filter/filter-dimension-set.js';
|
|
17
|
+
import '../../filter/filter-dimension-set-value.js';
|
|
13
18
|
import '../dialog.js';
|
|
14
19
|
import './dialog-async-content.js';
|
|
15
20
|
import './dialog-container.js';
|
|
@@ -33,6 +38,28 @@
|
|
|
33
38
|
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
|
|
34
39
|
<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
|
|
35
40
|
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
|
|
41
|
+
<d2l-dropdown-button-subtle text="More">
|
|
42
|
+
<d2l-dropdown-content mobile-tray="right">
|
|
43
|
+
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
|
|
44
|
+
<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
|
|
45
|
+
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
|
|
46
|
+
</d2l-dropdown-content>
|
|
47
|
+
</d2l-dropdown-button-subtle>
|
|
48
|
+
<d2l-filter>
|
|
49
|
+
<d2l-filter-dimension-set key="course" text="Course" select-all>
|
|
50
|
+
<d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
|
|
51
|
+
<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
|
|
52
|
+
<d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
|
|
53
|
+
<d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
|
|
54
|
+
<d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
|
|
55
|
+
<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
|
|
56
|
+
<d2l-filter-dimension-set-value key="how-to" text="How To Write a How To Article With a Flashy Title"></d2l-filter-dimension-set-value>
|
|
57
|
+
<d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
|
|
58
|
+
<d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
|
|
59
|
+
<d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
|
|
60
|
+
<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
|
|
61
|
+
</d2l-filter-dimension-set>
|
|
62
|
+
</d2l-filter>
|
|
36
63
|
</div>
|
|
37
64
|
<d2l-button slot="footer" primary data-dialog-action="ok">Click Me!</d2l-button>
|
|
38
65
|
<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
|
|
@@ -74,16 +74,24 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
|
|
|
74
74
|
|
|
75
75
|
dialog.d2l-dialog-outer,
|
|
76
76
|
div.d2l-dialog-outer {
|
|
77
|
+
animation: d2l-dialog-fullscreen-close 200ms ease-out;
|
|
77
78
|
border-radius: 8px;
|
|
78
79
|
margin: 1.5rem;
|
|
79
80
|
max-width: 1170px;
|
|
80
|
-
opacity: 0;
|
|
81
81
|
top: 0;
|
|
82
|
-
transform: translateY(-50px) scale(0.97);
|
|
83
|
-
transition: transform 200ms ease-out, opacity 200ms ease-out;
|
|
84
82
|
width: auto;
|
|
85
83
|
}
|
|
86
84
|
|
|
85
|
+
@keyframes d2l-dialog-fullscreen-close {
|
|
86
|
+
0% { opacity: 1; transform: translateY(0); }
|
|
87
|
+
100% { opacity: 0; transform: translateY(-50px) scale(0.97); }
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@keyframes d2l-dialog-fullscreen-open {
|
|
91
|
+
0% { opacity: 0; transform: translateY(-50px) scale(0.97); }
|
|
92
|
+
100% { opacity: 1; transform: translateY(0); }
|
|
93
|
+
}
|
|
94
|
+
|
|
87
95
|
dialog.d2l-dialog-outer.d2l-dialog-fullscreen-within,
|
|
88
96
|
div.d2l-dialog-outer.d2l-dialog-fullscreen-within {
|
|
89
97
|
/* no margins when there is a fullscreen element within */
|
|
@@ -107,8 +115,7 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
|
|
|
107
115
|
|
|
108
116
|
:host([_state="showing"]) dialog.d2l-dialog-outer,
|
|
109
117
|
:host([_state="showing"]) div.d2l-dialog-outer {
|
|
110
|
-
|
|
111
|
-
transition-duration: 400ms;
|
|
118
|
+
animation: d2l-dialog-fullscreen-open 400ms ease-out;
|
|
112
119
|
}
|
|
113
120
|
|
|
114
121
|
dialog::backdrop {
|
|
@@ -128,8 +135,10 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
|
|
|
128
135
|
@media (prefers-reduced-motion: reduce) {
|
|
129
136
|
|
|
130
137
|
dialog.d2l-dialog-outer,
|
|
131
|
-
div.d2l-dialog-outer
|
|
132
|
-
|
|
138
|
+
div.d2l-dialog-outer,
|
|
139
|
+
:host([_state="showing"]) dialog.d2l-dialog-outer,
|
|
140
|
+
:host([_state="showing"]) div.d2l-dialog-outer {
|
|
141
|
+
animation: none;
|
|
133
142
|
}
|
|
134
143
|
|
|
135
144
|
dialog::backdrop {
|
|
@@ -161,10 +170,6 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
|
|
|
161
170
|
height: calc(100% - 1px);
|
|
162
171
|
}
|
|
163
172
|
|
|
164
|
-
div[nested].d2l-dialog-outer {
|
|
165
|
-
top: 0;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
173
|
:host([dir="rtl"]) .d2l-dialog-header > div > d2l-button-icon {
|
|
169
174
|
margin-left: -13px;
|
|
170
175
|
margin-right: 15px;
|
|
@@ -154,11 +154,11 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
|
|
|
154
154
|
|
|
155
155
|
this._scroll = false;
|
|
156
156
|
if (!reduceMotion) {
|
|
157
|
-
const
|
|
158
|
-
dialog.removeEventListener('
|
|
157
|
+
const animationEnd = () => {
|
|
158
|
+
dialog.removeEventListener('animationend', animationEnd);
|
|
159
159
|
doClose();
|
|
160
160
|
};
|
|
161
|
-
dialog.addEventListener('
|
|
161
|
+
dialog.addEventListener('animationend', animationEnd);
|
|
162
162
|
this._state = 'hiding';
|
|
163
163
|
} else {
|
|
164
164
|
this._state = 'hiding';
|
|
@@ -314,11 +314,11 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
|
|
|
314
314
|
const dialog = this.shadowRoot.querySelector('.d2l-dialog-outer');
|
|
315
315
|
|
|
316
316
|
const animPromise = new Promise((resolve) => {
|
|
317
|
-
const
|
|
318
|
-
dialog.removeEventListener('
|
|
317
|
+
const animationEnd = () => {
|
|
318
|
+
dialog.removeEventListener('animationend', animationEnd);
|
|
319
319
|
resolve();
|
|
320
320
|
};
|
|
321
|
-
dialog.addEventListener('
|
|
321
|
+
dialog.addEventListener('animationend', animationEnd);
|
|
322
322
|
});
|
|
323
323
|
|
|
324
324
|
if (this._useNative) {
|
|
@@ -21,6 +21,7 @@ export const dialogStyles = css`
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
.d2l-dialog-outer {
|
|
24
|
+
animation: d2l-dialog-close 200ms ease-in;
|
|
24
25
|
background-color: white;
|
|
25
26
|
border: 1px solid var(--d2l-color-mica);
|
|
26
27
|
border-radius: 8px;
|
|
@@ -28,8 +29,21 @@ export const dialogStyles = css`
|
|
|
28
29
|
box-sizing: content-box;
|
|
29
30
|
position: fixed; /* also required for native to override position: absolute */
|
|
30
31
|
top: 100px;
|
|
31
|
-
|
|
32
|
-
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
:host([_state="showing"]) > .d2l-dialog-outer {
|
|
35
|
+
/* must target direct child to avoid ancestor from interfering with closing child dialogs in Legacy-Edge */
|
|
36
|
+
animation: d2l-dialog-open 200ms ease-in;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@keyframes d2l-dialog-close {
|
|
40
|
+
0% { transform: translateY(0); }
|
|
41
|
+
100% { transform: translateY(-50px); }
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@keyframes d2l-dialog-open {
|
|
45
|
+
0% { transform: translateY(-50px); }
|
|
46
|
+
100% { transform: translateY(0); }
|
|
33
47
|
}
|
|
34
48
|
|
|
35
49
|
.d2l-dialog-outer.d2l-dialog-outer-nested-showing {
|
|
@@ -45,10 +59,6 @@ export const dialogStyles = css`
|
|
|
45
59
|
z-index: 1000;
|
|
46
60
|
}
|
|
47
61
|
|
|
48
|
-
.d2l-dialog-outer.d2l-dialog-outer-nested {
|
|
49
|
-
top: 0;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
62
|
dialog.d2l-dialog-outer {
|
|
53
63
|
color: var(--d2l-color-ferrite);
|
|
54
64
|
margin-bottom: 0; /* required to override Chrome native positioning */
|
|
@@ -63,11 +73,6 @@ export const dialogStyles = css`
|
|
|
63
73
|
transition: opacity 200ms ease-in;
|
|
64
74
|
}
|
|
65
75
|
|
|
66
|
-
:host([_state="showing"]) > .d2l-dialog-outer {
|
|
67
|
-
/* must target direct child to avoid ancestor from interfering with closing child dialogs in Legacy-Edge */
|
|
68
|
-
transform: translateY(0);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
76
|
:host([_state="showing"]) dialog::backdrop {
|
|
72
77
|
opacity: 0.7;
|
|
73
78
|
}
|
|
@@ -158,8 +163,9 @@ export const dialogStyles = css`
|
|
|
158
163
|
}
|
|
159
164
|
|
|
160
165
|
@media (prefers-reduced-motion: reduce) {
|
|
161
|
-
.d2l-dialog-outer
|
|
162
|
-
|
|
166
|
+
.d2l-dialog-outer,
|
|
167
|
+
:host([_state="showing"]) > .d2l-dialog-outer {
|
|
168
|
+
animation: none;
|
|
163
169
|
}
|
|
164
170
|
dialog::backdrop {
|
|
165
171
|
transition: none;
|
|
@@ -33,6 +33,13 @@
|
|
|
33
33
|
</template>
|
|
34
34
|
</d2l-demo-snippet>
|
|
35
35
|
|
|
36
|
+
<h2>Custom Interval (Issue #1751)</h2>
|
|
37
|
+
<d2l-demo-snippet>
|
|
38
|
+
<template>
|
|
39
|
+
<d2l-input-time-range label="Time Range" start-value="15:15" time-interval="ten" enforce-time-intervals></d2l-input-time-range>
|
|
40
|
+
</template>
|
|
41
|
+
</d2l-demo-snippet>
|
|
42
|
+
|
|
36
43
|
<h2>Hidden Label</h2>
|
|
37
44
|
<d2l-demo-snippet>
|
|
38
45
|
<template>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
# Tag List
|
|
2
|
-
*This component is in progress. The API is generally stable but
|
|
2
|
+
*This component is in progress. The API is generally stable but there could be some appearance or minor behavior churn in the short-term.*
|
|
3
3
|
|
|
4
4
|
Tag lists are used to present a list of compact, discrete pieces of information.
|
|
5
5
|
|
|
@@ -31,8 +31,12 @@ The `d2l-tag-list` element can take a combination of any type of `d2l-tag-list-i
|
|
|
31
31
|
<script type="module">
|
|
32
32
|
import '@brightspace-ui/core/components/tag-list/tag-list.js';
|
|
33
33
|
import '@brightspace-ui/core/components/tag-list/tag-list-item.js';
|
|
34
|
-
</script>
|
|
35
34
|
|
|
35
|
+
document.addEventListener('d2l-tag-list-item-clear', (e) => {
|
|
36
|
+
e.target.parentNode.removeChild(e.target);
|
|
37
|
+
console.log(`d2l-tag-list-item-clear event dispatched. Value: ${e.detail.value}, handleFocus: ${e.detail.handleFocus}`);
|
|
38
|
+
});
|
|
39
|
+
</script>
|
|
36
40
|
<d2l-tag-list description="Example Tags">
|
|
37
41
|
<d2l-tag-list-item text="Lorem ipsum dolor"></d2l-tag-list-item>
|
|
38
42
|
<d2l-tag-list-item text="Reprehenderit in voluptate velit esse"></d2l-tag-list-item>
|
|
@@ -49,6 +53,11 @@ The `d2l-tag-list-item` provides the appropriate `listitem` semantics and stylin
|
|
|
49
53
|
<script type="module">
|
|
50
54
|
import '@brightspace-ui/core/components/tag-list/tag-list.js';
|
|
51
55
|
import '@brightspace-ui/core/components/tag-list/tag-list-item.js';
|
|
56
|
+
|
|
57
|
+
document.addEventListener('d2l-tag-list-item-clear', (e) => {
|
|
58
|
+
e.target.parentNode.removeChild(e.target);
|
|
59
|
+
console.log(`d2l-tag-list-item-clear event dispatched. Value: ${e.detail.value}, handleFocus: ${e.detail.handleFocus}`);
|
|
60
|
+
});
|
|
52
61
|
</script>
|
|
53
62
|
|
|
54
63
|
<d2l-tag-list description="Example Tags">
|
|
@@ -64,9 +64,9 @@
|
|
|
64
64
|
<d2l-tag-list-item text="Example Tag 7"></d2l-tag-list-item>
|
|
65
65
|
</d2l-tag-list>
|
|
66
66
|
<script>
|
|
67
|
-
document.addEventListener('d2l-tag-list-item-
|
|
67
|
+
document.addEventListener('d2l-tag-list-item-clear', (e) => {
|
|
68
68
|
e.target.parentNode.removeChild(e.target);
|
|
69
|
-
console.log(`d2l-tag-list-item-
|
|
69
|
+
console.log(`d2l-tag-list-item-clear event dispatched. Value: ${e.detail.value}, handleFocus: ${e.detail.handleFocus}`);
|
|
70
70
|
});
|
|
71
71
|
</script>
|
|
72
72
|
</d2l-demo-snippet>
|
|
@@ -15,7 +15,7 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
|
|
|
15
15
|
static get properties() {
|
|
16
16
|
return {
|
|
17
17
|
/**
|
|
18
|
-
* Enables the option to clear a tag list item. The `d2l-tag-list-item-
|
|
18
|
+
* Enables the option to clear a tag list item. The `d2l-tag-list-item-clear` event will be dispatched when the user selects to delete the item. The consumer must handle the actual item deletion.
|
|
19
19
|
*/
|
|
20
20
|
clearable: { type: Boolean },
|
|
21
21
|
/**
|
|
@@ -113,12 +113,12 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
|
|
|
113
113
|
this.addEventListener('focus', (e) => {
|
|
114
114
|
// ignore focus events coming from inside the tag content
|
|
115
115
|
if (e.composedPath()[0] !== this) return;
|
|
116
|
-
|
|
117
|
-
container.dispatchEvent(
|
|
116
|
+
/** @ignore */
|
|
117
|
+
container.dispatchEvent(new FocusEvent('focus', { bubbles: true, cancelable: true }));
|
|
118
118
|
});
|
|
119
119
|
this.addEventListener('blur', () => {
|
|
120
|
-
|
|
121
|
-
container.dispatchEvent(
|
|
120
|
+
/** @ignore */
|
|
121
|
+
container.dispatchEvent(new FocusEvent('blur', { bubbles: true, cancelable: true }));
|
|
122
122
|
});
|
|
123
123
|
this.addEventListener('keydown', this._handleKeydown);
|
|
124
124
|
}
|
|
@@ -136,7 +136,7 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
|
|
|
136
136
|
|
|
137
137
|
/** Dispatched when a user selects to delete a tag list item. The consumer must handle the actual element deletion and focus behaviour if there are no remaining list items. */
|
|
138
138
|
this.dispatchEvent(new CustomEvent(
|
|
139
|
-
'd2l-tag-list-item-
|
|
139
|
+
'd2l-tag-list-item-clear',
|
|
140
140
|
{ bubbles: true, composed: true, detail: { value: this.text, handleFocus } }
|
|
141
141
|
));
|
|
142
142
|
}
|
|
@@ -32,7 +32,7 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
|
|
|
32
32
|
static get properties() {
|
|
33
33
|
return {
|
|
34
34
|
/**
|
|
35
|
-
* Enables the option to clear all inner tag list items. The `d2l-tag-list-item-
|
|
35
|
+
* Enables the option to clear all inner tag list items. The `d2l-tag-list-item-clear` event will be dispatched for each list item when the user selects to Clear All. The consumer must handle the actual item deletion.
|
|
36
36
|
*/
|
|
37
37
|
clearable: { type: Boolean },
|
|
38
38
|
/**
|
|
@@ -158,7 +158,7 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
|
|
|
158
158
|
};
|
|
159
159
|
|
|
160
160
|
const list = html`
|
|
161
|
-
<div role="list" class="tag-list-container" aria-describedby="d2l-tag-list-description" @d2l-tag-list-item-
|
|
161
|
+
<div role="list" class="tag-list-container" aria-describedby="d2l-tag-list-description" @d2l-tag-list-item-clear="${this._handleItemDeleted}">
|
|
162
162
|
<slot @slotchange="${this._handleSlotChange}"></slot>
|
|
163
163
|
${overflowButton}
|
|
164
164
|
<d2l-button-subtle
|
package/custom-elements.json
CHANGED
|
@@ -9771,7 +9771,7 @@
|
|
|
9771
9771
|
},
|
|
9772
9772
|
{
|
|
9773
9773
|
"name": "clearable",
|
|
9774
|
-
"description": "Enables the option to clear a tag list item. The `d2l-tag-list-item-
|
|
9774
|
+
"description": "Enables the option to clear a tag list item. The `d2l-tag-list-item-clear` event will be dispatched when the user selects to delete the item. The consumer must handle the actual item deletion.",
|
|
9775
9775
|
"type": "boolean",
|
|
9776
9776
|
"default": "false"
|
|
9777
9777
|
}
|
|
@@ -9786,20 +9786,14 @@
|
|
|
9786
9786
|
{
|
|
9787
9787
|
"name": "clearable",
|
|
9788
9788
|
"attribute": "clearable",
|
|
9789
|
-
"description": "Enables the option to clear a tag list item. The `d2l-tag-list-item-
|
|
9789
|
+
"description": "Enables the option to clear a tag list item. The `d2l-tag-list-item-clear` event will be dispatched when the user selects to delete the item. The consumer must handle the actual item deletion.",
|
|
9790
9790
|
"type": "boolean",
|
|
9791
9791
|
"default": "false"
|
|
9792
9792
|
}
|
|
9793
9793
|
],
|
|
9794
9794
|
"events": [
|
|
9795
9795
|
{
|
|
9796
|
-
"name": "
|
|
9797
|
-
},
|
|
9798
|
-
{
|
|
9799
|
-
"name": "blur"
|
|
9800
|
-
},
|
|
9801
|
-
{
|
|
9802
|
-
"name": "d2l-tag-list-item-cleared",
|
|
9796
|
+
"name": "d2l-tag-list-item-clear",
|
|
9803
9797
|
"description": "Dispatched when a user selects to delete a tag list item. The consumer must handle the actual element deletion and focus behaviour if there are no remaining list items."
|
|
9804
9798
|
}
|
|
9805
9799
|
]
|
|
@@ -9815,7 +9809,7 @@
|
|
|
9815
9809
|
},
|
|
9816
9810
|
{
|
|
9817
9811
|
"name": "clearable",
|
|
9818
|
-
"description": "Enables the option to clear all inner tag list items. The `d2l-tag-list-item-
|
|
9812
|
+
"description": "Enables the option to clear all inner tag list items. The `d2l-tag-list-item-clear` event will be dispatched for each list item when the user selects to Clear All. The consumer must handle the actual item deletion.",
|
|
9819
9813
|
"type": "boolean",
|
|
9820
9814
|
"default": "false"
|
|
9821
9815
|
}
|
|
@@ -9830,7 +9824,7 @@
|
|
|
9830
9824
|
{
|
|
9831
9825
|
"name": "clearable",
|
|
9832
9826
|
"attribute": "clearable",
|
|
9833
|
-
"description": "Enables the option to clear all inner tag list items. The `d2l-tag-list-item-
|
|
9827
|
+
"description": "Enables the option to clear all inner tag list items. The `d2l-tag-list-item-clear` event will be dispatched for each list item when the user selects to Clear All. The consumer must handle the actual item deletion.",
|
|
9834
9828
|
"type": "boolean",
|
|
9835
9829
|
"default": "false"
|
|
9836
9830
|
},
|
|
@@ -9856,7 +9850,7 @@
|
|
|
9856
9850
|
},
|
|
9857
9851
|
{
|
|
9858
9852
|
"name": "clearable",
|
|
9859
|
-
"description": "Enables the option to clear a tag list item. The `d2l-tag-list-item-
|
|
9853
|
+
"description": "Enables the option to clear a tag list item. The `d2l-tag-list-item-clear` event will be dispatched when the user selects to delete the item. The consumer must handle the actual item deletion.",
|
|
9860
9854
|
"type": "boolean",
|
|
9861
9855
|
"default": "false"
|
|
9862
9856
|
}
|
|
@@ -9870,20 +9864,14 @@
|
|
|
9870
9864
|
{
|
|
9871
9865
|
"name": "clearable",
|
|
9872
9866
|
"attribute": "clearable",
|
|
9873
|
-
"description": "Enables the option to clear a tag list item. The `d2l-tag-list-item-
|
|
9867
|
+
"description": "Enables the option to clear a tag list item. The `d2l-tag-list-item-clear` event will be dispatched when the user selects to delete the item. The consumer must handle the actual item deletion.",
|
|
9874
9868
|
"type": "boolean",
|
|
9875
9869
|
"default": "false"
|
|
9876
9870
|
}
|
|
9877
9871
|
],
|
|
9878
9872
|
"events": [
|
|
9879
9873
|
{
|
|
9880
|
-
"name": "
|
|
9881
|
-
},
|
|
9882
|
-
{
|
|
9883
|
-
"name": "blur"
|
|
9884
|
-
},
|
|
9885
|
-
{
|
|
9886
|
-
"name": "d2l-tag-list-item-cleared",
|
|
9874
|
+
"name": "d2l-tag-list-item-clear",
|
|
9887
9875
|
"description": "Dispatched when a user selects to delete a tag list item. The consumer must handle the actual element deletion and focus behaviour if there are no remaining list items."
|
|
9888
9876
|
}
|
|
9889
9877
|
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.12.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",
|