@brightspace-ui/core 3.205.0 → 3.205.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.
|
@@ -31,6 +31,7 @@ import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
|
|
|
31
31
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
32
32
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
33
33
|
import { offscreenStyles } from '../offscreen/offscreen.js';
|
|
34
|
+
import { styleMap } from 'lit/directives/style-map.js';
|
|
34
35
|
import { SubscriberRegistryController } from '../../controllers/subscriber/subscriberControllers.js';
|
|
35
36
|
|
|
36
37
|
const ARROWLEFT_KEY_CODE = 37;
|
|
@@ -635,6 +636,10 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
|
|
|
635
636
|
listItems = dimension.values.map(item => this._createSetDimensionItem(item));
|
|
636
637
|
}
|
|
637
638
|
|
|
639
|
+
const listStyles = {
|
|
640
|
+
paddingBlockEnd: dimension.hasMore ? '10px' : undefined
|
|
641
|
+
};
|
|
642
|
+
|
|
638
643
|
return html`
|
|
639
644
|
${searchResults}
|
|
640
645
|
<d2l-list
|
|
@@ -644,7 +649,8 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
|
|
|
644
649
|
grid
|
|
645
650
|
label="${ifDefined(listLabel)}"
|
|
646
651
|
?selection-single="${dimension.selectionSingle}"
|
|
647
|
-
separators="between"
|
|
652
|
+
separators="between"
|
|
653
|
+
style=${styleMap(listStyles)}>
|
|
648
654
|
${selectedListItems}
|
|
649
655
|
${listHeader}
|
|
650
656
|
${listItems}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
|
-
import { css, html, LitElement } from 'lit';
|
|
2
|
+
import { css, html, LitElement, svg } from 'lit';
|
|
3
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
3
4
|
|
|
4
5
|
/**
|
|
5
6
|
* A loading spinner component.
|
|
@@ -43,54 +44,51 @@ class LoadingSpinner extends LitElement {
|
|
|
43
44
|
position: relative;
|
|
44
45
|
width: var(--d2l-loading-spinner-size, 50px);
|
|
45
46
|
}
|
|
46
|
-
|
|
47
|
-
|
|
47
|
+
svg {
|
|
48
|
+
background: radial-gradient(rgba(0, 0, 0, 0.1), transparent 70%); /* 70% ≈ 100%/sqrt(2) = radius of circle since corners lie on 100% of radial gradient */
|
|
48
49
|
height: 100%;
|
|
49
50
|
position: absolute;
|
|
50
|
-
stroke: var(--d2l-loading-spinner-color, var(--d2l-color-celestine));
|
|
51
51
|
top: 0;
|
|
52
52
|
width: 100%;
|
|
53
53
|
}
|
|
54
|
-
.
|
|
54
|
+
.outer-circle-stroke {
|
|
55
|
+
fill: none;
|
|
55
56
|
stroke: #ededfa;
|
|
57
|
+
stroke-width: 0.5;
|
|
58
|
+
}
|
|
59
|
+
.outer-circle {
|
|
60
|
+
fill: white;
|
|
61
|
+
stroke: none;
|
|
56
62
|
}
|
|
57
|
-
.
|
|
58
|
-
|
|
59
|
-
|
|
63
|
+
.inner-circle {
|
|
64
|
+
fill: none;
|
|
65
|
+
stroke: var(--d2l-loading-spinner-color, var(--d2l-color-celestine));
|
|
66
|
+
stroke-width: 2;
|
|
60
67
|
}
|
|
61
68
|
|
|
62
|
-
.
|
|
63
|
-
.d2l-loading-spinner-slice2,
|
|
64
|
-
.d2l-loading-spinner-slice3,
|
|
65
|
-
.d2l-loading-spinner-slice4,
|
|
66
|
-
.d2l-loading-spinner-slice5 {
|
|
69
|
+
.slice {
|
|
67
70
|
animation-duration: 1.5s;
|
|
68
71
|
animation-iteration-count: infinite;
|
|
69
72
|
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
|
|
70
|
-
|
|
71
|
-
left: 50%;
|
|
72
|
-
position: absolute;
|
|
73
|
-
top: 0;
|
|
74
|
-
transform-origin: left bottom;
|
|
75
|
-
width: 50%;
|
|
73
|
+
transform-origin: center;
|
|
76
74
|
}
|
|
77
|
-
.
|
|
75
|
+
.slice-1 {
|
|
78
76
|
animation-name: slicespin1;
|
|
79
77
|
transform: rotate(54deg);
|
|
80
78
|
}
|
|
81
|
-
.
|
|
79
|
+
.slice-2 {
|
|
82
80
|
animation-name: slicespin2;
|
|
83
81
|
transform: rotate(124deg);
|
|
84
82
|
}
|
|
85
|
-
.
|
|
83
|
+
.slice-3 {
|
|
86
84
|
animation-name: slicespin3;
|
|
87
85
|
transform: rotate(198deg);
|
|
88
86
|
}
|
|
89
|
-
.
|
|
87
|
+
.slice-4 {
|
|
90
88
|
animation-name: slicespin4;
|
|
91
89
|
transform: rotate(270deg);
|
|
92
90
|
}
|
|
93
|
-
.
|
|
91
|
+
.slice-5 {
|
|
94
92
|
animation-name: slicespin5;
|
|
95
93
|
transform: rotate(344deg);
|
|
96
94
|
}
|
|
@@ -121,47 +119,13 @@ class LoadingSpinner extends LitElement {
|
|
|
121
119
|
render() {
|
|
122
120
|
return html`
|
|
123
121
|
<div class="d2l-loading-spinner-wrapper">
|
|
124
|
-
<svg viewBox="0 0
|
|
125
|
-
<g
|
|
126
|
-
<circle
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
<svg viewBox="0 0 42 42" class="d2l-loading-spinner-bg" focusable="false">
|
|
130
|
-
<g fill="none" fill-rule="evenodd" transform="translate(5 5)">
|
|
131
|
-
<circle stroke-width="0.5" cx="16" cy="16" r="16" class="d2l-loading-spinner-bg-stroke"></circle>
|
|
132
|
-
<circle stroke="none" fill="#FFF" cx="16" cy="16" r="16"></circle>
|
|
133
|
-
<circle stroke-width="2" cx="16" cy="16" r="11"></circle>
|
|
134
|
-
</g>
|
|
135
|
-
</svg>
|
|
136
|
-
<svg viewBox="0 0 42 42" class="d2l-loading-spinner-slice1" focusable="false">
|
|
137
|
-
<g fill="none" fill-rule="evenodd">
|
|
138
|
-
<path d="M24 42h8c0-17.673-14.327-32-32-32v8c1.105 0 2 .895 2 2s-.895 2-2 2v20h20c0-1.105.895-2 2-2s2 .895 2 2z" fill="#FFF"></path>
|
|
139
|
-
<path d="M0 22c1.105 0 2-.895 2-2s-.895-2-2-2c13.255 0 24 10.745 24 24 0-1.105-.895-2-2-2s-2 .895-2 2c0-11.046-8.954-20-20-20z" fill="#E6EAF0"></path>
|
|
140
|
-
</g>
|
|
141
|
-
</svg>
|
|
142
|
-
<svg viewBox="0 0 42 42" class="d2l-loading-spinner-slice2" focusable="false">
|
|
143
|
-
<g fill="none" fill-rule="evenodd">
|
|
144
|
-
<path d="M24 42h8c0-17.673-14.327-32-32-32v8c1.105 0 2 .895 2 2s-.895 2-2 2v20h20c0-1.105.895-2 2-2s2 .895 2 2z" fill="#FFF"></path>
|
|
145
|
-
<path d="M0 22c1.105 0 2-.895 2-2s-.895-2-2-2c13.255 0 24 10.745 24 24 0-1.105-.895-2-2-2s-2 .895-2 2c0-11.046-8.954-20-20-20z" fill="#E6EAF0"></path>
|
|
146
|
-
</g>
|
|
147
|
-
</svg>
|
|
148
|
-
<svg viewBox="0 0 42 42" class="d2l-loading-spinner-slice3" focusable="false">
|
|
149
|
-
<g fill="none" fill-rule="evenodd">
|
|
150
|
-
<path d="M24 42h8c0-17.673-14.327-32-32-32v8c1.105 0 2 .895 2 2s-.895 2-2 2v20h20c0-1.105.895-2 2-2s2 .895 2 2z" fill="#FFF"></path>
|
|
151
|
-
<path d="M0 22c1.105 0 2-.895 2-2s-.895-2-2-2c13.255 0 24 10.745 24 24 0-1.105-.895-2-2-2s-2 .895-2 2c0-11.046-8.954-20-20-20z" fill="#E6EAF0"></path>
|
|
152
|
-
</g>
|
|
153
|
-
</svg>
|
|
154
|
-
<svg viewBox="0 0 42 42" class="d2l-loading-spinner-slice4" focusable="false">
|
|
155
|
-
<g fill="none" fill-rule="evenodd">
|
|
156
|
-
<path d="M24 42h8c0-17.673-14.327-32-32-32v8c1.105 0 2 .895 2 2s-.895 2-2 2v20h20c0-1.105.895-2 2-2s2 .895 2 2z" fill="#FFF"></path>
|
|
157
|
-
<path d="M0 22c1.105 0 2-.895 2-2s-.895-2-2-2c13.255 0 24 10.745 24 24 0-1.105-.895-2-2-2s-2 .895-2 2c0-11.046-8.954-20-20-20z" fill="#E6EAF0"></path>
|
|
158
|
-
</g>
|
|
159
|
-
</svg>
|
|
160
|
-
<svg viewBox="0 0 42 42" class="d2l-loading-spinner-slice5" focusable="false">
|
|
161
|
-
<g fill="none" fill-rule="evenodd">
|
|
162
|
-
<path d="M24 42h8c0-17.673-14.327-32-32-32v8c1.105 0 2 .895 2 2s-.895 2-2 2v20h20c0-1.105.895-2 2-2s2 .895 2 2z" fill="#FFF"></path>
|
|
163
|
-
<path d="M0 22c1.105 0 2-.895 2-2s-.895-2-2-2c13.255 0 24 10.745 24 24 0-1.105-.895-2-2-2s-2 .895-2 2c0-11.046-8.954-20-20-20z" fill="#E6EAF0"></path>
|
|
122
|
+
<svg viewBox="0 0 50 50" fill-rule="evenodd">
|
|
123
|
+
<g>
|
|
124
|
+
<circle cx="25" cy="25" r="19" class="outer-circle-stroke"></circle>
|
|
125
|
+
<circle cx="25" cy="25" r="19" class="outer-circle"></circle>
|
|
126
|
+
<circle cx="25" cy="25" r="13" class="inner-circle"></circle>
|
|
164
127
|
</g>
|
|
128
|
+
${Array.from({ length: 5 }).map((_, i) => this.#renderSlice(i + 1))}
|
|
165
129
|
</svg>
|
|
166
130
|
</div>
|
|
167
131
|
`;
|
|
@@ -177,5 +141,16 @@ class LoadingSpinner extends LitElement {
|
|
|
177
141
|
});
|
|
178
142
|
}
|
|
179
143
|
|
|
144
|
+
#renderSlice(index) {
|
|
145
|
+
const classes = {
|
|
146
|
+
'slice': true
|
|
147
|
+
};
|
|
148
|
+
classes[`slice-${index}`] = true;
|
|
149
|
+
return svg`<g class="${classMap(classes)}">
|
|
150
|
+
<path d="M39 25h5a19 19 0 0 0 -19 -19v5a 1 1 0 0 1 0 2v12h12a1 1 0 0 1 2 0z" fill="#FFF"></path>
|
|
151
|
+
<path d="M25 13a1 1 0 0 0 0 -2a14 14 0 0 1 14 14a1 1 0 0 0 -2 0a12 12 0 0 0 -12 -12z" fill="#E6EAF0"></path>
|
|
152
|
+
</g>`;
|
|
153
|
+
}
|
|
154
|
+
|
|
180
155
|
}
|
|
181
156
|
customElements.define('d2l-loading-spinner', LoadingSpinner);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.205.
|
|
3
|
+
"version": "3.205.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",
|