@brightspace-ui/core 2.101.3 → 2.103.0

package/mixins/localize-mixin.js

@@ -1,169 +1 @@
-import '@formatjs/intl-pluralrules/dist-es6/polyfill-locales.js';
-import { dedupeMixin } from '@open-wc/dedupe-mixin';
-import { getDocumentLocaleSettings } from '@brightspace-ui/intl/lib/common.js';
-import IntlMessageFormat from 'intl-messageformat';
-
-export const LocalizeMixin = dedupeMixin(superclass => class extends superclass {
-
-	static get properties() {
-		return {
-			__resources: { type: Object, attribute: false  }
-		};
-	}
-
-	static documentLocaleSettings = getDocumentLocaleSettings();
-
-	constructor() {
-		super();
-		this.__resourcesLoadedPromise = new Promise((resolve) => {
-			let first = true;
-			this.__languageChangeCallback = () => {
-				if (!this._hasResources()) return;
-				const localizeResources = this.constructor._getAllLocalizeResources();
-				const resourcesLoadedPromise = Promise.all(localizeResources);
-				resourcesLoadedPromise
-					.then((results) => {
-						if (results.length === 0) {
-							return;
-						}
-						const resources = {};
-						for (const res of results) {
-							const language = res.language;
-							for (const [key, value] of Object.entries(res.resources)) {
-								resources[key] = { language, value };
-							}
-						}
-						this.__resources = resources;
-						this._onResourcesChange();
-						if (first) {
-							resolve();
-							first = false;
-						}
-					});
-			};
-		});
-
-		this.__updatedProperties = new Map();
-	}
-
-	connectedCallback() {
-		super.connectedCallback();
-		this.constructor.documentLocaleSettings.addChangeListener(this.__languageChangeCallback);
-		this.__languageChangeCallback();
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.constructor.documentLocaleSettings.removeChangeListener(this.__languageChangeCallback);
-		this.__updatedProperties.clear();
-	}
-
-	shouldUpdate(changedProperties) {
-
-		const hasResources = this._hasResources();
-		if (!hasResources) {
-			return super.shouldUpdate(changedProperties);
-		}
-
-		const ready = this.__resources !== undefined;
-		if (!ready) {
-			changedProperties.forEach((oldValue, propName) => {
-				this.__updatedProperties.set(propName, oldValue);
-			});
-			return false;
-		}
-
-		this.__updatedProperties.forEach((oldValue, propName) => {
-			if (!changedProperties.has(propName)) {
-				changedProperties.set(propName, oldValue);
-			}
-		});
-		this.__updatedProperties.clear();
-
-		return super.shouldUpdate(changedProperties);
-
-	}
-
-	async getUpdateComplete() {
-		await super.getUpdateComplete();
-		const hasResources = this._hasResources();
-		const resourcesLoaded = this.__resources !== undefined;
-		if (!hasResources || resourcesLoaded) {
-			return;
-		}
-		await this.__resourcesLoadedPromise;
-	}
-
-	localize(key) {
-
-		if (!key || !this.__resources) {
-			return '';
-		}
-
-		const resource = this.__resources[key];
-		if (!resource) {
-			return '';
-		}
-		const translatedValue = resource.value;
-
-		let params = {};
-		if (arguments.length > 1 && typeof arguments[1] === '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(translatedValue, resource.language);
-		let formattedMessage = translatedValue;
-		try {
-			formattedMessage = translatedMessage.format(params);
-		} catch (e) {
-			console.error(e);
-		}
-		return formattedMessage;
-
-	}
-
-	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) {
-		let 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 = superCtor._getAllLocalizeResources(superConfig);
-		}
-		if (Object.prototype.hasOwnProperty.call(this, 'getLocalizeResources') || Object.prototype.hasOwnProperty.call(this, 'resources')) {
-			const possibleLanguages = this._generatePossibleLanguages(config);
-			const res = this.getLocalizeResources(possibleLanguages, config);
-			resourcesLoadedPromises.push(res);
-		}
-		return resourcesLoadedPromises;
-	}
-
-	_hasResources() {
-		return this.constructor['getLocalizeResources'] !== undefined;
-	}
-
-	_onResourcesChange() {
-		/** @ignore */
-		this.dispatchEvent(new CustomEvent('d2l-localize-resources-change'));
-	}
-
-});
+export { _LocalizeMixinBase as LocalizeMixin } from './localize/localize-mixin.js';

package/mixins/localize-static-mixin.js

@@ -1,28 +1 @@
-import { LocalizeMixin } from './localize-mixin.js';
-
-const fallbackLang = 'en';
-
-export const LocalizeStaticMixin = superclass => class extends LocalizeMixin(superclass) {
-
-	static async getLocalizeResources(langs) {
-		let resolvedLang = fallbackLang;
-		const resolvedResources = Object.assign({}, this.resources[fallbackLang]);
-
-		langs.reverse().forEach((lang) => {
-			if (this.resources[lang]) {
-				resolvedLang = lang;
-				Object.assign(resolvedResources, this.resources[lang]);
-			}
-		});
-
-		return {
-			language: resolvedLang,
-			resources: resolvedResources
-		};
-	}
-
-	static get resources() {
-		return { 'en': {} };
-	}
-
-};
+export { LocalizeStaticMixin } from './localize/localize-mixin.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.101.3",
+  "version": "2.103.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -46,6 +46,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7",
     "@brightspace-ui/stylelint-config": "^0.7",
+    "@open-wc/semantic-dom-diff": "^0.19.9",
     "@open-wc/testing": "^3",
     "@rollup/plugin-dynamic-import-vars": "^2",
     "@rollup/plugin-node-resolve": "^15",

package/tools/dom-test-helpers.js

@@ -1,14 +1,15 @@
 import { getComposedChildren } from '../helpers/dom.js';
 
-export function keyDown(element, keycode) {
+export function keyDown(element, keyCode, ctrlKey) {
 	const event = new CustomEvent('keydown', {
 		detail: 0,
 		bubbles: true,
 		cancelable: true,
 		composed: true
 	});
-	event.keyCode = keycode;
-	event.code = keycode;
+	event.keyCode = keyCode;
+	event.code = keyCode;
+	if (ctrlKey !== undefined) event.ctrlKey = ctrlKey;
 	element.dispatchEvent(event);
 }
 

package/mixins/demo/localize-mixin.html

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<meta charset="UTF-8">
-		<link rel="stylesheet" href="../../components/demo/styles.css" type="text/css">
-		<script type="module">
-			import '../../components/demo/demo-page.js';
-			import './localize-test.js';
-		</script>
-	</head>
-	<body unresolved>
-		<d2l-demo-page page-title="localize-mixin">
-			<d2l-demo-snippet>
-				<d2l-test-localize name="Bill"></d2l-test-localize>
-			</d2l-demo-snippet>
-		</d2l-demo-page>
-	</body>
-</html>

package/mixins/demo/localize-test.js

@@ -1,57 +0,0 @@
-import { html, LitElement } from 'lit';
-import { LocalizeDynamicMixin } from '../../mixins/localize-dynamic-mixin.js';
-
-class LocalizeTest extends LocalizeDynamicMixin(LitElement) {
-
-	static get properties() {
-		return {
-			name: {
-				type: String
-			}
-		};
-	}
-
-	static get localizeConfig() {
-		const langResources = {
-			'ar': { 'hello': 'مرحبا {name}' },
-			'de': { 'hello': 'Hallo {name}' },
-			'en': {
-				'hello': 'Hello {name}',
-				'plural': 'You have {itemCount, plural, =0 {no items} one {1 item} other {{itemCount} items}}.'
-			},
-			'en-ca': { 'hello': 'Hello, {name} eh' },
-			'es': { 'hello': 'Hola {name}' },
-			'fr': { 'hello': 'Bonjour {name}' },
-			'ja': { 'hello': 'こんにちは {name}' },
-			'ko': { 'hello': '안녕하세요 {name}' },
-			'pt-br': { 'hello': 'Olá {name}' },
-			'tr': { 'hello': 'Merhaba {name}' },
-			'zh-cn': { 'hello': '你好 {name}' },
-			'zh-tw': { 'hello': '你好 {name}' }
-		};
-		return {
-			importFunc: async lang => {
-				return new Promise((resolve) => {
-					setTimeout(() => {
-						resolve(langResources[lang]);
-					}, 50);
-				});
-			}
-		};
-	}
-
-	render() {
-		requestAnimationFrame(
-			() => this.dispatchEvent(new CustomEvent('d2l-test-localize-render', {
-				bubbles: false,
-				composed: false
-			}))
-		);
-		return html`
-			<p>${this.localize('hello', { name: this.name })}</p>
-		`;
-	}
-
-}
-
-customElements.define('d2l-test-localize', LocalizeTest);