@brightspace-ui/core 2.114.0 → 2.114.2
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/meter/README.md +8 -1
- package/components/meter/demo/meter.html +62 -23
- package/components/meter/meter-mixin.js +1 -1
- package/components/selection/selection-mixin.js +9 -0
- package/components/selection/selection-select-all-pages.js +4 -1
- package/custom-elements.json +6 -6
- package/package.json +1 -1
|
@@ -41,7 +41,14 @@ Linear meters show a horizontal progress bar.
|
|
|
41
41
|
<script type="module">
|
|
42
42
|
import '@brightspace-ui/core/components/meter/meter-linear.js';
|
|
43
43
|
</script>
|
|
44
|
-
<
|
|
44
|
+
<style>
|
|
45
|
+
d2l-meter-linear {
|
|
46
|
+
width: 170px;
|
|
47
|
+
}
|
|
48
|
+
</style>
|
|
49
|
+
<d2l-meter-linear value="8" max="10" text="Activities"></d2l-meter-linear>
|
|
50
|
+
<d2l-meter-linear value="8" max="10" text="Activities: {x/y}" percent></d2l-meter-linear>
|
|
51
|
+
<d2l-meter-linear value="8" max="10" text-inline text="Activities"></d2l-meter-linear>
|
|
45
52
|
```
|
|
46
53
|
|
|
47
54
|
<!-- docs: start hidden content -->
|
|
@@ -10,6 +10,21 @@
|
|
|
10
10
|
import '../meter-radial.js';
|
|
11
11
|
import '../meter-circle.js';
|
|
12
12
|
</script>
|
|
13
|
+
<style>
|
|
14
|
+
d2l-demo-snippet > div > div {
|
|
15
|
+
padding: 1rem;
|
|
16
|
+
}
|
|
17
|
+
d2l-meter-linear {
|
|
18
|
+
width: 250px;
|
|
19
|
+
}
|
|
20
|
+
d2l-meter-linear, d2l-meter-radial, d2l-meter-circle {
|
|
21
|
+
margin-bottom: 1rem;
|
|
22
|
+
}
|
|
23
|
+
.dark-background {
|
|
24
|
+
background-color: var(--d2l-color-celestine);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
</style>
|
|
13
28
|
</head>
|
|
14
29
|
<body unresolved>
|
|
15
30
|
|
|
@@ -17,48 +32,72 @@
|
|
|
17
32
|
|
|
18
33
|
<h2>Meter Linear</h2>
|
|
19
34
|
|
|
20
|
-
<d2l-demo-snippet>
|
|
35
|
+
<d2l-demo-snippet no-padding>
|
|
21
36
|
<template>
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<d2l-meter-linear value="2" max="15"
|
|
26
|
-
<d2l-meter-linear value="
|
|
37
|
+
<div>
|
|
38
|
+
<d2l-meter-linear value="2" max="15" text-inline></d2l-meter-linear>
|
|
39
|
+
<d2l-meter-linear value="2" max="15" text-inline percent></d2l-meter-linear>
|
|
40
|
+
<d2l-meter-linear value="2" max="15" text-inline text="Activities"></d2l-meter-linear>
|
|
41
|
+
<d2l-meter-linear value="2" max="15" text-inline text="Activities" percent></d2l-meter-linear>
|
|
42
|
+
<d2l-meter-linear value="3" max="6"></d2l-meter-linear>
|
|
43
|
+
<d2l-meter-linear value="3" max="6" percent></d2l-meter-linear>
|
|
44
|
+
<d2l-meter-linear value="3" max="6" text="Visited: {x/y}" percent></d2l-meter-linear>
|
|
45
|
+
<d2l-meter-linear value="3" max="6" text="Visited: {%}"></d2l-meter-linear>
|
|
46
|
+
<d2l-meter-linear value="3" max="6" text="You're doing great!" percent></d2l-meter-linear>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="dark-background">
|
|
49
|
+
<d2l-meter-linear value="2" max="15" foreground-light text-inline></d2l-meter-linear>
|
|
50
|
+
<d2l-meter-linear value="2" max="15" foreground-light text-inline percent></d2l-meter-linear>
|
|
51
|
+
<d2l-meter-linear value="2" max="15" foreground-light text-inline text="Activities"></d2l-meter-linear>
|
|
52
|
+
<d2l-meter-linear value="2" max="15" foreground-light text-inline text="Activities" percent></d2l-meter-linear>
|
|
53
|
+
<d2l-meter-linear value="3" max="6" foreground-light></d2l-meter-linear>
|
|
54
|
+
<d2l-meter-linear value="3" max="6" foreground-light percent></d2l-meter-linear>
|
|
55
|
+
<d2l-meter-linear value="3" max="6" foreground-light text="Visited: {x/y}" percent></d2l-meter-linear>
|
|
56
|
+
<d2l-meter-linear value="3" max="6" foreground-light text="Visited: {%}"></d2l-meter-linear>
|
|
57
|
+
<d2l-meter-linear value="3" max="6" foreground-light text="You're doing great!" percent></d2l-meter-linear>
|
|
27
58
|
</div>
|
|
28
59
|
</template>
|
|
29
60
|
</d2l-demo-snippet>
|
|
30
61
|
|
|
31
62
|
<h2>Meter Radial</h2>
|
|
32
63
|
|
|
33
|
-
<d2l-demo-snippet>
|
|
64
|
+
<d2l-demo-snippet no-padding>
|
|
34
65
|
<template>
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
66
|
+
<div>
|
|
67
|
+
<d2l-meter-radial value="0" max="10"></d2l-meter-radial>
|
|
68
|
+
<d2l-meter-radial value="5" max="13"></d2l-meter-radial>
|
|
69
|
+
<d2l-meter-radial value="5" max="13" percent></d2l-meter-radial>
|
|
70
|
+
<d2l-meter-radial value="10" max="10"></d2l-meter-radial>
|
|
71
|
+
<d2l-meter-radial value="5" max="10" text="Completed"></d2l-meter-radial>
|
|
72
|
+
<d2l-meter-radial value="19" max="26" style="width: 25%;"></d2l-meter-radial>
|
|
73
|
+
</div>
|
|
74
|
+
<div class="dark-background">
|
|
75
|
+
<d2l-meter-radial value="0" max="10" foreground-light></d2l-meter-radial>
|
|
41
76
|
<d2l-meter-radial value="5" max="13" foreground-light></d2l-meter-radial>
|
|
77
|
+
<d2l-meter-radial value="5" max="13" percent foreground-light></d2l-meter-radial>
|
|
42
78
|
<d2l-meter-radial value="10" max="10" foreground-light></d2l-meter-radial>
|
|
43
|
-
<d2l-meter-radial value="0" max="10" foreground-light></d2l-meter-radial>
|
|
44
|
-
<d2l-meter-radial value="19" max="26" style="width: 25%;" foreground-light></d2l-meter-radial>
|
|
45
79
|
<d2l-meter-radial value="5" max="10" text="Completed" foreground-light></d2l-meter-radial>
|
|
80
|
+
<d2l-meter-radial value="19" max="26" style="width: 25%;" foreground-light></d2l-meter-radial>
|
|
46
81
|
</div>
|
|
47
82
|
</template>
|
|
48
83
|
</d2l-demo-snippet>
|
|
49
84
|
|
|
50
85
|
<h2>Meter Circle</h2>
|
|
51
86
|
|
|
52
|
-
<d2l-demo-snippet>
|
|
87
|
+
<d2l-demo-snippet no-padding>
|
|
53
88
|
<template>
|
|
54
|
-
<
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
<d2l-meter-circle value="
|
|
60
|
-
|
|
89
|
+
<div>
|
|
90
|
+
<d2l-meter-circle value="0" max="10"></d2l-meter-circle>
|
|
91
|
+
<d2l-meter-circle value="5" max="13"></d2l-meter-circle>
|
|
92
|
+
<d2l-meter-circle value="5" max="13" percent></d2l-meter-circle>
|
|
93
|
+
<d2l-meter-circle value="10" max="10"></d2l-meter-circle>
|
|
94
|
+
<d2l-meter-circle value="19" max="26" style="width: 25%;"></d2l-meter-circle>
|
|
95
|
+
</div>
|
|
96
|
+
<div class="dark-background">
|
|
61
97
|
<d2l-meter-circle value="0" max="10" foreground-light></d2l-meter-circle>
|
|
98
|
+
<d2l-meter-circle value="5" max="13" foreground-light></d2l-meter-circle>
|
|
99
|
+
<d2l-meter-circle value="5" max="13" percent foreground-light></d2l-meter-circle>
|
|
100
|
+
<d2l-meter-circle value="10" max="10" foreground-light></d2l-meter-circle>
|
|
62
101
|
<d2l-meter-circle value="19" max="26" style="width: 25%;" foreground-light></d2l-meter-circle>
|
|
63
102
|
</div>
|
|
64
103
|
</template>
|
|
@@ -17,7 +17,7 @@ export const MeterMixin = superclass => class extends LocalizeCoreElement(superc
|
|
|
17
17
|
*/
|
|
18
18
|
percent: { type: Boolean },
|
|
19
19
|
/**
|
|
20
|
-
* Context information for the meter
|
|
20
|
+
* Context information for the meter. If the text contains {%} or {x/y}, they will be replaced with a percentage or fraction respectively.
|
|
21
21
|
* @type {string}
|
|
22
22
|
*/
|
|
23
23
|
text: { type: String },
|
|
@@ -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
|
}
|
package/custom-elements.json
CHANGED
|
@@ -9497,7 +9497,7 @@
|
|
|
9497
9497
|
"attributes": [
|
|
9498
9498
|
{
|
|
9499
9499
|
"name": "text",
|
|
9500
|
-
"description": "Context information for the meter",
|
|
9500
|
+
"description": "Context information for the meter. If the text contains {%} or {x/y}, they will be replaced with a percentage or fraction respectively.",
|
|
9501
9501
|
"type": "string"
|
|
9502
9502
|
},
|
|
9503
9503
|
{
|
|
@@ -9523,7 +9523,7 @@
|
|
|
9523
9523
|
{
|
|
9524
9524
|
"name": "text",
|
|
9525
9525
|
"attribute": "text",
|
|
9526
|
-
"description": "Context information for the meter",
|
|
9526
|
+
"description": "Context information for the meter. If the text contains {%} or {x/y}, they will be replaced with a percentage or fraction respectively.",
|
|
9527
9527
|
"type": "string"
|
|
9528
9528
|
},
|
|
9529
9529
|
{
|
|
@@ -9566,7 +9566,7 @@
|
|
|
9566
9566
|
},
|
|
9567
9567
|
{
|
|
9568
9568
|
"name": "text",
|
|
9569
|
-
"description": "Context information for the meter",
|
|
9569
|
+
"description": "Context information for the meter. If the text contains {%} or {x/y}, they will be replaced with a percentage or fraction respectively.",
|
|
9570
9570
|
"type": "string"
|
|
9571
9571
|
},
|
|
9572
9572
|
{
|
|
@@ -9599,7 +9599,7 @@
|
|
|
9599
9599
|
{
|
|
9600
9600
|
"name": "text",
|
|
9601
9601
|
"attribute": "text",
|
|
9602
|
-
"description": "Context information for the meter",
|
|
9602
|
+
"description": "Context information for the meter. If the text contains {%} or {x/y}, they will be replaced with a percentage or fraction respectively.",
|
|
9603
9603
|
"type": "string"
|
|
9604
9604
|
},
|
|
9605
9605
|
{
|
|
@@ -9636,7 +9636,7 @@
|
|
|
9636
9636
|
"attributes": [
|
|
9637
9637
|
{
|
|
9638
9638
|
"name": "text",
|
|
9639
|
-
"description": "Context information for the meter",
|
|
9639
|
+
"description": "Context information for the meter. If the text contains {%} or {x/y}, they will be replaced with a percentage or fraction respectively.",
|
|
9640
9640
|
"type": "string"
|
|
9641
9641
|
},
|
|
9642
9642
|
{
|
|
@@ -9662,7 +9662,7 @@
|
|
|
9662
9662
|
{
|
|
9663
9663
|
"name": "text",
|
|
9664
9664
|
"attribute": "text",
|
|
9665
|
-
"description": "Context information for the meter",
|
|
9665
|
+
"description": "Context information for the meter. If the text contains {%} or {x/y}, they will be replaced with a percentage or fraction respectively.",
|
|
9666
9666
|
"type": "string"
|
|
9667
9667
|
},
|
|
9668
9668
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.114.
|
|
3
|
+
"version": "2.114.2",
|
|
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",
|