fix: fix JS error on setLanguage call (#2328)

When there is a component that uses CLDR and someone calls **setLanguage**,
this causes the webcomponents to re-render and recalculate their state and it turns out that the CLDR for the newly set language is missing and JS error is thrown ("Error: CLDR data for locale de is not loaded").
Currently, this can be seen in our "RTL.html" page, if we add a DatePicker and then use the buttons on the page to change the language. This PR ensures that upon setLanguage, the CLDR is fetched/updated before the re-rendering.
On the other hand, there is **applyDirection** API that also force re-rendering, that if used together with setLanguage, should wait for the setLanguage to complete to allow the message bundles (although they won't fail with JS error) and CLDR to load.

Author: ilhan007

packages/base/src/asset-registries/LocaleData.js

@@ -1,4 +1,6 @@
 import { fetchJsonOnce } from "../util/FetchHelper.js";
+import { attachLanguageChange } from "../locale/languageChange.js";
+import getLocale from "../locale/getLocale.js";
 import { getFeature } from "../FeaturesRegistry.js";
 import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from "../generated/AssetParameters.js";
 import { getEffectiveAssetPath } from "../util/EffectiveAssetPath.js";
@@ -116,6 +118,13 @@ const _registerMappingFunction = mappingFn => {
 	cldrMappingFn = mappingFn;
 };
 
+// When the language changes dynamically (the user calls setLanguage),
+// re-fetch the required CDRD data.
+attachLanguageChange(() => {
+	const locale = getLocale();
+	return fetchCldr(locale.getLanguage(), locale.getRegion(), locale.getScript());
+});
+
 export {
 	fetchCldr,
 	registerCldr,

packages/main/test/pages/RTL.html

@@ -75,7 +75,7 @@
 		<ui5-checkbox text="This checkbox however defines dir=ltr" dir="ltr"></ui5-checkbox>
 	</section>
 
-
+	<ui5-date-picker></ui5-date-picker>
 	<script>
 
 		// Utility function to change RTL and apply the changes
@@ -84,6 +84,18 @@
 			window['sap-ui-webcomponents-bundle'].applyDirection();
 		}
 
+		function setDirByLang(lang) {
+			if (lang === "he" || lang === "ar") {
+				setDir("rtl");
+			} else {
+				setDir("ltr");
+			}
+		}
+
+		function setLanguage(lang) {
+			return window['sap-ui-webcomponents-bundle'].configuration.setLanguage(lang);
+		}
+
 		document.getElementById("sw").addEventListener("click", function(e) {
 			if (e.target.checked) {
 				setDir("rtl");
@@ -94,12 +106,10 @@
 
 		document.getElementById("tb").addEventListener("selection-change", function(e) {
 			var lang = e.detail.selectedButton.textContent.toLowerCase();
-			if (lang === "he" || lang === "ar") {
-				setDir("rtl");
-			} else {
-				setDir("ltr");
-			}
-			window['sap-ui-webcomponents-bundle'].configuration.setLanguage(lang);
+
+			setLanguage(lang).then(function() {
+				setDirByLang(lang);
+			});
 		});
 	</script>