@brightspace-ui/core 3.33.0 → 3.34.0

package/components/table/demo/table-test.js

@@ -41,6 +41,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 	static get properties() {
 		return {
 			paging: { type: Boolean, reflect: true },
+			multiLine: { type: Boolean, attribute: 'multi-line' },
 			showButtons: { type: Boolean, attribute: 'show-buttons' },
 			stickyControls: { attribute: 'sticky-controls', type: Boolean, reflect: true },
 			visibleBackground: { attribute: 'visible-background', type: Boolean, reflect: true },
@@ -72,6 +73,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 	constructor() {
 		super();
 
+		this.multiLine = false;
 		this.paging = false;
 		this.showButtons = false;
 		this.stickyControls = false;
@@ -99,11 +101,25 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 
 				<table class="d2l-table">
 					<thead>
-						<tr>
-							<th scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></th>
-							${this._renderDoubleSortButton('Location')}
-							${columns.map(columnHeading => this._renderSortButton(columnHeading))}
-						</tr>
+						${this.multiLine ? html`
+							<tr>
+								<th scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></th>
+								${this._renderDoubleSortButton('Location')}
+								<th scope="col" colspan="${columns.length}" sticky>
+									Metrics
+								</th>
+							</tr>
+							<tr>
+								<th scope="col" sticky></th>
+								${columns.map(columnHeading => this._renderSortButton(columnHeading))}
+							</tr>
+						` : html`
+							<tr>
+								<th scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></th>
+								${this._renderDoubleSortButton('Location')}
+								${columns.map(columnHeading => this._renderSortButton(columnHeading))}
+							</tr>
+						`}
 					</thead>
 					<tbody>
 						<tr class="d2l-table-header">
@@ -182,7 +198,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 	_renderDoubleSortButton(name) {
 		const noSort = this._sortField?.toLowerCase() !== 'city' && this._sortField?.toLowerCase() !== 'country';
 		return html`
-			<th scope="col">
+			<th rowspan="${this.multiLine ? 2 : 1}" scope="col">
 				<d2l-table-col-sort-button
 					?desc="${this._sortDesc}"
 					?nosort="${noSort}">${name}

package/components/table/demo/table.html

@@ -80,6 +80,13 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Multi-line with scroll-wrapper + sticky</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-test-table multi-line sticky-headers sticky-controls sticky-headers-scroll-wrapper style="width: 400px;"></d2l-test-table>
+				</template>
+			</d2l-demo-snippet>
+
 			<div style="margin-bottom: 1000px;"></div>
 		</d2l-demo-page>
 	</body>

package/components/table/table-wrapper.js

@@ -599,16 +599,87 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 		const body = this._table.querySelector('tbody');
 		if (!head || !body) return;
 
-		const firstRowHead = head.rows[0];
-		const firstRowBody = body.rows[0];
-		if (!firstRowHead || !firstRowBody || firstRowHead.cells.length !== firstRowBody.cells.length) return;
+		const candidateRowHeadCells = [];
 
-		for (let i = 0; i < firstRowHead.cells.length; i++) {
-			const headCell = firstRowHead.cells[i];
-			const bodyCell = firstRowBody.cells[i];
-			const bodyStyle = getComputedStyle(bodyCell);
+		// Max length of one of our body rows, which we'll try to map to our candidate head cells.
+		const maxRowBodyLength = Math.max(...([...body.rows].map(row => row.cells.length)));
+
+		const headCellsMap = [];
+		for (let i = 0; i < head.rows.length; i++) {
+			headCellsMap[i] = [];
+		}
+
+		// Build a map of which cells "exist" in each head row so we can pick out
+		// a candidate in each column to sync widths with.
+		for (let rowIndex = 0; rowIndex < head.rows.length; rowIndex++) {
+			const rowMap = headCellsMap[rowIndex];
+
+			let spanOffset = 0;
+			for (let colIndex = 0; colIndex < maxRowBodyLength; colIndex++) {
+				if (rowMap[colIndex] === null) {
+					spanOffset++;
+					continue;
+				}
+
+				const cell = head.rows[rowIndex].cells[colIndex - spanOffset];
+				rowMap[colIndex] = cell;
+
+				if (!cell) continue;
+
+				const colSpan = cell.colSpan;
+				const rowSpan = cell.rowSpan;
+
+				for (let offset = 1; offset < colSpan; offset++) {
+					rowMap[colIndex + offset] = null;
+				}
+
+				for (let offset = 1; offset < rowSpan; offset++) {
+					headCellsMap[rowIndex + offset][colIndex] = null;
+				}
+			}
+		}
+
+		// Pick out a single head cell for each column to sync widths.
+		for (let i = 0; i < maxRowBodyLength; i++) {
+			let candidateCell;
+			for (const rowMap of headCellsMap) {
+				const cell = rowMap[i];
+
+				if (cell && cell.colSpan === 1) {
+					candidateCell = cell;
+					break;
+				}
+			}
+
+			// This does not support heads without at least one single-column
+			// spanning cell in each column.
+			if (!candidateCell) return;
+
+			candidateRowHeadCells[i] = candidateCell;
+		}
+
+		// Pick the body row with the most cells (and no colspans) to measure against
+		const candidateRowBody = [...body.rows].find(row => {
+			return row.cells.length === maxRowBodyLength
+				&& ![...row.cells].find(cell => cell.colSpan > 1);
+		});
+
+		if (candidateRowHeadCells.length === 0 || !candidateRowBody) return;
+
+		let candidateRowBodyLength = 0;
+		for (const cell of candidateRowBody.cells) {
+			candidateRowBodyLength += cell.colSpan;
+		}
+
+		if (candidateRowHeadCells.length !== candidateRowBodyLength) return;
+
+		for (let i = 0; i < candidateRowHeadCells.length; i++) {
+			const headCell = candidateRowHeadCells[i];
 			const headStyle = getComputedStyle(headCell);
 
+			const bodyCell = candidateRowBody.cells[i];
+			const bodyStyle = getComputedStyle(bodyCell);
+
 			if (headCell.clientWidth > bodyCell.clientWidth) {
 				const headOverallWidth = parseFloat(headStyle.width) + parseFloat(headStyle.paddingLeft) + parseFloat(headStyle.paddingRight);
 				bodyCell.style.minWidth = `${headOverallWidth - parseFloat(bodyStyle.paddingLeft) - parseFloat(bodyStyle.paddingRight)}px`;

package/custom-elements.json

@@ -11944,6 +11944,11 @@
       "name": "d2l-test-table",
       "path": "./components/table/demo/table-test.js",
       "attributes": [
+        {
+          "name": "multi-line",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "paging",
           "type": "boolean",
@@ -12001,6 +12006,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "multiLine",
+          "attribute": "multi-line",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "paging",
           "attribute": "paging",

package/helpers/getLocalizeResources.js

@@ -1,408 +1 @@
-import { getDocumentLocaleSettings } from '@brightspace-ui/intl/lib/common.js';
-
-const CacheName = 'd2l-oslo';
-const ContentTypeHeader = 'Content-Type';
-const ContentTypeJson = 'application/json';
-const DebounceTime = 150;
-const ETagHeader = 'ETag';
-const StateFetching = 2;
-const StateIdle = 1;
-
-const BatchFailedReason = new Error('Failed to fetch batch overrides.');
-const SingleFailedReason = new Error('Failed to fetch overrides.');
-
-const blobs = new Map();
-
-let cache = undefined;
-let cachePromise = undefined;
-let documentLocaleSettings = undefined;
-let queue = [];
-let state = StateIdle;
-let timer = 0;
-let debug = false;
-
-async function publish(request, response) {
-
-	if (response.ok) {
-		const overridesJson = await response.json();
-		request.resolve(overridesJson);
-	} else {
-		request.reject(SingleFailedReason);
-	}
-}
-
-async function flushQueue() {
-
-	timer = 0;
-	state = StateFetching;
-
-	if (queue.length <= 0) {
-		state = StateIdle;
-		return;
-	}
-
-	const requests = queue;
-
-	queue = [];
-
-	const resources = requests.map(item => item.resource);
-	const bodyObject = { resources };
-	const bodyText = JSON.stringify(bodyObject);
-
-	const res = await fetch(documentLocaleSettings.oslo.batch, {
-		method: 'POST',
-		body: bodyText,
-		headers: { [ContentTypeHeader]: ContentTypeJson }
-	});
-
-	if (res.ok) {
-
-		const responses = (await res.json()).resources;
-
-		const tasks = [];
-
-		for (let i = 0; i < responses.length; ++i) {
-
-			const response = responses[i];
-			const request = requests[i];
-
-			const responseValue = new Response(response.body, {
-				status: response.status,
-				headers: response.headers
-			});
-
-			// New version might be available since the page loaded, so make a
-			// record of it.
-
-			const nextVersion = responseValue.headers.get(ETagHeader);
-			if (nextVersion) {
-				setVersion(nextVersion);
-			}
-
-			const cacheKey = new Request(formatCacheKey(request.resource));
-			const cacheValue = responseValue.clone();
-
-			if (cache === undefined) {
-				if (cachePromise === undefined) {
-					cachePromise = caches.open(CacheName);
-				}
-				cache = await cachePromise;
-			}
-
-			debug && console.log(`[Oslo] cache prime: ${request.resource}`);
-			tasks.push(cache.put(cacheKey, cacheValue));
-			tasks.push(publish(request, responseValue));
-		}
-
-		await Promise.all(tasks);
-
-	} else {
-
-		for (const request of requests) {
-
-			request.reject(BatchFailedReason);
-		}
-	}
-
-	if (queue.length > 0) {
-		setTimeout(flushQueue, 0);
-	} else {
-		state = StateIdle;
-	}
-}
-
-function debounceQueue() {
-
-	if (state !== StateIdle) {
-		return;
-	}
-
-	if (timer > 0) {
-		clearTimeout(timer);
-	}
-
-	timer = setTimeout(flushQueue, DebounceTime);
-}
-
-async function fetchCollection(url) {
-
-	if (blobs.has(url)) {
-		return Promise.resolve(blobs.get(url));
-	}
-
-	const res = await fetch(url, { method: 'GET' });
-
-	if (res.ok) {
-		const resJson = await res.json();
-		blobs.set(url, resJson);
-		return Promise.resolve(resJson);
-	} else {
-		return Promise.reject(SingleFailedReason);
-	}
-}
-
-function fetchWithQueuing(resource) {
-
-	const promise = new Promise((resolve, reject) => {
-
-		queue.push({ resource, resolve, reject });
-	});
-
-	debounceQueue();
-
-	return promise;
-}
-
-function formatCacheKey(resource) {
-
-	return formatOsloRequest(documentLocaleSettings.oslo.collection, resource);
-}
-
-async function fetchWithCaching(resource) {
-
-	if (cache === undefined) {
-		if (cachePromise === undefined) {
-			cachePromise = caches.open(CacheName);
-		}
-		cache = await cachePromise;
-	}
-
-	const cacheKey = new Request(formatCacheKey(resource));
-	const cacheValue = await cache.match(cacheKey);
-	if (cacheValue === undefined) {
-		debug && console.log(`[Oslo] cache miss: ${resource}`);
-		return fetchWithQueuing(resource);
-	}
-
-	debug && console.log(`[Oslo] cache hit: ${resource}`);
-	if (!cacheValue.ok) {
-		fetchWithQueuing(resource).then(url => URL.revokeObjectURL(url));
-		throw SingleFailedReason;
-	}
-
-	// Check if the cache response is stale based on either the document init or
-	// any requests we've made to the LMS since init. We'll still serve stale
-	// from cache for this page, but we'll update it in the background for the
-	// next page.
-
-	// We rely on the ETag header to identify if the cache needs to be updated.
-	// The LMS will provide it in the format: [release].[build].[langModifiedVersion]
-	// So for example, an ETag in the 20.20.10 release could be: 20.20.10.24605.55520
-
-	const currentVersion = getVersion();
-	if (currentVersion) {
-
-		const previousVersion = cacheValue.headers.get(ETagHeader);
-		if (previousVersion !== currentVersion) {
-
-			debug && console.log(`[Oslo] cache stale: ${resource}`);
-			fetchWithQueuing(resource).then(url => URL.revokeObjectURL(url));
-		}
-	}
-
-	return await cacheValue.json();
-}
-
-function fetchWithPooling(resource) {
-
-	// At most one request per resource.
-
-	let promise = blobs.get(resource);
-	if (promise === undefined) {
-		promise = fetchWithCaching(resource);
-		blobs.set(resource, promise);
-	}
-	return promise;
-}
-
-async function shouldUseBatchFetch() {
-
-	if (documentLocaleSettings === undefined) {
-		documentLocaleSettings = getDocumentLocaleSettings();
-	}
-
-	if (!documentLocaleSettings.oslo) {
-		return false;
-	}
-
-	try {
-
-		// try opening CacheStorage, if the session is in a private browser in firefox this throws an exception
-		await caches.open(CacheName);
-
-		// Only batch if we can do client-side caching, otherwise it's worse on each
-		// subsequent page navigation.
-
-		return Boolean(documentLocaleSettings.oslo.batch) && 'CacheStorage' in window;
-	} catch (err) {
-		return false;
-	}
-
-}
-
-function shouldUseCollectionFetch() {
-
-	if (documentLocaleSettings === undefined) {
-		documentLocaleSettings = getDocumentLocaleSettings();
-	}
-
-	if (!documentLocaleSettings.oslo) {
-		return false;
-	}
-
-	return Boolean(documentLocaleSettings.oslo.collection);
-}
-
-function setVersion(version) {
-
-	if (documentLocaleSettings === undefined) {
-		documentLocaleSettings = getDocumentLocaleSettings();
-	}
-
-	if (!documentLocaleSettings.oslo) {
-		return;
-	}
-
-	documentLocaleSettings.oslo.version = version;
-}
-
-function getVersion() {
-
-	if (documentLocaleSettings === undefined) {
-		documentLocaleSettings = getDocumentLocaleSettings();
-	}
-
-	const shouldReturnVersion =
-		documentLocaleSettings.oslo &&
-		documentLocaleSettings.oslo.version;
-	if (!shouldReturnVersion) {
-		return null;
-	}
-
-	return documentLocaleSettings.oslo.version;
-}
-
-async function shouldFetchOverrides() {
-
-	const isOsloAvailable =
-		await shouldUseBatchFetch() ||
-		shouldUseCollectionFetch();
-
-	return isOsloAvailable;
-}
-
-async function fetchOverride(formatFunc) {
-
-	let resource, res, requestURL;
-
-	if (await shouldUseBatchFetch()) {
-
-		// If batching is available, pool requests together.
-
-		resource = formatFunc();
-		res = fetchWithPooling(resource);
-
-	} else /* shouldUseCollectionFetch() == true */ {
-
-		// Otherwise, fetch it directly and let the LMS manage the cache.
-
-		resource = formatFunc();
-		requestURL = formatOsloRequest(documentLocaleSettings.oslo.collection, resource);
-
-		res = fetchCollection(requestURL);
-
-	}
-	res = res.catch(coalesceToNull);
-	return res;
-}
-
-function coalesceToNull() {
-
-	return null;
-}
-
-function formatOsloRequest(baseUrl, resource) {
-	return `${baseUrl}/${resource}`;
-}
-
-export function __clearWindowCache() {
-
-	// Used to reset state for tests.
-
-	blobs.clear();
-	cache = undefined;
-	cachePromise = undefined;
-}
-
-export function __enableDebugging() {
-
-	// Used to enable debug logging during development.
-
-	debug = true;
-}
-
-export async function getLocalizeOverrideResources(
-	langCode,
-	translations,
-	formatFunc
-) {
-	const promises = [];
-
-	promises.push(translations);
-
-	if (await shouldFetchOverrides()) {
-		const overrides = await fetchOverride(formatFunc);
-		promises.push(overrides);
-	}
-
-	const results = await Promise.all(promises);
-
-	return {
-		language: langCode,
-		resources: Object.assign({}, ...results)
-	};
-}
-
-export async function getLocalizeResources(
-	possibleLanguages,
-	filterFunc,
-	formatFunc,
-	fetchFunc
-) {
-
-	const promises = [];
-	let supportedLanguage;
-
-	if (await shouldFetchOverrides()) {
-
-		const overrides = await fetchOverride(formatFunc, fetchFunc);
-		promises.push(overrides);
-	}
-
-	for (const language of possibleLanguages) {
-
-		if (filterFunc(language)) {
-
-			if (supportedLanguage === undefined) {
-				supportedLanguage = language;
-			}
-
-			const translations = fetchFunc(formatFunc(language));
-			promises.push(translations);
-
-			break;
-		}
-	}
-
-	const results = await Promise.all(promises);
-
-	// We're fetching in best -> worst, so we'll assign worst -> best, so the
-	// best overwrite everything else.
-
-	results.reverse();
-
-	return {
-		language: supportedLanguage,
-		resources: Object.assign({}, ...results)
-	};
-}
+export { getLocalizeOverrideResources, getLocalizeResources } from '@brightspace-ui/intl/helpers/getLocalizeResources.js';

package/mixins/localize/localize-mixin.js

@@ -1,4 +1,4 @@
-import { disallowedTagsRegex, getLocalizeClass, validateMarkup } from './localize.js';
+import { disallowedTagsRegex, getLocalizeClass, validateMarkup } from '@brightspace-ui/intl/lib/localize.js';
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.33.0",
+  "version": "3.34.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -67,10 +67,8 @@
   "dependencies": {
     "@brightspace-ui/intl": "^3",
     "@brightspace-ui/lms-context-provider": "^1",
-    "@formatjs/intl-pluralrules": "^1",
     "@open-wc/dedupe-mixin": "^1",
     "ifrau": "^0.41",
-    "intl-messageformat": "^10",
     "lit": "^3",
     "prismjs": "^1",
     "resize-observer-polyfill": "^1"

package/mixins/localize/localize.js

@@ -1,255 +0,0 @@
-import '@formatjs/intl-pluralrules/dist-es6/polyfill-locales.js';
-import { defaultLocale as fallbackLang, getDocumentLocaleSettings, supportedLangpacks } from '@brightspace-ui/intl/lib/common.js';
-import { getLocalizeOverrideResources } from '../../helpers/getLocalizeResources.js';
-import IntlMessageFormat from 'intl-messageformat';
-
-export const allowedTags = Object.freeze(['d2l-link', 'd2l-tooltip-help', 'p', 'br', 'b', 'strong', 'i', 'em', 'button']);
-
-const getDisallowedTagsRegex = allowedTags => {
-	const validTerminators = '([>\\s/]|$)';
-	const allowedAfterTriangleBracket = `/?(${allowedTags.join('|')})?${validTerminators}`;
-	return new RegExp(`<(?!${allowedAfterTriangleBracket})`);
-};
-
-export const disallowedTagsRegex = getDisallowedTagsRegex(allowedTags);
-const noAllowedTagsRegex = getDisallowedTagsRegex([]);
-
-export const getLocalizeClass = (superclass = class {}) => class LocalizeClass extends superclass {
-
-	static documentLocaleSettings = getDocumentLocaleSettings();
-	static #localizeMarkup;
-
-	static setLocalizeMarkup(localizeMarkup) {
-		this.#localizeMarkup ??= localizeMarkup;
-	}
-
-	pristine = true;
-	#connected = false;
-	#localeChangeCallback;
-	#resourcesPromise;
-	#resolveResourcesLoaded;
-
-	async #localeChangeHandler() {
-		if (!this._hasResources()) return;
-
-		const resourcesPromise = this.constructor._getAllLocalizeResources(this.config);
-		this.#resourcesPromise = resourcesPromise;
-		const localizeResources = (await resourcesPromise).flat(Infinity);
-		// If the locale changed while resources were being fetched, abort
-		if (this.#resourcesPromise !== resourcesPromise) return;
-
-		const allResources = {};
-		const resolvedLocales = new Set();
-		for (const { language, resources } of localizeResources) {
-			for (const [key, value] of Object.entries(resources)) {
-				allResources[key] = { language, value };
-				resolvedLocales.add(language);
-			}
-		}
-		this.localize.resources = allResources;
-		this.localize.resolvedLocale = [...resolvedLocales][0];
-		if (resolvedLocales.size > 1) {
-			console.warn(`Resolved multiple locales in '${this.constructor.name || this.tagName || ''}': ${[...resolvedLocales].join(', ')}`);
-		}
-
-		if (this.pristine) {
-			this.pristine = false;
-			this.#resolveResourcesLoaded();
-		}
-
-		this.#onResourcesChange();
-	}
-
-	#onResourcesChange() {
-		if (this.#connected) {
-			this.dispatchEvent?.(new CustomEvent('d2l-localize-resources-change'));
-			this.config?.onResourcesChange?.();
-			this.onLocalizeResourcesChange?.();
-		}
-	}
-
-	connect() {
-		this.#localeChangeCallback = () => this.#localeChangeHandler();
-		LocalizeClass.documentLocaleSettings.addChangeListener(this.#localeChangeCallback);
-		this.#connected = true;
-		this.#localeChangeCallback();
-	}
-
-	disconnect() {
-		LocalizeClass.documentLocaleSettings.removeChangeListener(this.#localeChangeCallback);
-		this.#connected = false;
-	}
-
-	localize(key) {
-
-		const { language, value } = this.localize.resources?.[key] ?? {};
-		if (!value) return '';
-
-		let params = {};
-		if (arguments.length > 1 && arguments[1]?.constructor === Object) {
-			// support for key-value replacements as a single arg
-			params = arguments[1];
-		} else {
-			// legacy support for localize-behavior replacements as many args
-			for (let i = 1; i < arguments.length; i += 2) {
-				params[arguments[i]] = arguments[i + 1];
-			}
-		}
-
-		const translatedMessage = new IntlMessageFormat(value, language);
-		let formattedMessage = value;
-		try {
-			validateMarkup(formattedMessage, noAllowedTagsRegex);
-			formattedMessage = translatedMessage.format(params);
-		} catch (e) {
-			if (e.name === 'MarkupError')	{
-				e = new Error('localize() does not support rich text. For more information, see: https://github.com/BrightspaceUI/core/blob/main/mixins/localize/'); // eslint-disable-line no-ex-assign
-				formattedMessage = '';
-			}
-			console.error(e);
-		}
-
-		return formattedMessage;
-	}
-
-	localizeHTML(key, params = {}) {
-
-		const { language, value } = this.localize.resources?.[key] ?? {};
-		if (!value) return '';
-
-		const translatedMessage = new IntlMessageFormat(value, language);
-		let formattedMessage = value;
-		try {
-			const unvalidated = translatedMessage.format({
-				b: chunks => LocalizeClass.#localizeMarkup`<b>${chunks}</b>`,
-				br: () => LocalizeClass.#localizeMarkup`<br>`,
-				em: chunks => LocalizeClass.#localizeMarkup`<em>${chunks}</em>`,
-				i: chunks => LocalizeClass.#localizeMarkup`<i>${chunks}</i>`,
-				p: chunks => LocalizeClass.#localizeMarkup`<p>${chunks}</p>`,
-				strong: chunks => LocalizeClass.#localizeMarkup`<strong>${chunks}</strong>`,
-				...params
-			});
-			validateMarkup(unvalidated);
-			formattedMessage = unvalidated;
-		} catch (e) {
-			if (e.name === 'MarkupError') formattedMessage = '';
-			console.error(e);
-		}
-
-		return formattedMessage;
-	}
-
-	__resourcesLoadedPromise = new Promise(r => this.#resolveResourcesLoaded = r);
-
-	static _generatePossibleLanguages(config) {
-
-		if (config?.useBrowserLangs) return navigator.languages.map(e => e.toLowerCase()).concat('en');
-
-		const { language, fallbackLanguage } = this.documentLocaleSettings;
-		const langs = [ language, fallbackLanguage ]
-			.filter(e => e)
-			.map(e => [ e.toLowerCase(), e.split('-')[0] ])
-			.flat();
-
-		return Array.from(new Set([ ...langs, 'en-us', 'en' ]));
-	}
-
-	static _getAllLocalizeResources(config = this.localizeConfig) {
-		const resourcesLoadedPromises = [];
-		const superCtor = Object.getPrototypeOf(this);
-		// get imported terms for each config, head up the chain to get them all
-		if ('_getAllLocalizeResources' in superCtor) {
-			const superConfig = Object.prototype.hasOwnProperty.call(superCtor, 'localizeConfig') && superCtor.localizeConfig.importFunc ? superCtor.localizeConfig : config;
-			resourcesLoadedPromises.push(superCtor._getAllLocalizeResources(superConfig));
-		}
-		if (Object.prototype.hasOwnProperty.call(this, 'getLocalizeResources') || Object.prototype.hasOwnProperty.call(this, 'resources')) {
-			const possibleLanguages = this._generatePossibleLanguages(config);
-			const resourcesPromise = this.getLocalizeResources(possibleLanguages, config);
-			resourcesLoadedPromises.push(resourcesPromise);
-		}
-		return Promise.all(resourcesLoadedPromises);
-	}
-
-	static async _getLocalizeResources(langs, { importFunc, osloCollection, useBrowserLangs }) {
-
-		// in dev, don't request unsupported langpacks
-		if (!importFunc.toString().includes('switch') && !useBrowserLangs) {
-			langs = langs.filter(lang => supportedLangpacks.includes(lang));
-		}
-
-		for (const lang of [...langs, fallbackLang]) {
-
-			const resources = await Promise.resolve(importFunc(lang)).catch(() => {});
-
-			if (resources) {
-
-				if (osloCollection) {
-					return await getLocalizeOverrideResources(
-						lang,
-						resources,
-						() => osloCollection
-					);
-				}
-
-				return {
-					language: lang,
-					resources
-				};
-			}
-		}
-	}
-
-	_hasResources() {
-		return this.constructor.localizeConfig ? Boolean(this.constructor.localizeConfig.importFunc) : this.constructor.getLocalizeResources !== undefined;
-	}
-
-};
-
-export const Localize = class extends getLocalizeClass() {
-
-	static getLocalizeResources() {
-		return super._getLocalizeResources(...arguments);
-	}
-
-	constructor(config) {
-		super();
-		super.constructor.setLocalizeMarkup(localizeMarkup);
-		this.config = config;
-		this.connect();
-	}
-
-	get ready() {
-		return this.__resourcesLoadedPromise;
-	}
-
-	connect() {
-		super.connect();
-		return this.ready;
-	}
-
-};
-
-class MarkupError extends Error {
-	name = this.constructor.name;
-}
-
-export function validateMarkup(content, disallowedTagsRegex) {
-	if (content) {
-		if (content.forEach) {
-			content.forEach(item => validateMarkup(item));
-			return;
-		}
-		if (content._localizeMarkup) return;
-		if (Object.hasOwn(content, '_$litType$')) throw new MarkupError('Rich-text replacements must use localizeMarkup templates. For more information, see: https://github.com/BrightspaceUI/core/blob/main/mixins/localize/');
-
-		if (content.constructor === String && disallowedTagsRegex?.test(content)) throw new MarkupError(`Rich-text replacements may use only the following allowed elements: ${allowedTags}. For more information, see: https://github.com/BrightspaceUI/core/blob/main/mixins/localize/`);
-	}
-}
-
-export function localizeMarkup(strings, ...expressions) {
-	strings.forEach(str => validateMarkup(str, disallowedTagsRegex));
-	expressions.forEach(exp => validateMarkup(exp, disallowedTagsRegex));
-	return strings.reduce((acc, i, idx) => {
-		return acc.push(i, expressions[idx] ?? '') && acc;
-	}, []).join('');
-}