@brightspace-ui/core 3.155.10 → 3.156.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.
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# Progress Bar
|
|
2
|
+
A progress bar communicates information relating to the progress of completion of a process or workflow.
|
|
3
|
+
|
|
4
|
+
## Progress Bar [d2l-progress]
|
|
5
|
+
|
|
6
|
+
<!-- docs: demo code properties name:d2l-progress sandboxTitle:'Progress Bar' autoSize:false -->
|
|
7
|
+
```html
|
|
8
|
+
<script type="module">
|
|
9
|
+
import '@brightspace-ui/core/components/progress/progress.js';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<d2l-progress label="Progress" value="8" max="10"></d2l-progress>
|
|
13
|
+
```
|
|
14
|
+
<!-- docs: start hidden content -->
|
|
15
|
+
### Properties
|
|
16
|
+
|
|
17
|
+
| Property | Type | Description |
|
|
18
|
+
|---|---|---|
|
|
19
|
+
| `max` | Number | The maximum value of the progress bar |
|
|
20
|
+
| `value` | Number | The current value of the progress bar |
|
|
21
|
+
| `label` | String | Label for the progress bar |
|
|
22
|
+
| `label-hidden` | Boolean | Hide the bar's label |
|
|
23
|
+
| `value-hidden` | Boolean | Hide the bar's value |
|
|
@@ -0,0 +1,87 @@
|
|
|
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 '../progress.js';
|
|
11
|
+
</script>
|
|
12
|
+
</head>
|
|
13
|
+
<body unresolved>
|
|
14
|
+
<d2l-demo-page page-title="d2l-progress">
|
|
15
|
+
|
|
16
|
+
<h2>Basic</h2>
|
|
17
|
+
|
|
18
|
+
<d2l-demo-snippet>
|
|
19
|
+
<template>
|
|
20
|
+
<d2l-progress label="Progress" value="8" max="10"></d2l-progress>
|
|
21
|
+
</template>
|
|
22
|
+
</d2l-demo-snippet>
|
|
23
|
+
|
|
24
|
+
<h2>Small</h2>
|
|
25
|
+
|
|
26
|
+
<d2l-demo-snippet>
|
|
27
|
+
<template>
|
|
28
|
+
<d2l-progress small label="Progress(small)" value="8" max="10"></d2l-progress>
|
|
29
|
+
</template>
|
|
30
|
+
</d2l-demo-snippet>
|
|
31
|
+
|
|
32
|
+
<h2>Complete</h2>
|
|
33
|
+
|
|
34
|
+
<d2l-demo-snippet>
|
|
35
|
+
<template>
|
|
36
|
+
<d2l-progress label="Progress" value="10" max="10"></d2l-progress>
|
|
37
|
+
</template>
|
|
38
|
+
</d2l-demo-snippet>
|
|
39
|
+
|
|
40
|
+
<h2>Label Hidden</h2>
|
|
41
|
+
|
|
42
|
+
<d2l-demo-snippet>
|
|
43
|
+
<template>
|
|
44
|
+
<d2l-progress label="Progress" label-hidden value="50"></d2l-progress>
|
|
45
|
+
</template>
|
|
46
|
+
</d2l-demo-snippet>
|
|
47
|
+
|
|
48
|
+
<h2>Value Hidden</h2>
|
|
49
|
+
|
|
50
|
+
<d2l-demo-snippet>
|
|
51
|
+
<template>
|
|
52
|
+
<d2l-progress label="Progress" value-hidden value="50"></d2l-progress>
|
|
53
|
+
</template>
|
|
54
|
+
</d2l-demo-snippet>
|
|
55
|
+
|
|
56
|
+
<h2>Both Hidden</h2>
|
|
57
|
+
|
|
58
|
+
<d2l-demo-snippet>
|
|
59
|
+
<template>
|
|
60
|
+
<d2l-progress label="Progress" value-hidden label-hidden small value="50"></d2l-progress>
|
|
61
|
+
</template>
|
|
62
|
+
</d2l-demo-snippet>
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
<h2>Animation</h2>
|
|
66
|
+
|
|
67
|
+
<d2l-demo-snippet>
|
|
68
|
+
<template>
|
|
69
|
+
<button>Start Animation</button>
|
|
70
|
+
<d2l-progress label="Progress"></d2l-progress>
|
|
71
|
+
<script data-demo-hide>
|
|
72
|
+
(demo => {
|
|
73
|
+
const button = demo.querySelector('button');
|
|
74
|
+
const progress = demo.querySelector('d2l-progress');
|
|
75
|
+
button.addEventListener('click', () => {
|
|
76
|
+
for (let i = 0; i < 5; i++) {
|
|
77
|
+
setTimeout(() => progress.value = i * 25, i * 500);
|
|
78
|
+
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
})(document.currentScript.parentNode);
|
|
82
|
+
</script>
|
|
83
|
+
</template>
|
|
84
|
+
</d2l-demo-snippet>
|
|
85
|
+
</d2l-demo-page>
|
|
86
|
+
</body>
|
|
87
|
+
</html>
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import '../../components/colors/colors.js';
|
|
2
|
+
import { bodyCompactStyles, bodySmallStyles } from '../typography/styles.js';
|
|
3
|
+
import { css, html, LitElement, unsafeCSS } from 'lit';
|
|
4
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
5
|
+
import { formatPercent } from '@brightspace-ui/intl';
|
|
6
|
+
import { getSeparator } from '@brightspace-ui/intl/lib/list.js';
|
|
7
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
8
|
+
|
|
9
|
+
class Progress extends LitElement {
|
|
10
|
+
|
|
11
|
+
static get properties() {
|
|
12
|
+
return {
|
|
13
|
+
max: { type: Number, attribute: 'max' },
|
|
14
|
+
value: { type: Number },
|
|
15
|
+
label: { type: String },
|
|
16
|
+
labelHidden: { type: Boolean, attribute: 'label-hidden' },
|
|
17
|
+
valueHidden: { type: Boolean, attribute: 'value-hidden' },
|
|
18
|
+
small: { type: Boolean, reflect: true }
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
static get styles() {
|
|
23
|
+
return [bodySmallStyles, bodyCompactStyles, css`
|
|
24
|
+
:host {
|
|
25
|
+
display: block;
|
|
26
|
+
min-width: 6rem;
|
|
27
|
+
}
|
|
28
|
+
:host([hidden]) {
|
|
29
|
+
display: none;
|
|
30
|
+
}
|
|
31
|
+
.text {
|
|
32
|
+
display: flex;
|
|
33
|
+
justify-content: space-between;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
progress {
|
|
37
|
+
--d2l-progress-color: var(--d2l-color-celestine);
|
|
38
|
+
-moz-appearance: none;
|
|
39
|
+
-webkit-appearance: none;
|
|
40
|
+
appearance: none;
|
|
41
|
+
background-color: var(--d2l-color-gypsum);
|
|
42
|
+
border: none;
|
|
43
|
+
border-radius: 0.9rem;
|
|
44
|
+
box-shadow: inset 0 2px var(--d2l-color-mica);
|
|
45
|
+
display: block;
|
|
46
|
+
height: 0.9rem;
|
|
47
|
+
width: 100%;
|
|
48
|
+
}
|
|
49
|
+
:host([small]) progress {
|
|
50
|
+
height: 0.6rem;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
progress.complete {
|
|
54
|
+
--d2l-progress-color: var(--d2l-color-olivine);
|
|
55
|
+
}
|
|
56
|
+
/* this is necessary to avoid white bleed over rounded corners in chrome and safari */
|
|
57
|
+
progress::-webkit-progress-bar {
|
|
58
|
+
background-color: transparent;
|
|
59
|
+
}
|
|
60
|
+
`,
|
|
61
|
+
/* comma separating the selectors for these pseudo-elements causes them to break */
|
|
62
|
+
/* note: unable to get firefox to animate the width... seems animation is not implemented for progress in FF */
|
|
63
|
+
...['-webkit-progress-value', '-moz-progress-bar'].map(selector => css`
|
|
64
|
+
progress::${unsafeCSS(selector)} {
|
|
65
|
+
background-color: var(--d2l-progress-color);
|
|
66
|
+
border: 1px solid transparent;
|
|
67
|
+
border-radius: 0.9rem;
|
|
68
|
+
transition: width 0.25s ease-out;
|
|
69
|
+
}
|
|
70
|
+
progress.complete::${unsafeCSS(selector)} {
|
|
71
|
+
transition: none;
|
|
72
|
+
}
|
|
73
|
+
/* these are necessary to avoid showing border when value is 0 */
|
|
74
|
+
progress[value="0"]::${unsafeCSS(selector)} {
|
|
75
|
+
border: none;
|
|
76
|
+
}
|
|
77
|
+
@media (prefers-reduced-motion: reduce) {
|
|
78
|
+
progress::${unsafeCSS(selector)} {
|
|
79
|
+
transition: none;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
`)
|
|
83
|
+
];
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
constructor() {
|
|
87
|
+
super();
|
|
88
|
+
this.labelHidden = false;
|
|
89
|
+
this.max = 100;
|
|
90
|
+
this.value = 0;
|
|
91
|
+
this.valueHidden = false;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
render() {
|
|
95
|
+
const classes = {
|
|
96
|
+
'complete': this.value === this.max
|
|
97
|
+
};
|
|
98
|
+
const textClasses = {
|
|
99
|
+
'text': true,
|
|
100
|
+
'd2l-body-small': this.small,
|
|
101
|
+
'd2l-body-compact': !this.small
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
const percentage = Math.floor(100 * this.value / this.max) / 100;
|
|
105
|
+
const perecentageText = formatPercent(percentage);
|
|
106
|
+
|
|
107
|
+
return html`
|
|
108
|
+
<div class=${classMap(textClasses)} >
|
|
109
|
+
<span ?hidden=${this.labelHidden} id="label">${this.label}</span>
|
|
110
|
+
<span style="font-size: 0;">${getSeparator({ nonBreaking: true })}</span>
|
|
111
|
+
<span ?hidden=${this.valueHidden}>${perecentageText}</span>
|
|
112
|
+
</div>
|
|
113
|
+
<progress
|
|
114
|
+
aria-labelledby="${ifDefined(this.labelHidden ? undefined : 'label')}"
|
|
115
|
+
aria-label="${ifDefined(this.labelHidden ? this.label : undefined)}"
|
|
116
|
+
aria-valuetext="${perecentageText}"
|
|
117
|
+
class="${classMap(classes)}"
|
|
118
|
+
value="${this.value}"
|
|
119
|
+
max="${this.max}">
|
|
120
|
+
</progress>
|
|
121
|
+
`;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
customElements.define('d2l-progress', Progress);
|
package/custom-elements.json
CHANGED
|
@@ -11749,6 +11749,76 @@
|
|
|
11749
11749
|
}
|
|
11750
11750
|
]
|
|
11751
11751
|
},
|
|
11752
|
+
{
|
|
11753
|
+
"name": "d2l-progress",
|
|
11754
|
+
"path": "./components/progress/progress.js",
|
|
11755
|
+
"attributes": [
|
|
11756
|
+
{
|
|
11757
|
+
"name": "label",
|
|
11758
|
+
"type": "string"
|
|
11759
|
+
},
|
|
11760
|
+
{
|
|
11761
|
+
"name": "small",
|
|
11762
|
+
"type": "boolean"
|
|
11763
|
+
},
|
|
11764
|
+
{
|
|
11765
|
+
"name": "label-hidden",
|
|
11766
|
+
"type": "boolean",
|
|
11767
|
+
"default": "false"
|
|
11768
|
+
},
|
|
11769
|
+
{
|
|
11770
|
+
"name": "max",
|
|
11771
|
+
"type": "number",
|
|
11772
|
+
"default": "100"
|
|
11773
|
+
},
|
|
11774
|
+
{
|
|
11775
|
+
"name": "value",
|
|
11776
|
+
"type": "number",
|
|
11777
|
+
"default": "0"
|
|
11778
|
+
},
|
|
11779
|
+
{
|
|
11780
|
+
"name": "value-hidden",
|
|
11781
|
+
"type": "boolean",
|
|
11782
|
+
"default": "false"
|
|
11783
|
+
}
|
|
11784
|
+
],
|
|
11785
|
+
"properties": [
|
|
11786
|
+
{
|
|
11787
|
+
"name": "label",
|
|
11788
|
+
"attribute": "label",
|
|
11789
|
+
"type": "string"
|
|
11790
|
+
},
|
|
11791
|
+
{
|
|
11792
|
+
"name": "small",
|
|
11793
|
+
"attribute": "small",
|
|
11794
|
+
"type": "boolean"
|
|
11795
|
+
},
|
|
11796
|
+
{
|
|
11797
|
+
"name": "labelHidden",
|
|
11798
|
+
"attribute": "label-hidden",
|
|
11799
|
+
"type": "boolean",
|
|
11800
|
+
"default": "false"
|
|
11801
|
+
},
|
|
11802
|
+
{
|
|
11803
|
+
"name": "max",
|
|
11804
|
+
"attribute": "max",
|
|
11805
|
+
"type": "number",
|
|
11806
|
+
"default": "100"
|
|
11807
|
+
},
|
|
11808
|
+
{
|
|
11809
|
+
"name": "value",
|
|
11810
|
+
"attribute": "value",
|
|
11811
|
+
"type": "number",
|
|
11812
|
+
"default": "0"
|
|
11813
|
+
},
|
|
11814
|
+
{
|
|
11815
|
+
"name": "valueHidden",
|
|
11816
|
+
"attribute": "value-hidden",
|
|
11817
|
+
"type": "boolean",
|
|
11818
|
+
"default": "false"
|
|
11819
|
+
}
|
|
11820
|
+
]
|
|
11821
|
+
},
|
|
11752
11822
|
{
|
|
11753
11823
|
"name": "d2l-test-scroll-wrapper",
|
|
11754
11824
|
"path": "./components/scroll-wrapper/demo/scroll-wrapper-test.js",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.156.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",
|