@brightspace-ui/core 2.44.1 → 2.45.1

package/components/html-block/demo/html-block.html

@@ -527,6 +527,131 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>HTML Block (html prop)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<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;
+						&lt;mo&gt;=&lt;/mo&gt;
+						&lt;mrow&gt;
+							&lt;mfrac&gt;
+								&lt;mrow&gt;
+									&lt;mo&gt;&amp;#x2212;&lt;/mo&gt;
+									&lt;mi&gt;b&lt;/mi&gt;
+									&lt;mo&gt;&amp;#xB1;&lt;/mo&gt;
+									&lt;msqrt&gt;
+										&lt;msup&gt;
+											&lt;mi&gt;b&lt;/mi&gt;
+											&lt;mn&gt;2&lt;/mn&gt;
+										&lt;/msup&gt;
+										&lt;mo&gt;&amp;#x2212;&lt;/mo&gt;
+										&lt;mn&gt;4&lt;/mn&gt;
+										&lt;mi&gt;a&lt;/mi&gt;
+										&lt;mi&gt;c&lt;/mi&gt;
+									&lt;/msqrt&gt;
+								&lt;/mrow&gt;
+								&lt;mrow&gt;
+									&lt;mn&gt;2&lt;/mn&gt;
+									&lt;mi&gt;a&lt;/mi&gt;
+								&lt;/mrow&gt;
+							&lt;/mfrac&gt;
+						&lt;/mrow&gt;
+						&lt;mtext&gt;.&lt;/mtext&gt;
+						&lt;mspace linebreak=&#34;newline&#34;&gt;&lt;/mspace&gt;
+						&lt;msup&gt;
+							&lt;mi&gt;e&lt;/mi&gt;
+							&lt;mrow&gt;
+								&lt;mi&gt;i&lt;/mi&gt;
+								&lt;mi&gt;π&lt;!-- π --&gt;&lt;/mi&gt;
+							&lt;/mrow&gt;
+						&lt;/msup&gt;
+						&lt;mo&gt;+&lt;/mo&gt;
+						&lt;mn&gt;1&lt;/mn&gt;
+						&lt;mo&gt;=&lt;/mo&gt;
+						&lt;mn&gt;0&lt;/mn&gt;
+						&lt;/math&gt;
+						&lt;math xmlns=&#34;http://www.w3.org/1998/Math/MathML&#34; display=&#34;block&#34;&gt;
+							&lt;msup&gt;
+								&lt;mrow&gt;
+									&lt;mo&gt;(&lt;/mo&gt;
+									&lt;mrow&gt;
+										&lt;munderover&gt;
+											&lt;mo&gt;∑&lt;!-- ∑ --&gt;&lt;/mo&gt;
+											&lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
+												&lt;mi&gt;k&lt;/mi&gt;
+												&lt;mo&gt;=&lt;/mo&gt;
+												&lt;mn&gt;1&lt;/mn&gt;
+											&lt;/mrow&gt;
+											&lt;mi&gt;n&lt;/mi&gt;
+										&lt;/munderover&gt;
+										&lt;msub&gt;
+											&lt;mi&gt;a&lt;/mi&gt;
+											&lt;mi&gt;k&lt;/mi&gt;
+										&lt;/msub&gt;
+										&lt;msub&gt;
+											&lt;mi&gt;b&lt;/mi&gt;
+											&lt;mi&gt;k&lt;/mi&gt;
+										&lt;/msub&gt;
+									&lt;/mrow&gt;
+									&lt;mo&gt;)&lt;/mo&gt;
+								&lt;/mrow&gt;
+								&lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
+									&lt;mspace width=&#34;negativethinmathspace&#34;&gt;&lt;/mspace&gt;
+									&lt;mspace width=&#34;negativethinmathspace&#34;&gt;&lt;/mspace&gt;
+									&lt;mn&gt;2&lt;/mn&gt;
+								&lt;/mrow&gt;
+							&lt;/msup&gt;
+							&lt;mo&gt;≤&lt;!-- ≤ --&gt;&lt;/mo&gt;
+							&lt;mrow&gt;
+								&lt;mo&gt;(&lt;/mo&gt;
+								&lt;mrow&gt;
+									&lt;munderover&gt;
+										&lt;mo&gt;∑&lt;!-- ∑ --&gt;&lt;/mo&gt;
+										&lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
+											&lt;mi&gt;k&lt;/mi&gt;
+											&lt;mo&gt;=&lt;/mo&gt;
+											&lt;mn&gt;1&lt;/mn&gt;
+										&lt;/mrow&gt;
+										&lt;mi&gt;n&lt;/mi&gt;
+									&lt;/munderover&gt;
+									&lt;msubsup&gt;
+										&lt;mi&gt;a&lt;/mi&gt;
+										&lt;mi&gt;k&lt;/mi&gt;
+										&lt;mn&gt;2&lt;/mn&gt;
+									&lt;/msubsup&gt;
+								&lt;/mrow&gt;
+								&lt;mo&gt;)&lt;/mo&gt;
+							&lt;/mrow&gt;
+							&lt;mrow&gt;
+								&lt;mo&gt;(&lt;/mo&gt;
+								&lt;mrow&gt;
+									&lt;munderover&gt;
+										&lt;mo&gt;∑&lt;!-- ∑ --&gt;&lt;/mo&gt;
+										&lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
+											&lt;mi&gt;k&lt;/mi&gt;
+											&lt;mo&gt;=&lt;/mo&gt;
+											&lt;mn&gt;1&lt;/mn&gt;
+										&lt;/mrow&gt;
+										&lt;mi&gt;n&lt;/mi&gt;
+									&lt;/munderover&gt;
+									&lt;msubsup&gt;
+										&lt;mi&gt;b&lt;/mi&gt;
+										&lt;mi&gt;k&lt;/mi&gt;
+										&lt;mn&gt;2&lt;/mn&gt;
+									&lt;/msubsup&gt;
+								&lt;/mrow&gt;
+								&lt;mo&gt;)&lt;/mo&gt;
+							&lt;/mrow&gt;
+						&lt;/math&gt;
+						&lt;div&gt;$$ {\color{red}x} + {\color{blue}y} = {\color{green}z} $$&lt;/div&gt;
+&lt;pre class=&#34;d2l-code d2l-code-dark&#34;&gt;&lt;code class=&#34;language-javascript&#34;&gt;function helloGrumpy(name) {
+	console.log(`Hi there ${name}.`);
+}
+helloGrumpy('Wizard');&lt;/code&gt;&lt;/pre&gt;">
+					</d2l-html-block>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>HTML Block (wrapped)</h2>
 
 			<d2l-demo-snippet>

package/components/html-block/html-block.js

@@ -139,6 +139,11 @@ class HtmlBlock extends RtlMixin(LitElement) {
 			 * @type {Boolean}
 			 */
 			compact: { type: Boolean },
+			/**
+			 * The HTML to be rendered. Ignored if slotted content is provided.
+			 * @type {String}
+			 */
+			html: { type: String },
 			/**
 			 * Whether to display the HTML in inline mode
 			 * @type {Boolean}
@@ -183,8 +188,10 @@ class HtmlBlock extends RtlMixin(LitElement) {
 	constructor() {
 		super();
 		this.compact = false;
+		this.html = '';
 		this.inline = false;
 		this.noDeferredRendering = false;
+		this._hasSlottedContent = false;
 
 		const rendererContextAttributes = getRenderers().reduce((attrs, currentRenderer) => {
 			if (currentRenderer.contextAttributes) currentRenderer.contextAttributes.forEach(attr => attrs.push(attr));
@@ -202,7 +209,10 @@ class HtmlBlock extends RtlMixin(LitElement) {
 
 		const slot = this.shadowRoot.querySelector('slot');
 		if (slot) {
-			slot.assignedNodes({ flatten: true }).forEach(
+			const slottedNodes = slot.assignedNodes({ flatten: true });
+			this._hasSlottedContent = this._hasSlottedElements(slottedNodes);
+
+			slottedNodes.forEach(
 				node => this._contentObserver.observe(node, { attributes: true, childList: true, subtree: true })
 			);
 		}
@@ -230,10 +240,17 @@ class HtmlBlock extends RtlMixin(LitElement) {
 		`;
 	}
 
-	updated(changedProperties) {
+	async updated(changedProperties) {
 		super.updated(changedProperties);
+		if (changedProperties.has('html') && this.html !== undefined && this.html !== null && !this._hasSlottedContent) {
+			await this._updateRenderContainer();
+		}
 		if (this._contextChanged()) {
-			this._render();
+			if (this._hasSlottedContent) this._render();
+			else if (this.html !== undefined && this.html !== null) {
+				await this._updateRenderContainer();
+			}
+
 			this._updateContextKeys();
 		}
 	}
@@ -250,8 +267,22 @@ class HtmlBlock extends RtlMixin(LitElement) {
 	}
 
 	async _handleSlotChange(e) {
-		if (!e.target) return;
-		await this._render(e.target);
+		if (!e.target || !this.shadowRoot) return;
+		const slot = this.shadowRoot.querySelector('slot');
+		const slottedNodes = slot.assignedNodes({ flatten: true });
+
+		if (!this.html && this._hasSlottedElements(slottedNodes)) {
+			this._hasSlottedContent = true;
+			await this._render(e.target);
+		} else {
+			this._hasSlottedContent = false;
+		}
+	}
+
+	_hasSlottedElements(slottedNodes) {
+		if (!slottedNodes || slottedNodes.length === 0) return false;
+		if (slottedNodes.filter(node => node.nodeType === Node.ELEMENT_NODE || node.textContent).length === 0) return false;
+		return true;
 	}
 
 	async _processRenderers(elem) {
@@ -322,6 +353,12 @@ class HtmlBlock extends RtlMixin(LitElement) {
 		});
 	}
 
+	async _updateRenderContainer() {
+		const renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');
+		renderContainer.innerHTML = this.html;
+		await this._processRenderers(renderContainer);
+	}
+
 }
 
 customElements.define('d2l-html-block', HtmlBlock);

package/components/tooltip/demo/tooltip.html

@@ -14,13 +14,6 @@
 		import '../tooltip-help.js';
 	</script>
 	<style>
-		p {
-			padding-top: 1rem;
-		}
-
-		p:nth-child(3) {
-			padding-top: 0;
-		}
 
 		.boundary {
 			background-color: var(--d2l-color-citrine);
@@ -163,7 +156,7 @@
 		<d2l-demo-snippet>
 			<template>
 				<d2l-tooltip-help text="Helpful label">Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
-				<p class="d2l-body-small">
+				<p class="d2l-body-small" style="padding-top: 20px;">
 					This is some sample text.
 					<d2l-tooltip-help text="Helpful label" inherit-font-style>Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
 				</p>

package/custom-elements.json

@@ -3810,6 +3810,12 @@
           "type": "Boolean",
           "default": "false"
         },
+        {
+          "name": "html",
+          "description": "The HTML to be rendered. Ignored if slotted content is provided.",
+          "type": "String",
+          "default": "\"\""
+        },
         {
           "name": "inline",
           "description": "Whether to display the HTML in inline mode",
@@ -3831,6 +3837,13 @@
           "type": "Boolean",
           "default": "false"
         },
+        {
+          "name": "html",
+          "attribute": "html",
+          "description": "The HTML to be rendered. Ignored if slotted content is provided.",
+          "type": "String",
+          "default": "\"\""
+        },
         {
           "name": "inline",
           "attribute": "inline",

package/helpers/prism.js

@@ -1,4 +1,4 @@
-import { css, unsafeCSS } from 'lit-element/lit-element.js';
+import { css, unsafeCSS } from 'lit';
 
 window.Prism = window.Prism || {};
 Prism.manual = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.44.1",
+  "version": "2.45.1",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",