@brightspace-ui/core 2.53.0 → 2.54.0

package/custom-elements.json

@@ -167,6 +167,10 @@
           "description": "Type of the alert being displayed",
           "type": "'default'|'critical'|'success'|'warning'",
           "default": "\"default\""
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -326,6 +330,10 @@
           "description": "Renders in compact mode, displaying only the last item",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "slots": [
@@ -691,6 +699,10 @@
           "attribute": "summary",
           "description": "Summary of the calendar for accessibility",
           "type": "string"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -1198,6 +1210,10 @@
           "type": "'count'|'notification'",
           "default": "\"count\""
         },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -1345,6 +1361,10 @@
           "type": "'count'|'notification'",
           "default": "\"count\""
         },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -1628,6 +1648,10 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        },
         {
           "name": "asyncContainerCustom",
           "type": "boolean"
@@ -1733,6 +1757,10 @@
           "type": "number",
           "default": "600"
         },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        },
         {
           "name": "asyncContainerCustom",
           "type": "boolean"
@@ -2213,6 +2241,10 @@
           "description": "Optionally render a d2l-focus-trap around the dropdown content",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -2582,6 +2614,10 @@
           "description": "Optionally render a d2l-focus-trap around the dropdown content",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -2951,6 +2987,10 @@
           "description": "Optionally render a d2l-focus-trap around the dropdown content",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -3479,6 +3519,10 @@
           "name": "openerType",
           "type": "string",
           "default": "\"DEFAULT\""
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -3523,6 +3567,10 @@
           "description": "The text displayed in this component's label (hidden when default is used)",
           "type": "string",
           "default": "\"\\\"Active Filters:\\\"\""
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ]
     },
@@ -3569,6 +3617,10 @@
           "description": "Indicates if the filter is open",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -3644,6 +3696,10 @@
           "name": "errors",
           "type": "object",
           "default": "[]"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ]
     },
@@ -3718,6 +3774,10 @@
           "description": "Indicates that the form should interrupt and warn on navigation if the user has unsaved changes on native elements.",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -3771,6 +3831,10 @@
           "description": "Indicates that the form should interrupt and warn on navigation if the user has unsaved changes on native elements.",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -3851,6 +3915,10 @@
           "attribute": "name",
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ]
     },
@@ -4453,6 +4521,10 @@
           "attribute": "name",
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -4519,6 +4591,10 @@
           "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ]
     },
@@ -4750,6 +4826,10 @@
           "attribute": "name",
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -4937,6 +5017,10 @@
           "attribute": "name",
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -5103,6 +5187,10 @@
           "attribute": "name",
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -5443,6 +5531,10 @@
           "attribute": "name",
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -5641,6 +5733,10 @@
           "attribute": "name",
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -5749,6 +5845,10 @@
           "description": "Value of the input",
           "type": "string",
           "default": "\"\""
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -6111,6 +6211,10 @@
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
         },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -6350,6 +6454,10 @@
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
         },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -6588,6 +6696,10 @@
           "attribute": "name",
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -6765,6 +6877,10 @@
           "attribute": "name",
           "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
           "type": "string"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -7063,6 +7179,10 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        },
         {
           "name": "dragHandleText",
           "attribute": "drag-handle-text",
@@ -7200,6 +7320,10 @@
           "description": "Whether all pages can be selected",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "slots": [
@@ -7327,6 +7451,10 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        },
         {
           "name": "dragHandleText",
           "attribute": "drag-handle-text",
@@ -7500,6 +7628,10 @@
           "description": "Disables the handle",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -7759,6 +7891,10 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        },
         {
           "name": "dragHandleText",
           "attribute": "drag-handle-text",
@@ -8381,6 +8517,10 @@
         }
       ],
       "properties": [
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        },
         {
           "name": "text",
           "attribute": "text",
@@ -8577,6 +8717,10 @@
           "description": "REQUIRED: Current number of completed units.\nValid values: A number between 0 and max",
           "type": "number",
           "default": "0"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ]
     },
@@ -8649,6 +8793,10 @@
           "description": "REQUIRED: Current number of completed units.\nValid values: A number between 0 and max",
           "type": "number",
           "default": "0"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ]
     },
@@ -8708,6 +8856,10 @@
           "description": "REQUIRED: Current number of completed units.\nValid values: A number between 0 and max",
           "type": "number",
           "default": "0"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ]
     },
@@ -8778,6 +8930,10 @@
           "description": "Whether the component is active or inactive",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -8980,6 +9136,10 @@
           "name": "openerType",
           "type": "string",
           "default": "\"DEFAULT\""
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -9040,6 +9200,10 @@
           "description": "The number of additional items to load.",
           "type": "number",
           "default": "50"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -9214,6 +9378,10 @@
           "description": "REQUIRED: Text for the dropdown opener button",
           "type": "string"
         },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        },
         {
           "name": "requiresSelection",
           "attribute": "requires-selection",
@@ -9427,6 +9595,10 @@
           "description": "REQUIRED: The text for the action",
           "type": "string"
         },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        },
         {
           "name": "requiresSelection",
           "attribute": "requires-selection",
@@ -9575,6 +9747,10 @@
         }
       ],
       "properties": [
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        },
         {
           "name": "selectionFor",
           "attribute": "selection-for",
@@ -9617,6 +9793,10 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        },
         {
           "name": "selectionFor",
           "attribute": "selection-for",
@@ -9657,6 +9837,10 @@
           "description": "Text to display if no items are selected",
           "type": "string"
         },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        },
         {
           "name": "selectionFor",
           "attribute": "selection-for",
@@ -10006,6 +10190,10 @@
           "name": "onIcon",
           "type": "TemplateResult<1>"
         },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        },
         {
           "name": "disabled",
           "attribute": "disabled",
@@ -10413,6 +10601,10 @@
           "type": "number",
           "default": "-1"
         },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        },
         {
           "name": "arrowKeysDirection",
           "type": "string",
@@ -10481,6 +10673,10 @@
           "description": "Enables the option to clear a tag list item. The `d2l-tag-list-item-clear` event will be dispatched when the user selects to delete the item. The consumer must handle the actual item deletion.",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -10533,6 +10729,10 @@
           "type": "number",
           "default": "0"
         },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        },
         {
           "name": "arrowKeysDirection",
           "type": "string",
@@ -10578,6 +10778,10 @@
           "description": "Enables the option to clear a tag list item. The `d2l-tag-list-item-clear` event will be dispatched when the user selects to delete the item. The consumer must handle the actual item deletion.",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [
@@ -10925,6 +11129,10 @@
           "description": "Whether content fills the screen or not",
           "type": "'fullscreen'|'normal'",
           "default": "\"fullscreen\""
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ],
       "events": [

package/mixins/localize-mixin.js

@@ -11,16 +11,15 @@ export const LocalizeMixin = dedupeMixin(superclass => class extends superclass
 		};
 	}
 
+	static documentLocaleSettings = getDocumentLocaleSettings();
+
 	constructor() {
 		super();
-
-		this.__documentLocaleSettings = getDocumentLocaleSettings();
 		this.__resourcesLoadedPromise = new Promise((resolve) => {
 			let first = true;
 			this.__languageChangeCallback = () => {
 				if (!this._hasResources()) return;
-				const possibleLanguages = this._generatePossibleLanguages();
-				const localizeResources = this.constructor._getAllLocalizeResources(possibleLanguages);
+				const localizeResources = this.constructor._getAllLocalizeResources();
 				const resourcesLoadedPromise = Promise.all(localizeResources);
 				resourcesLoadedPromise
 					.then((results) => {
@@ -45,18 +44,17 @@ export const LocalizeMixin = dedupeMixin(superclass => class extends superclass
 		});
 
 		this.__updatedProperties = new Map();
-
 	}
 
 	connectedCallback() {
 		super.connectedCallback();
-		this.__documentLocaleSettings.addChangeListener(this.__languageChangeCallback);
+		this.constructor.documentLocaleSettings.addChangeListener(this.__languageChangeCallback);
 		this.__languageChangeCallback();
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.__documentLocaleSettings.removeChangeListener(this.__languageChangeCallback);
+		this.constructor.documentLocaleSettings.removeChangeListener(this.__languageChangeCallback);
 		this.__updatedProperties.clear();
 	}
 
@@ -130,49 +128,30 @@ export const LocalizeMixin = dedupeMixin(superclass => class extends superclass
 
 	}
 
-	_generatePossibleLanguages() {
-		const langs = new Set();
-
-		let docLang = this.__documentLocaleSettings.language;
-		if (docLang) {
-			docLang = docLang.toLowerCase();
-			langs.add(docLang);
-
-			if (docLang.indexOf('-') !== -1) {
-				const baseDocLang = docLang.split('-')[0];
-				langs.add(baseDocLang);
-			}
-		}
-
-		let docFallbackLang = this.__documentLocaleSettings.fallbackLanguage;
-		if (docFallbackLang) {
-			docFallbackLang = docFallbackLang.toLowerCase();
-			langs.add(docFallbackLang);
+	static _generatePossibleLanguages(config) {
 
-			if (docFallbackLang.indexOf('-') !== -1) {
-				const baseDocFallbackLang = docFallbackLang.split('-')[0];
-				langs.add(baseDocFallbackLang);
-			}
-		}
+		if (config?.useBrowserLangs) return navigator.languages.map(e => e.toLowerCase()).concat('en');
 
-		langs.add('en-us');
-		langs.add('en');
+		const { language, fallbackLanguage } = this.documentLocaleSettings;
+		const langs = [ language, fallbackLanguage ]
+			.filter(e => e)
+			.map(e => [ e.toLowerCase(), e.split('-')[0] ])
+			.flat();
 
-		return Array.from(langs);
+		return Array.from(new Set([ ...langs, 'en-us', 'en' ]));
 	}
 
-	static _getAllLocalizeResources(possibleLanguages, config = this.localizeConfig) {
+	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) {
-			// eslint-disable-next-line no-prototype-builtins
-			const superConfig = superCtor.hasOwnProperty('localizeConfig') && superCtor.localizeConfig.importFunc ? superCtor.localizeConfig : config;
-			resourcesLoadedPromises = superCtor._getAllLocalizeResources(possibleLanguages, superConfig);
+			const superConfig = Object.hasOwn(superCtor, 'localizeConfig') && superCtor.localizeConfig.importFunc ? superCtor.localizeConfig : config;
+			resourcesLoadedPromises = superCtor._getAllLocalizeResources(superConfig);
 		}
-		// eslint-disable-next-line no-prototype-builtins
-		if (this.hasOwnProperty('getLocalizeResources') || this.hasOwnProperty('resources')) {
-			const res = this.getLocalizeResources([...possibleLanguages], config);
+		if (Object.hasOwn(this, 'getLocalizeResources') || Object.hasOwn(this, 'resources')) {
+			const possibleLanguages = this._generatePossibleLanguages(config);
+			const res = this.getLocalizeResources(possibleLanguages, config);
 			resourcesLoadedPromises.push(res);
 		}
 		return resourcesLoadedPromises;

package/mixins/localize-mixin.md

@@ -77,13 +77,12 @@ class MyComponent extends LocalizeDynamicMixin(LitElement) {
        // Import path must be relative
       importFunc: async lang => (await import(`../lang/${lang}.js`)).default,
       // Optionally enable OSLO
-      osloCollection: 'my-project\\myComponent',
+      osloCollection: '@d2l\\my-project\\myComponent',
     };
   }
 }
 ```
-
-When using this method, depending on various user settings, it's possible that a language file that does not exist will be requested, resulting in a network error (404). In production, your build system should prevent this by transpiling the variable dynamic import into a `switch` statement.
+Occasionally, it may be desirable to localize based on the user's browser settings. To do this, add `useBrowserLangs: true` to your `localizeConfig` object. This option should only be used if *all* supported *locales* have corresponding files named with their 4-character locale code, and all supported *languages*, in addition, have 2-character files. (e.g. `en-us.js`, `en-ca.js` and `en.js`)
 
 If your build system does not support variable dynamic imports, you'll need to manually set up imports for each supported language:
 

package/package.json

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