@brightspace-ui/core 1.219.5 → 1.220.3

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.
Files changed (15) hide show
  1. package/components/dialog/dialog-mixin.js +0 -1
  2. package/components/filter/filter.js +3 -3
  3. package/components/hierarchical-view/hierarchical-view-mixin.js +2 -2
  4. package/components/html-block/README.md +48 -54
  5. package/components/html-block/demo/html-block.html +213 -223
  6. package/components/html-block/html-block.js +28 -29
  7. package/custom-elements.json +1 -1
  8. package/helpers/dismissible.js +2 -2
  9. package/helpers/mathjax.js +11 -3
  10. package/lang/es.js +1 -1
  11. package/lang/fr-fr.js +1 -1
  12. package/lang/ja.js +1 -1
  13. package/lang/nl.js +1 -1
  14. package/lang/zh.js +1 -1
  15. package/package.json +1 -1
package/components/dialog/dialog-mixin.js CHANGED
@@ -283,7 +283,6 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
283
283
  if (!this.opened) return;
284
284
  if (e.keyCode === 27) {
285
285
  // escape (note: prevent native dialog close so we can: animate it; use setDismissible)
286
- e.stopPropagation();
287
286
  e.preventDefault();
288
287
  }
289
288
  }
package/components/filter/filter.js CHANGED
@@ -268,7 +268,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
268
268
  @d2l-hierarchical-view-hide-start="${this._handleDimensionHideStart}"
269
269
  @d2l-hierarchical-view-show-complete="${this._handleDimensionShowComplete}"
270
270
  @d2l-hierarchical-view-show-start="${this._handleDimensionShowStart}"
271
- @keyup="${this._handleDimensionHideKeyPress}"
271
+ @keydown="${this._handleDimensionHideKeyDown}"
272
272
  data-key="${dimension.key}">
273
273
  ${dimensionHTML}
274
274
  </d2l-hierarchical-view>
@@ -357,7 +357,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
357
357
  `;
358
358
 
359
359
  return html`
360
- <div slot="header" @keyup="${this._handleDimensionHideKeyPress}">
360
+ <div slot="header" @keydown="${this._handleDimensionHideKeyDown}">
361
361
  ${header}
362
362
  ${actions}
363
363
  </div>
@@ -551,7 +551,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
551
551
  if (this.shadowRoot) this.shadowRoot.querySelector(`d2l-hierarchical-view[data-key="${this._activeDimensionKey}"]`).hide();
552
552
  }
553
553
 
554
- _handleDimensionHideKeyPress(e) {
554
+ _handleDimensionHideKeyDown(e) {
555
555
  if (this._activeDimensionKey && (e.keyCode === ARROWLEFT_KEY_CODE || e.keyCode === ESCAPE_KEY_CODE)) {
556
556
  e.stopPropagation();
557
557
  this._handleDimensionHide();
package/components/hierarchical-view/hierarchical-view-mixin.js CHANGED
@@ -154,7 +154,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
154
154
  firstUpdated(changedProperties) {
155
155
  super.firstUpdated(changedProperties);
156
156
 
157
- this.addEventListener('keyup', this.__onKeyUp);
157
+ this.addEventListener('keydown', this.__onKeyDown);
158
158
  this.addEventListener('d2l-hierarchical-view-hide-start', this.__onHideStart);
159
159
  this.addEventListener('d2l-hierarchical-view-show-start', this.__onShowStart);
160
160
  this.addEventListener('d2l-hierarchical-view-resize', this.__onViewResize);
@@ -477,7 +477,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
477
477
 
478
478
  }
479
479
 
480
- __onKeyUp(e) {
480
+ __onKeyDown(e) {
481
481
  if (this.childView && e.keyCode === escapeKeyCode) {
482
482
  e.stopPropagation();
483
483
  this.hide();
package/components/html-block/README.md CHANGED
@@ -6,7 +6,7 @@ Components to assist with displaying user-authored HTML within your webpage.
6
6
 
7
7
  The `d2l-html-block` element is a web component for displaying user-authored HTML. It includes styles for headings, lists, anchors and other elements. In addition, it provides integration with MathJax for rendering MathML.
8
8
 
9
- Place the user-authored HTML within a `template` and the `d2l-html-block` will stamp the content into its local DOM where styles will be applied, and math typeset.
9
+ Place the user-authored HTML within the `d2l-html-block` and the component will stamp the content into its local DOM where styles will be applied, and math typeset.
10
10
 
11
11
  <!-- docs: demo live name:d2l-html-block autoSize:false size:small -->
12
12
  ```html
@@ -15,34 +15,32 @@ Place the user-authored HTML within a `template` and the `d2l-html-block` will s
15
15
  import '@brightspace-ui/core/components/icons/icon.js';
16
16
  </script>
17
17
  <d2l-html-block>
18
- <template>
19
- <!-- docs: start hidden content -->
20
- <style>
21
- div {
22
- --d2l-icon-fill-color: var(--d2l-color-cinnabar);
23
- }
24
- span {
25
- color: var(--d2l-color-cinnabar);
26
- margin-left: 10px;
27
- vertical-align: middle;
28
- }
29
- d2l-icon {
30
- align-self: center;
31
- flex-shrink: 0;
32
- }
33
- .warning-container {
34
- align-items: center;
35
- display: flex;
36
- justify-content: center;
37
- }
38
- </style>
18
+ <!-- docs: start hidden content -->
19
+ <style>
20
+ div {
21
+ --d2l-icon-fill-color: var(--d2l-color-cinnabar);
22
+ }
23
+ span {
24
+ color: var(--d2l-color-cinnabar);
25
+ margin-left: 10px;
26
+ vertical-align: middle;
27
+ }
28
+ d2l-icon {
29
+ align-self: center;
30
+ flex-shrink: 0;
31
+ }
32
+ .warning-container {
33
+ align-items: center;
34
+ display: flex;
35
+ justify-content: center;
36
+ }
37
+ </style>
39
38
  <!-- docs: end hidden content --><div class="warning-container">
40
- <d2l-icon icon="tier3:alert"></d2l-icon>
41
- <span>
42
- <b>Important:</b> user-authored HTML must be trusted or properly sanitized!
43
- </span>
44
- </div>
45
- </template>
39
+ <d2l-icon icon="tier3:alert"></d2l-icon>
40
+ <span>
41
+ <b>Important:</b> user-authored HTML must be trusted or properly sanitized!
42
+ </span>
43
+ </div>
46
44
  </d2l-html-block>
47
45
  ```
48
46
 
@@ -58,7 +56,7 @@ To use `d2l-html-block` within another Lit component, use the [unsafeHTML](https
58
56
  render() {
59
57
  return html`
60
58
  <d2l-html-block>
61
- <template>${unsafeHTML(this._unsafeHTML)}</template>
59
+ ${unsafeHTML(this._unsafeHTML)}
62
60
  </d2l-html-block>`;
63
61
  }
64
62
  }
@@ -79,27 +77,25 @@ Examples are provided to display how user-authored math can be embedded within y
79
77
  import '@brightspace-ui/core/components/icons/icon.js';
80
78
  </script>
81
79
  <d2l-html-block>
82
- <template>
83
- <div class="mathml-container">
84
- <math xmlns="http://www.w3.org/1998/Math/MathML">
85
- <msqrt>
86
- <mn>3</mn>
87
- <mi>x</mi>
88
- <mo>&#x2212;</mo>
89
- <mn>1</mn>
90
- </msqrt>
91
- <mo>+</mo>
92
- <mo stretchy="false">(</mo>
93
- <mn>1</mn>
94
- <mo>+</mo>
80
+ <div class="mathml-container">
81
+ <math xmlns="http://www.w3.org/1998/Math/MathML">
82
+ <msqrt>
83
+ <mn>3</mn>
95
84
  <mi>x</mi>
96
- <msup>
97
- <mo stretchy="false">)</mo>
98
- <mn>2</mn>
99
- </msup>
100
- </math>
101
- </div>
102
- </template>
85
+ <mo>&#x2212;</mo>
86
+ <mn>1</mn>
87
+ </msqrt>
88
+ <mo>+</mo>
89
+ <mo stretchy="false">(</mo>
90
+ <mn>1</mn>
91
+ <mo>+</mo>
92
+ <mi>x</mi>
93
+ <msup>
94
+ <mo stretchy="false">)</mo>
95
+ <mn>2</mn>
96
+ </msup>
97
+ </math>
98
+ </div>
103
99
  </d2l-html-block>
104
100
  ```
105
101
 
@@ -124,10 +120,8 @@ Examples are provided to display how user-authored math can be embedded within y
124
120
  document.getElementsByTagName('html')[0].dataset.mathjaxContext = JSON.stringify({ renderLatex: true });<!-- docs: end hidden content -->
125
121
  </script>
126
122
  <d2l-html-block>
127
- <template>
128
- <div class="latex-container">
129
- $$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
130
- </div>
131
- </template>
123
+ <div class="latex-container">
124
+ $$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
125
+ </div>
132
126
  </d2l-html-block>
133
127
  ```
package/components/html-block/demo/html-block.html CHANGED
@@ -54,28 +54,27 @@
54
54
  <d2l-demo-snippet>
55
55
  <template>
56
56
  <d2l-html-block>
57
- <template>
58
- <h1>heading 1</h1>
59
- <h2>heading 2</h2>
60
- <h3>heading 3</h3>
61
- <h4>heading 4</h4>
62
- <h5>heading 5</h5>
63
- <h6>heading 6</h6>
64
- <div><strong>strong</strong></div>
65
- <div><b>bold</b></div>
66
- <div>text</div>
67
- <pre>preformatted</pre>
68
- <p>paragraph</p>
69
- <ul>
70
- <li>unordered item 1</li>
71
- <li>unordered item 2</li>
72
- </ul>
73
- <ol>
74
- <li>ordered item 1</li>
75
- <li>ordered item 2</li>
76
- </ol>
77
- <div><a href="https://d2l.com">anchor</a></div>
78
- </template>
57
+ Just a text node...
58
+ <h1>heading 1</h1>
59
+ <h2>heading 2</h2>
60
+ <h3>heading 3</h3>
61
+ <h4>heading 4</h4>
62
+ <h5>heading 5</h5>
63
+ <h6>heading 6</h6>
64
+ <div><strong>strong</strong></div>
65
+ <div><b>bold</b></div>
66
+ <div>text</div>
67
+ <pre>preformatted</pre>
68
+ <p>paragraph</p>
69
+ <ul>
70
+ <li>unordered item 1</li>
71
+ <li>unordered item 2</li>
72
+ </ul>
73
+ <ol>
74
+ <li>ordered item 1</li>
75
+ <li>ordered item 2</li>
76
+ </ol>
77
+ <div><a href="https://d2l.com">anchor</a></div>
79
78
  </d2l-html-block>
80
79
  </template>
81
80
  </d2l-demo-snippet>
@@ -85,28 +84,27 @@
85
84
  <d2l-demo-snippet>
86
85
  <template>
87
86
  <d2l-html-block compact>
88
- <template>
89
- <h1>heading 1</h1>
90
- <h2>heading 2</h2>
91
- <h3>heading 3</h3>
92
- <h4>heading 4</h4>
93
- <h5>heading 5</h5>
94
- <h6>heading 6</h6>
95
- <div><strong>strong</strong></div>
96
- <div><b>bold</b></div>
97
- <div>text</div>
98
- <pre>preformatted</pre>
99
- <p>paragraph</p>
100
- <ul>
101
- <li>unordered item 1</li>
102
- <li>unordered item 2</li>
103
- </ul>
104
- <ol>
105
- <li>ordered item 1</li>
106
- <li>ordered item 2</li>
107
- </ol>
108
- <div><a href="https://d2l.com">anchor</a></div>
109
- </template>
87
+ Just a text node...
88
+ <h1>heading 1</h1>
89
+ <h2>heading 2</h2>
90
+ <h3>heading 3</h3>
91
+ <h4>heading 4</h4>
92
+ <h5>heading 5</h5>
93
+ <h6>heading 6</h6>
94
+ <div><strong>strong</strong></div>
95
+ <div><b>bold</b></div>
96
+ <div>text</div>
97
+ <pre>preformatted</pre>
98
+ <p>paragraph</p>
99
+ <ul>
100
+ <li>unordered item 1</li>
101
+ <li>unordered item 2</li>
102
+ </ul>
103
+ <ol>
104
+ <li>ordered item 1</li>
105
+ <li>ordered item 2</li>
106
+ </ol>
107
+ <div><a href="https://d2l.com">anchor</a></div>
110
108
  </d2l-html-block>
111
109
  </template>
112
110
  </d2l-demo-snippet>
@@ -116,67 +114,36 @@
116
114
  <d2l-demo-snippet>
117
115
  <template>
118
116
  <d2l-html-block>
119
- <template>
120
- <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
121
- <mi>x</mi>
122
- <mo>=</mo>
123
- <mrow>
124
- <mfrac>
125
- <mrow>
126
- <mo>&#x2212;</mo>
127
- <mi>b</mi>
128
- <mo>&#xB1;</mo>
129
- <msqrt>
130
- <msup>
131
- <mi>b</mi>
132
- <mn>2</mn>
133
- </msup>
134
- <mo>&#x2212;</mo>
135
- <mn>4</mn>
136
- <mi>a</mi>
137
- <mi>c</mi>
138
- </msqrt>
139
- </mrow>
140
- <mrow>
141
- <mn>2</mn>
142
- <mi>a</mi>
143
- </mrow>
144
- </mfrac>
145
- </mrow>
146
- <mtext>.</mtext>
147
- </math>
148
- <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
149
- <msup>
117
+ <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
118
+ <mi>x</mi>
119
+ <mo>=</mo>
120
+ <mrow>
121
+ <mfrac>
150
122
  <mrow>
151
- <mo>(</mo>
152
- <mrow>
153
- <munderover>
154
- <mo>∑<!-- ∑ --></mo>
155
- <mrow class="MJX-TeXAtom-ORD">
156
- <mi>k</mi>
157
- <mo>=</mo>
158
- <mn>1</mn>
159
- </mrow>
160
- <mi>n</mi>
161
- </munderover>
162
- <msub>
163
- <mi>a</mi>
164
- <mi>k</mi>
165
- </msub>
166
- <msub>
123
+ <mo>&#x2212;</mo>
124
+ <mi>b</mi>
125
+ <mo>&#xB1;</mo>
126
+ <msqrt>
127
+ <msup>
167
128
  <mi>b</mi>
168
- <mi>k</mi>
169
- </msub>
170
- </mrow>
171
- <mo>)</mo>
129
+ <mn>2</mn>
130
+ </msup>
131
+ <mo>&#x2212;</mo>
132
+ <mn>4</mn>
133
+ <mi>a</mi>
134
+ <mi>c</mi>
135
+ </msqrt>
172
136
  </mrow>
173
- <mrow class="MJX-TeXAtom-ORD">
174
- <mspace width="negativethinmathspace"></mspace>
175
- <mspace width="negativethinmathspace"></mspace>
137
+ <mrow>
176
138
  <mn>2</mn>
139
+ <mi>a</mi>
177
140
  </mrow>
178
- </msup>
179
- <mo>≤<!-- ≤ --></mo>
141
+ </mfrac>
142
+ </mrow>
143
+ <mtext>.</mtext>
144
+ </math>
145
+ <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
146
+ <msup>
180
147
  <mrow>
181
148
  <mo>(</mo>
182
149
  <mrow>
@@ -189,36 +156,65 @@
189
156
  </mrow>
190
157
  <mi>n</mi>
191
158
  </munderover>
192
- <msubsup>
159
+ <msub>
193
160
  <mi>a</mi>
194
161
  <mi>k</mi>
195
- <mn>2</mn>
196
- </msubsup>
162
+ </msub>
163
+ <msub>
164
+ <mi>b</mi>
165
+ <mi>k</mi>
166
+ </msub>
197
167
  </mrow>
198
168
  <mo>)</mo>
199
169
  </mrow>
170
+ <mrow class="MJX-TeXAtom-ORD">
171
+ <mspace width="negativethinmathspace"></mspace>
172
+ <mspace width="negativethinmathspace"></mspace>
173
+ <mn>2</mn>
174
+ </mrow>
175
+ </msup>
176
+ <mo>≤<!-- ≤ --></mo>
177
+ <mrow>
178
+ <mo>(</mo>
200
179
  <mrow>
201
- <mo>(</mo>
202
- <mrow>
203
- <munderover>
204
- <mo>∑<!-- ∑ --></mo>
205
- <mrow class="MJX-TeXAtom-ORD">
206
- <mi>k</mi>
207
- <mo>=</mo>
208
- <mn>1</mn>
209
- </mrow>
210
- <mi>n</mi>
211
- </munderover>
212
- <msubsup>
213
- <mi>b</mi>
180
+ <munderover>
181
+ <mo>∑<!-- ∑ --></mo>
182
+ <mrow class="MJX-TeXAtom-ORD">
214
183
  <mi>k</mi>
215
- <mn>2</mn>
216
- </msubsup>
217
- </mrow>
218
- <mo>)</mo>
184
+ <mo>=</mo>
185
+ <mn>1</mn>
186
+ </mrow>
187
+ <mi>n</mi>
188
+ </munderover>
189
+ <msubsup>
190
+ <mi>a</mi>
191
+ <mi>k</mi>
192
+ <mn>2</mn>
193
+ </msubsup>
219
194
  </mrow>
220
- </math>
221
- </template>
195
+ <mo>)</mo>
196
+ </mrow>
197
+ <mrow>
198
+ <mo>(</mo>
199
+ <mrow>
200
+ <munderover>
201
+ <mo>∑<!-- ∑ --></mo>
202
+ <mrow class="MJX-TeXAtom-ORD">
203
+ <mi>k</mi>
204
+ <mo>=</mo>
205
+ <mn>1</mn>
206
+ </mrow>
207
+ <mi>n</mi>
208
+ </munderover>
209
+ <msubsup>
210
+ <mi>b</mi>
211
+ <mi>k</mi>
212
+ <mn>2</mn>
213
+ </msubsup>
214
+ </mrow>
215
+ <mo>)</mo>
216
+ </mrow>
217
+ </math>
222
218
  </d2l-html-block>
223
219
  </template>
224
220
  </d2l-demo-snippet>
@@ -341,100 +337,97 @@
341
337
  <d2l-demo-snippet>
342
338
  <template>
343
339
  <d2l-html-block>
344
- <template>
345
- <div>An equation...
346
- <math xmlns="http://www.w3.org/1998/Math/MathML">
347
- <msqrt>
348
- <mn>3</mn>
349
- <mi>x</mi>
350
- <mo>&#x2212;</mo>
351
- <mn>1</mn>
352
- </msqrt>
353
- <mo>+</mo>
354
- <mo stretchy="false">(</mo>
355
- <mn>1</mn>
356
- <mo>+</mo>
357
- <mi>x</mi>
358
- <msup>
359
- <mo stretchy="false">)</mo>
360
- <mn>2</mn>
361
- </msup>
362
- </math> embedded inline with text... and showing placement of indicies for summations
363
- <math xmlns="http://www.w3.org/1998/Math/MathML">
364
- <msup>
365
- <mrow>
366
- <mo>(</mo>
367
- <mrow>
368
- <munderover>
369
- <mo>∑<!-- ∑ --></mo>
370
- <mrow class="MJX-TeXAtom-ORD">
371
- <mi>k</mi>
372
- <mo>=</mo>
373
- <mn>1</mn>
374
- </mrow>
375
- <mi>n</mi>
376
- </munderover>
377
- <msub>
378
- <mi>a</mi>
379
- <mi>k</mi>
380
- </msub>
381
- <msub>
382
- <mi>b</mi>
383
- <mi>k</mi>
384
- </msub>
385
- </mrow>
386
- <mo>)</mo>
387
- </mrow>
388
- <mrow class="MJX-TeXAtom-ORD">
389
- <mspace width="negativethinmathspace"></mspace>
390
- <mspace width="negativethinmathspace"></mspace>
391
- <mn>2</mn>
392
- </mrow>
393
- </msup>
394
- <mo>≤<!-- ≤ --></mo>
340
+ An equation...
341
+ <math xmlns="http://www.w3.org/1998/Math/MathML">
342
+ <msqrt>
343
+ <mn>3</mn>
344
+ <mi>x</mi>
345
+ <mo>&#x2212;</mo>
346
+ <mn>1</mn>
347
+ </msqrt>
348
+ <mo>+</mo>
349
+ <mo stretchy="false">(</mo>
350
+ <mn>1</mn>
351
+ <mo>+</mo>
352
+ <mi>x</mi>
353
+ <msup>
354
+ <mo stretchy="false">)</mo>
355
+ <mn>2</mn>
356
+ </msup>
357
+ </math> embedded inline with text... and showing placement of indicies for summations
358
+ <math xmlns="http://www.w3.org/1998/Math/MathML">
359
+ <msup>
360
+ <mrow>
361
+ <mo>(</mo>
395
362
  <mrow>
396
- <mo>(</mo>
397
- <mrow>
398
- <munderover>
399
- <mo>∑<!-- ∑ --></mo>
400
- <mrow class="MJX-TeXAtom-ORD">
401
- <mi>k</mi>
402
- <mo>=</mo>
403
- <mn>1</mn>
404
- </mrow>
405
- <mi>n</mi>
406
- </munderover>
407
- <msubsup>
408
- <mi>a</mi>
363
+ <munderover>
364
+ <mo>∑<!-- ∑ --></mo>
365
+ <mrow class="MJX-TeXAtom-ORD">
409
366
  <mi>k</mi>
410
- <mn>2</mn>
411
- </msubsup>
412
- </mrow>
413
- <mo>)</mo>
367
+ <mo>=</mo>
368
+ <mn>1</mn>
369
+ </mrow>
370
+ <mi>n</mi>
371
+ </munderover>
372
+ <msub>
373
+ <mi>a</mi>
374
+ <mi>k</mi>
375
+ </msub>
376
+ <msub>
377
+ <mi>b</mi>
378
+ <mi>k</mi>
379
+ </msub>
414
380
  </mrow>
415
- <mrow>
416
- <mo>(</mo>
417
- <mrow>
418
- <munderover>
419
- <mo>∑<!-- ∑ --></mo>
420
- <mrow class="MJX-TeXAtom-ORD">
421
- <mi>k</mi>
422
- <mo>=</mo>
423
- <mn>1</mn>
424
- </mrow>
425
- <mi>n</mi>
426
- </munderover>
427
- <msubsup>
428
- <mi>b</mi>
429
- <mi>k</mi>
430
- <mn>2</mn>
431
- </msubsup>
381
+ <mo>)</mo>
382
+ </mrow>
383
+ <mrow class="MJX-TeXAtom-ORD">
384
+ <mspace width="negativethinmathspace"></mspace>
385
+ <mspace width="negativethinmathspace"></mspace>
386
+ <mn>2</mn>
387
+ </mrow>
388
+ </msup>
389
+ <mo>≤<!-- ≤ --></mo>
390
+ <mrow>
391
+ <mo>(</mo>
392
+ <mrow>
393
+ <munderover>
394
+ <mo>∑<!-- ∑ --></mo>
395
+ <mrow class="MJX-TeXAtom-ORD">
396
+ <mi>k</mi>
397
+ <mo>=</mo>
398
+ <mn>1</mn>
432
399
  </mrow>
433
- <mo>)</mo>
434
- </mrow>
435
- </math> and other symbols.
436
- </div>
437
- </template>
400
+ <mi>n</mi>
401
+ </munderover>
402
+ <msubsup>
403
+ <mi>a</mi>
404
+ <mi>k</mi>
405
+ <mn>2</mn>
406
+ </msubsup>
407
+ </mrow>
408
+ <mo>)</mo>
409
+ </mrow>
410
+ <mrow>
411
+ <mo>(</mo>
412
+ <mrow>
413
+ <munderover>
414
+ <mo>∑<!-- ∑ --></mo>
415
+ <mrow class="MJX-TeXAtom-ORD">
416
+ <mi>k</mi>
417
+ <mo>=</mo>
418
+ <mn>1</mn>
419
+ </mrow>
420
+ <mi>n</mi>
421
+ </munderover>
422
+ <msubsup>
423
+ <mi>b</mi>
424
+ <mi>k</mi>
425
+ <mn>2</mn>
426
+ </msubsup>
427
+ </mrow>
428
+ <mo>)</mo>
429
+ </mrow>
430
+ </math> and other symbols.
438
431
  </d2l-html-block>
439
432
  </template>
440
433
  </d2l-demo-snippet>
@@ -444,9 +437,7 @@
444
437
  <d2l-demo-snippet>
445
438
  <template>
446
439
  <d2l-html-block>
447
- <template>
448
- <div>$$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$</div>
449
- </template>
440
+ <div>$$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$</div>
450
441
  </d2l-html-block>
451
442
  </template>
452
443
  </d2l-demo-snippet>
@@ -456,12 +447,11 @@
456
447
  <d2l-demo-snippet>
457
448
  <template>
458
449
  <d2l-html-block>
459
- <template>
460
- <div>An equation rendered using LaTeX...
461
- \( f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x \)
462
- ... and some text!
463
- </div>
464
- </template>
450
+ <div>
451
+ An equation rendered using LaTeX...
452
+ \( f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x \)
453
+ ... and some text!
454
+ </div>
465
455
  </d2l-html-block>
466
456
  </template>
467
457
  </d2l-demo-snippet>
@@ -483,7 +473,7 @@
483
473
  render() {
484
474
  return html`
485
475
  &lt;d2l-html-block&gt;
486
- &lt;template&gt;${unsafeHTML(this._someHTML)}&lt;/template&gt;
476
+ ${unsafeHTML(this._someHTML)}
487
477
  &lt;/d2l-html-block&gt;
488
478
  &lt;button ...&gt;update content&lt;/button&gt;`;
489
479
  `;
@@ -617,7 +607,7 @@
617
607
  render() {
618
608
  return html`
619
609
  <d2l-html-block>
620
- <template>${unsafeHTML(this._htmlSnippets[this._updateCount])}</template>
610
+ ${unsafeHTML(this._htmlSnippets[this._updateCount])}
621
611
  </d2l-html-block>
622
612
  <button @click="${this._updateTemplateContent}" ?disabled="${this._updateCount === 6}">update content</button>`;
623
613
  }
package/components/html-block/html-block.js CHANGED
@@ -118,7 +118,7 @@ const getRenderers = () => {
118
118
 
119
119
  /**
120
120
  * A component for displaying user-authored HTML.
121
- * @slot - Provide an html template that contains your user-authored HTML
121
+ * @slot - Provide your user-authored HTML
122
122
  */
123
123
  class HtmlBlock extends LitElement {
124
124
 
@@ -154,9 +154,6 @@ class HtmlBlock extends LitElement {
154
154
  :host([no-deferred-rendering]) div.d2l-html-block-rendered {
155
155
  display: none;
156
156
  }
157
- :host(:not([no-deferred-rendering])) ::slotted(*) {
158
- display: none;
159
- }
160
157
  `];
161
158
  }
162
159
 
@@ -178,24 +175,27 @@ class HtmlBlock extends LitElement {
178
175
  super.connectedCallback();
179
176
  if (this._contextObserverController) this._contextObserverController.hostConnected();
180
177
 
181
- if (!this._templateObserver || this.noDeferredRendering) return;
178
+ if (!this._contentObserver || this.noDeferredRendering) return;
182
179
 
183
- const template = this._findSlottedElement('TEMPLATE');
184
- if (template) this._templateObserver.observe(template.content, { attributes: true, childList: true, subtree: true });
180
+ const slot = this.shadowRoot.querySelector('slot');
181
+ if (slot) {
182
+ slot.assignedNodes({ flatten: true }).forEach(
183
+ node => this._contentObserver.observe(node, { attributes: true, childList: true, subtree: true })
184
+ );
185
+ }
185
186
  }
186
187
 
187
188
  disconnectedCallback() {
188
189
  super.disconnectedCallback();
189
190
  if (this._contextObserverController) this._contextObserverController.hostDisconnected();
190
- if (this._templateObserver) this._templateObserver.disconnect();
191
+ if (this._contentObserver) this._contentObserver.disconnect();
191
192
  }
192
193
 
193
194
  firstUpdated(changedProperties) {
194
195
  super.firstUpdated(changedProperties);
195
196
 
196
197
  if (this._renderContainer) return;
197
-
198
- this.shadowRoot.innerHTML += `<div class="d2l-html-block-rendered${this.compact ? ' d2l-html-block-compact' : ''}"></div><slot></slot>`;
198
+ this.shadowRoot.innerHTML += `<div class="d2l-html-block-rendered${this.compact ? ' d2l-html-block-compact' : ''}"></div><slot ${!this.noDeferredRendering ? 'style="display: none"' : ''}></slot>`;
199
199
 
200
200
  this.shadowRoot.querySelector('slot').addEventListener('slotchange', async e => await this._render(e.target));
201
201
  this._renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');
@@ -216,13 +216,6 @@ class HtmlBlock extends LitElement {
216
216
  return false;
217
217
  }
218
218
 
219
- _findSlottedElement(tagName, slot) {
220
- if (!this.shadowRoot) return;
221
- if (!slot) slot = this.shadowRoot.querySelector('slot');
222
- return slot.assignedNodes({ flatten: true })
223
- .find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === tagName.toUpperCase()));
224
- }
225
-
226
219
  async _processRenderers(elem) {
227
220
  for (const renderer of getRenderers()) {
228
221
  if (this._contextObserverController && renderer.contextAttributes) {
@@ -248,19 +241,23 @@ class HtmlBlock extends LitElement {
248
241
  }
249
242
 
250
243
  async _renderInline(slot) {
251
- const noDeferredRenderingContainer = this._findSlottedElement('DIV', slot);
244
+ if (!this.shadowRoot) return;
245
+ if (!slot) slot = this.shadowRoot.querySelector('slot');
246
+
247
+ const noDeferredRenderingContainer = slot.assignedNodes({ flatten: true })
248
+ .find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'DIV'));
249
+
252
250
  if (!noDeferredRenderingContainer) return;
253
251
  await this._processRenderers(noDeferredRenderingContainer);
254
252
  }
255
253
 
256
254
  _stamp(slot) {
257
- const stampHTML = async template => {
258
- const fragment = template ? document.importNode(template.content, true) : null;
259
- if (fragment) {
255
+ const stampHTML = async nodes => {
256
+ if (nodes && nodes.length > 0) {
260
257
 
261
258
  let temp = document.createElement('div');
262
259
  temp.style.display = 'none';
263
- temp.appendChild(fragment);
260
+ nodes.forEach(node => temp.appendChild(node.cloneNode(true)));
264
261
 
265
262
  this._renderContainer.appendChild(temp);
266
263
  temp = await this._processRenderers(temp);
@@ -271,15 +268,17 @@ class HtmlBlock extends LitElement {
271
268
  }
272
269
  };
273
270
 
274
- const template = this._findSlottedElement('TEMPLATE', slot);
271
+ if (this._contentObserver) this._contentObserver.disconnect();
275
272
 
276
- if (this._templateObserver) this._templateObserver.disconnect();
277
- if (template) {
278
- this._templateObserver = new MutationObserver(() => stampHTML(template));
279
- this._templateObserver.observe(template.content, { attributes: true, childList: true, subtree: true });
280
- }
273
+ if (!slot) slot = this.shadowRoot.querySelector('slot');
274
+ const slottedNodes = slot.assignedNodes({ flatten: true });
275
+
276
+ this._contentObserver = new MutationObserver(() => stampHTML(slottedNodes));
277
+ slottedNodes.forEach(
278
+ node => this._contentObserver.observe(node, { attributes: true, childList: true, subtree: true })
279
+ );
281
280
 
282
- stampHTML(template);
281
+ stampHTML(slottedNodes);
283
282
  }
284
283
 
285
284
  }
package/custom-elements.json CHANGED
@@ -3458,7 +3458,7 @@
3458
3458
  "slots": [
3459
3459
  {
3460
3460
  "name": "",
3461
- "description": "Provide an html template that contains your user-authored HTML"
3461
+ "description": "Provide your user-authored HTML"
3462
3462
  }
3463
3463
  ]
3464
3464
  },
package/helpers/dismissible.js CHANGED
@@ -4,7 +4,7 @@ const stack = [];
4
4
 
5
5
  function cleanup() {
6
6
  if (eventListener && stack.length === 0) {
7
- document.removeEventListener('keyup', eventListener);
7
+ document.removeEventListener('keydown', eventListener);
8
8
  eventListener = null;
9
9
  }
10
10
  }
@@ -23,7 +23,7 @@ function init() {
23
23
  }
24
24
  cleanup();
25
25
  };
26
- document.addEventListener('keyup', eventListener);
26
+ document.addEventListener('keydown', eventListener);
27
27
  }
28
28
 
29
29
  export function clearDismissible(id) {
package/helpers/mathjax.js CHANGED
@@ -19,6 +19,7 @@ export class HtmlBlockMathRenderer {
19
19
  if (!elem.querySelector('math') && !(isLatexSupported && /\$\$|\\\(|\\\[|\\begin{|\\ref{|\\eqref{/.test(elem.innerHTML))) return elem;
20
20
 
21
21
  const mathJaxConfig = {
22
+ deferTypeset: true,
22
23
  renderLatex: isLatexSupported,
23
24
  outputScale: context.outputScale || 1
24
25
  };
@@ -27,7 +28,11 @@ export class HtmlBlockMathRenderer {
27
28
 
28
29
  // If we're opting out of deferred rendering, we need to rely
29
30
  // on the global MathJax install for rendering.
30
- if (options.noDeferredRendering) return elem;
31
+ if (options.noDeferredRendering) {
32
+ await window.MathJax.startup.promise;
33
+ window.MathJax.typeset([elem]);
34
+ return elem;
35
+ }
31
36
 
32
37
  const temp = document.createElement('div');
33
38
  temp.style.display = 'none';
@@ -35,6 +40,7 @@ export class HtmlBlockMathRenderer {
35
40
  temp.shadowRoot.innerHTML = `<div><mjx-doc><mjx-head></mjx-head><mjx-body>${elem.innerHTML}</mjx-body></mjx-doc></div>`;
36
41
 
37
42
  elem.appendChild(temp);
43
+ await window.MathJax.startup.promise;
38
44
  window.MathJax.typesetShadow(temp.shadowRoot);
39
45
  return temp.shadowRoot.firstChild;
40
46
  }
@@ -138,7 +144,7 @@ export function loadMathJax(mathJaxConfig) {
138
144
  const InputJax = startup.getInputJax();
139
145
  const OutputJax = startup.getOutputJax();
140
146
  const html = mathjax.document(root, { InputJax, OutputJax });
141
- html.render();
147
+ html.render().typeset();
142
148
  return html;
143
149
  };
144
150
 
@@ -146,7 +152,9 @@ export function loadMathJax(mathJaxConfig) {
146
152
  // Now do the usual startup now that the extensions are in place
147
153
  //
148
154
  window.MathJax.startup.defaultReady();
149
- }
155
+ },
156
+ // Defer typesetting if the config is present and deferring is set
157
+ typeset: !(mathJaxConfig && mathJaxConfig.deferTypeset)
150
158
  }
151
159
  };
152
160
 
package/lang/es.js CHANGED
@@ -5,7 +5,7 @@ export default {
5
5
  "components.calendar.notSelected": "No seleccionado.",
6
6
  "components.calendar.selected": "Seleccionado.",
7
7
  "components.calendar.show": "Mostrar {month}",
8
- "components.count-badge.plus": "Más de {number}",
8
+ "components.count-badge.plus": "{number}+",
9
9
  "components.dialog.close": "Cerrar este cuadro de diálogo",
10
10
  "components.dropdown.close": "Cerrar",
11
11
  "components.filter.clear": "Borrar",
package/lang/fr-fr.js CHANGED
@@ -5,7 +5,7 @@ export default {
5
5
  "components.calendar.notSelected": "Non sélectionné.",
6
6
  "components.calendar.selected": "Sélectionné.",
7
7
  "components.calendar.show": "Afficher {month}",
8
- "components.count-badge.plus": "Plus de {number}",
8
+ "components.count-badge.plus": "{number}+",
9
9
  "components.dialog.close": "Fermer cette boîte de dialogue",
10
10
  "components.dropdown.close": "Fermer",
11
11
  "components.filter.clear": "Effacer",
package/lang/ja.js CHANGED
@@ -5,7 +5,7 @@ export default {
5
5
  "components.calendar.notSelected": "選択されていません。",
6
6
  "components.calendar.selected": "選択されています。",
7
7
  "components.calendar.show": "{month} を表示",
8
- "components.count-badge.plus": "{number} 以上",
8
+ "components.count-badge.plus": "{number}+",
9
9
  "components.dialog.close": "このダイアログを閉じる",
10
10
  "components.dropdown.close": "閉じる",
11
11
  "components.filter.clear": "クリア",
package/lang/nl.js CHANGED
@@ -5,7 +5,7 @@ export default {
5
5
  "components.calendar.notSelected": "Niet geselecteerd.",
6
6
  "components.calendar.selected": "Geselecteerd.",
7
7
  "components.calendar.show": "{month} weergeven",
8
- "components.count-badge.plus": "{number} +",
8
+ "components.count-badge.plus": "{number}+",
9
9
  "components.dialog.close": "Dit dialoogvenster sluiten",
10
10
  "components.dropdown.close": "Sluiten",
11
11
  "components.filter.clear": "Wissen",
package/lang/zh.js CHANGED
@@ -5,7 +5,7 @@ export default {
5
5
  "components.calendar.notSelected": "未选择。",
6
6
  "components.calendar.selected": "已选择。",
7
7
  "components.calendar.show": "显示 {month}",
8
- "components.count-badge.plus": "{number} +",
8
+ "components.count-badge.plus": "{number}+",
9
9
  "components.dialog.close": "关闭此对话框",
10
10
  "components.dropdown.close": "关闭",
11
11
  "components.filter.clear": "清除",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "1.219.5",
3
+ "version": "1.220.3",
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",