@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.
@@ -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 &amp; Lunar Eclipses"></d2l-menu-item>
98
+ <d2l-menu-item text="Meteors &amp; 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 &amp; 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
- childView: { type: Boolean, reflect: true, attribute: 'child-view' },
17
+ hierarchicalView: { type: Boolean },
18
18
  /**
19
19
  * @ignore
20
20
  */
21
- hierarchicalView: { type: Boolean },
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
- -webkit-transform: translate(-100%, 0);
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
- -webkit-transform: translate(0, 0);
75
- transform: translate(0, 0);
77
+ left: 0;
76
78
  }
77
79
  }
78
80
  @keyframes show-child-view-animation {
79
- 0% { transform: translate(0, 0); }
80
- 100% { transform: translate(-100%, 0); }
81
+ 0% { left: 0; }
82
+ 100% { left: -100%; }
81
83
  }
82
84
  @-webkit-keyframes show-child-view-animation {
83
- 0% { -webkit-transform: translate(0, 0); }
84
- 100% { -webkit-transform: translate(-100%, 0); }
85
+ 0% { left: 0; }
86
+ 100% { left: -100%; }
85
87
  }
86
88
  @keyframes hide-child-view-animation {
87
- 0% { transform: translate(-100%, 0); }
88
- 100% { transform: translate(0, 0); }
89
+ 0% { left: -100%; }
90
+ 100% { left: 0; }
89
91
  }
90
92
  @-webkit-keyframes hide-child-view-animation {
91
- 0% { -webkit-transform: translate(-100%, 0); }
92
- 100% { -webkit-transform: translate(0, 0); }
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.__isChildView();
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.childView) {
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.childView) return;
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.__isChildView();
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.childView) {
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.hierarchicalView && !node.childView;
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.childView && !this.shown) || !this.shadowRoot) {
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.childView) return;
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.childView && e.keyCode === escapeKeyCode) {
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.childView && !this.shown) {
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>
@@ -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 === 'childView' && this.childView) {
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.childView && e.keyCode === keyCodes.LEFT) {
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.childView) return;
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.60.1",
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",