@ui5/webcomponents-base 0.0.0-6cb3eb0db → 0.0.0-701b14e36

package/src/UI5ElementMetadata.js

@@ -2,7 +2,7 @@ import DataType from "./types/DataType.js";
 import isDescendantOf from "./util/isDescendantOf.js";
 import { camelToKebabCase } from "./util/StringHelper.js";
 import { getSlottedElements } from "./util/SlotsHelper.js";
-import { getEffectiveScopingSuffixForTag } from "./CustomElementsScope.js";
+import { getEffectiveScopingSuffixForTag } from "./CustomElementsScopeUtils.js";
 
 /**
  *
@@ -188,6 +188,14 @@ class UI5ElementMetadata {
 		return !!this.metadata.managedSlots;
 	}
 
+	/**
+	 * Determines whether this control supports F6 fast navigation
+	 * @public
+	 */
+	supportsF6FastNavigation() {
+		return !!this.metadata.fastNavigation;
+	}
+
 	/**
 	 * Returns an object with key-value pairs of properties and their metadata definitions
 	 * @public
@@ -212,6 +220,14 @@ class UI5ElementMetadata {
 		return !!this.metadata.languageAware;
 	}
 
+	/**
+	 * Determines whether this UI5 Element has any theme dependant carachteristics.
+	 * @returns {boolean}
+	 */
+	 isThemeAware() {
+		return !!this.metadata.themeAware;
+	}
+
 	/**
 	 * Matches a changed entity (property/slot) with the given name against the "invalidateOnChildChange" configuration
 	 * and determines whether this should cause and invalidation

package/src/asset-registries/Icons.js

@@ -1,11 +1,12 @@
 import getSharedResource from "../getSharedResource.js";
+import IconCollectionsAlias from "../assets-meta/IconCollectionsAlias.js";
+import { getEffectiveDefaultIconCollection } from "../config/Icons.js";
 
 const loaders = new Map();
 const registry = getSharedResource("SVGIcons.registry", new Map());
 const iconCollectionPromises = getSharedResource("SVGIcons.promises", new Map());
 
 const ICON_NOT_FOUND = "ICON_NOT_FOUND";
-const DEFAULT_COLLECTION = "SAP-icons";
 
 /**
  * @deprecated
@@ -47,7 +48,7 @@ const _fillRegistry = bundleData => {
 // set
 const registerIcon = (name, { pathData, ltr, accData, collection, packageName } = {}) => { // eslint-disable-line
 	if (!collection) {
-		collection = DEFAULT_COLLECTION;
+		collection = getEffectiveDefaultIconCollection();
 	}
 
 	const key = `${collection}/${name}`;
@@ -67,18 +68,16 @@ const _parseName = name => {
 
 	let collection;
 	[name, collection] = name.split("/").reverse();
-	collection = collection || DEFAULT_COLLECTION;
-	// hardcoded alias in case icon explorer is used, resolve `SAP-icons-TNT` to `tnt`
-	// aliases can be made a feature in the future if more collections need it or more aliases are needed.
-	if (collection === "SAP-icons-TNT") {
-		collection = "tnt";
-	}
-	// hardcoded alias in case icon explorer is used, resolve `BusinessSuiteInAppSymbols` to `business-suite`
-	// aliases can be made a feature in the future if more collections need it or more aliases are needed.
-	if (collection === "BusinessSuiteInAppSymbols") {
-		collection = "business-suite";
-		name = name.replace("icon-", "");
-	}
+	collection = collection || getEffectiveDefaultIconCollection();
+
+	// Normalize collection name.
+	// - resolve `SAP-icons-TNT` to `tnt`.
+	// - resolve `BusinessSuiteInAppSymbols` to `business-suite`.
+	// - resolve `horizon` to `SAP-icons-v5`,
+	// Note: aliases can be made as a feature, if more collections need it or more aliases are needed.
+	collection = _normalizeCollection(collection);
+	name = name.replace("icon-", "");
+
 	const registryKey = `${collection}/${name}`;
 	return { name, collection, registryKey };
 };
@@ -118,6 +117,14 @@ const _getRegisteredNames = async () => {
 	return Array.from(registry.keys());
 };
 
+const _normalizeCollection = collectionName => {
+	if (IconCollectionsAlias[collectionName]) {
+		return IconCollectionsAlias[collectionName];
+	}
+
+	return collectionName;
+};
+
 export {
 	registerIconBundle,
 	registerIconLoader,

package/src/asset-registries/LocaleData.js

@@ -13,14 +13,22 @@ const M_ISO639_OLD_TO_NEW = {
 	"iw": "he",
 	"ji": "yi",
 	"in": "id",
-	"sh": "sr",
 };
 
+const DEV_MODE = false;
+
 const _showAssetsWarningOnce = localeId => {
-	if (!warningShown) {
+	if (warningShown) {
+		return;
+	}
+
+	if (!DEV_MODE) {
 		console.warn(`[LocaleData] Supported locale "${localeId}" not configured, import the "Assets.js" module from the webcomponents package you are using.`); /* eslint-disable-line */
-		warningShown = true;
+	} else {
+		console.warn(`[LocaleData] Note: in dev mode, CLDR assets might be disabled for performance reasons. Try running "ENABLE_CLDR=1 yarn start" to test CLDR assets.`); /* eslint-disable-line */
 	}
+
+	warningShown = true;
 };
 
 const calcLocale = (language, region, script) => {
@@ -39,6 +47,12 @@ const calcLocale = (language, region, script) => {
 		}
 	}
 
+	// Special case 3: for Serbian, there are cyrillic and latin scripts, "sh" and "sr-latn" map to "latin", "sr" maps to cyrillic.
+	if (language === "sh" || (language === "sr" && script === "Latn")) {
+		language = "sr";
+		region = "Latn";
+	}
+
 	// try language + region
 	let localeId = `${language}_${region}`;
 	if (SUPPORTED_LOCALES.includes(localeId)) {

package/src/asset-registries/Themes.js

@@ -38,10 +38,14 @@ const getThemeProperties = async (packageName, themeName) => {
 
 	if (!registeredThemes.has(themeName)) {
 		const regThemesStr = [...registeredThemes.values()].join(", ");
-		console.warn(`You have requested a non-registered theme - falling back to ${DEFAULT_THEME}. Registered themes are: ${regThemesStr}`); /* eslint-disable-line */
-		return themeStyles.get(`${packageName}_${DEFAULT_THEME}`);
+		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);
 	}
 
+	return _getThemeProperties(packageName, themeName);
+};
+
+const _getThemeProperties = async (packageName, themeName) => {
 	const loader = loaders.get(`${packageName}/${themeName}`);
 	if (!loader) {
 		// no themes for package

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/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/Theme.js

@@ -1,4 +1,5 @@
 import { getTheme as getConfiguredTheme } from "../InitialConfiguration.js";
+import { reRenderAllUI5Elements } from "../Render.js";
 import applyTheme from "../theming/applyTheme.js";
 
 let theme;
@@ -20,9 +21,33 @@ const setTheme = async newTheme => {
 
 	// Update CSS Custom Properties
 	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,76 @@
+.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;
+}
+
+@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);
+    }
+}

package/src/css/FontFace.css

@@ -0,0 +1,75 @@
+@font-face {
+    font-family: "72";
+    font-style: normal;
+    font-weight: 400;
+    src: local("72"),
+    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff?ui5-webcomponents) format("woff");
+}
+
+@font-face {
+    font-family: "72full";
+    font-style: normal;
+    font-weight: 400;
+    src: local('72-full'),
+    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff?ui5-webcomponents) format("woff");
+
+}
+
+@font-face {
+    font-family: "72";
+    font-style: normal;
+    font-weight: 700;
+    src: local('72-Bold'),
+    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents) format("woff");
+}
+
+@font-face {
+    font-family: "72full";
+    font-style: normal;
+    font-weight: 700;
+    src: local('72-Bold-full'),
+    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents) format("woff");
+}
+
+@font-face {
+    font-family: '72-Bold';
+    font-style: normal;
+    src: local('72-Bold'),
+    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents) format("woff");
+}
+
+@font-face {
+    font-family: '72-Boldfull';
+    font-style: normal;
+    src: url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2"),
+         url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents) format("woff");
+}
+
+@font-face {
+    font-family: '72-Light';
+    font-style: normal;
+    src: local('72-Light'),
+        url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff2?ui5-webcomponents) format("woff2"),
+        url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff?ui5-webcomponents) format("woff");
+}
+
+@font-face {
+    font-family: '72-Lightfull';
+    font-style: normal;
+    src: url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light-full.woff2?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light-full.woff?ui5-webcomponents) format("woff");
+}
+
+@font-face {
+    font-family: "72Black";
+    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");
+}

package/src/css/OverrideFontFace.css

@@ -0,0 +1,32 @@
+/**
+ * Some diacritics are supported by the 72 font:
+ *  * Grave
+ *  * Acute
+ *  * Circumflex
+ *  * Tilde
+ *
+ * However, the following diacritics and the combination of multiple diacritics (including the supported ones) are not supported:
+ *  * Breve
+ *  * Horn
+ *  * Dot below
+ *  * Hook above
+ *
+ *
+ * Override for the characters that aren't covered by the '72' font to other system fonts
+ *
+ * U+0102-0103: A and a with Breve
+ * U+01A0-01A1: O and o with Horn
+ * U+01AF-01B0: U and u with Horn
+ * U+1EA0-1EB7: A and a with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EB8-1EC7: E and e with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EC8-1ECB: I and i with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1ECC-1EE3: O and o with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EE4-1EF1: U and u with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EF4-1EF7: Y and y with diacritics that are not supported by the font and combination of multiple diacritics
+ *
+ */
+@font-face {
+    font-family: '72override';
+    unicode-range: U+0102-0103, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EB7, U+1EB8-1EC7, U+1EC8-1ECB, U+1ECC-1EE3, U+1EE4-1EF1, U+1EF4-1EF7;
+    src: local('Arial'), local('Helvetica'), local('sans-serif');
+}

package/src/css/SystemCSSVars.css

@@ -0,0 +1,17 @@
+:root {
+    --_ui5_content_density:cozy;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+    --_ui5_content_density:compact;
+}
+
+[dir="rtl"] {
+    --_ui5_dir:rtl;
+}
+
+[dir="ltr"] {
+    --_ui5_dir:ltr;
+}

package/src/features/F6Navigation.js

@@ -0,0 +1,106 @@
+import { registerFeature } from "../FeaturesRegistry.js";
+import { isF6Next, isF6Previous } from "../Keys.js";
+import { getFirstFocusableElement } from "../util/FocusableElements.js";
+
+class F6Navigation {
+	init() {
+		this.keydownHandler = this._keydownHandler.bind(this);
+		this.attachEventListeners();
+		this.selectedGroup = null;
+		this.groups = [];
+	}
+
+	attachEventListeners() {
+		document.addEventListener("keydown", this.keydownHandler);
+	}
+
+	async _keydownHandler(event) {
+		if (isF6Next(event)) {
+			this.updateGroups();
+			if (this.groups.length < 1) {
+				return;
+			}
+
+			const nextIndex = this.groups.indexOf(this.selectedGroup);
+			let nextElement = null;
+
+			if (nextIndex > -1) {
+				if (nextIndex + 1 >= this.groups.length) {
+					nextElement = this.groups[0];
+				} else {
+					nextElement = this.groups[nextIndex + 1];
+				}
+			} else {
+				nextElement = this.groups[0];
+			}
+
+			const elementToFocus = await getFirstFocusableElement(nextElement.isUI5Element ? nextElement.getDomRef() : nextElement, true);
+			elementToFocus.focus();
+		}
+
+		if (isF6Previous(event)) {
+			this.updateGroups();
+			if (this.groups.length < 1) {
+				return;
+			}
+
+			const nextIndex = this.groups.indexOf(this.selectedGroup);
+			let nextElement = null;
+
+			if (nextIndex > -1) {
+				if (nextIndex - 1 < 0) {
+					nextElement = this.groups[this.groups.length - 1];
+				} else {
+					// Handle the situation where the first focusable element of two neighbor groups is the same
+					// For example:
+					// <ui5-flexible-column-layout>
+					//     <ui5-list>
+					//         <ui5-li>List Item</ui5-li>
+					//     </ui5-list>
+					// </ui5-flexible-column-layout>
+					// Here for both FCL & List the firstFoccusableElement is the same (the ui5-li)
+
+					const firstFocusable = await getFirstFocusableElement(this.groups[nextIndex - 1], true);
+					const shouldSkipParent = firstFocusable === await getFirstFocusableElement(this.groups[nextIndex], true);
+
+					nextElement = this.groups[shouldSkipParent ? nextIndex - 2 : nextIndex - 1];
+				}
+			} else {
+				nextElement = this.groups[this.groups.length - 1];
+			}
+
+			const elementToFocus = await getFirstFocusableElement(nextElement.isUI5Element ? nextElement.getDomRef() : nextElement, true);
+			elementToFocus.focus();
+		}
+	}
+
+	removeEventListeners() {
+		document.removeEventListener("keydown", this.keydownHandler);
+	}
+
+	updateGroups() {
+		this.setSelectedGroup(document.activeElement);
+		this.setGroups();
+	}
+
+	setGroups() {
+		this.groups = Array.from(document.querySelectorAll("[data-sap-ui-fastnavgroup='true']")).filter(group => group.clientWidth && window.getComputedStyle(group).visibility !== "hidden");
+	}
+
+	setSelectedGroup(element) {
+		while (element && element.getAttribute("data-sap-ui-fastnavgroup") !== "true" && element !== document.querySelector("html")) {
+			element = element.parentElement ? element.parentNode : element.parentNode.host;
+		}
+
+		this.selectedGroup = element;
+	}
+
+	destroy() {
+		this.removeEventListeners();
+	}
+}
+
+const F6HelperInstance = new F6Navigation();
+registerFeature("F6Navigation", F6HelperInstance);
+
+export default F6Navigation;