@ui5/webcomponents-base 0.0.0-4180fe799 → 0.0.0-453158269

package/dist/Keys.js

@@ -111,6 +111,8 @@ const isSpace = event => (event.key ? (event.key === "Spacebar" || event.key ===
 
 const isSpaceShift = event => (event.key ? (event.key === "Spacebar" || event.key === " ") : event.keyCode === KeyCodes.SPACE) && checkModifierKeys(event, false, false, true);
 
+const isSpaceCtrl = event => (event.key ? (event.key === "Spacebar" || event.key === " ") : event.keyCode === KeyCodes.SPACE) && checkModifierKeys(event, true, false, false);
+
 const isLeft = event => (event.key ? (event.key === "ArrowLeft" || event.key === "Left") : event.keyCode === KeyCodes.ARROW_LEFT) && !hasModifierKeys(event);
 
 const isRight = event => (event.key ? (event.key === "ArrowRight" || event.key === "Right") : event.keyCode === KeyCodes.ARROW_RIGHT) && !hasModifierKeys(event);
@@ -131,10 +133,18 @@ const isUpShift = event => (event.key ? (event.key === "ArrowUp" || event.key ==
 
 const isDownShift = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, false, false, true);
 
+const isUpAlt = event => (event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_UP) && checkModifierKeys(event, false, true, false);
+
+const isDownAlt = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, false, true, false);
+
 const isLeftShift = event => (event.key ? (event.key === "ArrowLeft" || event.key === "Left") : event.keyCode === KeyCodes.ARROW_LEFT) && checkModifierKeys(event, false, false, true);
 
 const isRightShift = event => (event.key ? (event.key === "ArrowRight" || event.key === "Right") : event.keyCode === KeyCodes.ARROW_RIGHT) && checkModifierKeys(event, false, false, true);
 
+const isLeftShiftCtrl = event => (event.key ? (event.key === "ArrowLeft" || event.key === "Left") : event.keyCode === KeyCodes.ARROW_LEFT) && checkModifierKeys(event, true, false, true);
+
+const isRightShiftCtrl = event => (event.key ? (event.key === "ArrowRight" || event.key === "Right") : event.keyCode === KeyCodes.ARROW_RIGHT) && checkModifierKeys(event, true, false, true);
+
 const isUpShiftCtrl = event => (event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_UP) && checkModifierKeys(event, true, false, true);
 
 const isDownShiftCtrl = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, true, false, true);
@@ -145,8 +155,12 @@ const isEnd = event => (event.key ? event.key === "End" : event.keyCode === KeyC
 
 const isHomeCtrl = event => (event.key ? event.key === "Home" : event.keyCode === KeyCodes.HOME) && checkModifierKeys(event, true, false, false);
 
+const isHomeShift = event => (event.key ? event.key === "Home" : event.keyCode === KeyCodes.HOME) && checkModifierKeys(event, false, false, true);
+
 const isEndCtrl = event => (event.key ? event.key === "End" : event.keyCode === KeyCodes.END) && checkModifierKeys(event, true, false, false);
 
+const isEndShift = event => (event.key ? event.key === "End" : event.keyCode === KeyCodes.END) && checkModifierKeys(event, false, false, true);
+
 const isEscape = event => (event.key ? event.key === "Escape" || event.key === "Esc" : event.keyCode === KeyCodes.ESCAPE) && !hasModifierKeys(event);
 
 const isTabNext = event => (event.key ? event.key === "Tab" : event.keyCode === KeyCodes.TAB) && !hasModifierKeys(event);
@@ -157,6 +171,12 @@ const isBackSpace = event => (event.key ? event.key === "Backspace" : event.keyC
 
 const isDelete = event => (event.key ? event.key === "Delete" : event.keyCode === KeyCodes.DELETE) && !hasModifierKeys(event);
 
+const isDeleteShift = event => (event.key ? event.key === "Delete" : event.keyCode === KeyCodes.DELETE) && checkModifierKeys(event, false, false, true);
+
+const isInsertShift = event => (event.key ? event.key === "Insert" : event.keyCode === KeyCodes.DELETE) && checkModifierKeys(event, false, false, true);
+
+const isInsertCtrl = event => (event.key ? event.key === "Insert" : event.keyCode === KeyCodes.DELETE) && checkModifierKeys(event, true, false, false);
+
 const isPageUp = event => (event.key ? event.key === "PageUp" : event.keyCode === KeyCodes.PAGE_UP) && !hasModifierKeys(event);
 
 const isPageDown = event => (event.key ? event.key === "PageDown" : event.keyCode === KeyCodes.PAGE_DOWN) && !hasModifierKeys(event);
@@ -191,12 +211,24 @@ const isF4 = event => {
 
 const isF4Shift = event => (event.key ? event.key === "F4" : event.keyCode === KeyCodes.F4) && checkModifierKeys(event, false, false, true);
 
+const isF6Next = event => ((event.key ? event.key === "F6" : event.keyCode === KeyCodes.F6) && checkModifierKeys(event, false, false, false))
+|| ((event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, true, true, false));
+
+const isF6Previous = event => ((event.key ? event.key === "F6" : event.keyCode === KeyCodes.F6) && checkModifierKeys(event, false, false, true))
+|| ((event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_Up) && checkModifierKeys(event, true, true, false));
+
 const isF7 = event => (event.key ? event.key === "F7" : event.keyCode === KeyCodes.F7) && !hasModifierKeys(event);
 
 const isShowByArrows = event => {
 	return ((event.key === "ArrowDown" || event.key === "Down") || (event.key === "ArrowUp" || event.key === "Up")) && checkModifierKeys(event, /* Ctrl */ false, /* Alt */ true, /* Shift */ false);
 };
 
+const isShift = event => event.key === "Shift" || event.keyCode === KeyCodes.SHIFT;
+
+const isCtrlA = event => ((event.key === "A" || event.key === "a") || event.which === KeyCodes.A) && checkModifierKeys(event, true, false, false);
+
+const isCtrlV = event => ((event.key === "V" || event.key === "v") || event.which === KeyCodes.V) && checkModifierKeys(event, true, false, false);
+
 const hasModifierKeys = event => event.shiftKey || event.altKey || getCtrlKey(event);
 
 const getCtrlKey = event => !!(event.metaKey || event.ctrlKey); // double negation doesn't have effect on boolean but ensures null and undefined are equivalent to false.
@@ -208,6 +240,7 @@ export {
 	isEnterShift,
 	isSpace,
 	isSpaceShift,
+	isSpaceCtrl,
 	isLeft,
 	isRight,
 	isUp,
@@ -218,8 +251,12 @@ export {
 	isDownCtrl,
 	isUpShift,
 	isDownShift,
+	isUpAlt,
+	isDownAlt,
 	isLeftShift,
 	isRightShift,
+	isLeftShiftCtrl,
+	isRightShiftCtrl,
 	isUpShiftCtrl,
 	isDownShiftCtrl,
 	isHome,
@@ -228,6 +265,8 @@ export {
 	isMinus,
 	isHomeCtrl,
 	isEndCtrl,
+	isHomeShift,
+	isEndShift,
 	isEscape,
 	isTabNext,
 	isTabPrevious,
@@ -236,6 +275,8 @@ export {
 	isShow,
 	isF4,
 	isF4Shift,
+	isF6Previous,
+	isF6Next,
 	isF7,
 	isPageUp,
 	isPageDown,
@@ -245,4 +286,10 @@ export {
 	isPageDownAlt,
 	isPageUpShiftCtrl,
 	isPageDownShiftCtrl,
+	isShift,
+	isCtrlA,
+	isCtrlV,
+	isDeleteShift,
+	isInsertShift,
+	isInsertCtrl,
 };

package/dist/Runtimes.js

@@ -0,0 +1,107 @@
+import VersionInfo from "./generated/VersionInfo.js";
+import getSharedResource from "./getSharedResource.js";
+
+let currentRuntimeIndex;
+let currentRuntimeAlias = "";
+
+const compareCache = new Map();
+
+/**
+ * Central registry where all runtimes register themselves by pushing an object.
+ * The index in the registry servers as an ID for the runtime.
+ * @type {*}
+ */
+const Runtimes = getSharedResource("Runtimes", []);
+
+/**
+ * Registers the current runtime in the shared runtimes resource registry
+ */
+const registerCurrentRuntime = () => {
+	if (currentRuntimeIndex === undefined) {
+		currentRuntimeIndex = Runtimes.length;
+		Runtimes.push({
+			...VersionInfo,
+			alias: currentRuntimeAlias,
+			description: `Runtime ${currentRuntimeIndex} - ver ${VersionInfo.version}${currentRuntimeAlias ? ` (${currentRuntimeAlias})` : ""}`,
+		});
+	}
+};
+
+/**
+ * Returns the index of the current runtime's object in the shared runtimes resource registry
+ * @returns {*}
+ */
+const getCurrentRuntimeIndex = () => {
+	return currentRuntimeIndex;
+};
+
+/**
+ * Compares two runtimes and returns 1 if the first is of a bigger version, -1 if the second is of a bigger version, and 0 if equal
+ * @param index1 The index of the first runtime to compare
+ * @param index2 The index of the second runtime to compare
+ * @returns {number}
+ */
+const compareRuntimes = (index1, index2) => {
+	const cacheIndex = `${index1},${index2}`;
+	if (compareCache.has(cacheIndex)) {
+		return compareCache.get(cacheIndex);
+	}
+
+	const runtime1 = Runtimes[index1];
+	const runtime2 = Runtimes[index2];
+
+	if (!runtime1 || !runtime2) {
+		throw new Error("Invalid runtime index supplied");
+	}
+
+	// If any of the two is a next version, bigger buildTime wins
+	if (runtime1.isNext || runtime2.isNext) {
+		return runtime1.buildTime - runtime2.buildTime;
+	}
+
+	// If major versions differ, bigger one wins
+	const majorDiff = runtime1.major - runtime2.major;
+	if (majorDiff) {
+		return majorDiff;
+	}
+
+	// If minor versions differ, bigger one wins
+	const minorDiff = runtime1.minor - runtime2.minor;
+	if (minorDiff) {
+		return minorDiff;
+	}
+
+	// If patch versions differ, bigger one wins
+	const patchDiff = runtime1.patch - runtime2.patch;
+	if (patchDiff) {
+		return patchDiff;
+	}
+
+	// Bigger suffix wins, f.e. rc10 > rc9
+	// Important: suffix is alphanumeric, must use natural compare
+	const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
+	const result = collator.compare(runtime1.suffix, runtime2.suffix);
+
+	compareCache.set(cacheIndex, result);
+	return result;
+};
+
+/**
+ * Set an alias for the the current app/library/microfrontend which will appear in debug messages and console warnings
+ * @param alias
+ */
+const setRuntimeAlias = alias => {
+	currentRuntimeAlias = alias;
+};
+
+const getAllRuntimes = () => {
+	return Runtimes;
+};
+
+export {
+	getCurrentRuntimeIndex,
+	registerCurrentRuntime,
+	compareRuntimes,
+	setRuntimeAlias,
+	getAllRuntimes,
+};

package/dist/StaticAreaItem.js

@@ -2,7 +2,7 @@ import "./StaticArea.js";
 import updateShadowRoot from "./updateShadowRoot.js";
 import { renderFinished } from "./Render.js";
 import getEffectiveContentDensity from "./util/getEffectiveContentDensity.js";
-import { getEffectiveScopingSuffixForTag } from "./CustomElementsScope.js";
+import { getEffectiveScopingSuffixForTag } from "./CustomElementsScopeUtils.js";
 import getEffectiveDir from "./locale/getEffectiveDir.js";
 
 /**
@@ -25,6 +25,9 @@ class StaticAreaItem extends HTMLElement {
 	setOwnerElement(ownerElement) {
 		this.ownerElement = ownerElement;
 		this.classList.add(this.ownerElement._id); // used for getting the popover in the tests
+		if (this.ownerElement.hasAttribute("data-ui5-static-stable")) {
+			this.setAttribute("data-ui5-stable", this.ownerElement.getAttribute("data-ui5-static-stable")); // stable selector
+		}
 	}
 
 	/**

package/dist/UI5Element.js

@@ -46,6 +46,8 @@ function _invalidate(changeInfo) {
 	this._eventProvider.fireEvent("invalidate", { ...changeInfo, target: this });
 }
 
+let metadata = {};
+
 /**
  * Base class for all UI5 Web Components
  *
@@ -101,6 +103,9 @@ class UI5Element extends HTMLElement {
 	 */
 	async connectedCallback() {
 		this.setAttribute(this.constructor.getMetadata().getPureTag(), "");
+		if (this.constructor.getMetadata().supportsF6FastNavigation()) {
+			this.setAttribute("data-sap-ui-fastnavgroup", "true");
+		}
 
 		const slotsAreManaged = this.constructor.getMetadata().slotsAreManaged();
 
@@ -251,7 +256,8 @@ class UI5Element extends HTMLElement {
 
 			// Listen for any invalidation on the child if invalidateOnChildChange is true or an object (ignore when false or not set)
 			if (child.isUI5Element && slotData.invalidateOnChildChange) {
-				child.attachInvalidate(this._getChildChangeListener(slotName));
+				const method = (child.attachInvalidate || child._attachChange).bind(child);
+				method(this._getChildChangeListener(slotName));
 			}
 
 			// Listen for the slotchange event if the child is a slot itself
@@ -311,7 +317,8 @@ class UI5Element extends HTMLElement {
 
 		children.forEach(child => {
 			if (child && child.isUI5Element) {
-				child.detachInvalidate(this._getChildChangeListener(slotName));
+				const method = (child.detachInvalidate || child._detachChange).bind(child);
+				method(this._getChildChangeListener(slotName));
 			}
 
 			if (isSlot(child)) {
@@ -891,7 +898,15 @@ class UI5Element extends HTMLElement {
 	 * @protected
 	 */
 	static get metadata() {
-		return {};
+		return metadata;
+	}
+
+	/**
+	 * Sets a new metadata object for this UI5 Web Component Class
+	 * @protected
+	 */
+	static set metadata(newMetadata) {
+		metadata = newMetadata;
 	}
 
 	/**

package/dist/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

package/dist/asset-registries/Icons.js

@@ -1,6 +1,6 @@
 import getSharedResource from "../getSharedResource.js";
 import IconCollectionsAlias from "../assets-meta/IconCollectionsAlias.js";
-import { isTheme } from "../config/Theme.js";
+import { getEffectiveDefaultIconCollection } from "../config/Icons.js";
 
 const loaders = new Map();
 const registry = getSharedResource("SVGIcons.registry", new Map());
@@ -48,7 +48,7 @@ const _fillRegistry = bundleData => {
 // set
 const registerIcon = (name, { pathData, ltr, accData, collection, packageName } = {}) => { // eslint-disable-line
 	if (!collection) {
-		collection = _getDefaultCollection();
+		collection = getEffectiveDefaultIconCollection();
 	}
 
 	const key = `${collection}/${name}`;
@@ -68,7 +68,7 @@ const _parseName = name => {
 
 	let collection;
 	[name, collection] = name.split("/").reverse();
-	collection = collection || _getDefaultCollection();
+	collection = collection || getEffectiveDefaultIconCollection();
 
 	// Normalize collection name.
 	// - resolve `SAP-icons-TNT` to `tnt`.
@@ -117,10 +117,6 @@ const _getRegisteredNames = async () => {
 	return Array.from(registry.keys());
 };
 
-const _getDefaultCollection = () => {
-	return isTheme("sap_horizon") ? "SAP-icons-v5" : "SAP-icons";
-};
-
 const _normalizeCollection = collectionName => {
 	if (IconCollectionsAlias[collectionName]) {
 		return IconCollectionsAlias[collectionName];

package/dist/asset-registries/LocaleData.js

@@ -13,7 +13,6 @@ const M_ISO639_OLD_TO_NEW = {
 	"iw": "he",
 	"ji": "yi",
 	"in": "id",
-	"sh": "sr",
 };
 
 const DEV_MODE = false;
@@ -48,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/dist/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/dist/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/dist/config/Theme.js

@@ -35,8 +35,19 @@ const isTheme = _theme => {
 	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/dist/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);
+    }
+}

package/dist/css/FontFace.css

@@ -3,8 +3,8 @@
     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://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 {
@@ -12,8 +12,8 @@
     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://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");
 
 }
 
@@ -22,8 +22,8 @@
     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://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 {
@@ -31,8 +31,38 @@
     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://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 {