@brightspace-ui/core 2.107.4 → 2.109.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.
Files changed (9) hide show
  1. package/components/dialog/README.md +1 -0
  2. package/components/dialog/dialog-mixin.js +27 -23
  3. package/components/dialog/dialog.js +6 -0
  4. package/components/html-block/README.md +11 -36
  5. package/components/html-block/demo/html-block-code.html +1 -3
  6. package/components/html-block/demo/html-block.html +238 -364
  7. package/components/html-block/html-block.js +18 -73
  8. package/custom-elements.json +13 -6
  9. package/package.json +1 -1
package/components/dialog/README.md CHANGED
@@ -71,6 +71,7 @@ The `d2l-dialog` element is a generic dialog that provides a slot for arbitrary
71
71
  |--|--|--|
72
72
  | `title-text` | String, required | Text displayed in the header of the dialog |
73
73
  | `async` | Boolean | Whether to render a loading-spinner and wait for state changes via [AsyncContainerMixin](../../mixins/async-container) |
74
+ | `full-height` | Boolean | Whether to render the dialog at the maximum height |
74
75
  | `opened` | Boolean | Whether or not the dialog is open |
75
76
  | `width` | Number, default: `600` | The preferred width (unit-less) for the dialog |
76
77
 
package/components/dialog/dialog-mixin.js CHANGED
@@ -43,10 +43,10 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
43
43
  */
44
44
  titleText: { type: String, attribute: 'title-text' },
45
45
  _autoSize: { state: true },
46
- _fullHeight: { state: true },
47
46
  _fullscreenWithin: { state: true },
48
47
  _height: { state: true },
49
48
  _inIframe: { type: Boolean, attribute: 'in-iframe', reflect: true },
49
+ _isFullHeight: { state: true },
50
50
  _left: { state: true },
51
51
  _margin: { state: true },
52
52
  _nestedShowing: { state: true },
@@ -66,24 +66,24 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
66
66
  this.opened = false;
67
67
  this._autoSize = true;
68
68
  this._dialogId = getUniqueId();
69
- this._fullHeight = false;
70
69
  this._fullscreenWithin = 0;
71
70
  this._handleMvcDialogOpen = this._handleMvcDialogOpen.bind(this);
72
71
  this._inIframe = false;
72
+ this._isFullHeight = false;
73
73
  this._height = 0;
74
+ this._left = 0;
74
75
  this._margin = { top: defaultMargin.top, right: defaultMargin.right, bottom: defaultMargin.bottom, left: defaultMargin.left };
75
- this._parentDialog = null;
76
76
  this._nestedShowing = false;
77
- this._state = null;
78
- this._left = 0;
79
77
  this._overflowBottom = false;
80
78
  this._overflowTop = false;
79
+ this._parentDialog = null;
81
80
  this._scroll = false;
81
+ this._state = null;
82
82
  this._top = 0;
83
- this._width = 0;
84
- this._useNative = (window.D2L.DialogMixin.hasNative && window.D2L.DialogMixin.preferNative);
85
- this._updateSize = this._updateSize.bind(this);
86
83
  this._updateOverflow = this._updateOverflow.bind(this);
84
+ this._updateSize = this._updateSize.bind(this);
85
+ this._useNative = (window.D2L.DialogMixin.hasNative && window.D2L.DialogMixin.preferNative);
86
+ this._width = 0;
87
87
  }
88
88
 
89
89
  async connectedCallback() {
@@ -252,24 +252,28 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
252
252
  : window.innerHeight - this._margin.top - this._margin.bottom;
253
253
  let preferredHeight = 2;
254
254
 
255
- const header = this.shadowRoot.querySelector('.d2l-dialog-header');
256
- if (header) preferredHeight += Math.ceil(header.getBoundingClientRect().height);
255
+ if (this.fullHeight) {
256
+ preferredHeight = 2 * this._width;
257
+ } else {
258
+ const header = this.shadowRoot.querySelector('.d2l-dialog-header');
259
+ if (header) preferredHeight += Math.ceil(header.getBoundingClientRect().height);
257
260
 
258
- const contentOuter = this.shadowRoot.querySelector('.d2l-dialog-content');
259
- const content = this.shadowRoot.querySelector('.d2l-dialog-content > div');
261
+ const contentOuter = this.shadowRoot.querySelector('.d2l-dialog-content');
262
+ const content = this.shadowRoot.querySelector('.d2l-dialog-content > div');
260
263
 
261
- /* required to properly calculate the preferred height when there are top
262
- margins at the beginning of slotted content */
263
- if (contentOuter && content) {
264
- const offsetDiff = content.offsetTop - contentOuter.offsetTop;
265
- preferredHeight += content.offsetHeight + offsetDiff;
266
- }
264
+ /* required to properly calculate the preferred height when there are top
265
+ margins at the beginning of slotted content */
266
+ if (contentOuter && content) {
267
+ const offsetDiff = content.offsetTop - contentOuter.offsetTop;
268
+ preferredHeight += content.offsetHeight + offsetDiff;
269
+ }
267
270
 
268
- const footer = this.shadowRoot.querySelector('.d2l-dialog-footer');
269
- if (footer) preferredHeight += Math.ceil(footer.getBoundingClientRect().height);
271
+ const footer = this.shadowRoot.querySelector('.d2l-dialog-footer');
272
+ if (footer) preferredHeight += Math.ceil(footer.getBoundingClientRect().height);
273
+ }
270
274
 
271
275
  const exceedsHeight = preferredHeight > availableHeight;
272
- this._fullHeight = !this._ifrauContextInfo && exceedsHeight;
276
+ this._isFullHeight = !this._ifrauContextInfo && exceedsHeight;
273
277
 
274
278
  const height = exceedsHeight ? availableHeight : preferredHeight;
275
279
  return height;
@@ -448,7 +452,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
448
452
  if (this._ifrauContextInfo) styles.top = `${this._top}px`;
449
453
  if (this._ifrauContextInfo) styles.bottom = 'auto';
450
454
  if (this._left) styles.left = `${this._left}px`;
451
- if (this._height && !this._fullHeight) styles.height = `${this._height}px`;
455
+ if (this._height && !this._isFullHeight) styles.height = `${this._height}px`;
452
456
  if (this._width) styles.width = `${this._width}px`;
453
457
  else styles.width = 'auto';
454
458
  } else if (iframeTopOverride && this._ifrauContextInfo) {
@@ -457,7 +461,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
457
461
 
458
462
  const dialogOuterClasses = {
459
463
  'd2l-dialog-outer': true,
460
- 'd2l-dialog-outer-full-height': this._autoSize && this._fullHeight,
464
+ 'd2l-dialog-outer-full-height': this._autoSize && this._isFullHeight,
461
465
  'd2l-dialog-outer-overflow-bottom': this._overflowBottom,
462
466
  'd2l-dialog-outer-overflow-top': this._overflowTop,
463
467
  'd2l-dialog-outer-nested': !this._useNative && this._parentDialog,
package/components/dialog/dialog.js CHANGED
@@ -33,6 +33,11 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
33
33
  */
34
34
  describeContent: { type: Boolean, attribute: 'describe-content' },
35
35
 
36
+ /**
37
+ * Whether to render the dialog at the maximum height
38
+ */
39
+ fullHeight: { type: Boolean, attribute: 'full-height' },
40
+
36
41
  /**
37
42
  * The preferred width (unit-less) for the dialog
38
43
  */
@@ -79,6 +84,7 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
79
84
  super();
80
85
  this.async = false;
81
86
  this.describeContent = false;
87
+ this.fullHeight = false;
82
88
  this.width = 600;
83
89
  this._handleResize = this._handleResize.bind(this);
84
90
  }
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 the `d2l-html-block` and the component will stamp the content into its local DOM where styles will be applied, and math typeset.
9
+ Pass the user-authored HTML into the `html` attribute of 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
@@ -14,8 +14,7 @@ Place the user-authored HTML within the `d2l-html-block` and the component will
14
14
  import '@brightspace-ui/core/components/html-block/html-block.js';
15
15
  import '@brightspace-ui/core/components/icons/icon.js';
16
16
  </script>
17
- <d2l-html-block>
18
- <!-- docs: start hidden content -->
17
+ <d2l-html-block html="
19
18
  <style>
20
19
  div {
21
20
  --d2l-icon-fill-color: var(--d2l-color-cinnabar);
@@ -35,37 +34,15 @@ Place the user-authored HTML within the `d2l-html-block` and the component will
35
34
  justify-content: center;
36
35
  }
37
36
  </style>
38
- <!-- docs: end hidden content --><div class="warning-container">
39
- <d2l-icon icon="tier3:alert"></d2l-icon>
37
+ <div class=&quot;warning-container&quot;>
38
+ <d2l-icon icon=&quot;tier3:alert&quot;></d2l-icon>
40
39
  <span>
41
40
  <b>Important:</b> user-authored HTML must be trusted or properly sanitized!
42
41
  </span>
43
- </div>
42
+ </div>">
44
43
  </d2l-html-block>
45
44
  ```
46
45
 
47
- To use `d2l-html-block` within another Lit component, use the [unsafeHTML](https://lit.dev/docs/api/directives/#unsafeHTML) directive to avoid escaping the HTML.
48
-
49
- ```html
50
- <script type="module">
51
- import { html, LitElement } from 'lit';
52
- import { unsafeHTML } from 'lit/directives/unsafe-html.js';
53
- import '@brightspace-ui/core/components/icons/icon.js';
54
-
55
- class SomeComponent extends LitElement {
56
- render() {
57
- return html`
58
- <d2l-html-block>
59
- ${unsafeHTML(this._unsafeHTML)}
60
- </d2l-html-block>`;
61
- }
62
- }
63
-
64
- customElements.define('d2l-some-component', SomeComponent);
65
- </script>
66
- <d2l-some-component></d2l-some-component>
67
- ```
68
-
69
46
  ### Rendering MathML and LaTeX
70
47
 
71
48
  Examples are provided to display how user-authored math can be embedded within your webpage. Note that rendering math requires the `mathjax` context to be set correctly. For testing and/or demo pages **ONLY**, you can import `@brightspace-ui/core/tools/mathjax-test-context.js` to set this context for you.
@@ -78,8 +55,8 @@ Examples are provided to display how user-authored math can be embedded within y
78
55
  import '@brightspace-ui/core/components/icons/icon.js';
79
56
  import '@brightspace-ui/core/tools/mathjax-test-context.js';
80
57
  </script>
81
- <d2l-html-block>
82
- <math xmlns="http://www.w3.org/1998/Math/MathML">
58
+ <d2l-html-block html="
59
+ <math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot;>
83
60
  <msqrt>
84
61
  <mn>3</mn>
85
62
  <mi>x</mi>
@@ -87,15 +64,15 @@ Examples are provided to display how user-authored math can be embedded within y
87
64
  <mn>1</mn>
88
65
  </msqrt>
89
66
  <mo>+</mo>
90
- <mo stretchy="false">(</mo>
67
+ <mo stretchy=&quot;false&quot;>(</mo>
91
68
  <mn>1</mn>
92
69
  <mo>+</mo>
93
70
  <mi>x</mi>
94
71
  <msup>
95
- <mo stretchy="false">)</mo>
72
+ <mo stretchy=&quot;false&quot;>)</mo>
96
73
  <mn>2</mn>
97
74
  </msup>
98
- </math>
75
+ </math>">
99
76
  </d2l-html-block>
100
77
  ```
101
78
 
@@ -107,9 +84,7 @@ Examples are provided to display how user-authored math can be embedded within y
107
84
  import '@brightspace-ui/core/components/html-block/html-block.js';
108
85
  import '@brightspace-ui/core/tools/mathjax-test-context.js';
109
86
  </script>
110
- <d2l-html-block>
111
- $$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
112
- </d2l-html-block>
87
+ <d2l-html-block html="$$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$"></d2l-html-block>
113
88
  ```
114
89
 
115
90
  ### Add Context Automatically to Demos and Tests
package/components/html-block/demo/html-block-code.html CHANGED
@@ -39,9 +39,7 @@ helloGrumpy('Wizard');</code></pre>
39
39
 
40
40
  <h2 class="d2l-heading-3">Inline Samples</h2>
41
41
 
42
- <d2l-html-block>
43
- The best type of donuts are he kind you assign in code, for example: <code class="d2l-code d2l-code-dark language-javascript">const jelly = 'donuts';</code>. The next best type of thing you can assign in code is stuff you can ferment. <code class="d2l-code d2l-code-dark language-javascript">let beer = hopsAndWater.map(ingredients => ferment(ingredients));</code>
44
- </d2l-html-block>
42
+ <d2l-html-block html="The best type of donuts are he kind you assign in code, for example: &lt;code class=&quot;d2l-code d2l-code-dark language-javascript&quot;&gt;const jelly = 'donuts';lgt;/code&gt;. The next best type of thing you can assign in code is stuff you can ferment. &lt;code class=&quot;d2l-code d2l-code-dark language-javascript&quot;&gt;let beer = hopsAndWater.map(ingredients => ferment(ingredients));&lt;/code&gt;"></d2l-html-block>
45
43
 
46
44
  </body>
47
45
  </html>
package/components/html-block/demo/html-block.html CHANGED
@@ -58,28 +58,27 @@
58
58
 
59
59
  <d2l-demo-snippet>
60
60
  <template>
61
- <d2l-html-block>
62
- Just a text node...
63
- <h1>heading 1</h1>
64
- <h2>heading 2</h2>
65
- <h3>heading 3</h3>
66
- <h4>heading 4</h4>
67
- <h5>heading 5</h5>
68
- <h6>heading 6</h6>
69
- <div><strong>strong</strong></div>
70
- <div><b>bold</b></div>
71
- <div>text</div>
72
- <pre>preformatted</pre>
73
- <p>paragraph</p>
74
- <ul>
75
- <li>unordered item 1</li>
76
- <li>unordered item 2</li>
77
- </ul>
78
- <ol>
79
- <li>ordered item 1</li>
80
- <li>ordered item 2</li>
81
- </ol>
82
- <div><a href="https://d2l.com">anchor</a></div>
61
+ <d2l-html-block html="Just a text node...
62
+ &lt;h1&gt;heading 1&lt;/h1&gt;
63
+ &lt;h2&gt;heading 2&lt;/h2&gt;
64
+ &lt;h3&gt;heading 3&lt;/h3&gt;
65
+ &lt;h4&gt;heading 4&lt;/h4&gt;
66
+ &lt;h5&gt;heading 5&lt;/h5&gt;
67
+ &lt;h6&gt;heading 6&lt;/h6&gt;
68
+ &lt;div&gt;&lt;strong&gt;strong&lt;/strong&gt;&lt;/div&gt;
69
+ &lt;div&gt;&lt;b&gt;bold&lt;/b&gt;&lt;/div&gt;
70
+ &lt;div&gt;text&lt;/div&gt;
71
+ &lt;pre&gt;preformatted&lt;/pre&gt;
72
+ &lt;p&gt;paragraph&lt;/p&gt;
73
+ &lt;ul&gt;
74
+ &lt;li&gt;unordered item 1&lt;/li&gt;
75
+ &lt;li&gt;unordered item 2&lt;/li&gt;
76
+ &lt;/ul&gt;
77
+ &lt;ol&gt;
78
+ &lt;li&gt;ordered item 1&lt;/li&gt;
79
+ &lt;li&gt;ordered item 2&lt;/li&gt;
80
+ &lt;/ol&gt;
81
+ &lt;div&gt;&lt;a href=&quot;https://d2l.com&quot;&gt;anchor&lt;/a&gt;&lt;/div&gt;">
83
82
  </d2l-html-block>
84
83
  </template>
85
84
  </d2l-demo-snippet>
@@ -88,28 +87,27 @@
88
87
 
89
88
  <d2l-demo-snippet>
90
89
  <template>
91
- <d2l-html-block compact>
92
- Just a text node...
93
- <h1>heading 1</h1>
94
- <h2>heading 2</h2>
95
- <h3>heading 3</h3>
96
- <h4>heading 4</h4>
97
- <h5>heading 5</h5>
98
- <h6>heading 6</h6>
99
- <div><strong>strong</strong></div>
100
- <div><b>bold</b></div>
101
- <div>text</div>
102
- <pre>preformatted</pre>
103
- <p>paragraph</p>
104
- <ul>
105
- <li>unordered item 1</li>
106
- <li>unordered item 2</li>
107
- </ul>
108
- <ol>
109
- <li>ordered item 1</li>
110
- <li>ordered item 2</li>
111
- </ol>
112
- <div><a href="https://d2l.com">anchor</a></div>
90
+ <d2l-html-block compact html="Just a text node...
91
+ &lt;h1&gt;heading 1&lt;/h1&gt;
92
+ &lt;h2&gt;heading 2&lt;/h2&gt;
93
+ &lt;h3&gt;heading 3&lt;/h3&gt;
94
+ &lt;h4&gt;heading 4&lt;/h4&gt;
95
+ &lt;h5&gt;heading 5&lt;/h5&gt;
96
+ &lt;h6&gt;heading 6&lt;/h6&gt;
97
+ &lt;div&gt;&lt;strong&gt;strong&lt;/strong&gt;&lt;/div&gt;
98
+ &lt;div&gt;&lt;b&gt;bold&lt;/b&gt;&lt;/div&gt;
99
+ &lt;div&gt;text&lt;/div&gt;
100
+ &lt;pre&gt;preformatted&lt;/pre&gt;
101
+ &lt;p&gt;paragraph&lt;/p&gt;
102
+ &lt;ul&gt;
103
+ &lt;li&gt;unordered item 1&lt;/li&gt;
104
+ &lt;li&gt;unordered item 2&lt;/li&gt;
105
+ &lt;/ul&gt;
106
+ &lt;ol&gt;
107
+ &lt;li&gt;ordered item 1&lt;/li&gt;
108
+ &lt;li&gt;ordered item 2&lt;/li&gt;
109
+ &lt;/ol&gt;
110
+ &lt;div&gt;&lt;a href=&quot;https://d2l.com&quot;&gt;anchor&lt;/a&gt;&lt;/div&gt;">
113
111
  </d2l-html-block>
114
112
  </template>
115
113
  </d2l-demo-snippet>
@@ -119,9 +117,7 @@
119
117
  <d2l-demo-snippet>
120
118
  <template>
121
119
  <span>Here's an inline html-block:</span>
122
- <d2l-html-block inline>
123
- I'm inline!
124
- </d2l-html-block>
120
+ <d2l-html-block inline html="I'm inline!"></d2l-html-block>
125
121
  <span>Pretty cool!</span>
126
122
  </template>
127
123
  </d2l-demo-snippet>
@@ -142,30 +138,29 @@
142
138
 
143
139
  <d2l-demo-snippet>
144
140
  <template>
145
- <d2l-html-block>
146
- <div style="font-size: 42px;">
147
- Just a text node...
148
- <h1>heading 1</h1>
149
- <h2>heading 2</h2>
150
- <h3>heading 3</h3>
151
- <h4>heading 4</h4>
152
- <h5>heading 5</h5>
153
- <h6>heading 6</h6>
154
- <div><strong>strong</strong></div>
155
- <div><b>bold</b></div>
156
- <div>text</div>
157
- <pre>preformatted</pre>
158
- <p>paragraph</p>
159
- <ul>
160
- <li>unordered item 1</li>
161
- <li>unordered item 2</li>
162
- </ul>
163
- <ol>
164
- <li>ordered item 1</li>
165
- <li>ordered item 2</li>
166
- </ol>
167
- <div><a href="https://d2l.com">anchor</a></div>
168
- </div>
141
+ <d2l-html-block html="Just a text node...
142
+ &lt;div style=&quot;font-size: 42px;&quot;&gt;
143
+ &lt;h1&gt;heading 1&lt;/h1&gt;
144
+ &lt;h2&gt;heading 2&lt;/h2&gt;
145
+ &lt;h3&gt;heading 3&lt;/h3&gt;
146
+ &lt;h4&gt;heading 4&lt;/h4&gt;
147
+ &lt;h5&gt;heading 5&lt;/h5&gt;
148
+ &lt;h6&gt;heading 6&lt;/h6&gt;
149
+ &lt;div&gt;&lt;strong&gt;strong&lt;/strong&gt;&lt;/div&gt;
150
+ &lt;div&gt;&lt;b&gt;bold&lt;/b&gt;&lt;/div&gt;
151
+ &lt;div&gt;text&lt;/div&gt;
152
+ &lt;pre&gt;preformatted&lt;/pre&gt;
153
+ &lt;p&gt;paragraph&lt;/p&gt;
154
+ &lt;ul&gt;
155
+ &lt;li&gt;unordered item 1&lt;/li&gt;
156
+ &lt;li&gt;unordered item 2&lt;/li&gt;
157
+ &lt;/ul&gt;
158
+ &lt;ol&gt;
159
+ &lt;li&gt;ordered item 1&lt;/li&gt;
160
+ &lt;li&gt;ordered item 2&lt;/li&gt;
161
+ &lt;/ol&gt;
162
+ &lt;div&gt;&lt;a href=&quot;https://d2l.com&quot;&gt;anchor&lt;/a&gt;&lt;/div&gt;
163
+ &lt;div&gt;">
169
164
  </d2l-html-block>
170
165
  </template>
171
166
  </d2l-demo-snippet>
@@ -174,120 +169,119 @@
174
169
 
175
170
  <d2l-demo-snippet>
176
171
  <template>
177
- <d2l-html-block>
178
- <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
179
- <mi>x</mi>
180
- <mo>=</mo>
181
- <mrow>
182
- <mfrac>
183
- <mrow>
184
- <mo>&#x2212;</mo>
185
- <mi>b</mi>
186
- <mo>&#xB1;</mo>
187
- <msqrt>
188
- <msup>
189
- <mi>b</mi>
190
- <mn>2</mn>
191
- </msup>
192
- <mo>&#x2212;</mo>
193
- <mn>4</mn>
194
- <mi>a</mi>
195
- <mi>c</mi>
196
- </msqrt>
197
- </mrow>
198
- <mrow>
199
- <mn>2</mn>
200
- <mi>a</mi>
201
- </mrow>
202
- </mfrac>
203
- </mrow>
204
- <mtext>.</mtext>
205
- <mspace linebreak="newline"></mspace>
206
- <msup>
207
- <mi>e</mi>
208
- <mrow>
209
- <mi>i</mi>
210
- <mi>π<!-- π --></mi>
211
- </mrow>
212
- </msup>
213
- <mo>+</mo>
214
- <mn>1</mn>
215
- <mo>=</mo>
216
- <mn>0</mn>
217
- </math>
218
- <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
219
- <msup>
220
- <mrow>
221
- <mo>(</mo>
222
- <mrow>
223
- <munderover>
224
- <mo>∑<!-- ∑ --></mo>
225
- <mrow class="MJX-TeXAtom-ORD">
226
- <mi>k</mi>
227
- <mo>=</mo>
228
- <mn>1</mn>
229
- </mrow>
230
- <mi>n</mi>
231
- </munderover>
232
- <msub>
233
- <mi>a</mi>
234
- <mi>k</mi>
235
- </msub>
236
- <msub>
237
- <mi>b</mi>
238
- <mi>k</mi>
239
- </msub>
240
- </mrow>
241
- <mo>)</mo>
242
- </mrow>
243
- <mrow class="MJX-TeXAtom-ORD">
244
- <mspace width="negativethinmathspace"></mspace>
245
- <mspace width="negativethinmathspace"></mspace>
246
- <mn>2</mn>
247
- </mrow>
248
- </msup>
249
- <mo>≤<!-- ≤ --></mo>
250
- <mrow>
251
- <mo>(</mo>
252
- <mrow>
253
- <munderover>
254
- <mo>∑<!-- ∑ --></mo>
255
- <mrow class="MJX-TeXAtom-ORD">
256
- <mi>k</mi>
257
- <mo>=</mo>
258
- <mn>1</mn>
259
- </mrow>
260
- <mi>n</mi>
261
- </munderover>
262
- <msubsup>
263
- <mi>a</mi>
264
- <mi>k</mi>
265
- <mn>2</mn>
266
- </msubsup>
267
- </mrow>
268
- <mo>)</mo>
269
- </mrow>
270
- <mrow>
271
- <mo>(</mo>
272
- <mrow>
273
- <munderover>
274
- <mo>∑<!-- ∑ --></mo>
275
- <mrow class="MJX-TeXAtom-ORD">
276
- <mi>k</mi>
277
- <mo>=</mo>
278
- <mn>1</mn>
279
- </mrow>
280
- <mi>n</mi>
281
- </munderover>
282
- <msubsup>
283
- <mi>b</mi>
284
- <mi>k</mi>
285
- <mn>2</mn>
286
- </msubsup>
287
- </mrow>
288
- <mo>)</mo>
289
- </mrow>
290
- </math>
172
+ <d2l-html-block html="&lt;math xmlns=&#34;http://www.w3.org/1998/Math/MathML&#34; display=&#34;block&#34;&gt;&lt;mi&gt;x&lt;/mi&gt;
173
+ &lt;mo&gt;=&lt;/mo&gt;
174
+ &lt;mrow&gt;
175
+ &lt;mfrac&gt;
176
+ &lt;mrow&gt;
177
+ &lt;mo&gt;&amp;#x2212;&lt;/mo&gt;
178
+ &lt;mi&gt;b&lt;/mi&gt;
179
+ &lt;mo&gt;&amp;#xB1;&lt;/mo&gt;
180
+ &lt;msqrt&gt;
181
+ &lt;msup&gt;
182
+ &lt;mi&gt;b&lt;/mi&gt;
183
+ &lt;mn&gt;2&lt;/mn&gt;
184
+ &lt;/msup&gt;
185
+ &lt;mo&gt;&amp;#x2212;&lt;/mo&gt;
186
+ &lt;mn&gt;4&lt;/mn&gt;
187
+ &lt;mi&gt;a&lt;/mi&gt;
188
+ &lt;mi&gt;c&lt;/mi&gt;
189
+ &lt;/msqrt&gt;
190
+ &lt;/mrow&gt;
191
+ &lt;mrow&gt;
192
+ &lt;mn&gt;2&lt;/mn&gt;
193
+ &lt;mi&gt;a&lt;/mi&gt;
194
+ &lt;/mrow&gt;
195
+ &lt;/mfrac&gt;
196
+ &lt;/mrow&gt;
197
+ &lt;mtext&gt;.&lt;/mtext&gt;
198
+ &lt;mspace linebreak=&#34;newline&#34;&gt;&lt;/mspace&gt;
199
+ &lt;msup&gt;
200
+ &lt;mi&gt;e&lt;/mi&gt;
201
+ &lt;mrow&gt;
202
+ &lt;mi&gt;i&lt;/mi&gt;
203
+ &lt;mi&gt;π&lt;!-- π --&gt;&lt;/mi&gt;
204
+ &lt;/mrow&gt;
205
+ &lt;/msup&gt;
206
+ &lt;mo&gt;+&lt;/mo&gt;
207
+ &lt;mn&gt;1&lt;/mn&gt;
208
+ &lt;mo&gt;=&lt;/mo&gt;
209
+ &lt;mn&gt;0&lt;/mn&gt;
210
+ &lt;/math&gt;
211
+ &lt;math xmlns=&#34;http://www.w3.org/1998/Math/MathML&#34; display=&#34;block&#34;&gt;
212
+ &lt;msup&gt;
213
+ &lt;mrow&gt;
214
+ &lt;mo&gt;(&lt;/mo&gt;
215
+ &lt;mrow&gt;
216
+ &lt;munderover&gt;
217
+ &lt;mo&gt;∑&lt;!-- ∑ --&gt;&lt;/mo&gt;
218
+ &lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
219
+ &lt;mi&gt;k&lt;/mi&gt;
220
+ &lt;mo&gt;=&lt;/mo&gt;
221
+ &lt;mn&gt;1&lt;/mn&gt;
222
+ &lt;/mrow&gt;
223
+ &lt;mi&gt;n&lt;/mi&gt;
224
+ &lt;/munderover&gt;
225
+ &lt;msub&gt;
226
+ &lt;mi&gt;a&lt;/mi&gt;
227
+ &lt;mi&gt;k&lt;/mi&gt;
228
+ &lt;/msub&gt;
229
+ &lt;msub&gt;
230
+ &lt;mi&gt;b&lt;/mi&gt;
231
+ &lt;mi&gt;k&lt;/mi&gt;
232
+ &lt;/msub&gt;
233
+ &lt;/mrow&gt;
234
+ &lt;mo&gt;)&lt;/mo&gt;
235
+ &lt;/mrow&gt;
236
+ &lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
237
+ &lt;mspace width=&#34;negativethinmathspace&#34;&gt;&lt;/mspace&gt;
238
+ &lt;mspace width=&#34;negativethinmathspace&#34;&gt;&lt;/mspace&gt;
239
+ &lt;mn&gt;2&lt;/mn&gt;
240
+ &lt;/mrow&gt;
241
+ &lt;/msup&gt;
242
+ &lt;mo&gt;≤&lt;!-- ≤ --&gt;&lt;/mo&gt;
243
+ &lt;mrow&gt;
244
+ &lt;mo&gt;(&lt;/mo&gt;
245
+ &lt;mrow&gt;
246
+ &lt;munderover&gt;
247
+ &lt;mo&gt;∑&lt;!-- ∑ --&gt;&lt;/mo&gt;
248
+ &lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
249
+ &lt;mi&gt;k&lt;/mi&gt;
250
+ &lt;mo&gt;=&lt;/mo&gt;
251
+ &lt;mn&gt;1&lt;/mn&gt;
252
+ &lt;/mrow&gt;
253
+ &lt;mi&gt;n&lt;/mi&gt;
254
+ &lt;/munderover&gt;
255
+ &lt;msubsup&gt;
256
+ &lt;mi&gt;a&lt;/mi&gt;
257
+ &lt;mi&gt;k&lt;/mi&gt;
258
+ &lt;mn&gt;2&lt;/mn&gt;
259
+ &lt;/msubsup&gt;
260
+ &lt;/mrow&gt;
261
+ &lt;mo&gt;)&lt;/mo&gt;
262
+ &lt;/mrow&gt;
263
+ &lt;mrow&gt;
264
+ &lt;mo&gt;(&lt;/mo&gt;
265
+ &lt;mrow&gt;
266
+ &lt;munderover&gt;
267
+ &lt;mo&gt;∑&lt;!-- ∑ --&gt;&lt;/mo&gt;
268
+ &lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
269
+ &lt;mi&gt;k&lt;/mi&gt;
270
+ &lt;mo&gt;=&lt;/mo&gt;
271
+ &lt;mn&gt;1&lt;/mn&gt;
272
+ &lt;/mrow&gt;
273
+ &lt;mi&gt;n&lt;/mi&gt;
274
+ &lt;/munderover&gt;
275
+ &lt;msubsup&gt;
276
+ &lt;mi&gt;b&lt;/mi&gt;
277
+ &lt;mi&gt;k&lt;/mi&gt;
278
+ &lt;mn&gt;2&lt;/mn&gt;
279
+ &lt;/msubsup&gt;
280
+ &lt;/mrow&gt;
281
+ &lt;mo&gt;)&lt;/mo&gt;
282
+ &lt;/mrow&gt;
283
+ &lt;/math&gt;
284
+ &lt;div&gt;$$ {\color{red}x} + {\color{blue}y} = {\color{green}z} $$&lt;/div&gt;">
291
285
  </d2l-html-block>
292
286
  </template>
293
287
  </d2l-demo-snippet>
@@ -410,178 +404,32 @@
410
404
 
411
405
  <d2l-demo-snippet>
412
406
  <template>
413
- <d2l-html-block>
414
- An equation...
415
- <math xmlns="http://www.w3.org/1998/Math/MathML">
416
- <msqrt>
417
- <mn>3</mn>
418
- <mi>x</mi>
419
- <mo>&#x2212;</mo>
420
- <mn>1</mn>
421
- </msqrt>
422
- <mo>+</mo>
423
- <mo stretchy="false">(</mo>
424
- <mn>1</mn>
425
- <mo>+</mo>
426
- <mi>x</mi>
427
- <msup>
428
- <mo stretchy="false">)</mo>
429
- <mn>2</mn>
430
- </msup>
431
- </math> embedded inline with text... and showing placement of indicies for summations
432
- <math xmlns="http://www.w3.org/1998/Math/MathML">
433
- <msup>
434
- <mrow>
435
- <mo>(</mo>
436
- <mrow>
437
- <munderover>
438
- <mo>∑<!-- ∑ --></mo>
439
- <mrow class="MJX-TeXAtom-ORD">
440
- <mi>k</mi>
441
- <mo>=</mo>
442
- <mn>1</mn>
443
- </mrow>
444
- <mi>n</mi>
445
- </munderover>
446
- <msub>
447
- <mi>a</mi>
448
- <mi>k</mi>
449
- </msub>
450
- <msub>
451
- <mi>b</mi>
452
- <mi>k</mi>
453
- </msub>
454
- </mrow>
455
- <mo>)</mo>
456
- </mrow>
457
- <mrow class="MJX-TeXAtom-ORD">
458
- <mspace width="negativethinmathspace"></mspace>
459
- <mspace width="negativethinmathspace"></mspace>
460
- <mn>2</mn>
461
- </mrow>
462
- </msup>
463
- <mo>≤<!-- ≤ --></mo>
464
- <mrow>
465
- <mo>(</mo>
466
- <mrow>
467
- <munderover>
468
- <mo>∑<!-- ∑ --></mo>
469
- <mrow class="MJX-TeXAtom-ORD">
470
- <mi>k</mi>
471
- <mo>=</mo>
472
- <mn>1</mn>
473
- </mrow>
474
- <mi>n</mi>
475
- </munderover>
476
- <msubsup>
477
- <mi>a</mi>
478
- <mi>k</mi>
479
- <mn>2</mn>
480
- </msubsup>
481
- </mrow>
482
- <mo>)</mo>
483
- </mrow>
484
- <mrow>
485
- <mo>(</mo>
486
- <mrow>
487
- <munderover>
488
- <mo>∑<!-- ∑ --></mo>
489
- <mrow class="MJX-TeXAtom-ORD">
490
- <mi>k</mi>
491
- <mo>=</mo>
492
- <mn>1</mn>
493
- </mrow>
494
- <mi>n</mi>
495
- </munderover>
496
- <msubsup>
497
- <mi>b</mi>
498
- <mi>k</mi>
499
- <mn>2</mn>
500
- </msubsup>
501
- </mrow>
502
- <mo>)</mo>
503
- </mrow>
504
- </math> and other symbols.
505
- </d2l-html-block>
506
- </template>
507
- </d2l-demo-snippet>
508
-
509
- <h2>HTML Block (LaTeX math)</h2>
510
-
511
- <d2l-demo-snippet>
512
- <template>
513
- <d2l-html-block>
514
- <div>$$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$</div>
515
- <div>$$ {\color{red}x} + {\color{blue}y} = {\color{green}z} $$</div>
516
- </d2l-html-block>
517
- </template>
518
- </d2l-demo-snippet>
519
-
520
- <h2>HTML Block (LaTeX inline math)</h2>
521
-
522
- <d2l-demo-snippet>
523
- <template>
524
- <d2l-html-block>
525
- <div>
526
- An equation rendered using LaTeX...
527
- \( f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x \)
528
- ... and some text ...
529
- </div>
530
- </d2l-html-block>
531
- </template>
532
- </d2l-demo-snippet>
533
-
534
- <h2>HTML Block (html prop)</h2>
535
-
536
- <d2l-demo-snippet>
537
- <template>
538
- <d2l-html-block html="&lt;math xmlns=&#34;http://www.w3.org/1998/Math/MathML&#34; display=&#34;block&#34;&gt;&lt;mi&gt;x&lt;/mi&gt;
539
- &lt;mo&gt;=&lt;/mo&gt;
540
- &lt;mrow&gt;
541
- &lt;mfrac&gt;
542
- &lt;mrow&gt;
543
- &lt;mo&gt;&amp;#x2212;&lt;/mo&gt;
544
- &lt;mi&gt;b&lt;/mi&gt;
545
- &lt;mo&gt;&amp;#xB1;&lt;/mo&gt;
546
- &lt;msqrt&gt;
547
- &lt;msup&gt;
548
- &lt;mi&gt;b&lt;/mi&gt;
549
- &lt;mn&gt;2&lt;/mn&gt;
550
- &lt;/msup&gt;
551
- &lt;mo&gt;&amp;#x2212;&lt;/mo&gt;
552
- &lt;mn&gt;4&lt;/mn&gt;
553
- &lt;mi&gt;a&lt;/mi&gt;
554
- &lt;mi&gt;c&lt;/mi&gt;
555
- &lt;/msqrt&gt;
556
- &lt;/mrow&gt;
557
- &lt;mrow&gt;
558
- &lt;mn&gt;2&lt;/mn&gt;
559
- &lt;mi&gt;a&lt;/mi&gt;
560
- &lt;/mrow&gt;
561
- &lt;/mfrac&gt;
562
- &lt;/mrow&gt;
563
- &lt;mtext&gt;.&lt;/mtext&gt;
564
- &lt;mspace linebreak=&#34;newline&#34;&gt;&lt;/mspace&gt;
565
- &lt;msup&gt;
566
- &lt;mi&gt;e&lt;/mi&gt;
567
- &lt;mrow&gt;
568
- &lt;mi&gt;i&lt;/mi&gt;
569
- &lt;mi&gt;π&lt;!-- π --&gt;&lt;/mi&gt;
570
- &lt;/mrow&gt;
571
- &lt;/msup&gt;
572
- &lt;mo&gt;+&lt;/mo&gt;
573
- &lt;mn&gt;1&lt;/mn&gt;
574
- &lt;mo&gt;=&lt;/mo&gt;
575
- &lt;mn&gt;0&lt;/mn&gt;
576
- &lt;/math&gt;
577
- &lt;math xmlns=&#34;http://www.w3.org/1998/Math/MathML&#34; display=&#34;block&#34;&gt;
407
+ <d2l-html-block html="An equation...
408
+ &lt;math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot;&gt;
409
+ &lt;msqrt&gt;
410
+ &lt;mn&gt;3&lt;/mn&gt;
411
+ &lt;mi&gt;x&lt;/mi&gt;
412
+ &lt;mo&gt;&#x2212;&lt;/mo&gt;
413
+ &lt;mn&gt;1&lt;/mn&gt;
414
+ &lt;/msqrt&gt;
415
+ &lt;mo&gt;+&lt;/mo&gt;
416
+ &lt;mo stretchy=&quot;false&quot;&gt;(&lt;/mo&gt;
417
+ &lt;mn&gt;1&lt;/mn&gt;
418
+ &lt;mo&gt;+&lt;/mo&gt;
419
+ &lt;mi&gt;x&lt;/mi&gt;
420
+ &lt;msup&gt;
421
+ &lt;mo stretchy=&quot;false&quot;&gt;)&lt;/mo&gt;
422
+ &lt;mn&gt;2&lt;/mn&gt;
423
+ &lt;/msup&gt;
424
+ &lt;/math&gt; embedded inline with text... and showing placement of indicies for summations
425
+ &lt;math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot;&gt;
578
426
  &lt;msup&gt;
579
427
  &lt;mrow&gt;
580
428
  &lt;mo&gt;(&lt;/mo&gt;
581
429
  &lt;mrow&gt;
582
430
  &lt;munderover&gt;
583
431
  &lt;mo&gt;∑&lt;!-- ∑ --&gt;&lt;/mo&gt;
584
- &lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
432
+ &lt;mrow class=&quot;MJX-TeXAtom-ORD&quot;&gt;
585
433
  &lt;mi&gt;k&lt;/mi&gt;
586
434
  &lt;mo&gt;=&lt;/mo&gt;
587
435
  &lt;mn&gt;1&lt;/mn&gt;
@@ -599,9 +447,9 @@
599
447
  &lt;/mrow&gt;
600
448
  &lt;mo&gt;)&lt;/mo&gt;
601
449
  &lt;/mrow&gt;
602
- &lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
603
- &lt;mspace width=&#34;negativethinmathspace&#34;&gt;&lt;/mspace&gt;
604
- &lt;mspace width=&#34;negativethinmathspace&#34;&gt;&lt;/mspace&gt;
450
+ &lt;mrow class=&quot;MJX-TeXAtom-ORD&quot;&gt;
451
+ &lt;mspace width=&quot;negativethinmathspace&quot;&gt;&lt;/mspace&gt;
452
+ &lt;mspace width=&quot;negativethinmathspace&quot;&gt;&lt;/mspace&gt;
605
453
  &lt;mn&gt;2&lt;/mn&gt;
606
454
  &lt;/mrow&gt;
607
455
  &lt;/msup&gt;
@@ -611,7 +459,7 @@
611
459
  &lt;mrow&gt;
612
460
  &lt;munderover&gt;
613
461
  &lt;mo&gt;∑&lt;!-- ∑ --&gt;&lt;/mo&gt;
614
- &lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
462
+ &lt;mrow class=&quot;MJX-TeXAtom-ORD&quot;&gt;
615
463
  &lt;mi&gt;k&lt;/mi&gt;
616
464
  &lt;mo&gt;=&lt;/mo&gt;
617
465
  &lt;mn&gt;1&lt;/mn&gt;
@@ -631,7 +479,7 @@
631
479
  &lt;mrow&gt;
632
480
  &lt;munderover&gt;
633
481
  &lt;mo&gt;∑&lt;!-- ∑ --&gt;&lt;/mo&gt;
634
- &lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
482
+ &lt;mrow class=&quot;MJX-TeXAtom-ORD&quot;&gt;
635
483
  &lt;mi&gt;k&lt;/mi&gt;
636
484
  &lt;mo&gt;=&lt;/mo&gt;
637
485
  &lt;mn&gt;1&lt;/mn&gt;
@@ -646,9 +494,39 @@
646
494
  &lt;/mrow&gt;
647
495
  &lt;mo&gt;)&lt;/mo&gt;
648
496
  &lt;/mrow&gt;
649
- &lt;/math&gt;
650
- &lt;div&gt;$$ {\color{red}x} + {\color{blue}y} = {\color{green}z} $$&lt;/div&gt;
651
- &lt;pre class=&#34;d2l-code d2l-code-dark&#34;&gt;&lt;code class=&#34;language-javascript&#34;&gt;function helloGrumpy(name) {
497
+ &lt;/math&gt; and other symbols.">
498
+ </d2l-html-block>
499
+ </template>
500
+ </d2l-demo-snippet>
501
+
502
+ <h2>HTML Block (LaTeX math)</h2>
503
+
504
+ <d2l-demo-snippet>
505
+ <template>
506
+ <d2l-html-block html="&lt;div&gt;$$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$&lt;/div&gt;
507
+ &lt;div&gt;$$ {\color{red}x} + {\color{blue}y} = {\color{green}z} $$&lt;/div&gt;">
508
+ </d2l-html-block>
509
+ </template>
510
+ </d2l-demo-snippet>
511
+
512
+ <h2>HTML Block (LaTeX inline math)</h2>
513
+
514
+ <d2l-demo-snippet>
515
+ <template>
516
+ <d2l-html-block html="&lt;div&gt;
517
+ An equation rendered using LaTeX...
518
+ \( f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x \)
519
+ ... and some text ...
520
+ &lt;/div&gt;">
521
+ </d2l-html-block>
522
+ </template>
523
+ </d2l-demo-snippet>
524
+
525
+ <h2>HTML Block (code)</h2>
526
+
527
+ <d2l-demo-snippet>
528
+ <template>
529
+ <d2l-html-block html="&lt;pre class=&#34;d2l-code d2l-code-dark&#34;&gt;&lt;code class=&#34;language-javascript&#34;&gt;function helloGrumpy(name) {
652
530
  console.log(`Hi there ${name}.`);
653
531
  }
654
532
  helloGrumpy('Wizard');&lt;/code&gt;&lt;/pre&gt;">
@@ -665,7 +543,6 @@ helloGrumpy('Wizard');&lt;/code&gt;&lt;/pre&gt;">
665
543
  </d2l-demo-snippet>
666
544
 
667
545
  <d2l-code-view language="javascript">
668
- import { unsafeHTML } from 'lit/directives/unsafe-html.js';
669
546
  import { html, LitElement } from 'lit';
670
547
 
671
548
  class SomeComponent extends LitElement {
@@ -687,7 +564,6 @@ helloGrumpy('Wizard');&lt;/code&gt;&lt;/pre&gt;">
687
564
 
688
565
  <script type="module">
689
566
  import { html, LitElement } from 'lit';
690
- import { unsafeHTML } from 'lit/directives/unsafe-html.js';
691
567
 
692
568
  class SomeComponent extends LitElement {
693
569
 
@@ -806,9 +682,7 @@ helloGrumpy('Wizard');&lt;/code&gt;&lt;/pre&gt;">
806
682
 
807
683
  render() {
808
684
  return html`
809
- <d2l-html-block>
810
- ${unsafeHTML(this._htmlSnippets[this._updateCount])}
811
- </d2l-html-block>
685
+ <d2l-html-block html="${this._htmlSnippets[this._updateCount]}"></d2l-html-block>
812
686
  <button @click="${this._updateTemplateContent}" ?disabled="${this._updateCount === 6}">update content</button>`;
813
687
  }
814
688
 
package/components/html-block/html-block.js CHANGED
@@ -134,7 +134,6 @@ const getRenderers = async() => {
134
134
 
135
135
  /**
136
136
  * A component for displaying user-authored HTML.
137
- * @slot - Provide your user-authored HTML
138
137
  */
139
138
  class HtmlBlock extends LitElement {
140
139
 
@@ -194,7 +193,6 @@ class HtmlBlock extends LitElement {
194
193
  this.html = '';
195
194
  this.inline = false;
196
195
  this.noDeferredRendering = false;
197
- this._hasSlottedContent = false;
198
196
 
199
197
  this._contextObserverControllerResolve = undefined;
200
198
  this._contextObserverControllerInitialized = new Promise(resolve => {
@@ -210,33 +208,14 @@ class HtmlBlock extends LitElement {
210
208
  });
211
209
  }
212
210
 
213
- connectedCallback() {
214
- super.connectedCallback();
215
-
216
- if (!this._contentObserver || this.noDeferredRendering) return;
217
-
218
- const slot = this.shadowRoot.querySelector('slot');
219
- if (slot) {
220
- const slottedNodes = slot.assignedNodes({ flatten: true });
221
- this._hasSlottedContent = this._hasSlottedElements(slottedNodes);
222
-
223
- slottedNodes.forEach(
224
- node => this._contentObserver.observe(node, { attributes: true, childList: true, subtree: true })
225
- );
226
- }
227
- }
228
-
229
- disconnectedCallback() {
230
- super.disconnectedCallback();
231
- if (this._contentObserver) this._contentObserver.disconnect();
232
- }
233
-
234
211
  firstUpdated(changedProperties) {
235
212
  super.firstUpdated(changedProperties);
236
213
  this._updateContextKeys();
237
214
  }
238
215
 
239
216
  render() {
217
+ this._validateHtml();
218
+
240
219
  const renderContainerClasses = {
241
220
  'd2l-html-block-rendered': true,
242
221
  'd2l-html-block-compact': this.compact
@@ -244,17 +223,17 @@ class HtmlBlock extends LitElement {
244
223
 
245
224
  return html`
246
225
  <div class="${classMap(renderContainerClasses)}"></div>
247
- <slot @slotchange="${this._handleSlotChange}"></slot>
226
+ ${this.noDeferredRendering ? html`<slot @slotchange="${this._handleSlotChange}"></slot>` : ''}
248
227
  `;
249
228
  }
250
229
 
251
230
  async updated(changedProperties) {
252
231
  super.updated(changedProperties);
253
- if (changedProperties.has('html') && this.html !== undefined && this.html !== null && !this._hasSlottedContent) {
232
+ if (changedProperties.has('html') && this.html !== undefined && this.html !== null && !this.noDeferredRendering) {
254
233
  await this._updateRenderContainer();
255
234
  }
256
235
  if (await this._contextChanged()) {
257
- if (this._hasSlottedContent) this._render();
236
+ if (this.noDeferredRendering) this._renderInline();
258
237
  else if (this.html !== undefined && this.html !== null) {
259
238
  await this._updateRenderContainer();
260
239
  }
@@ -279,22 +258,8 @@ class HtmlBlock extends LitElement {
279
258
  }
280
259
 
281
260
  async _handleSlotChange(e) {
282
- if (!e.target || !this.shadowRoot) return;
283
- const slot = this.shadowRoot.querySelector('slot');
284
- const slottedNodes = slot.assignedNodes({ flatten: true });
285
-
286
- if (!this.html && this._hasSlottedElements(slottedNodes)) {
287
- this._hasSlottedContent = true;
288
- await this._render(e.target);
289
- } else {
290
- this._hasSlottedContent = false;
291
- }
292
- }
293
-
294
- _hasSlottedElements(slottedNodes) {
295
- if (!slottedNodes || slottedNodes.length === 0) return false;
296
- if (slottedNodes.filter(node => node.nodeType === Node.ELEMENT_NODE || node.textContent).length === 0) return false;
297
- return true;
261
+ if (!e.target || !this.shadowRoot || !this.noDeferredRendering) return;
262
+ await this._renderInline(e.target);
298
263
  }
299
264
 
300
265
  async _processRenderers(elem) {
@@ -316,11 +281,6 @@ class HtmlBlock extends LitElement {
316
281
  }
317
282
  }
318
283
 
319
- async _render(slot) {
320
- if (this.noDeferredRendering) await this._renderInline(slot);
321
- else this._stamp(slot);
322
- }
323
-
324
284
  async _renderInline(slot) {
325
285
  if (!this.shadowRoot) return;
326
286
  if (!slot) slot = this.shadowRoot.querySelector('slot');
@@ -332,32 +292,6 @@ class HtmlBlock extends LitElement {
332
292
  await this._processRenderers(noDeferredRenderingContainer);
333
293
  }
334
294
 
335
- _stamp(slot) {
336
- const renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');
337
-
338
- const stampHTML = async nodes => {
339
- renderContainer.innerHTML = '';
340
- if (!nodes || nodes.length === 0) return;
341
-
342
- // Nodes must be cloned into the render container before processing, as
343
- // some renderers require connected nodes (e.g. MathJax).
344
- nodes.forEach(node => renderContainer.appendChild(node.cloneNode(true)));
345
- await this._processRenderers(renderContainer);
346
- };
347
-
348
- if (this._contentObserver) this._contentObserver.disconnect();
349
-
350
- if (!slot) slot = this.shadowRoot.querySelector('slot');
351
- const slottedNodes = slot.assignedNodes({ flatten: true });
352
-
353
- this._contentObserver = new MutationObserver(() => stampHTML(slottedNodes));
354
- slottedNodes.forEach(
355
- node => this._contentObserver.observe(node, { attributes: true, childList: true, subtree: true })
356
- );
357
-
358
- stampHTML(slottedNodes);
359
- }
360
-
361
295
  _updateContextKeys() {
362
296
  if (!this._contextObserverController) return;
363
297
  if (!this._contextKeys) this._contextKeys = new Map();
@@ -373,6 +307,17 @@ class HtmlBlock extends LitElement {
373
307
  await this._processRenderers(renderContainer);
374
308
  }
375
309
 
310
+ _validateHtml() {
311
+ if (this._validatingHtmlTimeout) clearTimeout(this._validatingHtmlTimeout);
312
+
313
+ this._validatingHtmlTimeout = setTimeout(() => {
314
+ this._validatingHtmlTimeout = undefined;
315
+ if (this.html && this.noDeferredRendering) {
316
+ throw new Error('<d2l-html-block>: "html" attribute is not supported with "no-deferred-rendering".');
317
+ }
318
+ }, 3000);
319
+ }
320
+
376
321
  }
377
322
 
378
323
  customElements.define('d2l-html-block', HtmlBlock);
package/custom-elements.json CHANGED
@@ -2020,6 +2020,12 @@
2020
2020
  "type": "boolean",
2021
2021
  "default": "false"
2022
2022
  },
2023
+ {
2024
+ "name": "full-height",
2025
+ "description": "Whether to render the dialog at the maximum height",
2026
+ "type": "boolean",
2027
+ "default": "false"
2028
+ },
2023
2029
  {
2024
2030
  "name": "width",
2025
2031
  "description": "The preferred width (unit-less) for the dialog",
@@ -2053,6 +2059,13 @@
2053
2059
  "type": "boolean",
2054
2060
  "default": "false"
2055
2061
  },
2062
+ {
2063
+ "name": "fullHeight",
2064
+ "attribute": "full-height",
2065
+ "description": "Whether to render the dialog at the maximum height",
2066
+ "type": "boolean",
2067
+ "default": "false"
2068
+ },
2056
2069
  {
2057
2070
  "name": "width",
2058
2071
  "attribute": "width",
@@ -4367,12 +4380,6 @@
4367
4380
  "type": "Boolean",
4368
4381
  "default": "false"
4369
4382
  }
4370
- ],
4371
- "slots": [
4372
- {
4373
- "name": "",
4374
- "description": "Provide your user-authored HTML"
4375
- }
4376
4383
  ]
4377
4384
  },
4378
4385
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "2.107.4",
3
+ "version": "2.109.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",