@brightspace-ui/core 1.207.3 → 1.208.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.
Files changed (10) hide show
  1. package/components/dialog/README.md +1 -2
  2. package/components/dropdown/README.md +9 -17
  3. package/components/filter/README.md +4 -7
  4. package/components/html-block/demo/html-block.html +118 -1
  5. package/components/html-block/html-block.js +59 -25
  6. package/components/inputs/docs/input-date-time.md +7 -13
  7. package/components/inputs/input-date-time.js +16 -0
  8. package/custom-elements.json +17 -0
  9. package/helpers/mathjax.js +8 -0
  10. package/package.json +1 -1
package/components/dialog/README.md CHANGED
@@ -2,10 +2,9 @@
2
2
 
3
3
  Dialogs interrupt the user to complete a set of tasks, confirm an action, or offer important options.
4
4
 
5
- <!-- docs: demo autoSize:false size:large -->
5
+ <!-- docs: demo autoOpen:true autoSize:false size:large -->
6
6
  ```html
7
7
  <script type="module">
8
- import './pages/assets/open-first-item-helper.js';
9
8
  import '@brightspace-ui/core/components/button/button.js';
10
9
  import '@brightspace-ui/core/components/dialog/dialog.js';
11
10
  </script>
package/components/dropdown/README.md CHANGED
@@ -1,7 +1,7 @@
1
1
  # Dropdowns
2
2
  A Dropdown is a button that opens a floating container to offer menu items or other content.
3
3
 
4
- <!-- docs: demo autoSize:false align:flex-start size:medium -->
4
+ <!-- docs: demo align:flex-start autoSize:false size:medium -->
5
5
  ```html
6
6
  <script type="module">
7
7
  import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
@@ -26,10 +26,9 @@ A Dropdown is a button that opens a floating container to offer menu items or ot
26
26
 
27
27
  `d2l-dropdown` is a generic opener for dropdown content (`d2l-dropdown-content`, `d2l-dropdown-menu` or `d2l-dropdown-tabs`) enabling alternate opener implementation using existing elements/components. Provide and indicate your own opener element with the class attribute value `d2l-dropdown-opener`. Wire-up is automatic.
28
28
 
29
- <!-- docs: demo live name:d2l-dropdown autoSize:false align:flex-start size:medium -->
29
+ <!-- docs: demo live name:d2l-dropdown align:flex-start autoOpen:true autoSize:false size:medium -->
30
30
  ```html
31
31
  <script type="module">
32
- import './pages/assets/open-first-item-helper.js';
33
32
  import '@brightspace-ui/core/components/dropdown/dropdown.js';
34
33
  import '@brightspace-ui/core/components/dropdown/dropdown-content.js';
35
34
  </script>
@@ -72,10 +71,9 @@ If the dropdown is initially empty when it's opened, the dropdown pointer will n
72
71
  ![screenshot the basic dropdown-button opener](./screenshots/dropdown-button.png)
73
72
  <!-- docs: end hidden content -->
74
73
 
75
- <!-- docs: demo live name:d2l-dropdown-button autoSize:false align:flex-start size:medium -->
74
+ <!-- docs: demo live name:d2l-dropdown-button align:flex-start autoOpen:true autoSize:false size:medium -->
76
75
  ```html
77
76
  <script type="module">
78
- import './pages/assets/open-first-item-helper.js';
79
77
  import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
80
78
  import '@brightspace-ui/core/components/dropdown/dropdown-content.js';
81
79
  </script>
@@ -105,10 +103,9 @@ If the dropdown is initially empty when it's opened, the dropdown pointer will n
105
103
  ![screenshot the basic dropdown-button-subtle opener](./screenshots/dropdown-button-subtle.png)
106
104
  <!-- docs: end hidden content -->
107
105
 
108
- <!-- docs: demo live name:d2l-dropdown-button-subtle align:flex-start autoSize:false size:medium -->
106
+ <!-- docs: demo live name:d2l-dropdown-button-subtle align:flex-start autoOpen:true autoSize:false size:medium -->
109
107
  ```html
110
108
  <script type="module">
111
- import './pages/assets/open-first-item-helper.js';
112
109
  import '@brightspace-ui/core/components/dropdown/dropdown-button-subtle.js';
113
110
  import '@brightspace-ui/core/components/dropdown/dropdown-content.js';
114
111
  </script>
@@ -146,10 +143,9 @@ To make your `d2l-dropdown-button-subtle` accessible, use the following properti
146
143
  ![screenshot the basic dropdown-context-menu opener](./screenshots/dropdown-context-menu.png)
147
144
  <!-- docs: end hidden content -->
148
145
 
149
- <!-- docs: demo live name:d2l-dropdown-context-menu align:flex-start autoSize:false size:medium -->
146
+ <!-- docs: demo live name:d2l-dropdown-context-menu align:flex-start autoOpen:true autoSize:false size:medium -->
150
147
  ```html
151
148
  <script type="module">
152
- import './pages/assets/open-first-item-helper.js';
153
149
  import '@brightspace-ui/core/components/dropdown/dropdown-context-menu.js';
154
150
  import '@brightspace-ui/core/components/dropdown/dropdown-content.js';
155
151
  </script>
@@ -188,10 +184,9 @@ To make your usage of `d2l-dropdown-context-menu` accessible, use the following
188
184
  ![screenshot the basic dropdown-more opener](./screenshots/dropdown-more.png)
189
185
  <!-- docs: end hidden content -->
190
186
 
191
- <!-- docs: demo live name:d2l-dropdown-more autoSize:false align:flex-start size:medium -->
187
+ <!-- docs: demo live name:d2l-dropdown-more align:flex-start autoOpen:true autoSize:false size:medium -->
192
188
  ```html
193
189
  <script type="module">
194
- import './pages/assets/open-first-item-helper.js';
195
190
  import '@brightspace-ui/core/components/dropdown/dropdown-more.js';
196
191
  import '@brightspace-ui/core/components/dropdown/dropdown-content.js';
197
192
  </script>
@@ -231,10 +226,9 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
231
226
  ![screenshot the dropdown-content with mobile-tray="right"](./screenshots/dropdown-content-mobile-tray.png)
232
227
  <!-- docs: end hidden content -->
233
228
 
234
- <!-- docs: demo live name:d2l-dropdown-content autoSize:false align:flex-start size:medium -->
229
+ <!-- docs: demo live name:d2l-dropdown-content align:flex-start autoSize:false autoOpen:true size:medium -->
235
230
  ```html
236
231
  <script type="module">
237
- import './pages/assets/open-first-item-helper.js';
238
232
  import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
239
233
  import '@brightspace-ui/core/components/dropdown/dropdown-content.js';
240
234
  </script>
@@ -294,10 +288,9 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
294
288
  ![screenshot the basic dropdown-menu](./screenshots/dropdown-menu.png)
295
289
  <!-- docs: end hidden content -->
296
290
 
297
- <!-- docs: demo live name:d2l-dropdown-menu size:medium align:flex-start autoSize:false -->
291
+ <!-- docs: demo live name:d2l-dropdown-menu align:flex-start autoOpen:true autoSize:false size:medium -->
298
292
  ```html
299
293
  <script type="module">
300
- import './pages/assets/open-first-item-helper.js';
301
294
  import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
302
295
  import '@brightspace-ui/core/components/dropdown/dropdown-menu.js';
303
296
  import '@brightspace-ui/core/components/menu/menu.js';
@@ -338,10 +331,9 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
338
331
  ![screenshot the basic dropdown-tabs](./screenshots/dropdown-tabs.png)
339
332
  <!-- docs: end hidden content -->
340
333
 
341
- <!-- docs: demo live name:d2l-dropdown-tabs size:large autoSize:false align:flex-start -->
334
+ <!-- docs: demo live name:d2l-dropdown-tabs autoOpen:true autoSize:false align:flex-start size:large -->
342
335
  ```html
343
336
  <script type="module">
344
- import './pages/assets/open-first-item-helper.js';
345
337
  import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
346
338
  import '@brightspace-ui/core/components/dropdown/dropdown-tabs.js';
347
339
  import '@brightspace-ui/core/components/menu/menu.js';
package/components/filter/README.md CHANGED
@@ -7,10 +7,9 @@ Filter with multiple dimensions:
7
7
  ![Filter with multiple dimensions](./screenshots/filter-multi-dim.png?raw=true)
8
8
  <!-- docs: end hidden content -->
9
9
 
10
- <!-- docs: demo align:start autoSize:false size:large -->
10
+ <!-- docs: demo align:start autoOpen:true autoSize:false size:large -->
11
11
  ```html
12
12
  <script type="module">
13
- import './pages/assets/open-first-item-helper.js';
14
13
  import '@brightspace-ui/core/components/filter/filter.js';
15
14
  import '@brightspace-ui/core/components/filter/filter-dimension-set.js';
16
15
  import '@brightspace-ui/core/components/filter/filter-dimension-set-value.js';
@@ -39,10 +38,9 @@ Filter with multiple dimensions:
39
38
 
40
39
  The `d2l-filter` component allows a user to filter on one or more dimensions of data from a single dropdown.
41
40
 
42
- <!-- docs: demo live name:d2l-filter autoSize:false align:start size:large -->
41
+ <!-- docs: demo live name:d2l-filter align:start autoOpen:true autoSize:false size:large -->
43
42
  ```html
44
43
  <script type="module">
45
- import './pages/assets/open-first-item-helper.js';
46
44
  import '@brightspace-ui/core/components/filter/filter.js';
47
45
  import '@brightspace-ui/core/components/filter/filter-dimension-set.js';
48
46
  import '@brightspace-ui/core/components/filter/filter-dimension-set-value.js';
@@ -78,7 +76,7 @@ Filter with a single dimension:
78
76
  ![Filters with single dimension](./screenshots/filter.png?raw=true)
79
77
  <!-- docs: end hidden content -->
80
78
 
81
- <!-- docs: demo code autoSize:false align:start size:large -->
79
+ <!-- docs: demo code align:start autoSize:false size:large -->
82
80
  ```html
83
81
  <script type="module">
84
82
  import '@brightspace-ui/core/components/filter/filter.js';
@@ -160,10 +158,9 @@ Set dimension on mobile:
160
158
  ![Set dimension on mobile](./screenshots/filter-mobile.png?raw=true)
161
159
  <!-- docs: end hidden content -->
162
160
 
163
- <!-- docs: demo live name:d2l-filter-dimension-set align:start autoSize:false size:large -->
161
+ <!-- docs: demo live name:d2l-filter-dimension-set align:start autoOpen:true autoSize:false size:large -->
164
162
  ```html
165
163
  <script type="module">
166
- import './pages/assets/open-first-item-helper.js';
167
164
  import '@brightspace-ui/core/components/filter/filter.js';
168
165
  import '@brightspace-ui/core/components/filter/filter-dimension-set.js';
169
166
  import '@brightspace-ui/core/components/filter/filter-dimension-set-value.js';
package/components/html-block/demo/html-block.html CHANGED
@@ -10,6 +10,10 @@
10
10
  import { provideInstance } from '../../../mixins/provider-mixin.js';
11
11
 
12
12
  class DemoReplacementRenderer {
13
+ get canRenderInline() {
14
+ return true;
15
+ }
16
+
13
17
  async render(elem) {
14
18
  const elemsToReplace = elem.querySelectorAll('[data-replace-me-id]');
15
19
  if (elemsToReplace.length === 0) return elem;
@@ -38,7 +42,7 @@
38
42
 
39
43
  </script>
40
44
  <script>
41
- document.getElementsByTagName('html')[0].dataset.mathjaxContext = JSON.stringify({ renderLatex: window.location.search.indexOf('latex=true') !== -1 });
45
+ document.getElementsByTagName('html')[0].dataset.mathjaxContext = JSON.stringify({ outputScale: 1.1, renderLatex: window.location.search.indexOf('latex=true') !== -1 });
42
46
  </script>
43
47
  </head>
44
48
  <body unresolved>
@@ -188,6 +192,119 @@
188
192
  </template>
189
193
  </d2l-demo-snippet>
190
194
 
195
+ <h2>HTML Block (math, no deferred rendering)</h2>
196
+
197
+ <d2l-demo-snippet>
198
+ <template>
199
+ <d2l-html-block no-deferred-rendering>
200
+ <div>
201
+ <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
202
+ <mi>x</mi>
203
+ <mo>=</mo>
204
+ <mrow>
205
+ <mfrac>
206
+ <mrow>
207
+ <mo>&#x2212;</mo>
208
+ <mi>b</mi>
209
+ <mo>&#xB1;</mo>
210
+ <msqrt>
211
+ <msup>
212
+ <mi>b</mi>
213
+ <mn>2</mn>
214
+ </msup>
215
+ <mo>&#x2212;</mo>
216
+ <mn>4</mn>
217
+ <mi>a</mi>
218
+ <mi>c</mi>
219
+ </msqrt>
220
+ </mrow>
221
+ <mrow>
222
+ <mn>2</mn>
223
+ <mi>a</mi>
224
+ </mrow>
225
+ </mfrac>
226
+ </mrow>
227
+ <mtext>.</mtext>
228
+ </math>
229
+ <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
230
+ <msup>
231
+ <mrow>
232
+ <mo>(</mo>
233
+ <mrow>
234
+ <munderover>
235
+ <mo>∑<!-- ∑ --></mo>
236
+ <mrow class="MJX-TeXAtom-ORD">
237
+ <mi>k</mi>
238
+ <mo>=</mo>
239
+ <mn>1</mn>
240
+ </mrow>
241
+ <mi>n</mi>
242
+ </munderover>
243
+ <msub>
244
+ <mi>a</mi>
245
+ <mi>k</mi>
246
+ </msub>
247
+ <msub>
248
+ <mi>b</mi>
249
+ <mi>k</mi>
250
+ </msub>
251
+ </mrow>
252
+ <mo>)</mo>
253
+ </mrow>
254
+ <mrow class="MJX-TeXAtom-ORD">
255
+ <mspace width="negativethinmathspace"></mspace>
256
+ <mspace width="negativethinmathspace"></mspace>
257
+ <mn>2</mn>
258
+ </mrow>
259
+ </msup>
260
+ <mo>≤<!-- ≤ --></mo>
261
+ <mrow>
262
+ <mo>(</mo>
263
+ <mrow>
264
+ <munderover>
265
+ <mo>∑<!-- ∑ --></mo>
266
+ <mrow class="MJX-TeXAtom-ORD">
267
+ <mi>k</mi>
268
+ <mo>=</mo>
269
+ <mn>1</mn>
270
+ </mrow>
271
+ <mi>n</mi>
272
+ </munderover>
273
+ <msubsup>
274
+ <mi>a</mi>
275
+ <mi>k</mi>
276
+ <mn>2</mn>
277
+ </msubsup>
278
+ </mrow>
279
+ <mo>)</mo>
280
+ </mrow>
281
+ <mrow>
282
+ <mo>(</mo>
283
+ <mrow>
284
+ <munderover>
285
+ <mo>∑<!-- ∑ --></mo>
286
+ <mrow class="MJX-TeXAtom-ORD">
287
+ <mi>k</mi>
288
+ <mo>=</mo>
289
+ <mn>1</mn>
290
+ </mrow>
291
+ <mi>n</mi>
292
+ </munderover>
293
+ <msubsup>
294
+ <mi>b</mi>
295
+ <mi>k</mi>
296
+ <mn>2</mn>
297
+ </msubsup>
298
+ </mrow>
299
+ <mo>)</mo>
300
+ </mrow>
301
+ </math>
302
+ <p>The wizard (<span data-replace-me-id="0">Elmer Fudd</span>) quickly jinxed the gnomes before they vaporized.</p>
303
+ </div>
304
+ </d2l-html-block>
305
+ </template>
306
+ </d2l-demo-snippet>
307
+
191
308
  <h2>HTML Block (inline math)</h2>
192
309
 
193
310
  <d2l-demo-snippet>
package/components/html-block/html-block.js CHANGED
@@ -118,6 +118,17 @@ const getRenderers = () => {
118
118
  */
119
119
  class HtmlBlock extends LitElement {
120
120
 
121
+ static get properties() {
122
+ return {
123
+ /**
124
+ * Whether to disable deferred rendering of the user-authored HTML. Do *not* set this
125
+ * unless your HTML relies on script executions that may break upon stamping.
126
+ * @type {Boolean}
127
+ */
128
+ noDeferredRendering: { type: Boolean, attribute: 'no-deferred-rendering' }
129
+ };
130
+ }
131
+
121
132
  static get styles() {
122
133
  return [ htmlBlockContentStyles, css`
123
134
  :host {
@@ -131,7 +142,10 @@ class HtmlBlock extends LitElement {
131
142
  :host([hidden]) {
132
143
  display: none;
133
144
  }
134
- ::slotted(*) {
145
+ :host([no-deferred-rendering]) div.d2l-html-block-rendered {
146
+ display: none;
147
+ }
148
+ :host(:not([no-deferred-rendering])) ::slotted(*) {
135
149
  display: none;
136
150
  }
137
151
  `];
@@ -139,6 +153,7 @@ class HtmlBlock extends LitElement {
139
153
 
140
154
  constructor() {
141
155
  super();
156
+ this.noDeferredRendering = false;
142
157
 
143
158
  const rendererContextAttributes = getRenderers().reduce((attrs, currentRenderer) => {
144
159
  if (currentRenderer.contextAttributes) currentRenderer.contextAttributes.forEach(attr => attrs.push(attr));
@@ -153,9 +168,9 @@ class HtmlBlock extends LitElement {
153
168
  super.connectedCallback();
154
169
  if (this._contextObserverController) this._contextObserverController.hostConnected();
155
170
 
156
- if (!this._templateObserver) return;
171
+ if (!this._templateObserver || this.noDeferredRendering) return;
157
172
 
158
- const template = this.querySelector('template');
173
+ const template = this._findSlottedElement('TEMPLATE');
159
174
  if (template) this._templateObserver.observe(template.content, { attributes: true, childList: true, subtree: true });
160
175
  }
161
176
 
@@ -172,24 +187,14 @@ class HtmlBlock extends LitElement {
172
187
 
173
188
  this.shadowRoot.innerHTML += '<div class="d2l-html-block-rendered"></div><slot></slot>';
174
189
 
175
- this.shadowRoot.querySelector('slot').addEventListener('slotchange', async e => {
176
-
177
- const template = e.target.assignedNodes({ flatten: true })
178
- .find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'TEMPLATE'));
179
-
180
- this._stamp(template);
181
-
182
- });
190
+ this.shadowRoot.querySelector('slot').addEventListener('slotchange', async e => await this._render(e.target));
183
191
  this._renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');
184
192
  this._context = this._contextObserverController ? { ...this._contextObserverController.values } : {};
185
193
  }
186
194
 
187
195
  updated() {
188
196
  super.updated();
189
- if (this._contextObserverController && this._contextObjectHasChanged()) {
190
- const template = this.querySelector('template');
191
- this._stamp(template);
192
- }
197
+ if (this._contextObserverController && this._contextObjectHasChanged()) this._render();
193
198
  }
194
199
 
195
200
  _contextObjectHasChanged() {
@@ -201,23 +206,50 @@ class HtmlBlock extends LitElement {
201
206
  return false;
202
207
  }
203
208
 
204
- _stamp(template) {
209
+ _findSlottedElement(tagName, slot) {
210
+ if (!slot) slot = this.shadowRoot.querySelector('slot');
211
+ return slot.assignedNodes({ flatten: true })
212
+ .find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === tagName.toUpperCase()));
213
+ }
214
+
215
+ async _processRenderers(elem) {
216
+ for (const renderer of getRenderers()) {
217
+ if (this.noDeferredRendering && !renderer.canRenderInline) continue;
218
+
219
+ if (this._contextObserverController && renderer.contextAttributes) {
220
+ const contextValues = new Map();
221
+ renderer.contextAttributes.forEach(attr => contextValues.set(attr, this._contextObserverController.values.get(attr)));
222
+ elem = await renderer.render(elem, contextValues);
223
+ } else {
224
+ elem = await renderer.render(elem);
225
+ }
226
+ }
227
+
228
+ return elem;
229
+ }
230
+
231
+ async _render(slot) {
232
+ if (this.noDeferredRendering) await this._renderInline(slot);
233
+ else this._stamp(slot);
234
+ }
235
+
236
+ async _renderInline(slot) {
237
+ const noDeferredRenderingContainer = this._findSlottedElement('DIV', slot);
238
+ if (!noDeferredRenderingContainer) return;
239
+ await this._processRenderers(noDeferredRenderingContainer);
240
+ }
241
+
242
+ _stamp(slot) {
205
243
  const stampHTML = async template => {
206
244
  const fragment = template ? document.importNode(template.content, true) : null;
207
245
  if (fragment) {
208
246
 
209
247
  let temp = document.createElement('div');
248
+ temp.style.display = 'none';
210
249
  temp.appendChild(fragment);
211
250
 
212
- for (const renderer of getRenderers()) {
213
- if (this._contextObserverController && renderer.contextAttributes) {
214
- const contextValues = new Map();
215
- renderer.contextAttributes.forEach(attr => contextValues.set(attr, this._contextObserverController.values.get(attr)));
216
- temp = await renderer.render(temp, contextValues);
217
- } else {
218
- temp = await renderer.render(temp);
219
- }
220
- }
251
+ this._renderContainer.appendChild(temp);
252
+ temp = await this._processRenderers(temp);
221
253
  this._renderContainer.innerHTML = temp.innerHTML;
222
254
 
223
255
  } else {
@@ -225,6 +257,8 @@ class HtmlBlock extends LitElement {
225
257
  }
226
258
  };
227
259
 
260
+ const template = this._findSlottedElement('TEMPLATE', slot);
261
+
228
262
  if (this._templateObserver) this._templateObserver.disconnect();
229
263
  if (template) {
230
264
  this._templateObserver = new MutationObserver(() => stampHTML(template));
package/components/inputs/docs/input-date-time.md CHANGED
@@ -45,10 +45,9 @@ Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-
45
45
  ![example screenshot of date input](../screenshots/date.gif?raw=true)
46
46
  <!-- docs: end hidden content -->
47
47
 
48
- <!-- docs: demo live name:d2l-input-date align:flex-start autoSize:false size:xlarge -->
48
+ <!-- docs: demo live name:d2l-input-date align:flex-start autoOpen:true autoSize:false size:xlarge -->
49
49
  ```html
50
50
  <script type="module">
51
- import './pages/assets/open-first-item-helper.js';
52
51
  import '@brightspace-ui/core/components/inputs/input-date.js';
53
52
  </script>
54
53
  <d2l-input-date label="Birthdate">
@@ -96,10 +95,9 @@ Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-
96
95
  ![example screenshot of date range input](../screenshots/date-range.gif?raw=true)
97
96
  <!-- docs: end hidden content -->
98
97
 
99
- <!-- docs: demo live name:d2l-input-date-range align:flex-start autoSize:false size:xlarge -->
98
+ <!-- docs: demo live name:d2l-input-date-range align:flex-start autoOpen:true autoSize:false size:xlarge -->
100
99
  ```html
101
100
  <script type="module">
102
- import './pages/assets/open-first-item-helper.js';
103
101
  import '@brightspace-ui/core/components/inputs/input-date-range.js';
104
102
  </script>
105
103
  <d2l-input-date-range label="Availability Range">
@@ -153,10 +151,9 @@ Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and
153
151
  ![example screenshot of time input](../screenshots/time.gif?raw=true)
154
152
  <!-- docs: end hidden content -->
155
153
 
156
- <!-- docs: demo live name:d2l-input-time align:flex-start autoSize:false size:large -->
154
+ <!-- docs: demo live name:d2l-input-time align:flex-start autoOpen:true autoSize:false size:large -->
157
155
  ```html
158
156
  <script type="module">
159
- import './pages/assets/open-first-item-helper.js';
160
157
  import '@brightspace-ui/core/components/inputs/input-time.js';
161
158
  </script>
162
159
  <d2l-input-time label="Time">
@@ -194,7 +191,7 @@ To make your usage of `d2l-input-time` accessible, use the following properties
194
191
  | `label-hidden` | Use if label should be visually hidden but available for screen reader users |
195
192
  | `labelled-by` | String | Use when another visible element should act as the label |
196
193
 
197
- ### Time Range Input [d2l-input-time-range]
194
+ ## Time Range Input [d2l-input-time-range]
198
195
 
199
196
  Use the `<d2l-input-time-range>` component when users need to enter two times in a range, and the date is already known. The component consists of two input-time components - one for the start of a range and one for the end of a range. Values specified for these components (through the `start-value` and/or `end-value` attributes) are displayed if specified, and selected values are reflected.
200
197
 
@@ -204,10 +201,9 @@ Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and
204
201
  ![example screenshot of time range input](../screenshots/time-range.gif?raw=true)
205
202
  <!-- docs: end hidden content -->
206
203
 
207
- <!-- docs: demo live name:d2l-input-time-range align:flex-start autoSize:false size:large -->
204
+ <!-- docs: demo live name:d2l-input-time-range align:flex-start autoOpen:true autoSize:false size:large -->
208
205
  ```html
209
206
  <script type="module">
210
- import './pages/assets/open-first-item-helper.js';
211
207
  import '@brightspace-ui/core/components/inputs/input-time-range.js';
212
208
  </script>
213
209
  <d2l-input-time-range label="Availability Range">
@@ -257,10 +253,9 @@ Note: All `*value` properties should be in ISO 8601 combined date and time forma
257
253
  ![example screenshot of date input](../screenshots/date-time.gif?raw=true)
258
254
  <!-- docs: end hidden content -->
259
255
 
260
- <!-- docs: demo live name:d2l-input-date-time align:flex-start autoSize:false size:xlarge -->
256
+ <!-- docs: demo live name:d2l-input-date-time align:flex-start autoOpen:true autoSize:false size:xlarge -->
261
257
  ```html
262
258
  <script type="module">
263
- import './pages/assets/open-first-item-helper.js';
264
259
  import '@brightspace-ui/core/components/inputs/input-date-time.js';
265
260
  </script>
266
261
  <d2l-input-date-time label="Due Date">
@@ -309,10 +304,9 @@ Note: All `*value` properties should be in ISO 8601 combined date and time forma
309
304
  ![example screenshot of date-time range input](../screenshots/date-time-range.gif?raw=true)
310
305
  <!-- docs: end hidden content -->
311
306
 
312
- <!-- docs: demo live name:d2l-input-date-time-range align:flex-start autoSize:false size:xlarge -->
307
+ <!-- docs: demo live name:d2l-input-date-time-range align:flex-start autoOpen:true autoSize:false size:xlarge -->
313
308
  ```html
314
309
  <script type="module">
315
- import './pages/assets/open-first-item-helper.js';
316
310
  import '@brightspace-ui/core/components/inputs/input-date-time-range.js';
317
311
  </script>
318
312
  <d2l-input-date-time-range label="Availability Range">
package/components/inputs/input-date-time.js CHANGED
@@ -15,6 +15,7 @@ import { formatDateInISO,
15
15
  parseISOTime } from '../../helpers/dateTime.js';
16
16
  import { FormElementMixin } from '../form/form-element-mixin.js';
17
17
  import { getDefaultTime } from './input-time.js';
18
+ import { getDocumentLocaleSettings } from '@brightspace-ui/intl/lib/common.js';
18
19
  import { getUniqueId } from '../../helpers/uniqueId.js';
19
20
  import { ifDefined } from 'lit-html/directives/if-defined.js';
20
21
  import { LabelledMixin } from '../../mixins/labelled-mixin.js';
@@ -119,6 +120,7 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
119
120
  this.opened = false;
120
121
  this.required = false;
121
122
  this.timeDefaultValue = 'startOfDay';
123
+ this._documentLocaleSettings = getDocumentLocaleSettings();
122
124
  this._inputId = getUniqueId();
123
125
  this._namespace = 'components.input-date-time';
124
126
  this._preventDefaultValidation = false;
@@ -190,6 +192,16 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
190
192
  return super.validationMessage;
191
193
  }
192
194
 
195
+ connectedCallback() {
196
+ super.connectedCallback();
197
+ this._documentLocaleSettings.addChangeListener(this._handleLocaleChange.bind(this));
198
+ }
199
+
200
+ disconnectedCallback() {
201
+ super.disconnectedCallback();
202
+ this._documentLocaleSettings.removeChangeListener(this._handleLocaleChange.bind(this));
203
+ }
204
+
193
205
  firstUpdated(changedProperties) {
194
206
  super.firstUpdated(changedProperties);
195
207
 
@@ -343,6 +355,10 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
343
355
  if (tooltip) tooltip.show();
344
356
  }
345
357
 
358
+ _handleLocaleChange() {
359
+ this.requestUpdate();
360
+ }
361
+
346
362
  async _handleTimeChange(e) {
347
363
  const date = this.shadowRoot.querySelector('d2l-input-date').value;
348
364
  const time = e.target.value;
package/custom-elements.json CHANGED
@@ -3377,6 +3377,23 @@
3377
3377
  "name": "d2l-html-block",
3378
3378
  "path": "./components/html-block/html-block.js",
3379
3379
  "description": "A component for displaying user-authored HTML.",
3380
+ "attributes": [
3381
+ {
3382
+ "name": "no-deferred-rendering",
3383
+ "description": "Whether to disable deferred rendering of the user-authored HTML. Do *not* set this\nunless your HTML relies on script executions that may break upon stamping.",
3384
+ "type": "Boolean",
3385
+ "default": "false"
3386
+ }
3387
+ ],
3388
+ "properties": [
3389
+ {
3390
+ "name": "noDeferredRendering",
3391
+ "attribute": "no-deferred-rendering",
3392
+ "description": "Whether to disable deferred rendering of the user-authored HTML. Do *not* set this\nunless your HTML relies on script executions that may break upon stamping.",
3393
+ "type": "Boolean",
3394
+ "default": "false"
3395
+ }
3396
+ ],
3380
3397
  "slots": [
3381
3398
  {
3382
3399
  "name": "",
package/helpers/mathjax.js CHANGED
@@ -4,6 +4,12 @@ let mathJaxLoaded;
4
4
 
5
5
  export class HtmlBlockMathRenderer {
6
6
 
7
+ get canRenderInline() {
8
+ // The custom MathJax ShadowAdaptor creates a new document and renders
9
+ // its contents to the DOM.
10
+ return false;
11
+ }
12
+
7
13
  get contextAttributes() {
8
14
  return [mathjaxContextAttribute];
9
15
  }
@@ -26,9 +32,11 @@ export class HtmlBlockMathRenderer {
26
32
  await loadMathJax(mathJaxConfig);
27
33
 
28
34
  const temp = document.createElement('div');
35
+ temp.style.display = 'none';
29
36
  temp.attachShadow({ mode: 'open' });
30
37
  temp.shadowRoot.innerHTML = `<div><mjx-doc><mjx-head></mjx-head><mjx-body>${elem.innerHTML}</mjx-body></mjx-doc></div>`;
31
38
 
39
+ elem.appendChild(temp);
32
40
  window.MathJax.typesetShadow(temp.shadowRoot);
33
41
  return temp.shadowRoot.firstChild;
34
42
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "1.207.3",
3
+ "version": "1.208.2",
4
4
  "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
5
5
  "repository": "https://github.com/BrightspaceUI/core.git",
6
6
  "publishConfig": {