@brightspace-ui/intl 3.25.0 → 3.26.0

package/lib/common.js

@@ -1,3 +1,5 @@
+import { DocumentLocaleSettings } from './document-locale-settings.js';
+
 export const defaultLocale = 'en';
 export const supportedBaseLocales = ['ar', 'cy', 'da', 'de', 'en', 'es', 'fr', 'haw', 'hi', 'ja', 'ko', 'mi', 'nl', 'pt', 'sv', 'tr', 'zh'];
 export const supportedLangpacks = ['ar', 'cy', 'da', 'de', 'en', 'en-gb', 'es', 'es-es', 'fr', 'fr-fr', 'fr-on', 'haw', 'hi', 'ja', 'ko', 'mi', 'nl', 'pt', 'sv', 'tr', 'zh-cn', 'zh-tw'];
@@ -89,136 +91,6 @@ export function validateFormatValue(value) {
 	return value;
 }
 
-class DocumentLocaleSettings {
-
-	constructor() {
-		this._cache = new Map();
-		this._htmlElem = window.document.getElementsByTagName('html')[0];
-		this._listeners = [];
-		this._overrides = {};
-		this._observer = new MutationObserver(this._handleObserverChange.bind(this));
-		this._observer.observe(this._htmlElem, { attributes: true });
-		this.sync();
-		this._languageInitial = this._language;
-	}
-
-	get fallbackLanguage() { return this._fallbackLanguage; }
-	set fallbackLanguage(val) {
-		const normalized = this._normalize(val);
-		if (normalized === this._fallbackLanguage) return;
-		this._cache.clear();
-		this._fallbackLanguage = normalized;
-		this._listeners.forEach((cb) => cb());
-	}
-
-	get language() { return this._language; }
-	set language(val) {
-		const normalized = this._normalize(val);
-		if (normalized === this._language) return;
-		this._cache.clear();
-		this._language = normalized;
-		this._listeners.forEach((cb) => cb());
-	}
-
-	get overrides() { return this._overrides; }
-	set overrides(val) {
-		if (val.date) {
-			if (val.date.calendar) {
-				delete val.date.calendar.dayPeriods;
-			}
-			if (val.date.formats) {
-				delete val.date.formats.timeFormats;
-			}
-		}
-		this._cache.clear();
-		this._overrides = val;
-		this._listeners.forEach((cb) => cb());
-	}
-
-	addChangeListener(cb) {
-		this._listeners.push(cb);
-	}
-
-	getCacheItem(key, provider) {
-		if (!this._cache.has(key)) {
-			this._cache.set(key, provider());
-		}
-		return this._cache.get(key);
-	}
-
-	removeChangeListener(cb) {
-		const index = this._listeners.indexOf(cb);
-		if (index < 0) return;
-		this._listeners.splice(index, 1);
-	}
-
-	reset() {
-		this._cache.clear();
-		this._language = this._languageInitial;
-		this._fallbackLanguage = null;
-		this.overrides = {};
-		this.timezone = { name: '', identifier: '' };
-		this._listeners = [];
-		this.oslo = { batch: null, collection: null, version: null };
-	}
-
-	sync() {
-		this.language = this._htmlElem.getAttribute('lang');
-		this.fallbackLanguage = this._htmlElem.getAttribute('data-lang-default');
-		this.overrides = this._tryParseHtmlElemAttr('data-intl-overrides', {});
-		this.timezone = this._tryParseHtmlElemAttr('data-timezone', { name: '', identifier: '' });
-		this.oslo = this._tryParseHtmlElemAttr('data-oslo', { batch: null, collection: null, version: null });
-	}
-
-	_handleObserverChange(mutations) {
-		let localeAttributeChange = false;
-		for (let i = 0; i < mutations.length; i++) {
-			const mutation = mutations[i];
-			if (mutation.attributeName === 'lang') {
-				this.language = this._htmlElem.getAttribute('lang');
-			} else if (mutation.attributeName === 'data-lang-default') {
-				this.fallbackLanguage = this._htmlElem.getAttribute('data-lang-default');
-			} else if (mutation.attributeName === 'data-intl-overrides') {
-				this.overrides = this._tryParseHtmlElemAttr('data-intl-overrides', {});
-			} else if (mutation.attributeName === 'data-timezone') {
-				this.timezone = this._tryParseHtmlElemAttr('data-timezone', { name: '', identifier: '' });
-				localeAttributeChange = true;
-			} else if (mutation.attributeName === 'data-oslo') {
-				this.oslo = this._tryParseHtmlElemAttr('data-oslo', { batch: null, collection: null, version: null });
-				localeAttributeChange = true;
-			}
-		}
-		if (localeAttributeChange) this._listeners.forEach((cb) => cb());
-	}
-
-	_normalize(langTag) {
-
-		if (langTag === undefined || langTag === null) return null;
-
-		langTag = langTag.trim().toLowerCase();
-
-		const subtags = langTag.split('-');
-		if (subtags.length < 2) {
-			return langTag;
-		}
-
-		return `${subtags[0]}-${subtags[subtags.length - 1]}`;
-
-	}
-
-	_tryParseHtmlElemAttr(attrName, defaultValue) {
-		if (this._htmlElem.hasAttribute(attrName)) {
-			try {
-				return JSON.parse(this._htmlElem.getAttribute(attrName));
-			} catch {
-				// swallow exception
-			}
-		}
-		return defaultValue;
-	}
-
-}
-
 let documentLocaleSettings = null;
 export function getDocumentLocaleSettings() {
 	if (documentLocaleSettings === null) {
@@ -227,8 +99,16 @@ export function getDocumentLocaleSettings() {
 	return documentLocaleSettings;
 }
 
+const localeRegEx = /[^a-zA-Z0-9-]/g;
+
 function updateLocalNames() {
-	const localName = new Intl.DisplayNames(documentLocaleSettings.language || navigator.language, { type: 'language' });
+	const possibleLocales = [documentLocaleSettings.language, navigator.language, defaultLocale].filter(l => l && !localeRegEx.test(l));
+	let localName;
+	try {
+		localName = new Intl.DisplayNames(possibleLocales, { type: 'language' });
+	} catch {
+		return;
+	}
 	supportedLocalesDetails.forEach(l => {
 		l.localName = localName.of(l.overrideCode || l.code);
 	});

package/lib/document-locale-settings.js

@@ -0,0 +1,141 @@
+const host = document.documentElement;
+
+const DEFAULTS = {
+	pseudoLocalization: {},
+	_fallbackLanguage: null,
+	overrides: {},
+	timezone: { name: '', identifier: '' },
+	oslo: { batch: null, collection: null, version: null }
+};
+
+export class DocumentLocaleSettings {
+
+	constructor() {
+		this._cache = new Map();
+		this._listeners = [];
+		this._overrides = DEFAULTS.overrides;
+
+		const observer = new MutationObserver(this._handleObserverChange.bind(this));
+		observer.observe(host, { attributes: true });
+
+		this.sync();
+	}
+
+	get fallbackLanguage() { return this._fallbackLanguage; }
+	set fallbackLanguage(val) {
+		const normalized = this._normalize(val);
+		if (normalized === this._fallbackLanguage) return;
+		this._cache.clear();
+		this._fallbackLanguage = normalized;
+		this._listeners.forEach((cb) => cb());
+	}
+
+	get language() { return this._language; }
+	set language(val) {
+		const normalized = this._normalize(val);
+		if (normalized === this._language) return;
+		this._cache.clear();
+		this._language = normalized;
+		this._listeners.forEach((cb) => cb());
+	}
+
+	get overrides() { return this._overrides; }
+	set overrides(val) {
+		if (val.date) {
+			if (val.date.calendar) {
+				delete val.date.calendar.dayPeriods;
+			}
+			if (val.date.formats) {
+				delete val.date.formats.timeFormats;
+			}
+		}
+		this._cache.clear();
+		this._overrides = val;
+		this._listeners.forEach((cb) => cb());
+	}
+
+	addChangeListener(cb) {
+		this._listeners.push(cb);
+	}
+
+	getCacheItem(key, provider) {
+		if (!this._cache.has(key)) {
+			this._cache.set(key, provider());
+		}
+		return this._cache.get(key);
+	}
+
+	removeChangeListener(cb) {
+		const index = this._listeners.indexOf(cb);
+		if (index < 0) return;
+		this._listeners.splice(index, 1);
+	}
+
+	reset() {
+		this._cache.clear();
+		this._language = this._languageInitial;
+		this._listeners = [];
+		Object.assign(this, DEFAULTS);
+	}
+
+	sync() {
+		this.language = host.getAttribute('lang');
+		this._languageInitial ??= this._language;
+		this.fallbackLanguage = host.getAttribute('data-lang-default');
+		this.overrides = this._tryParseHtmlElemAttr('data-intl-overrides', DEFAULTS.overrides);
+		this.timezone = this._tryParseHtmlElemAttr('data-timezone', DEFAULTS.timezone);
+		this.pseudoLocalization = this._tryParseHtmlElemAttr('data-pseudo-localization', DEFAULTS.pseudoLocalization);
+		this.oslo = this._tryParseHtmlElemAttr('data-oslo', DEFAULTS.oslo);
+	}
+
+	_handleObserverChange(mutations) {
+		let localeAttributeChange = false;
+		for (let i = 0; i < mutations.length; i++) {
+			const mutation = mutations[i];
+			if (mutation.attributeName === 'lang') {
+				this.language = host.getAttribute('lang');
+			} else if (mutation.attributeName === 'data-lang-default') {
+				this.fallbackLanguage = host.getAttribute('data-lang-default');
+			} else if (mutation.attributeName === 'data-intl-overrides') {
+				this.overrides = this._tryParseHtmlElemAttr('data-intl-overrides', DEFAULTS.overrides);
+			} else if (mutation.attributeName === 'data-timezone') {
+				this.timezone = this._tryParseHtmlElemAttr('data-timezone', DEFAULTS.timezone);
+				localeAttributeChange = true;
+			} else if (mutation.attributeName === 'data-pseudo-localization') {
+				this.pseudoLocalization = this._tryParseHtmlElemAttr('data-pseudo-localization', DEFAULTS.pseudoLocalization);
+				localeAttributeChange = true;
+			} else if (mutation.attributeName === 'data-oslo') {
+				this.oslo = this._tryParseHtmlElemAttr('data-oslo', DEFAULTS.oslo);
+				localeAttributeChange = true;
+			}
+		}
+		if (localeAttributeChange) this._listeners.forEach((cb) => cb());
+	}
+
+	_normalize(langTag) {
+
+		if (langTag === undefined || langTag === null) return null;
+
+		langTag = langTag.trim().toLowerCase();
+
+		const subtags = langTag.split('-');
+		if (subtags.length < 2) {
+			return langTag;
+		}
+
+		return `${subtags[0]}-${subtags[subtags.length - 1]}`;
+
+	}
+
+	_tryParseHtmlElemAttr(attrName, defaultValue) {
+		if (host.hasAttribute(attrName)) {
+			try {
+				return JSON.parse(host.getAttribute(attrName));
+			} catch {
+				// swallow exception
+			}
+		}
+		return defaultValue;
+	}
+
+}

package/lib/localize.js

@@ -35,6 +35,13 @@ const noAllowedTagsRegex = getDisallowedTagsRegex([]);
 export const getLocalizeClass = (superclass = class {}) => class LocalizeClass extends superclass {
 
 	static documentLocaleSettings = getDocumentLocaleSettings();
+
+	static pseudoLocalize(localize, name, ...replacements) {
+		const str = localize(name, ...replacements);
+		return this.documentLocaleSettings.pseudoLocalization.textFormat
+			.replace(/\{(0|1)\}/g, m => { return m === '{0}' ? str : name; });
+	}
+
 	static setLocalizeMarkup(localizeMarkup) {
 		this.#localizeMarkup ??= localizeMarkup;
 	}
@@ -258,7 +265,9 @@ export const Localize = class extends getLocalizeClass() {
 	constructor(config) {
 		super();
 		super.constructor.setLocalizeMarkup(localizeMarkup);
-		this.localize = (...args) => super.localize(...args);
+		this.localize = super.constructor.documentLocaleSettings.pseudoLocalization?.textFormat
+			? (...args) => super.constructor.pseudoLocalize((...args) => super.localize(...args), ...args)
+			: (...args) => super.localize(...args);
 		this.config = config;
 		this.connect();
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/intl",
-  "version": "3.25.0",
+  "version": "3.26.0",
   "description": "Internationalization APIs for number, date, time and file size formatting and parsing in D2L Brightspace.",
   "main": "lib/number.js",
   "type": "module",