@brightspace-ui/core 3.38.1 → 3.38.3

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

@@ -1,13 +1,14 @@
 import '../colors/colors.js';
 import { codeStyles, createHtmlBlockRenderer as createCodeRenderer } from '../../helpers/prism.js';
-import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { css, html, LitElement, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { createHtmlBlockRenderer as createMathRenderer } from '../../helpers/mathjax.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { LoadingCompleteMixin } from '../../mixins/loading-complete/loading-complete-mixin.js';
 import { renderEmbeds } from '../../helpers/embeds.js';
 import { requestInstance } from '../../mixins/provider/provider-mixin.js';
 import { tryGet } from '@brightspace-ui/lms-context-provider/client.js';
-import { until } from 'lit/directives/until.js';
 
 export const htmlBlockContentStyles = css`
 	.d2l-html-block-rendered {
@@ -142,7 +143,7 @@ const getRenderers = async() => {
 /**
  * A component for displaying user-authored HTML.
  */
-class HtmlBlock extends LitElement {
+class HtmlBlock extends LoadingCompleteMixin(LitElement) {
 
 	static get properties() {
 		return {
@@ -206,8 +207,7 @@ class HtmlBlock extends LitElement {
 		this._initialContextResolve = undefined;
 		this._initialContextPromise = new Promise(resolve => this._initialContextResolve = resolve);
 
-		this._renderersProcessedResolve = undefined;
-		this._renderersProcessedPromise = new Promise(resolve => this._renderersProcessedResolve = resolve);
+		this._renderContainerRef = createRef();
 
 		const contextKeysPromise = getRenderers().then(renderers => renderers.reduce((keys, currentRenderer) => {
 			if (currentRenderer.contextKeys) currentRenderer.contextKeys.forEach(key => keys.push(key));
@@ -216,10 +216,7 @@ class HtmlBlock extends LitElement {
 
 		const contextValsPromise = contextKeysPromise.then(contextKeys => {
 			return Promise.allSettled(contextKeys.map(key => {
-				return tryGet(key, undefined, ctx => {
-					this._context.set(key, ctx);
-					this.updated(new Map([['_context']]));
-				});
+				return tryGet(key, undefined, ctx => this._context.set(key, ctx));
 			}));
 		});
 
@@ -238,24 +235,18 @@ class HtmlBlock extends LitElement {
 		};
 
 		return html`
-			<div class="${classMap(renderContainerClasses)}">
-				${!this.noDeferredRendering ? until(this._processEmbeds(), nothing) : nothing}
-			</div>
+			<div class="${classMap(renderContainerClasses)}" ${ref(this._renderContainerRef)}></div>
 			${this.noDeferredRendering ? html`<slot @slotchange="${this._handleSlotChange}"></slot>` : ''}
 		`;
 	}
 
 	async updated(changedProperties) {
 		super.updated(changedProperties);
-		if ((changedProperties.has('embeds') || changedProperties.has('_context')) && this.html !== undefined && this.html !== null && !this.noDeferredRendering) {
+		if (this.html !== undefined && this.html !== null && !this.noDeferredRendering) {
 			await this._updateRenderContainer();
 		}
 	}
 
-	async getLoadingComplete() {
-		return this._renderersProcessedPromise;
-	}
-
 	async _handleSlotChange(e) {
 		if (!e.target || !this.shadowRoot || !this.noDeferredRendering) return;
 		await this._renderInline(e.target);
@@ -264,7 +255,6 @@ class HtmlBlock extends LitElement {
 	async _processEmbeds() {
 		const htmlFragment = document.createRange().createContextualFragment(this.html);
 		await renderEmbeds(htmlFragment);
-		this.updated(new Map([['embeds']]));
 		return htmlFragment;
 	}
 
@@ -289,7 +279,7 @@ class HtmlBlock extends LitElement {
 				loadingCompletePromises.push(renderer.getLoadingComplete());
 			}
 		}
-		Promise.all(loadingCompletePromises).then(() => this._renderersProcessedResolve());
+		Promise.all(loadingCompletePromises).then(this.resolveLoadingComplete);
 	}
 
 	async _renderInline(slot) {
@@ -300,15 +290,17 @@ class HtmlBlock extends LitElement {
 			.find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'DIV'));
 
 		if (!noDeferredRenderingContainer) {
-			this._renderersProcessedResolve();
+			this.resolveLoadingComplete();
 			return;
 		}
 		await this._processRenderers(noDeferredRenderingContainer);
 	}
 
 	async _updateRenderContainer() {
-		const renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');
-		await this._processRenderers(renderContainer);
+		if (!this._renderContainerRef.value) return;
+		this._renderContainerRef.value.innerHTML = '';
+		this._renderContainerRef.value.append(await this._processEmbeds());
+		await this._processRenderers(this._renderContainerRef.value);
 	}
 
 	_validateHtml() {

package/custom-elements.json

@@ -4729,6 +4729,14 @@
           "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.",
           "type": "Boolean",
           "default": "false"
+        },
+        {
+          "name": "loadingComplete",
+          "type": "Promise<any>"
+        },
+        {
+          "name": "resolveLoadingComplete",
+          "type": "() => void"
         }
       ]
     },

package/lang/ar.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "عنوان URL غير صالح",
 	"components.form-element.valueMissing": "{label} مطلوبة.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {تم العثور على {count} خطأ في المعلومات التي أرسلتها} other {تم العثور على {count} من الأخطاء في المعلومات التي أرسلتها}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "تبديل تفاصيل الخطأ",
 	"components.input-color.backgroundColor": "لون الخلفية",
 	"components.input-color.foregroundColor": "لون المقدمة",
 	"components.input-color.none": "لا شيء",

package/lang/cy.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "Nid yw'r URL yn ddilys.",
 	"components.form-element.valueMissing": "Mae angen {label}.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {Canfuwyd {count} gwall yn y wybodaeth a gyflwynoch} other {Canfuwyd {count} gwall yn y wybodaeth a gyflwynoch}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "Toglo manylion gwall",
 	"components.input-color.backgroundColor": "Lliw Cefndir",
 	"components.input-color.foregroundColor": "Lliw Blaendir",
 	"components.input-color.none": "Dim",

package/lang/da.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL-adresse er ikke gyldig",
 	"components.form-element.valueMissing": "{label} er påkrævet.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {Der blev fundet {count} fejl i de oplysninger, du indsendte} other {Der blev fundet {count} fejl i de oplysninger, du indsendte}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "Slå fejloplysninger til/fra",
 	"components.input-color.backgroundColor": "Baggrundsfarve",
 	"components.input-color.foregroundColor": "Forgrundsfarve",
 	"components.input-color.none": "Ingen",

package/lang/de.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL ist ungültig",
 	"components.form-element.valueMissing": "{label} ist erforderlich.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {Die von Ihnen übermittelten Informationen enthalten {count} Fehler} other {Die von Ihnen übermittelten Informationen enthalten {count} Fehler}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "Fehlerdetails ein-/ausschalten",
 	"components.input-color.backgroundColor": "Hintergrundfarbe",
 	"components.input-color.foregroundColor": "Vordergrundfarbe",
 	"components.input-color.none": "Keine",

package/lang/es-es.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "La dirección URL no es válida",
 	"components.form-element.valueMissing": "{label} es obligatorio.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {Se ha encontrado {count} error en la información que ha enviado} other {Se han encontrado {count} errores en la información que ha enviado}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "Alternar detalles del error",
 	"components.input-color.backgroundColor": "Color de fondo",
 	"components.input-color.foregroundColor": "Color del primer plano",
 	"components.input-color.none": "Ninguno",

package/lang/es.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "La dirección URL no es válida",
 	"components.form-element.valueMissing": "{label} es obligatoria.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {Se encontró {count} error en la información que envió} other {Se encontraron {count} errores en la información que envió}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "Activar o desactivar la presentación de detalles de los errores",
 	"components.input-color.backgroundColor": "Color de fondo",
 	"components.input-color.foregroundColor": "Color del primer plano",
 	"components.input-color.none": "Ninguno",

package/lang/fr-fr.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL non valide",
 	"components.form-element.valueMissing": "{label} est obligatoire.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {{count} erreur trouvée dans les informations soumises} other {{count} erreurs trouvées dans les informations soumises}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "Afficher/Masquer les détails de l’erreur",
 	"components.input-color.backgroundColor": "Couleur de l’arrière-plan",
 	"components.input-color.foregroundColor": "Couleur de l’avant-plan",
 	"components.input-color.none": "Aucune",

package/lang/fr.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "L'URL n'est pas valide",
 	"components.form-element.valueMissing": "{label} est requis.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {Il y avait {count} erreur trouvée dans les informations que vous avez soumises} other {Il y avait {count} erreurs trouvées dans les informations que vous avez soumises}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "Afficher les détails de l'erreur",
 	"components.input-color.backgroundColor": "Couleur d’arrière-plan",
 	"components.input-color.foregroundColor": "Couleur de l'avant-plan",
 	"components.input-color.none": "Aucun",

package/lang/hi.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL मान्य नहीं है",
 	"components.form-element.valueMissing": "{label} आवश्यक है।",
 	"components.form-error-summary.errorSummary": "{count, plural, one {आपके द्वारा सबमिट की गई जानकारी में {count} त्रुटियाँ पाई गईं} other {आपके द्वारा सबमिट की गई जानकारी में {count} त्रुटियाँ पाई गईं}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "त्रुटि विवरण टॉगल करें",
 	"components.input-color.backgroundColor": "पृष्ठभूमि का रंग",
 	"components.input-color.foregroundColor": "अग्रभूमि का रंग",
 	"components.input-color.none": "कोई नहीं",

package/lang/ja.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL が有効ではありません",
 	"components.form-element.valueMissing": "{label} は必須です。",
 	"components.form-error-summary.errorSummary": "{count, plural, other {送信した情報に {count} 件のエラーが見つかりました}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "エラーの詳細を切り替え",
 	"components.input-color.backgroundColor": "背景色",
 	"components.input-color.foregroundColor": "前景色",
 	"components.input-color.none": "なし",

package/lang/ko.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL이 유효하지 않습니다",
 	"components.form-element.valueMissing": "{label}이(가) 필요합니다.",
 	"components.form-error-summary.errorSummary": "{count, plural, other {제출한 정보에서 {count}개의 오류가 발견되었습니다}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "오류 세부 정보 전환",
 	"components.input-color.backgroundColor": "배경 색상",
 	"components.input-color.foregroundColor": "전경 색상",
 	"components.input-color.none": "없음",

package/lang/nl.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL is niet geldig",
 	"components.form-element.valueMissing": "{label} is vereist.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {Er is {count} fout gevonden in de informatie die u hebt ingediend} other {Er zijn {count} fouten gevonden in de informatie die u hebt ingediend}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "Foutdetails in-/uitschakelen",
 	"components.input-color.backgroundColor": "Achtergrondkleur",
 	"components.input-color.foregroundColor": "Voorgrondkleur",
 	"components.input-color.none": "Geen",

package/lang/pt.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL inválido",
 	"components.form-element.valueMissing": "{label} é obrigatório.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {{count} erro foi encontrado nas informações enviadas} other {{count} erros foram encontrados nas informações enviadas}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "Alternar detalhes do erro",
 	"components.input-color.backgroundColor": "Cor do Plano de fundo",
 	"components.input-color.foregroundColor": "Cor do Primeiro plano",
 	"components.input-color.none": "Nenhum",

package/lang/sv.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL är inte giltigt",
 	"components.form-element.valueMissing": "{label} krävs.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {Det finns {count} fel i informationen som du skickade} other {Det finns {count} fel i informationen som du skickade}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "Växla felinformation",
 	"components.input-color.backgroundColor": "Bakgrundsfärg",
 	"components.input-color.foregroundColor": "Förgrundsfärg",
 	"components.input-color.none": "Inga",

package/lang/tr.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL geçerli değil",
 	"components.form-element.valueMissing": "{label} zorunludur.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {Gönderdiğiniz bilgilerde {count} hata bulundu} other {Gönderdiğiniz bilgilerde {count} hata bulundu}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "Hata ayrıntılarını değiştir",
 	"components.input-color.backgroundColor": "Arka Plan Rengi",
 	"components.input-color.foregroundColor": "Ön Plan Rengi",
 	"components.input-color.none": "Yok",

package/lang/zh-cn.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL 无效",
 	"components.form-element.valueMissing": "{label} 为必填项。",
 	"components.form-error-summary.errorSummary": "{count, plural, other {在您提交的信息中发现 {count} 个错误}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "切换错误详细信息",
 	"components.input-color.backgroundColor": "背景颜色",
 	"components.input-color.foregroundColor": "前景颜色",
 	"components.input-color.none": "无",

package/lang/zh-tw.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL 無效",
 	"components.form-element.valueMissing": "{label} 為必填。",
 	"components.form-error-summary.errorSummary": "{count, plural, other {您提交的資訊中發現 {count} 個錯誤}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "切換錯誤詳細資料",
 	"components.input-color.backgroundColor": "背景顏色",
 	"components.input-color.foregroundColor": "前景顏色",
 	"components.input-color.none": "無",

package/package.json

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