@brightspace-ui/core 1.219.4 → 1.220.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.
- package/components/dialog/dialog-mixin.js +0 -1
- package/components/filter/filter.js +3 -3
- package/components/hierarchical-view/hierarchical-view-mixin.js +2 -2
- package/components/html-block/README.md +48 -54
- package/components/html-block/demo/html-block-template.html +634 -0
- package/components/html-block/demo/html-block.html +213 -223
- package/components/html-block/html-block.js +31 -15
- package/components/inputs/input-radio-styles.js +1 -1
- package/custom-elements.json +1 -1
- package/helpers/dismissible.js +2 -2
- package/helpers/mathjax.js +11 -3
- package/lang/es.js +1 -1
- package/lang/fr-fr.js +1 -1
- package/lang/ja.js +1 -1
- package/lang/nl.js +1 -1
- package/lang/zh.js +1 -1
- package/package.json +1 -1
|
@@ -54,28 +54,27 @@
|
|
|
54
54
|
<d2l-demo-snippet>
|
|
55
55
|
<template>
|
|
56
56
|
<d2l-html-block>
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
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
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
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
|
-
<
|
|
120
|
-
<
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
<
|
|
124
|
-
<mfrac>
|
|
125
|
-
<mrow>
|
|
126
|
-
<mo>−</mo>
|
|
127
|
-
<mi>b</mi>
|
|
128
|
-
<mo>±</mo>
|
|
129
|
-
<msqrt>
|
|
130
|
-
<msup>
|
|
131
|
-
<mi>b</mi>
|
|
132
|
-
<mn>2</mn>
|
|
133
|
-
</msup>
|
|
134
|
-
<mo>−</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
|
|
152
|
-
<
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
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>−</mo>
|
|
124
|
+
<mi>b</mi>
|
|
125
|
+
<mo>±</mo>
|
|
126
|
+
<msqrt>
|
|
127
|
+
<msup>
|
|
167
128
|
<mi>b</mi>
|
|
168
|
-
<
|
|
169
|
-
</
|
|
170
|
-
|
|
171
|
-
|
|
129
|
+
<mn>2</mn>
|
|
130
|
+
</msup>
|
|
131
|
+
<mo>−</mo>
|
|
132
|
+
<mn>4</mn>
|
|
133
|
+
<mi>a</mi>
|
|
134
|
+
<mi>c</mi>
|
|
135
|
+
</msqrt>
|
|
172
136
|
</mrow>
|
|
173
|
-
<mrow
|
|
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
|
-
</
|
|
179
|
-
|
|
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
|
-
<
|
|
159
|
+
<msub>
|
|
193
160
|
<mi>a</mi>
|
|
194
161
|
<mi>k</mi>
|
|
195
|
-
|
|
196
|
-
|
|
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
|
-
<
|
|
202
|
-
|
|
203
|
-
<
|
|
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
|
-
<
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
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
|
-
|
|
221
|
-
|
|
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
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
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>−</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
|
-
<
|
|
397
|
-
|
|
398
|
-
<
|
|
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
|
-
<
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
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
|
-
<
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
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
|
-
<
|
|
434
|
-
</
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
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
|
-
<
|
|
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
|
-
<
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
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
|
<d2l-html-block>
|
|
486
|
-
|
|
476
|
+
${unsafeHTML(this._someHTML)}
|
|
487
477
|
</d2l-html-block>
|
|
488
478
|
<button ...>update content</button>`;
|
|
489
479
|
`;
|
|
@@ -617,7 +607,7 @@
|
|
|
617
607
|
render() {
|
|
618
608
|
return html`
|
|
619
609
|
<d2l-html-block>
|
|
620
|
-
|
|
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
|
}
|
|
@@ -118,7 +118,7 @@ const getRenderers = () => {
|
|
|
118
118
|
|
|
119
119
|
/**
|
|
120
120
|
* A component for displaying user-authored HTML.
|
|
121
|
-
* @slot - Provide
|
|
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,31 @@ class HtmlBlock extends LitElement {
|
|
|
178
175
|
super.connectedCallback();
|
|
179
176
|
if (this._contextObserverController) this._contextObserverController.hostConnected();
|
|
180
177
|
|
|
181
|
-
if (!this.
|
|
178
|
+
if (!this._contentObserver || this.noDeferredRendering) return;
|
|
182
179
|
|
|
183
180
|
const template = this._findSlottedElement('TEMPLATE');
|
|
184
|
-
if (template) this.
|
|
181
|
+
if (template) this._contentObserver.observe(template.content, { attributes: true, childList: true, subtree: true });
|
|
182
|
+
else {
|
|
183
|
+
const slot = this.shadowRoot.querySelector('slot');
|
|
184
|
+
if (slot) {
|
|
185
|
+
slot.assignedNodes({ flatten: true }).forEach(
|
|
186
|
+
node => this._contentObserver.observe(node, { attributes: true, childList: true, subtree: true })
|
|
187
|
+
);
|
|
188
|
+
}
|
|
189
|
+
}
|
|
185
190
|
}
|
|
186
191
|
|
|
187
192
|
disconnectedCallback() {
|
|
188
193
|
super.disconnectedCallback();
|
|
189
194
|
if (this._contextObserverController) this._contextObserverController.hostDisconnected();
|
|
190
|
-
if (this.
|
|
195
|
+
if (this._contentObserver) this._contentObserver.disconnect();
|
|
191
196
|
}
|
|
192
197
|
|
|
193
198
|
firstUpdated(changedProperties) {
|
|
194
199
|
super.firstUpdated(changedProperties);
|
|
195
200
|
|
|
196
201
|
if (this._renderContainer) return;
|
|
197
|
-
|
|
198
|
-
this.shadowRoot.innerHTML += `<div class="d2l-html-block-rendered${this.compact ? ' d2l-html-block-compact' : ''}"></div><slot></slot>`;
|
|
202
|
+
this.shadowRoot.innerHTML += `<div class="d2l-html-block-rendered${this.compact ? ' d2l-html-block-compact' : ''}"></div><slot ${!this.noDeferredRendering ? 'style="display: none"' : ''}></slot>`;
|
|
199
203
|
|
|
200
204
|
this.shadowRoot.querySelector('slot').addEventListener('slotchange', async e => await this._render(e.target));
|
|
201
205
|
this._renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');
|
|
@@ -255,8 +259,15 @@ class HtmlBlock extends LitElement {
|
|
|
255
259
|
|
|
256
260
|
_stamp(slot) {
|
|
257
261
|
const stampHTML = async template => {
|
|
258
|
-
|
|
259
|
-
if (fragment)
|
|
262
|
+
let fragment;
|
|
263
|
+
if (template) fragment = document.importNode(template.content, true);
|
|
264
|
+
else {
|
|
265
|
+
fragment = document.createDocumentFragment();
|
|
266
|
+
this.shadowRoot.querySelector('slot').assignedNodes({ flatten: true })
|
|
267
|
+
.forEach(node => fragment.appendChild(node.cloneNode(true)));
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
if (fragment.hasChildNodes()) {
|
|
260
271
|
|
|
261
272
|
let temp = document.createElement('div');
|
|
262
273
|
temp.style.display = 'none';
|
|
@@ -271,12 +282,17 @@ class HtmlBlock extends LitElement {
|
|
|
271
282
|
}
|
|
272
283
|
};
|
|
273
284
|
|
|
274
|
-
|
|
285
|
+
if (this._contentObserver) this._contentObserver.disconnect();
|
|
275
286
|
|
|
276
|
-
|
|
287
|
+
const template = this._findSlottedElement('TEMPLATE', slot);
|
|
277
288
|
if (template) {
|
|
278
|
-
this.
|
|
279
|
-
this.
|
|
289
|
+
this._contentObserver = new MutationObserver(() => stampHTML(template));
|
|
290
|
+
this._contentObserver.observe(template.content, { attributes: true, childList: true, subtree: true });
|
|
291
|
+
} else {
|
|
292
|
+
this._contentObserver = new MutationObserver(() => stampHTML());
|
|
293
|
+
this.shadowRoot.querySelector('slot').assignedNodes({ flatten: true }).forEach(
|
|
294
|
+
node => this._contentObserver.observe(node, { attributes: true, childList: true, subtree: true })
|
|
295
|
+
);
|
|
280
296
|
}
|
|
281
297
|
|
|
282
298
|
stampHTML(template);
|
|
@@ -40,7 +40,7 @@ export const radioStyles = css`
|
|
|
40
40
|
.d2l-input-radio-label > input[type="radio"]:focus {
|
|
41
41
|
border-color: var(--d2l-color-celestine);
|
|
42
42
|
border-width: 2px;
|
|
43
|
-
outline
|
|
43
|
+
outline: none;
|
|
44
44
|
}
|
|
45
45
|
.d2l-input-radio[aria-invalid="true"],
|
|
46
46
|
.d2l-input-radio-label > input[type="radio"][aria-invalid="true"] {
|
package/custom-elements.json
CHANGED
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('
|
|
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('
|
|
26
|
+
document.addEventListener('keydown', eventListener);
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
export function clearDismissible(id) {
|