@brightspace-ui/core 2.44.2 → 2.45.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.
|
@@ -527,6 +527,131 @@
|
|
|
527
527
|
</template>
|
|
528
528
|
</d2l-demo-snippet>
|
|
529
529
|
|
|
530
|
+
<h2>HTML Block (html prop)</h2>
|
|
531
|
+
|
|
532
|
+
<d2l-demo-snippet>
|
|
533
|
+
<template>
|
|
534
|
+
<d2l-html-block html="<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><mi>x</mi>
|
|
535
|
+
<mo>=</mo>
|
|
536
|
+
<mrow>
|
|
537
|
+
<mfrac>
|
|
538
|
+
<mrow>
|
|
539
|
+
<mo>&#x2212;</mo>
|
|
540
|
+
<mi>b</mi>
|
|
541
|
+
<mo>&#xB1;</mo>
|
|
542
|
+
<msqrt>
|
|
543
|
+
<msup>
|
|
544
|
+
<mi>b</mi>
|
|
545
|
+
<mn>2</mn>
|
|
546
|
+
</msup>
|
|
547
|
+
<mo>&#x2212;</mo>
|
|
548
|
+
<mn>4</mn>
|
|
549
|
+
<mi>a</mi>
|
|
550
|
+
<mi>c</mi>
|
|
551
|
+
</msqrt>
|
|
552
|
+
</mrow>
|
|
553
|
+
<mrow>
|
|
554
|
+
<mn>2</mn>
|
|
555
|
+
<mi>a</mi>
|
|
556
|
+
</mrow>
|
|
557
|
+
</mfrac>
|
|
558
|
+
</mrow>
|
|
559
|
+
<mtext>.</mtext>
|
|
560
|
+
<mspace linebreak="newline"></mspace>
|
|
561
|
+
<msup>
|
|
562
|
+
<mi>e</mi>
|
|
563
|
+
<mrow>
|
|
564
|
+
<mi>i</mi>
|
|
565
|
+
<mi>π<!-- π --></mi>
|
|
566
|
+
</mrow>
|
|
567
|
+
</msup>
|
|
568
|
+
<mo>+</mo>
|
|
569
|
+
<mn>1</mn>
|
|
570
|
+
<mo>=</mo>
|
|
571
|
+
<mn>0</mn>
|
|
572
|
+
</math>
|
|
573
|
+
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
|
|
574
|
+
<msup>
|
|
575
|
+
<mrow>
|
|
576
|
+
<mo>(</mo>
|
|
577
|
+
<mrow>
|
|
578
|
+
<munderover>
|
|
579
|
+
<mo>∑<!-- ∑ --></mo>
|
|
580
|
+
<mrow class="MJX-TeXAtom-ORD">
|
|
581
|
+
<mi>k</mi>
|
|
582
|
+
<mo>=</mo>
|
|
583
|
+
<mn>1</mn>
|
|
584
|
+
</mrow>
|
|
585
|
+
<mi>n</mi>
|
|
586
|
+
</munderover>
|
|
587
|
+
<msub>
|
|
588
|
+
<mi>a</mi>
|
|
589
|
+
<mi>k</mi>
|
|
590
|
+
</msub>
|
|
591
|
+
<msub>
|
|
592
|
+
<mi>b</mi>
|
|
593
|
+
<mi>k</mi>
|
|
594
|
+
</msub>
|
|
595
|
+
</mrow>
|
|
596
|
+
<mo>)</mo>
|
|
597
|
+
</mrow>
|
|
598
|
+
<mrow class="MJX-TeXAtom-ORD">
|
|
599
|
+
<mspace width="negativethinmathspace"></mspace>
|
|
600
|
+
<mspace width="negativethinmathspace"></mspace>
|
|
601
|
+
<mn>2</mn>
|
|
602
|
+
</mrow>
|
|
603
|
+
</msup>
|
|
604
|
+
<mo>≤<!-- ≤ --></mo>
|
|
605
|
+
<mrow>
|
|
606
|
+
<mo>(</mo>
|
|
607
|
+
<mrow>
|
|
608
|
+
<munderover>
|
|
609
|
+
<mo>∑<!-- ∑ --></mo>
|
|
610
|
+
<mrow class="MJX-TeXAtom-ORD">
|
|
611
|
+
<mi>k</mi>
|
|
612
|
+
<mo>=</mo>
|
|
613
|
+
<mn>1</mn>
|
|
614
|
+
</mrow>
|
|
615
|
+
<mi>n</mi>
|
|
616
|
+
</munderover>
|
|
617
|
+
<msubsup>
|
|
618
|
+
<mi>a</mi>
|
|
619
|
+
<mi>k</mi>
|
|
620
|
+
<mn>2</mn>
|
|
621
|
+
</msubsup>
|
|
622
|
+
</mrow>
|
|
623
|
+
<mo>)</mo>
|
|
624
|
+
</mrow>
|
|
625
|
+
<mrow>
|
|
626
|
+
<mo>(</mo>
|
|
627
|
+
<mrow>
|
|
628
|
+
<munderover>
|
|
629
|
+
<mo>∑<!-- ∑ --></mo>
|
|
630
|
+
<mrow class="MJX-TeXAtom-ORD">
|
|
631
|
+
<mi>k</mi>
|
|
632
|
+
<mo>=</mo>
|
|
633
|
+
<mn>1</mn>
|
|
634
|
+
</mrow>
|
|
635
|
+
<mi>n</mi>
|
|
636
|
+
</munderover>
|
|
637
|
+
<msubsup>
|
|
638
|
+
<mi>b</mi>
|
|
639
|
+
<mi>k</mi>
|
|
640
|
+
<mn>2</mn>
|
|
641
|
+
</msubsup>
|
|
642
|
+
</mrow>
|
|
643
|
+
<mo>)</mo>
|
|
644
|
+
</mrow>
|
|
645
|
+
</math>
|
|
646
|
+
<div>$$ {\color{red}x} + {\color{blue}y} = {\color{green}z} $$</div>
|
|
647
|
+
<pre class="d2l-code d2l-code-dark"><code class="language-javascript">function helloGrumpy(name) {
|
|
648
|
+
console.log(`Hi there ${name}.`);
|
|
649
|
+
}
|
|
650
|
+
helloGrumpy('Wizard');</code></pre>">
|
|
651
|
+
</d2l-html-block>
|
|
652
|
+
</template>
|
|
653
|
+
</d2l-demo-snippet>
|
|
654
|
+
|
|
530
655
|
<h2>HTML Block (wrapped)</h2>
|
|
531
656
|
|
|
532
657
|
<d2l-demo-snippet>
|
|
@@ -139,6 +139,11 @@ class HtmlBlock extends RtlMixin(LitElement) {
|
|
|
139
139
|
* @type {Boolean}
|
|
140
140
|
*/
|
|
141
141
|
compact: { type: Boolean },
|
|
142
|
+
/**
|
|
143
|
+
* The HTML to be rendered. Ignored if slotted content is provided.
|
|
144
|
+
* @type {String}
|
|
145
|
+
*/
|
|
146
|
+
html: { type: String },
|
|
142
147
|
/**
|
|
143
148
|
* Whether to display the HTML in inline mode
|
|
144
149
|
* @type {Boolean}
|
|
@@ -183,8 +188,10 @@ class HtmlBlock extends RtlMixin(LitElement) {
|
|
|
183
188
|
constructor() {
|
|
184
189
|
super();
|
|
185
190
|
this.compact = false;
|
|
191
|
+
this.html = '';
|
|
186
192
|
this.inline = false;
|
|
187
193
|
this.noDeferredRendering = false;
|
|
194
|
+
this._hasSlottedContent = false;
|
|
188
195
|
|
|
189
196
|
const rendererContextAttributes = getRenderers().reduce((attrs, currentRenderer) => {
|
|
190
197
|
if (currentRenderer.contextAttributes) currentRenderer.contextAttributes.forEach(attr => attrs.push(attr));
|
|
@@ -202,7 +209,10 @@ class HtmlBlock extends RtlMixin(LitElement) {
|
|
|
202
209
|
|
|
203
210
|
const slot = this.shadowRoot.querySelector('slot');
|
|
204
211
|
if (slot) {
|
|
205
|
-
slot.assignedNodes({ flatten: true })
|
|
212
|
+
const slottedNodes = slot.assignedNodes({ flatten: true });
|
|
213
|
+
this._hasSlottedContent = this._hasSlottedElements(slottedNodes);
|
|
214
|
+
|
|
215
|
+
slottedNodes.forEach(
|
|
206
216
|
node => this._contentObserver.observe(node, { attributes: true, childList: true, subtree: true })
|
|
207
217
|
);
|
|
208
218
|
}
|
|
@@ -230,10 +240,17 @@ class HtmlBlock extends RtlMixin(LitElement) {
|
|
|
230
240
|
`;
|
|
231
241
|
}
|
|
232
242
|
|
|
233
|
-
updated(changedProperties) {
|
|
243
|
+
async updated(changedProperties) {
|
|
234
244
|
super.updated(changedProperties);
|
|
245
|
+
if (changedProperties.has('html') && this.html !== undefined && this.html !== null && !this._hasSlottedContent) {
|
|
246
|
+
await this._updateRenderContainer();
|
|
247
|
+
}
|
|
235
248
|
if (this._contextChanged()) {
|
|
236
|
-
this._render();
|
|
249
|
+
if (this._hasSlottedContent) this._render();
|
|
250
|
+
else if (this.html !== undefined && this.html !== null) {
|
|
251
|
+
await this._updateRenderContainer();
|
|
252
|
+
}
|
|
253
|
+
|
|
237
254
|
this._updateContextKeys();
|
|
238
255
|
}
|
|
239
256
|
}
|
|
@@ -250,8 +267,22 @@ class HtmlBlock extends RtlMixin(LitElement) {
|
|
|
250
267
|
}
|
|
251
268
|
|
|
252
269
|
async _handleSlotChange(e) {
|
|
253
|
-
if (!e.target) return;
|
|
254
|
-
|
|
270
|
+
if (!e.target || !this.shadowRoot) return;
|
|
271
|
+
const slot = this.shadowRoot.querySelector('slot');
|
|
272
|
+
const slottedNodes = slot.assignedNodes({ flatten: true });
|
|
273
|
+
|
|
274
|
+
if (!this.html && this._hasSlottedElements(slottedNodes)) {
|
|
275
|
+
this._hasSlottedContent = true;
|
|
276
|
+
await this._render(e.target);
|
|
277
|
+
} else {
|
|
278
|
+
this._hasSlottedContent = false;
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
_hasSlottedElements(slottedNodes) {
|
|
283
|
+
if (!slottedNodes || slottedNodes.length === 0) return false;
|
|
284
|
+
if (slottedNodes.filter(node => node.nodeType === Node.ELEMENT_NODE || node.textContent).length === 0) return false;
|
|
285
|
+
return true;
|
|
255
286
|
}
|
|
256
287
|
|
|
257
288
|
async _processRenderers(elem) {
|
|
@@ -322,6 +353,12 @@ class HtmlBlock extends RtlMixin(LitElement) {
|
|
|
322
353
|
});
|
|
323
354
|
}
|
|
324
355
|
|
|
356
|
+
async _updateRenderContainer() {
|
|
357
|
+
const renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');
|
|
358
|
+
renderContainer.innerHTML = this.html;
|
|
359
|
+
await this._processRenderers(renderContainer);
|
|
360
|
+
}
|
|
361
|
+
|
|
325
362
|
}
|
|
326
363
|
|
|
327
364
|
customElements.define('d2l-html-block', HtmlBlock);
|
package/custom-elements.json
CHANGED
|
@@ -3810,6 +3810,12 @@
|
|
|
3810
3810
|
"type": "Boolean",
|
|
3811
3811
|
"default": "false"
|
|
3812
3812
|
},
|
|
3813
|
+
{
|
|
3814
|
+
"name": "html",
|
|
3815
|
+
"description": "The HTML to be rendered. Ignored if slotted content is provided.",
|
|
3816
|
+
"type": "String",
|
|
3817
|
+
"default": "\"\""
|
|
3818
|
+
},
|
|
3813
3819
|
{
|
|
3814
3820
|
"name": "inline",
|
|
3815
3821
|
"description": "Whether to display the HTML in inline mode",
|
|
@@ -3831,6 +3837,13 @@
|
|
|
3831
3837
|
"type": "Boolean",
|
|
3832
3838
|
"default": "false"
|
|
3833
3839
|
},
|
|
3840
|
+
{
|
|
3841
|
+
"name": "html",
|
|
3842
|
+
"attribute": "html",
|
|
3843
|
+
"description": "The HTML to be rendered. Ignored if slotted content is provided.",
|
|
3844
|
+
"type": "String",
|
|
3845
|
+
"default": "\"\""
|
|
3846
|
+
},
|
|
3834
3847
|
{
|
|
3835
3848
|
"name": "inline",
|
|
3836
3849
|
"attribute": "inline",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.45.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",
|