@ui5/webcomponents-base 0.0.0-e463d2345 → 0.0.0-e818f286e

package/src/asset-registries/Themes.js

@@ -1,7 +1,7 @@
-import { fetchJsonOnce } from "../util/FetchHelper.js";
+import { DEFAULT_THEME } from "../generated/AssetParameters.js";
 
-const themeURLs = new Map();
 const themeStyles = new Map();
+const loaders = new Map();
 const registeredPackages = new Set();
 const registeredThemes = new Set();
 
@@ -13,63 +13,70 @@ const registeredThemes = new Set();
  * Example usage:
  *  1) Pass the CSS Vars as a string directly.
  *  registerThemeProperties("my-package", "my_theme", ":root{--var1: red;}");
- *  2) Pass the CSS Vars as an object directly
- *  registerThemeProperties("my-package", "my_theme", {"_": ":root{--var1: red;}"});
- *  3) Pass a URL to a JSON file, containing the CSS Vars in its "_" property. Will be fetched on demand, not upon registration.
- *  registerThemeProperties("my-package", "my_theme", "http://url/to/my/theme.json");
  *
  * @public
  * @param packageName - the NPM package for which CSS Vars are registered
  * @param themeName - the theme which the CSS Vars implement
- * @param style - can be one of three options: a string, an object with a "_" property or a URL to a JSON file with a "_" property
+ * @param style - the style content directly
+ * @deprecated
  */
-const registerThemeProperties = (packageName, themeName, style) => {
-	if (style._) {
-		// JSON object like ({"_": ":root"})
-		themeStyles.set(`${packageName}_${themeName}`, style._);
-	} else if (style.includes(":root")) {
-		// pure string
-		themeStyles.set(`${packageName}_${themeName}`, style);
-	} else {
-		// url for fetching
-		themeURLs.set(`${packageName}_${themeName}`, style);
-	}
+const registerThemeProperties = (_packageName, _themeName, _style) => {
+	throw new Error("`registerThemeProperties` has been depracated. Use `registerThemePropertiesLoader` instead.");
+};
+
+const registerThemePropertiesLoader = (packageName, themeName, loader) => {
+	loaders.set(`${packageName}/${themeName}`, loader);
 	registeredPackages.add(packageName);
 	registeredThemes.add(themeName);
 };
 
 const getThemeProperties = async (packageName, themeName) => {
 	const style = themeStyles.get(`${packageName}_${themeName}`);
-	if (style) {
+	if (style !== undefined) { // it's valid for style to be an empty string
 		return style;
 	}
 
 	if (!registeredThemes.has(themeName)) {
 		const regThemesStr = [...registeredThemes.values()].join(", ");
-		console.warn(`You have requested a non-registered theme - falling back to sap_fiori_3. Registered themes are: ${regThemesStr}`); /* eslint-disable-line */
-		return themeStyles.get(`${packageName}_sap_fiori_3`);
+		console.warn(`You have requested a non-registered theme ${themeName} - falling back to ${DEFAULT_THEME}. Registered themes are: ${regThemesStr}`); /* eslint-disable-line */
+		return _getThemeProperties(packageName, DEFAULT_THEME);
 	}
 
-	const data = await fetchThemeProperties(packageName, themeName);
-	themeStyles.set(`${packageName}_${themeName}`, data._);
-	return data._;
+	return _getThemeProperties(packageName, themeName);
 };
 
-const fetchThemeProperties = async (packageName, themeName) => {
-	const url = themeURLs.get(`${packageName}_${themeName}`);
-
-	if (!url) {
-		throw new Error(`You have to import the ${packageName}/dist/Assets.js module to switch to additional themes`);
+const _getThemeProperties = async (packageName, themeName) => {
+	const loader = loaders.get(`${packageName}/${themeName}`);
+	if (!loader) {
+		// no themes for package
+		console.error(`Theme [${themeName}] not registered for package [${packageName}]`); /* eslint-disable-line */
+		return;
 	}
-	return fetchJsonOnce(url);
+	let data;
+	try {
+		data = await loader(themeName);
+	} catch (e) {
+		console.error(packageName, e.message); /* eslint-disable-line */
+		return;
+	}
+	const themeProps = data._ || data;
+
+	themeStyles.set(`${packageName}_${themeName}`, themeProps);
+	return themeProps;
 };
 
 const getRegisteredPackages = () => {
 	return registeredPackages;
 };
 
+const isThemeRegistered = theme => {
+	return registeredThemes.has(theme);
+};
+
 export {
+	registerThemePropertiesLoader,
 	registerThemeProperties,
 	getThemeProperties,
 	getRegisteredPackages,
+	isThemeRegistered,
 };

package/src/asset-registries/i18n.js

@@ -1,19 +1,33 @@
-import "../shims/jquery-shim.js";
-import "../shims/Core-shim.js";
-import { getLanguage } from "../LocaleProvider.js";
-import { fetchJsonOnce } from "../util/FetchHelper.js";
-import { normalizeLocale, nextFallbackLocale } from "../util/normalizeLocale.js";
+import getLocale from "../locale/getLocale.js";
+import { attachLanguageChange } from "../locale/languageChange.js";
+import normalizeLocale from "../locale/normalizeLocale.js";
+import nextFallbackLocale from "../locale/nextFallbackLocale.js";
+import { DEFAULT_LANGUAGE } from "../generated/AssetParameters.js";
+import { getFetchDefaultLanguage } from "../config/Language.js";
+
+// contains package names for which the warning has been shown
+const warningShown = new Set();
+const reportedErrors = new Set();
 
 const bundleData = new Map();
-const bundleURLs = new Map();
+const bundlePromises = new Map();
+const loaders = new Map();
 
 /**
- * Sets a map with texts and ID the are related to.
- * @param {string} packageName package ID that the i18n bundle will be related to
- * @param {Object} data an object with string locales as keys and text translataions as values
+ * Registers i18n loader function for given package and locale.
+ *
  * @public
+ * @param {string} packageName for which package this loader can fetch data
+ * @param {string} localeId locale that this loader can handle
+ * @param {function} loader async function that will be passed a localeId and should return a JSON object
  */
-const setI18nBundleData = (packageName, data) => {
+const registerI18nLoader = (packageName, localeId, loader) => {
+	// register loader by key
+	const bundleKey = `${packageName}/${localeId}`;
+	loaders.set(bundleKey, loader);
+};
+
+const _setI18nBundleData = (packageName, data) => {
 	bundleData.set(packageName, data);
 };
 
@@ -22,13 +36,36 @@ const getI18nBundleData = packageName => {
 };
 
 /**
- * Registers a map of locale/url information, to be used by the <code>fetchI18nBundle</code> method.
- * @param {string} packageName package ID that the i18n bundle will be related to
- * @param {Object} bundle an object with string locales as keys and the URLs of where the corresponding locale can be fetched from, f.e {"en": "path/en.json", ...}
  * @public
+ * @deprecated
  */
-const registerI18nBundle = (packageName, bundle) => {
-	bundleURLs.set(packageName, bundle);
+const registerI18nBundle = (_packageName, _bundle) => {
+	throw new Error("This method has been removed. Use `registerI18nLoader` instead.");
+};
+
+const _hasLoader = (packageName, localeId) => {
+	const bundleKey = `${packageName}/${localeId}`;
+	return loaders.has(bundleKey);
+};
+
+// load bundle over the network once
+const _loadMessageBundleOnce = (packageName, localeId) => {
+	const bundleKey = `${packageName}/${localeId}`;
+	const loadMessageBundle = loaders.get(bundleKey);
+
+	if (!bundlePromises.get(bundleKey)) {
+		bundlePromises.set(bundleKey, loadMessageBundle(localeId));
+	}
+
+	return bundlePromises.get(bundleKey);
+};
+
+const _showAssetsWarningOnce = packageName => {
+	if (!warningShown.has(packageName)) {
+		console.warn(`[${packageName}]: Message bundle assets are not configured. Falling back to English texts.`, /* eslint-disable-line */
+		` Add \`import "${packageName}/dist/Assets.js"\` in your bundle and make sure your build tool supports dynamic imports and JSON imports. See section "Assets" in the documentation for more information.`); /* eslint-disable-line */
+		warningShown.add(packageName);
+	}
 };
 
 /**
@@ -41,35 +78,46 @@ const registerI18nBundle = (packageName, bundle) => {
  * @public
  */
 const fetchI18nBundle = async packageName => {
-	const bundlesForPackage = bundleURLs.get(packageName);
-
-	if (!bundlesForPackage) {
-		console.warn(`Message bundle assets are not configured. Falling back to English texts.`, /* eslint-disable-line */
-		` You need to import ${packageName}/dist/Assets.js with a build tool that supports JSON imports.`); /* eslint-disable-line */
-		return;
-	}
-
-	const language = getLanguage();
+	const language = getLocale().getLanguage();
+	const region = getLocale().getRegion();
+	let localeId = normalizeLocale(language + (region ? `-${region}` : ``));
 
-	let localeId = normalizeLocale(language);
-	while (!bundlesForPackage[localeId]) {
+	while (localeId !== DEFAULT_LANGUAGE && !_hasLoader(packageName, localeId)) {
 		localeId = nextFallbackLocale(localeId);
 	}
 
-	const bundleURL = bundlesForPackage[localeId];
+	// use default language unless configured to always fetch it from the network
+	const fetchDefaultLanguage = getFetchDefaultLanguage();
+	if (localeId === DEFAULT_LANGUAGE && !fetchDefaultLanguage) {
+		_setI18nBundleData(packageName, null); // reset for the default language (if data was set for a previous language)
+		return;
+	}
 
-	if (typeof bundleURL === "object") { // inlined from build
-		setI18nBundleData(packageName, bundleURL);
-		return bundleURL;
+	if (!_hasLoader(packageName, localeId)) {
+		_showAssetsWarningOnce(packageName);
+		return;
 	}
 
-	const data = await fetchJsonOnce(bundleURL);
-	setI18nBundleData(packageName, data);
+	try {
+		const data = await _loadMessageBundleOnce(packageName, localeId);
+		_setI18nBundleData(packageName, data);
+	} catch (e) {
+		if (!reportedErrors.has(e.message)) {
+			reportedErrors.add(e.message);
+			console.error(e.message); /* eslint-disable-line */
+		}
+	}
 };
 
+// When the language changes dynamically (the user calls setLanguage), re-fetch all previously fetched bundles
+attachLanguageChange(() => {
+	const allPackages = [...bundleData.keys()];
+	return Promise.all(allPackages.map(fetchI18nBundle));
+});
+
 export {
+	registerI18nLoader,
 	fetchI18nBundle,
 	registerI18nBundle,
-	setI18nBundleData,
 	getI18nBundleData,
 };

package/src/assets-meta/IconCollectionsAlias.js

@@ -0,0 +1,18 @@
+/**
+ * Supported icon collection names and aliases.
+ *
+ * Users might specify a collection, using both the key and the value in the following key-value pairs,
+ * e.g the following pairs are completely exchangeable:
+ * "SAP-icons-TNT/actor" and "tnt/actor", "BusinessSuiteInAppSymbols/3d" and "business-suite/3d",
+ * "SAP-icons-v5/accept" and "horizon/accept".
+ *
+ * Note: technically, in the code we maintain the collections under the "value" name - "tnt", "business-suite",
+ * SAP-icons-v5" and "SAP-icons"(which does not have an alias).
+ */
+const IconCollectionsAlias = {
+	"SAP-icons-TNT": "tnt",
+	"BusinessSuiteInAppSymbols": "business-suite",
+	"horizon": "SAP-icons-v5",
+};
+
+export default IconCollectionsAlias;

package/src/config/AnimationMode.js

@@ -1,9 +1,23 @@
 import { getAnimationMode as getConfiguredAnimationMode } from "../InitialConfiguration.js";
+import AnimationMode from "../types/AnimationMode.js";
 
-const animationMode = getConfiguredAnimationMode();
+let animationMode;
 
 const getAnimationMode = () => {
+	if (animationMode === undefined) {
+		animationMode = getConfiguredAnimationMode();
+	}
+
 	return animationMode;
 };
 
-export { getAnimationMode }; // eslint-disable-line
+const setAnimationMode = newAnimationMode => {
+	if (Object.values(AnimationMode).includes(newAnimationMode)) {
+		animationMode = newAnimationMode;
+	}
+};
+
+export {
+	getAnimationMode,
+	setAnimationMode,
+};

package/src/config/CalendarType.js

@@ -1,15 +1,15 @@
-import CalendarType from "@ui5/webcomponents-utils/dist/sap/ui/core/CalendarType.js";
+import CalendarType from "../types/CalendarType.js";
 import { getCalendarType as getConfiguredCalendarType } from "../InitialConfiguration.js";
 
-const calendarType = getConfiguredCalendarType();
+let calendarType;
 
 const getCalendarType = () => {
-	if (calendarType) {
-		const type = Object.keys(CalendarType).find(calType => calType === calendarType);
+	if (calendarType === undefined) {
+		calendarType = getConfiguredCalendarType();
+	}
 
-		if (type) {
-			return type;
-		}
+	if (CalendarType.isValid(calendarType)) {
+		return calendarType;
 	}
 
 	return CalendarType.Gregorian;

package/src/config/FormatSettings.js

@@ -1,8 +1,12 @@
 import { getFormatSettings } from "../InitialConfiguration.js";
 
-const formatSettings = getFormatSettings();
+let formatSettings;
 
 const getFirstDayOfWeek = () => {
+	if (formatSettings === undefined) {
+		formatSettings = getFormatSettings();
+	}
+
 	return formatSettings.firstDayOfWeek;
 };
 

package/src/config/Icons.js

@@ -0,0 +1,52 @@
+import { getTheme, isThemeFamily } from "./Theme.js";
+
+const IconCollectionConfiguration = new Map();
+
+/**
+ * Sets the default icon collection (v4 or v5) per theme,
+ * which will be applied in case icon collection is not specified.
+ *
+ * Note: by default SAP-icons-v5 is used in SAP Horizon and  SAP-icons-v4 for all the rest.
+ * @param {String} theme
+ * @param {String} collectionName
+ */
+const setDefaultIconCollection = (theme, collectionName) => {
+	if (collectionName === "horizon") {
+		collectionName = "SAP-icons-v5";
+	}
+
+	IconCollectionConfiguration.set(theme, collectionName);
+};
+
+/**
+ * Returns the default icon collection (v4 or v5) for given theme,
+ * that is configured.
+ *
+ * @param {String} theme
+ * @returns {String}
+ */
+const getDefaultIconCollection = theme => {
+	return IconCollectionConfiguration.get(theme);
+};
+
+/**
+ * Returns the effective icon collection that will be applied for icon web components
+ * whenever namespace is not specified.
+ * @returns {String}
+ */
+const getEffectiveDefaultIconCollection = () => {
+	const currentTheme = getTheme();
+	const currentThemeConfiguration = IconCollectionConfiguration.get(currentTheme);
+
+	if (currentThemeConfiguration) {
+		return currentThemeConfiguration;
+	}
+
+	return isThemeFamily("sap_horizon") ? "SAP-icons-v5" : "SAP-icons";
+};
+
+export {
+	setDefaultIconCollection,
+	getDefaultIconCollection,
+	getEffectiveDefaultIconCollection,
+};

package/src/config/Language.js

@@ -1,9 +1,68 @@
-import { getLanguage as getConfiguredLanguage } from "../InitialConfiguration.js";
+import {
+	getLanguage as getConfiguredLanguage,
+	getFetchDefaultLanguage as getConfiguredFetchDefaultLanguage,
+} from "../InitialConfiguration.js";
+import { fireLanguageChange } from "../locale/languageChange.js";
+import { reRenderAllUI5Elements } from "../Render.js";
 
-const language = getConfiguredLanguage();
+let language;
+let fetchDefaultLanguage;
 
+/**
+ * Returns the currently configured language, or the browser language as a fallback
+ * @returns {String}
+ */
 const getLanguage = () => {
+	if (language === undefined) {
+		language = getConfiguredLanguage();
+	}
 	return language;
 };
 
-export { getLanguage }; // eslint-disable-line
+/**
+ * Changes the current language, re-fetches all message bundles, updates all language-aware components
+ * and returns a promise that resolves when all rendering is done
+ *
+ * @param newLanguage
+ * @returns {Promise<void>}
+ */
+const setLanguage = async newLanguage => {
+	if (language === newLanguage) {
+		return;
+	}
+
+	language = newLanguage;
+
+	await fireLanguageChange(newLanguage);
+	await reRenderAllUI5Elements({ languageAware: true });
+};
+
+/**
+ * Defines if the default language, that is inlined, should be
+ * fetched over the network instead of using the inlined one.
+ * <b>Note:</b> By default the language will not be fetched.
+ *
+ * @param {Boolean} fetchDefaultLanguage
+ */
+const setFetchDefaultLanguage = fetchDefaultLang => {
+	fetchDefaultLanguage = fetchDefaultLang;
+};
+
+/**
+ * Returns if the default language, that is inlined, should be fetched over the network.
+ * @returns {Boolean}
+ */
+const getFetchDefaultLanguage = () => {
+	if (fetchDefaultLanguage === undefined) {
+		setFetchDefaultLanguage(getConfiguredFetchDefaultLanguage());
+	}
+
+	return fetchDefaultLanguage;
+};
+
+export {
+	getLanguage,
+	setLanguage,
+	setFetchDefaultLanguage,
+	getFetchDefaultLanguage,
+};

package/src/config/NoConflict.js

@@ -9,24 +9,31 @@ const shouldFireOriginalEvent = eventName => {
 	return excludeList.includes(eventName);
 };
 
-let noConflict = getConfiguredNoConflict();
+let noConflict;
 
 const shouldNotFireOriginalEvent = eventName => {
-	return !(noConflict.events && noConflict.events.includes && noConflict.events.includes(eventName));
+	const nc = getNoConflict();
+	return !(nc.events && nc.events.includes && nc.events.includes(eventName));
 };
 
 const getNoConflict = () => {
+	if (noConflict === undefined) {
+		noConflict = getConfiguredNoConflict();
+	}
+
 	return noConflict;
 };
 
 const skipOriginalEvent = eventName => {
+	const nc = getNoConflict();
+
 	// Always fire these events
 	if (shouldFireOriginalEvent(eventName)) {
 		return false;
 	}
 
 	// Read from the configuration
-	if (noConflict === true) {
+	if (nc === true) {
 		return true;
 	}
 

package/src/config/Theme.js

@@ -1,9 +1,14 @@
 import { getTheme as getConfiguredTheme } from "../InitialConfiguration.js";
-import { _applyTheme } from "../Theming.js";
+import { reRenderAllUI5Elements } from "../Render.js";
+import applyTheme from "../theming/applyTheme.js";
 
-let theme = getConfiguredTheme();
+let theme;
 
 const getTheme = () => {
+	if (theme === undefined) {
+		theme = getConfiguredTheme();
+	}
+
 	return theme;
 };
 
@@ -15,10 +20,34 @@ const setTheme = async newTheme => {
 	theme = newTheme;
 
 	// Update CSS Custom Properties
-	await _applyTheme(theme);
+	await applyTheme(theme);
+	await reRenderAllUI5Elements({ themeAware: true });
+};
+
+/**
+ * Returns if the given theme name is the one currently applied.
+ * @private
+ * @param {String}
+ * @returns {boolean}
+ */
+const isTheme = _theme => {
+	const currentTheme = getTheme();
+	return currentTheme === _theme || currentTheme === `${_theme}_exp`;
+};
+
+/**
+ * Returns if the current theme is part of given theme family
+ * @private
+ * @param {String} the theme family
+ * @returns {boolean}
+ */
+const isThemeFamily = _theme => {
+	return getTheme().startsWith(_theme);
 };
 
 export {
 	getTheme,
 	setTheme,
+	isTheme,
+	isThemeFamily,
 };

package/src/css/BusyIndicator.css

@@ -0,0 +1,80 @@
+.busy-indicator-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
+
+.busy-indicator-overlay {
+    display: var(--ui5_web_components_busy_indicator_display);
+    position: absolute;
+    inset: 0;
+    background: var(--ui5_web_components_busy_indicator_background-color);
+    z-index: 99;
+}
+
+.busy-indicator-busy-area {
+    display: var(--ui5_web_components_busy_indicator_display);
+    position: absolute;
+    z-index: 99;
+    inset: 0;
+    justify-content: center;
+    align-items: center;
+    background-color: inherit;
+    flex-direction: column;
+    color: var(--_ui5_busy_indicator_color);
+}
+
+:host([__is-busy]) .busy-indicator-wrapper > :not(.busy-indicator-busy-area):not(.busy-indicator-overlay):not([busy-indicator-before-span]) {
+    --ui5_web_components_busy_indicator_display: none;
+}
+
+.busy-indicator-busy-area:focus {
+    outline: var(--_ui5_busy_indicator_focus_outline);
+    outline-offset: -.125rem;
+}
+
+.busy-indicator-circle {
+    width: 1rem;
+    height: 1rem;
+    display: inline-block;
+    background-color: currentColor;
+    border-radius: 50%;
+}
+
+.circle-animation-0 {
+    animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+}
+
+.circle-animation-1 {
+    animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+    animation-delay: 200ms;
+}
+
+.circle-animation-2 {
+    animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+    animation-delay: 400ms;
+}
+
+.sapUiLocalBusy {
+	--ui5_web_components_busy_indicator_display: none;
+}
+
+.busy-indicator-wrapper [ui5-busy-indicator] {
+    display: none;
+}
+
+@keyframes grow {
+    0%, 50%, 100% {
+        -webkit-transform: scale(0.5);
+        -moz-transform: scale(0.5);
+        -ms-transform: scale(0.5);
+        transform: scale(0.5);
+    }
+
+    25% {
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+    }
+}