@ui5/webcomponents-base 0.0.0-deac3098a → 0.0.0-e0658a650

package/src/config/{Icons.js → Icons.ts}

@@ -1,18 +1,24 @@
 import { getTheme, isThemeFamily } from "./Theme.js";
 
-const IconCollectionConfiguration = new Map();
+const IconCollectionConfiguration = new Map<string, string>();
+
+enum IconCollection {
+	v4 = "SAP-icons",
+	v5 = "SAP-icons-v5",
+}
 
 /**
- * Sets the default icon collection (v4 or v5) per theme,
+ * Sets the default icon collection (SAP-icons font v4 or SAP-icons font 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
+ * Note: by default SAP-icons-v5 is used in all SAP Horizon variants and SAP-icons-v4 for all the rest.
+ * @public
+ * @param {string} theme
+ * @param {IconCollection} collectionName
  */
-const setDefaultIconCollection = (theme, collectionName) => {
+const setDefaultIconCollection = (theme: string, collectionName: "horizon" | IconCollection) => {
 	if (collectionName === "horizon") {
-		collectionName = "SAP-icons-v5";
+		collectionName = IconCollection.v5;
 	}
 
 	IconCollectionConfiguration.set(theme, collectionName);
@@ -22,17 +28,18 @@ const setDefaultIconCollection = (theme, collectionName) => {
  * Returns the default icon collection (v4 or v5) for given theme,
  * that is configured.
  *
- * @param {String} theme
- * @returns {String}
+ * @param {string} theme
+ * @public
+ * @returns {string | undefined}
  */
-const getDefaultIconCollection = theme => {
+const getDefaultIconCollection = (theme: string): string | undefined => {
 	return IconCollectionConfiguration.get(theme);
 };
 
 /**
  * Returns the effective icon collection that will be applied for icon web components
  * whenever namespace is not specified.
- * @returns {String}
+ * @returns {string}
  */
 const getEffectiveDefaultIconCollection = () => {
 	const currentTheme = getTheme();
@@ -42,7 +49,7 @@ const getEffectiveDefaultIconCollection = () => {
 		return currentThemeConfiguration;
 	}
 
-	return isThemeFamily("sap_horizon") ? "SAP-icons-v5" : "SAP-icons";
+	return isThemeFamily("sap_horizon") ? IconCollection.v5 : IconCollection.v4;
 };
 
 export {

package/src/config/{Language.js → Language.ts}

@@ -5,35 +5,37 @@ import {
 import { fireLanguageChange } from "../locale/languageChange.js";
 import { reRenderAllUI5Elements } from "../Render.js";
 
-let language;
-let fetchDefaultLanguage;
+let curLanguage: string | undefined;
+let fetchDefaultLanguage: boolean;
 
 /**
- * Returns the currently configured language, or the browser language as a fallback
- * @returns {String}
+ * Returns the currently configured language, or the browser language as a fallback.
+ * @public
+ * @returns {string}
  */
-const getLanguage = () => {
-	if (language === undefined) {
-		language = getConfiguredLanguage();
+const getLanguage = (): string | undefined => {
+	if (curLanguage === undefined) {
+		curLanguage = getConfiguredLanguage();
 	}
-	return language;
+	return curLanguage;
 };
 
 /**
  * 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
+ * and returns a promise that resolves when all rendering is done.
  *
- * @param newLanguage
+ * @param {string} language
+ * @public
  * @returns {Promise<void>}
  */
-const setLanguage = async newLanguage => {
-	if (language === newLanguage) {
+const setLanguage = async (language: string): Promise<void> => {
+	if (curLanguage === language) {
 		return;
 	}
 
-	language = newLanguage;
+	curLanguage = language;
 
-	await fireLanguageChange(newLanguage);
+	await fireLanguageChange(language);
 	await reRenderAllUI5Elements({ languageAware: true });
 };
 
@@ -42,17 +44,19 @@ const setLanguage = async newLanguage => {
  * fetched over the network instead of using the inlined one.
  * <b>Note:</b> By default the language will not be fetched.
  *
- * @param {Boolean} fetchDefaultLanguage
+ * @public
+ * @param {boolean} fetchDefaultLang
  */
-const setFetchDefaultLanguage = fetchDefaultLang => {
+const setFetchDefaultLanguage = (fetchDefaultLang: boolean) => {
 	fetchDefaultLanguage = fetchDefaultLang;
 };
 
 /**
  * Returns if the default language, that is inlined, should be fetched over the network.
- * @returns {Boolean}
+ * @public
+ * @returns {boolean}
  */
-const getFetchDefaultLanguage = () => {
+const getFetchDefaultLanguage = (): boolean => {
 	if (fetchDefaultLanguage === undefined) {
 		setFetchDefaultLanguage(getConfiguredFetchDefaultLanguage());
 	}

package/src/config/NoConflict.ts

@@ -0,0 +1,67 @@
+import { getNoConflict as getConfiguredNoConflict } from "../InitialConfiguration.js";
+
+// Fire these events even with noConflict: true
+const excludeList = [
+	"value-changed",
+];
+
+type NoConflictData = boolean | { events: Array<string>};
+
+let noConflict: NoConflictData;
+
+const shouldFireOriginalEvent = (eventName: string) => {
+	return excludeList.includes(eventName);
+};
+
+const shouldNotFireOriginalEvent = (eventName: string) => {
+	const nc = getNoConflict();
+	// return !(nc.events && nc.events.includes && nc.events.includes(eventName));
+	return !(typeof nc !== "boolean" && nc.events && nc.events.includes && nc.events.includes(eventName));
+};
+
+/**
+ * Returns if the "noConflict" configuration is set.
+ * @public
+ * @returns { NoConflictData }
+ */
+const getNoConflict = (): NoConflictData => {
+	if (noConflict === undefined) {
+		noConflict = getConfiguredNoConflict();
+	}
+
+	return noConflict;
+};
+
+/**
+ * Sets the "noConflict" mode.
+ * - When "false" (default value), all custom events are fired with and without the "ui5-" prefix.
+ * - When "true", all custom events are fired with the "ui5-" prefix only.
+ * - When an object is supplied, just the specified events will be fired with the "ui5-" prefix.
+ * @public
+ * @param { NoConflictData } noConflictData
+ */
+const setNoConflict = (noConflictData: NoConflictData) => {
+	noConflict = noConflictData;
+};
+
+const skipOriginalEvent = (eventName: string) => {
+	const nc = getNoConflict();
+
+	// Always fire these events
+	if (shouldFireOriginalEvent(eventName)) {
+		return false;
+	}
+
+	// Read from the configuration
+	if (nc === true) {
+		return true;
+	}
+
+	return !shouldNotFireOriginalEvent(eventName);
+};
+
+export {
+	getNoConflict,
+	setNoConflict,
+	skipOriginalEvent,
+};

package/src/config/{RTL.js → RTL.ts}

@@ -12,16 +12,26 @@ const M_ISO639_OLD_TO_NEW = {
 
 const A_RTL_LOCALES = getDesigntimePropertyAsArray("$cldr-rtl-locales:ar,fa,he$") || [];
 
-const impliesRTL = language => {
-	language = (language && M_ISO639_OLD_TO_NEW[language]) || language;
+/**
+ * Checks whether the language is using RTL
+ * @param {string} language
+ * @returns {boolean} whether the language is using RTL
+ */
+const impliesRTL = (language: string) => {
+	language = (language && M_ISO639_OLD_TO_NEW[language as keyof typeof M_ISO639_OLD_TO_NEW]) || language;
 
 	return A_RTL_LOCALES.indexOf(language) >= 0;
 };
 
-const getRTL = () => {
+/**
+ * Gets the effective RTL setting by first checking the configuration
+ * and if not set using the currently set language or the navigator language if the language is not explicitly set.
+ * @returns {boolean} whether RTL should be used
+ */
+const getRTL = (): boolean => {
 	const configurationRTL = getConfiguredRTL();
 
-	if (configurationRTL !== null) {
+	if (configurationRTL !== undefined) {
 		return !!configurationRTL;
 	}
 

package/src/config/Theme.ts

@@ -0,0 +1,64 @@
+import { getTheme as getConfiguredTheme } from "../InitialConfiguration.js";
+import { reRenderAllUI5Elements } from "../Render.js";
+import applyTheme from "../theming/applyTheme.js";
+
+let curTheme: string;
+
+/**
+ * Returns the current theme.
+ * @public
+ * @returns {string} the current theme name
+ */
+const getTheme = (): string => {
+	if (curTheme === undefined) {
+		curTheme = getConfiguredTheme();
+	}
+
+	return curTheme;
+};
+
+/**
+ * Applies a new theme after fetching its assets from the network.
+ * @public
+ * @param {string} theme the name of the new theme
+ * @returns {Promise<void>} a promise that is resolved when the new theme assets have been fetched and applied to the DOM
+ */
+const setTheme = async (theme: string): Promise<void> => {
+	if (curTheme === theme) {
+		return;
+	}
+
+	curTheme = theme;
+
+	// Update CSS Custom Properties
+	await applyTheme(curTheme);
+	await reRenderAllUI5Elements({ themeAware: true });
+};
+
+/**
+ * Returns if the given theme name is the one currently applied.
+ * @private
+ * @param {string} theme
+ * @returns {boolean}
+ */
+const isTheme = (theme: string) => {
+	const currentTheme = getTheme();
+	return currentTheme === theme || currentTheme === `${theme}_exp`;
+};
+
+/**
+ * Returns if the current theme is part of given theme family.
+ * @private
+ * @param {string} theme the theme family
+ * @returns {boolean}
+ */
+const isThemeFamily = (theme: string) => {
+	return getTheme().startsWith(theme);
+};
+
+export {
+	getTheme,
+	setTheme,
+	isTheme,
+	isThemeFamily,
+};

package/src/config/ThemeRoots.ts

@@ -0,0 +1,41 @@
+import createLinkInHead from "../util/createLinkInHead.js";
+import validateThemeRoot from "../validateThemeRoot.js";
+import { getThemeRoot as getConfiguredThemeRoot } from "../InitialConfiguration.js";
+
+let themeRoot: string | undefined;
+
+const getThemeRoot = (): string | undefined => {
+	if (themeRoot === undefined) {
+		themeRoot = getConfiguredThemeRoot();
+	}
+
+	return themeRoot;
+};
+
+const setThemeRoot = (theme: string, newThemeRoot: string) => {
+	themeRoot = validateThemeRoot(newThemeRoot);
+
+	if (themeRoot) {
+		attachCustomThemeStylesToHead(theme);
+	}
+};
+
+const formatThemeLink = (theme: string) => {
+	return `${getThemeRoot()!}Base/baseLib/${theme}/css_variables.css`; // theme root is always set.
+};
+
+const attachCustomThemeStylesToHead = async (theme: string) => {
+	const link = document.querySelector(`[sap-ui-webcomponents-theme="${theme}"]`);
+
+	if (link) {
+		document.head.removeChild(link);
+	}
+
+	await createLinkInHead(formatThemeLink(theme), { "sap-ui-webcomponents-theme": theme });
+};
+
+export {
+	getThemeRoot,
+	setThemeRoot,
+	attachCustomThemeStylesToHead,
+};

package/src/css/BusyIndicator.css

@@ -59,6 +59,10 @@
 	--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);

package/src/css/FontFace.css

@@ -3,8 +3,7 @@
     font-style: normal;
     font-weight: 400;
     src: local("72"),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents) format("woff2"),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff?ui5-webcomponents) format("woff");
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents) format("woff2");
 }
 
 @font-face {
@@ -12,8 +11,7 @@
     font-style: normal;
     font-weight: 400;
     src: local('72-full'),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents) format("woff2"),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff?ui5-webcomponents) format("woff");
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents) format("woff2");
 
 }
 
@@ -22,8 +20,7 @@
     font-style: normal;
     font-weight: 700;
     src: local('72-Bold'),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2"),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents) format("woff");
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2");
 }
 
 @font-face {
@@ -31,38 +28,33 @@
     font-style: normal;
     font-weight: 700;
     src: local('72-Bold-full'),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2"),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents) format("woff");
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2");
 }
 
 @font-face {
     font-family: '72-Bold';
     font-style: normal;
     src: local('72-Bold'),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2"),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents) format("woff");
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2");
 }
 
 @font-face {
     font-family: '72-Boldfull';
     font-style: normal;
-    src: url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2"),
-         url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents) format("woff");
+    src: url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2");
 }
 
 @font-face {
     font-family: '72-Light';
     font-style: normal;
     src: local('72-Light'),
-        url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff2?ui5-webcomponents) format("woff2"),
-        url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff?ui5-webcomponents) format("woff");
+        url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff2?ui5-webcomponents) format("woff2");
 }
 
 @font-face {
     font-family: '72-Lightfull';
     font-style: normal;
-    src: url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light-full.woff2?ui5-webcomponents) format("woff2"),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light-full.woff?ui5-webcomponents) format("woff");
+    src: url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light-full.woff2?ui5-webcomponents) format("woff2");
 }
 
 @font-face {
@@ -70,6 +62,5 @@
     font-style: bold;
     font-weight: 900;
     src: local('72Black'),
-    url(https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff2?ui5-webcomponents) format("woff2"),
-    url(https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff?ui5-webcomponents) format("woff");
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff2?ui5-webcomponents) format("woff2");
 }

package/src/delegate/{ItemNavigation.js → ItemNavigation.ts}

@@ -13,6 +13,24 @@ import getActiveElement from "../util/getActiveElement.js";
 import NavigationMode from "../types/NavigationMode.js";
 import ItemNavigationBehavior from "../types/ItemNavigationBehavior.js";
 
+import type UI5Element from "../UI5Element.js";
+import { instanceOfUI5Element } from "../UI5Element.js";
+
+interface Tabbable {
+	id?: string,
+	_tabIndex?: string,
+}
+
+type ItemNavigationOptions = {
+	currentIndex?: number,
+	navigationMode?: NavigationMode,
+	rowSize?: number
+	skipItemsSize?: number,
+	behavior?: ItemNavigationBehavior,
+	getItemsCallback: () => Array<Tabbable>,
+	affectedPropertiesNames?: Array<string>,
+};
+
 /**
  * The ItemNavigation class manages the calculations to determine the correct "tabindex" for a group of related items inside a root component.
  * Important: ItemNavigation only does the calculations and does not change "tabindex" directly, this is a responsibility of the developer.
@@ -47,10 +65,26 @@ import ItemNavigationBehavior from "../types/ItemNavigationBehavior.js";
  * @public
  */
 class ItemNavigation {
+	rootWebComponent: UI5Element;
+
+	_getItems: () => Array<Tabbable>;
+
+	_currentIndex: number;
+
+	_rowSize: number;
+
+	_behavior: ItemNavigationBehavior;
+
+	_navigationMode: NavigationMode;
+
+	_affectedPropertiesNames: Array<string>;
+
+	_skipItemsSize: number | null;
+
 	/**
 	 *
 	 * @param rootWebComponent the component to operate on (component that slots or contains within its shadow root the items the user navigates among)
-	 * @param options Object with configuration options:
+	 * @param {ItemNavigationOptions} options Object with configuration options:
 	 *  - currentIndex: the index of the item that will be initially selected (from which navigation will begin)
 	 *  - navigationMode (Auto|Horizontal|Vertical): whether the items are displayed horizontally (Horizontal), vertically (Vertical) or as a matrix (Auto) meaning the user can navigate in both directions (up/down and left/right)
 	 *  - rowSize: tells how many items per row there are when the items are not rendered as a flat list but rather as a matrix. Relevant for navigationMode=Auto
@@ -61,23 +95,17 @@ class ItemNavigation {
 	 *  - getItemsCallback: function that, when called, returns an array with all items the user can navigate among
 	 *  - affectedPropertiesNames: a list of metadata properties on the root component which, upon user navigation, will be reassigned by address thus causing the root component to invalidate
 	 */
-	constructor(rootWebComponent, options = {}) {
-		this._setRootComponent(rootWebComponent);
-		this._initOptions(options);
-	}
-
-	_setRootComponent(rootWebComponent) {
+	constructor(rootWebComponent: UI5Element, options: ItemNavigationOptions) {
 		if (!rootWebComponent.isUI5Element) {
 			throw new Error("The root web component must be a UI5 Element instance");
 		}
+
 		this.rootWebComponent = rootWebComponent;
 		this.rootWebComponent.addEventListener("keydown", this._onkeydown.bind(this));
 		this.rootWebComponent._onComponentStateFinalized = () => {
 			this._init();
 		};
-	}
 
-	_initOptions(options) {
 		if (typeof options.getItemsCallback !== "function") {
 			throw new Error("getItemsCallback is required");
 		}
@@ -98,7 +126,7 @@ class ItemNavigation {
 	 * @public
 	 * @param current the new selected item
 	 */
-	setCurrentItem(current) {
+	setCurrentItem(current: Tabbable) {
 		const currentItemIndex = this._getItems().indexOf(current);
 
 		if (currentItemIndex === -1) {
@@ -116,7 +144,7 @@ class ItemNavigation {
 	 * @public
 	 * @param newRowSize
 	 */
-	setRowSize(newRowSize) {
+	setRowSize(newRowSize: number) {
 		this._rowSize = newRowSize;
 	}
 
@@ -126,22 +154,27 @@ class ItemNavigation {
 		});
 	}
 
-	_onkeydown(event) {
+	_onkeydown(event: KeyboardEvent) {
 		if (!this._canNavigate()) {
 			return;
 		}
 
 		const horizontalNavigationOn = this._navigationMode === NavigationMode.Horizontal || this._navigationMode === NavigationMode.Auto;
 		const verticalNavigationOn = this._navigationMode === NavigationMode.Vertical || this._navigationMode === NavigationMode.Auto;
+		const isRTL = this.rootWebComponent.effectiveDir === "rtl";
 
-		if (isUp(event) && verticalNavigationOn) {
-			this._handleUp();
-		} else if (isDown(event) && verticalNavigationOn) {
-			this._handleDown();
+		if (isRTL && isLeft(event) && horizontalNavigationOn) {
+			this._handleRight();
+		} else if (isRTL && isRight(event) && horizontalNavigationOn) {
+			this._handleLeft();
 		} else if (isLeft(event) && horizontalNavigationOn) {
 			this._handleLeft();
 		} else if (isRight(event) && horizontalNavigationOn) {
 			this._handleRight();
+		} else if (isUp(event) && verticalNavigationOn) {
+			this._handleUp();
+		} else if (isDown(event) && verticalNavigationOn) {
+			this._handleDown();
 		} else if (isHome(event)) {
 			this._handleHome();
 		} else if (isEnd(event)) {
@@ -255,6 +288,7 @@ class ItemNavigation {
 		if (this._skipItemsSize === null) {
 			// Move the focus to the very top (as Home).
 			this._currentIndex -= this._currentIndex;
+			return;
 		}
 
 		if (this._currentIndex + 1 > this._skipItemsSize) {
@@ -274,6 +308,7 @@ class ItemNavigation {
 		if (this._skipItemsSize === null) {
 			// Move the focus to the very bottom (as End).
 			this._currentIndex = this._getItems().length - 1;
+			return;
 		}
 
 		const currentToEndRange = this._getItems().length - this._currentIndex - 1;
@@ -295,8 +330,8 @@ class ItemNavigation {
 		}
 
 		this._affectedPropertiesNames.forEach(propName => {
-			const prop = this.rootWebComponent[propName];
-			this.rootWebComponent[propName] = Array.isArray(prop) ? [...prop] : { ...prop };
+			const prop = (this.rootWebComponent as Record<string, any>)[propName];
+			(this.rootWebComponent as Record<string, any>)[propName] = Array.isArray(prop) ? [...prop] : { ...prop };
 		});
 	}
 
@@ -336,16 +371,23 @@ class ItemNavigation {
 			return;
 		}
 
-		if (currentItem.isUI5Element) {
+		if (instanceOfUI5Element(currentItem)) {
 			return currentItem.getFocusDomRef();
 		}
 
-		if (!this.rootWebComponent.getDomRef()) {
+		const currentItemDOMRef = this.rootWebComponent.getDomRef();
+		if (!currentItemDOMRef) {
 			return;
 		}
 
-		return this.rootWebComponent.getDomRef().querySelector(`#${currentItem.id}`);
+		if (currentItem.id) {
+			return currentItemDOMRef.querySelector(`#${currentItem.id}`) as HTMLElement;
+		}
 	}
 }
 
 export default ItemNavigation;
+
+export {
+	Tabbable,
+};