@brightspace-ui/core 3.60.1 → 3.62.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/filter/demo/filter.html +6 -1
- package/components/filter/filter.js +0 -7
- package/components/focus-trap/focus-trap.js +10 -10
- package/components/hierarchical-view/demo/hierarchical-view.html +29 -0
- package/components/hierarchical-view/hierarchical-view-mixin.js +51 -38
- package/components/inputs/input-time.js +2 -1
- package/components/menu/menu.js +3 -3
- package/mixins/loading-complete/loading-complete-mixin.js +7 -7
- package/mixins/localize/localize-mixin.js +2 -2
- package/package.json +1 -1
@@ -172,7 +172,12 @@
|
|
172
172
|
<d2l-filter-dimension-set-date-text-value key="today" range="today"></d2l-filter-dimension-set-date-text-value>
|
173
173
|
<d2l-filter-dimension-set-date-text-value key="6months" range="6months"></d2l-filter-dimension-set-date-text-value>
|
174
174
|
<d2l-filter-dimension-set-date-time-range-value key="custom" type="date"></d2l-filter-dimension-set-date-time-range-value>
|
175
|
-
<d2l-filter-dimension-set-date-time-range-value key="custom2" text="Custom Date Range with Time"></d2l-filter-dimension-set-date-time-range-value>
|
175
|
+
<d2l-filter-dimension-set-date-time-range-value key="custom2" text="Custom Date Range with Time" start-value="2024-10-12T12:00:00Z"></d2l-filter-dimension-set-date-time-range-value>
|
176
|
+
</d2l-filter-dimension-set>
|
177
|
+
<d2l-filter-dimension-set key="role" text="Role" selected-first>
|
178
|
+
<d2l-filter-dimension-set-value key="admin" text="Admin" count="0"></d2l-filter-dimension-set-value>
|
179
|
+
<d2l-filter-dimension-set-value key="instructor" text="Instructor" count="22"></d2l-filter-dimension-set-value>
|
180
|
+
<d2l-filter-dimension-set-value key="student" text="Student" count="50"></d2l-filter-dimension-set-value>
|
176
181
|
</d2l-filter-dimension-set>
|
177
182
|
</d2l-filter>
|
178
183
|
</template>
|
@@ -257,13 +257,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
|
|
257
257
|
firstUpdated(changedProperties) {
|
258
258
|
super.firstUpdated(changedProperties);
|
259
259
|
this.addEventListener('d2l-filter-dimension-data-change', this._handleDimensionDataChange);
|
260
|
-
|
261
|
-
// Prevent these events from bubbling out of the filter
|
262
|
-
this.addEventListener('d2l-hierarchical-view-hide-complete', this._stopPropagation);
|
263
|
-
this.addEventListener('d2l-hierarchical-view-hide-start', this._stopPropagation);
|
264
|
-
this.addEventListener('d2l-hierarchical-view-show-complete', this._stopPropagation);
|
265
|
-
this.addEventListener('d2l-hierarchical-view-show-start', this._stopPropagation);
|
266
|
-
this.addEventListener('d2l-hierarchical-view-resize', this._stopPropagation);
|
267
260
|
}
|
268
261
|
|
269
262
|
render() {
|
@@ -34,16 +34,6 @@ class FocusTrap extends FocusMixin(LitElement) {
|
|
34
34
|
`;
|
35
35
|
}
|
36
36
|
|
37
|
-
static #exemptSelectors = [
|
38
|
-
'.d2l-focus-trap-exempt',
|
39
|
-
'.equatio-toolbar-wrapper',
|
40
|
-
'.equatio-toolbar-shadow-root-container'
|
41
|
-
].join(', ');
|
42
|
-
|
43
|
-
static #isExempt(target) {
|
44
|
-
return !!target?.closest(this.#exemptSelectors);
|
45
|
-
}
|
46
|
-
|
47
37
|
constructor() {
|
48
38
|
super();
|
49
39
|
this.trap = false;
|
@@ -91,6 +81,12 @@ class FocusTrap extends FocusMixin(LitElement) {
|
|
91
81
|
}
|
92
82
|
}
|
93
83
|
|
84
|
+
static #exemptSelectors = [
|
85
|
+
'.d2l-focus-trap-exempt',
|
86
|
+
'.equatio-toolbar-wrapper',
|
87
|
+
'.equatio-toolbar-shadow-root-container'
|
88
|
+
].join(', ');
|
89
|
+
|
94
90
|
_focusFirst() {
|
95
91
|
const focusable = this.shadowRoot &&
|
96
92
|
getNextFocusable(this.shadowRoot.querySelector('.d2l-focus-trap-start'));
|
@@ -147,6 +143,10 @@ class FocusTrap extends FocusMixin(LitElement) {
|
|
147
143
|
this._focusFirst();
|
148
144
|
}
|
149
145
|
|
146
|
+
static #isExempt(target) {
|
147
|
+
return !!target?.closest(this.#exemptSelectors);
|
148
|
+
}
|
149
|
+
|
150
150
|
}
|
151
151
|
|
152
152
|
customElements.define('d2l-focus-trap', FocusTrap);
|
@@ -7,6 +7,11 @@
|
|
7
7
|
<script type="module">
|
8
8
|
import '../../demo/demo-page.js';
|
9
9
|
import '../hierarchical-view.js';
|
10
|
+
import '../../dropdown/dropdown-menu.js';
|
11
|
+
import '../../dropdown/dropdown-button.js';
|
12
|
+
import '../../menu/menu.js';
|
13
|
+
import '../../menu/menu-item.js';
|
14
|
+
|
10
15
|
</script>
|
11
16
|
<style>
|
12
17
|
#view1, #view2a, #view2b, #view3, #view4 {
|
@@ -77,6 +82,30 @@
|
|
77
82
|
<div class="buttons">
|
78
83
|
<button id="btn-parent-view-2a">view 1 (parent)</button>
|
79
84
|
<button id="btn-view-3">view 3</button>
|
85
|
+
<d2l-dropdown-button text="Open!" primary>
|
86
|
+
<d2l-dropdown-menu >
|
87
|
+
<d2l-menu label="Astronomy" root-view >
|
88
|
+
<d2l-menu-item text="Introduction"></d2l-menu-item>
|
89
|
+
<d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
|
90
|
+
<d2l-menu-item text="The Solar System">
|
91
|
+
<d2l-menu>
|
92
|
+
<d2l-menu-item text="Formation"></d2l-menu-item>
|
93
|
+
<d2l-menu-item text="Modern Solar System"></d2l-menu-item>
|
94
|
+
<d2l-menu-item text="Future Solar System"></d2l-menu-item>
|
95
|
+
<d2l-menu-item text="The Planets"></d2l-menu-item>
|
96
|
+
<d2l-menu-item text="The Sun"></d2l-menu-item>
|
97
|
+
<d2l-menu-item text="Solar & Lunar Eclipses"></d2l-menu-item>
|
98
|
+
<d2l-menu-item text="Meteors & Meteorites"></d2l-menu-item>
|
99
|
+
<d2l-menu-item text="Asteroids"></d2l-menu-item>
|
100
|
+
<d2l-menu-item text="Comets"></d2l-menu-item>
|
101
|
+
</d2l-menu>
|
102
|
+
</d2l-menu-item>
|
103
|
+
<d2l-menu-item text="Stars & Galaxies"></d2l-menu-item>
|
104
|
+
<d2l-menu-item text="The Night Sky"></d2l-menu-item>
|
105
|
+
<d2l-menu-item text="The Universe"></d2l-menu-item>
|
106
|
+
</d2l-menu>
|
107
|
+
</d2l-dropdown-menu>
|
108
|
+
</d2l-dropdown-button>
|
80
109
|
</div>
|
81
110
|
view 2a
|
82
111
|
<div class="info">min-height: 400</div>
|
@@ -14,15 +14,16 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
|
|
14
14
|
/**
|
15
15
|
* @ignore
|
16
16
|
*/
|
17
|
-
|
17
|
+
hierarchicalView: { type: Boolean },
|
18
18
|
/**
|
19
19
|
* @ignore
|
20
20
|
*/
|
21
|
-
|
21
|
+
rootView: { type: Boolean, attribute: 'root-view' },
|
22
22
|
/**
|
23
23
|
* @ignore
|
24
24
|
*/
|
25
|
-
shown: { type: Boolean, reflect: true }
|
25
|
+
shown: { type: Boolean, reflect: true },
|
26
|
+
_childView: { type: Boolean, reflect: true, attribute: 'child-view' },
|
26
27
|
};
|
27
28
|
}
|
28
29
|
|
@@ -49,6 +50,9 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
|
|
49
50
|
display: inline-block;
|
50
51
|
vertical-align: top; /* DE37329: required to prevent extra spacing caused by inline-block */
|
51
52
|
}
|
53
|
+
.d2l-hierarchical-view-content {
|
54
|
+
position: relative;
|
55
|
+
}
|
52
56
|
.d2l-hierarchical-view-content.d2l-child-view-show {
|
53
57
|
-webkit-animation: show-child-view-animation forwards 300ms linear;
|
54
58
|
animation: show-child-view-animation 300ms forwards linear;
|
@@ -65,31 +69,29 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
|
|
65
69
|
.d2l-hierarchical-view-content.d2l-child-view-show {
|
66
70
|
-webkit-animation: none;
|
67
71
|
animation: none;
|
68
|
-
|
69
|
-
transform: translate(-100%, 0);
|
72
|
+
left: -100%;
|
70
73
|
}
|
71
74
|
.d2l-hierarchical-view-content.d2l-child-view-hide {
|
72
75
|
-webkit-animation: none;
|
73
76
|
animation: none;
|
74
|
-
|
75
|
-
transform: translate(0, 0);
|
77
|
+
left: 0;
|
76
78
|
}
|
77
79
|
}
|
78
80
|
@keyframes show-child-view-animation {
|
79
|
-
0% {
|
80
|
-
100% {
|
81
|
+
0% { left: 0; }
|
82
|
+
100% { left: -100%; }
|
81
83
|
}
|
82
84
|
@-webkit-keyframes show-child-view-animation {
|
83
|
-
0% {
|
84
|
-
100% {
|
85
|
+
0% { left: 0; }
|
86
|
+
100% { left: -100%; }
|
85
87
|
}
|
86
88
|
@keyframes hide-child-view-animation {
|
87
|
-
0% {
|
88
|
-
100% {
|
89
|
+
0% { left: -100%; }
|
90
|
+
100% { left: 0; }
|
89
91
|
}
|
90
92
|
@-webkit-keyframes hide-child-view-animation {
|
91
|
-
0% {
|
92
|
-
100% {
|
93
|
+
0% { left: -100%; }
|
94
|
+
100% { left: 0; }
|
93
95
|
}
|
94
96
|
`;
|
95
97
|
}
|
@@ -97,10 +99,11 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
|
|
97
99
|
constructor() {
|
98
100
|
super();
|
99
101
|
|
100
|
-
/** @ignore */
|
101
|
-
this.childView = false;
|
102
102
|
/** @ignore */
|
103
103
|
this.hierarchicalView = true;
|
104
|
+
/** @ignore */
|
105
|
+
this.rootView = false;
|
106
|
+
this._childView = false;
|
104
107
|
this.__focusPrevious = false;
|
105
108
|
this.__intersectionObserver = null;
|
106
109
|
this.__isAutoSized = false;
|
@@ -111,7 +114,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
|
|
111
114
|
connectedCallback() {
|
112
115
|
super.connectedCallback();
|
113
116
|
|
114
|
-
this.
|
117
|
+
this.__updateRootView();
|
115
118
|
|
116
119
|
if (typeof(IntersectionObserver) === 'function') {
|
117
120
|
this.__intersectionObserver = new IntersectionObserver((entries) => {
|
@@ -135,7 +138,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
|
|
135
138
|
}
|
136
139
|
this.__startResizeObserver();
|
137
140
|
|
138
|
-
if (!this.
|
141
|
+
if (!this._childView) {
|
139
142
|
this.addEventListener('focus', this.__focusCapture, true);
|
140
143
|
this.addEventListener('focusout', this.__focusOutCapture, true);
|
141
144
|
this.__onWindowResize = this.__onWindowResize.bind(this);
|
@@ -167,7 +170,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
|
|
167
170
|
|
168
171
|
const stopPropagation = e => {
|
169
172
|
// only stop for child views, so that Esc from root view can close dropdown
|
170
|
-
if (!this.
|
173
|
+
if (!this._childView) return;
|
171
174
|
e.stopPropagation();
|
172
175
|
};
|
173
176
|
|
@@ -178,8 +181,14 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
|
|
178
181
|
this.addEventListener('keyup', stopPropagation);
|
179
182
|
this.addEventListener('keypress', stopPropagation);
|
180
183
|
|
181
|
-
this.
|
184
|
+
this.__updateRootView();
|
182
185
|
|
186
|
+
if (!this.rootView) return;
|
187
|
+
this.addEventListener('d2l-hierarchical-view-hide-complete', this.__stopPropagation);
|
188
|
+
this.addEventListener('d2l-hierarchical-view-hide-start', this.__stopPropagation);
|
189
|
+
this.addEventListener('d2l-hierarchical-view-show-complete', this.__stopPropagation);
|
190
|
+
this.addEventListener('d2l-hierarchical-view-show-start', this.__stopPropagation);
|
191
|
+
this.addEventListener('d2l-hierarchical-view-resize', this.__stopPropagation);
|
183
192
|
}
|
184
193
|
|
185
194
|
getActiveView() {
|
@@ -198,13 +207,13 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
|
|
198
207
|
}
|
199
208
|
|
200
209
|
getRootView() {
|
201
|
-
if (!this.
|
210
|
+
if (this.rootView || !this._childView) {
|
202
211
|
return this;
|
203
212
|
}
|
204
213
|
const rootView = findComposedAncestor(
|
205
214
|
this.parentNode,
|
206
215
|
(node) => {
|
207
|
-
return node.
|
216
|
+
return node.rootView;
|
208
217
|
}
|
209
218
|
);
|
210
219
|
return rootView;
|
@@ -228,7 +237,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
|
|
228
237
|
}
|
229
238
|
|
230
239
|
isActive() {
|
231
|
-
if ((this.
|
240
|
+
if ((this._childView && !this.shown) || !this.shadowRoot) {
|
232
241
|
return false;
|
233
242
|
} else {
|
234
243
|
const content = this.shadowRoot.querySelector('.d2l-hierarchical-view-content');
|
@@ -289,7 +298,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
|
|
289
298
|
}
|
290
299
|
|
291
300
|
__autoSize(view) {
|
292
|
-
if (this.__isAutoSized || this.
|
301
|
+
if (this.__isAutoSized || this._childView) return;
|
293
302
|
requestAnimationFrame(() => {
|
294
303
|
|
295
304
|
if (view.offsetParent === null) return;
|
@@ -420,17 +429,6 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
|
|
420
429
|
}
|
421
430
|
}
|
422
431
|
|
423
|
-
__isChildView() {
|
424
|
-
const parentView = findComposedAncestor(
|
425
|
-
this.parentNode,
|
426
|
-
(node) => { return node.hierarchicalView; }
|
427
|
-
);
|
428
|
-
|
429
|
-
if (parentView) {
|
430
|
-
this.childView = true;
|
431
|
-
}
|
432
|
-
}
|
433
|
-
|
434
432
|
__onHideStart(e) {
|
435
433
|
// re-enable focusable ancestor
|
436
434
|
this.__resetAncestorTabIndicies(e.detail.sourceView);
|
@@ -484,7 +482,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
|
|
484
482
|
}
|
485
483
|
|
486
484
|
__onKeyDown(e) {
|
487
|
-
if (this.
|
485
|
+
if (this._childView && e.keyCode === escapeKeyCode) {
|
488
486
|
e.stopPropagation();
|
489
487
|
this.hide();
|
490
488
|
return;
|
@@ -498,7 +496,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
|
|
498
496
|
const rootTarget = e.composedPath()[0];
|
499
497
|
if (rootTarget === this || !rootTarget.hierarchicalView) return;
|
500
498
|
|
501
|
-
if (this.
|
499
|
+
if (this._childView && !this.shown) {
|
502
500
|
/* deep link scenario */
|
503
501
|
this.show(e.detail.data, e.detail.sourceView);
|
504
502
|
}
|
@@ -562,6 +560,10 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
|
|
562
560
|
this.__resizeObserver.observe(content);
|
563
561
|
}
|
564
562
|
|
563
|
+
__stopPropagation(e) {
|
564
|
+
e.stopPropagation();
|
565
|
+
}
|
566
|
+
|
565
567
|
__updateAncestorTabIndicies(view, sourceAttribute, targetAttribute) {
|
566
568
|
const rootView = this.getRootView();
|
567
569
|
let node = getComposedParent(view);
|
@@ -577,4 +579,15 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
|
|
577
579
|
}
|
578
580
|
}
|
579
581
|
|
582
|
+
__updateRootView() {
|
583
|
+
if (!this.hasAttribute('root-view')) {
|
584
|
+
const parentView = findComposedAncestor(
|
585
|
+
this.parentNode,
|
586
|
+
(node) => { return node.hierarchicalView; }
|
587
|
+
);
|
588
|
+
this.rootView = !parentView;
|
589
|
+
}
|
590
|
+
this._childView = !this.rootView;
|
591
|
+
}
|
592
|
+
|
580
593
|
};
|
@@ -373,7 +373,8 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
|
|
373
373
|
class="d2l-input-time-menu"
|
374
374
|
@d2l-menu-item-change="${this._handleDropdownChange}"
|
375
375
|
id="${this._dropdownId}"
|
376
|
-
role="listbox"
|
376
|
+
role="listbox"
|
377
|
+
root-view>
|
377
378
|
${menuItems}
|
378
379
|
</d2l-menu>
|
379
380
|
<div class="d2l-input-time-timezone d2l-body-small" id="${dropdownIdTimezone}" slot="footer">${this._timezone}</div>
|
package/components/menu/menu.js
CHANGED
@@ -128,7 +128,7 @@ class Menu extends ThemeMixin(HierarchicalViewMixin(LitElement)) {
|
|
128
128
|
changedProperties.forEach((oldValue, propName) => {
|
129
129
|
if (propName === 'label') this._labelChanged();
|
130
130
|
|
131
|
-
if (propName === '
|
131
|
+
if (propName === 'rootView' && !this.rootView) {
|
132
132
|
const items = this.shadowRoot.querySelector('.d2l-menu-items');
|
133
133
|
items.insertBefore(this._createReturnItem(), items.childNodes[0]);
|
134
134
|
|
@@ -276,7 +276,7 @@ class Menu extends ThemeMixin(HierarchicalViewMixin(LitElement)) {
|
|
276
276
|
return;
|
277
277
|
}
|
278
278
|
|
279
|
-
if (this.
|
279
|
+
if (!this.rootView && e.keyCode === keyCodes.LEFT) {
|
280
280
|
e.stopPropagation();
|
281
281
|
this.hide();
|
282
282
|
return;
|
@@ -343,7 +343,7 @@ class Menu extends ThemeMixin(HierarchicalViewMixin(LitElement)) {
|
|
343
343
|
}
|
344
344
|
|
345
345
|
_onViewResize(e) {
|
346
|
-
if (this.
|
346
|
+
if (!this.rootView) return;
|
347
347
|
|
348
348
|
const eventDetails = {
|
349
349
|
bubbles: true,
|
@@ -2,13 +2,6 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
|
|
2
2
|
|
3
3
|
export const LoadingCompleteMixin = dedupeMixin((superclass) => class extends superclass {
|
4
4
|
|
5
|
-
#loadingCompleteResolve;
|
6
|
-
|
7
|
-
// eslint-disable-next-line sort-class-members/sort-class-members
|
8
|
-
#loadingCompletePromise = !Object.prototype.hasOwnProperty.call(this.constructor.prototype, 'getLoadingComplete')
|
9
|
-
? new Promise(resolve => this.#loadingCompleteResolve = resolve)
|
10
|
-
: Promise.resolve();
|
11
|
-
|
12
5
|
get loadingComplete() {
|
13
6
|
return this.getLoadingComplete();
|
14
7
|
}
|
@@ -27,4 +20,11 @@ export const LoadingCompleteMixin = dedupeMixin((superclass) => class extends su
|
|
27
20
|
return this.#loadingCompletePromise;
|
28
21
|
}
|
29
22
|
|
23
|
+
#loadingCompleteResolve;
|
24
|
+
|
25
|
+
// eslint-disable-next-line sort-class-members/sort-class-members
|
26
|
+
#loadingCompletePromise = !Object.prototype.hasOwnProperty.call(this.constructor.prototype, 'getLoadingComplete')
|
27
|
+
? new Promise(resolve => this.#loadingCompleteResolve = resolve)
|
28
|
+
: Promise.resolve();
|
29
|
+
|
30
30
|
});
|
@@ -5,8 +5,6 @@ import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
5
|
|
6
6
|
export const _LocalizeMixinBase = dedupeMixin(superclass => class LocalizeMixinBaseClass extends getLocalizeClass(superclass) {
|
7
7
|
|
8
|
-
#updatedProperties = new Map();
|
9
|
-
|
10
8
|
constructor() {
|
11
9
|
super();
|
12
10
|
super.constructor.setLocalizeMarkup(localizeMarkup);
|
@@ -63,6 +61,8 @@ export const _LocalizeMixinBase = dedupeMixin(superclass => class LocalizeMixinB
|
|
63
61
|
this.requestUpdate('localize');
|
64
62
|
}
|
65
63
|
|
64
|
+
#updatedProperties = new Map();
|
65
|
+
|
66
66
|
});
|
67
67
|
|
68
68
|
export const LocalizeMixin = superclass => class extends _LocalizeMixinBase(superclass) {
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@brightspace-ui/core",
|
3
|
-
"version": "3.
|
3
|
+
"version": "3.62.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",
|