@openui5/sap.ui.documentation 1.110.0 → 1.111.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/sap.ui.documentation",
-  "version": "1.110.0",
+  "version": "1.111.1",
   "description": "OpenUI5 UI Library sap.ui.documentation",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -14,11 +14,11 @@
     "url": "https://github.com/SAP/openui5.git"
   },
   "dependencies": {
-    "@openui5/sap.m": "1.110.0",
-    "@openui5/sap.ui.core": "1.110.0",
-    "@openui5/sap.ui.layout": "1.110.0",
-    "@openui5/themelib_sap_belize": "1.110.0",
-    "@openui5/themelib_sap_fiori_3": "1.110.0",
-    "@openui5/themelib_sap_horizon": "1.110.0"
+    "@openui5/sap.m": "1.111.1",
+    "@openui5/sap.ui.core": "1.111.1",
+    "@openui5/sap.ui.layout": "1.111.1",
+    "@openui5/themelib_sap_belize": "1.111.1",
+    "@openui5/themelib_sap_fiori_3": "1.111.1",
+    "@openui5/themelib_sap_horizon": "1.111.1"
   }
 }

package/src/sap/ui/documentation/.library

@@ -6,7 +6,7 @@
   <copyright>OpenUI5
  * (c) Copyright 2009-2023 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>
-  <version>1.110.0</version>
+  <version>1.111.1</version>
 
   <documentation>SAPUI5 library for the Demokit 2.0.</documentation>
 

package/src/sap/ui/documentation/library.js

@@ -25,13 +25,13 @@ sap.ui.define([
 	 * @namespace
 	 * @alias sap.ui.documentation
 	 * @author SAP SE
-	 * @version 1.110.0
+	 * @version 1.111.1
 	 * @since 1.48
 	 * @public
 	 */
 	var thisLibrary = sap.ui.getCore().initLibrary({
 		name : 'sap.ui.documentation',
-		version: '1.110.0',
+		version: '1.111.1',
 		dependencies : ['sap.ui.core','sap.m'],
 		types: [],
 		interfaces: [],

package/src/sap/ui/documentation/messagebundle_es.properties

@@ -5,7 +5,7 @@ APP_TABHEADER_ITEM_API_REFERENCE=Referencia de la API
 APP_TABHEADER_ITEM_SAMPLES=Muestras
 APP_TABHEADER_ITEM_DEMO_APPS=Aplicaciones de demostraci\u00F3n
 APP_TABHEADER_ITEM_TOOLS=Herramientas
-APP_CHANGE_VERSION_BTN=Versi\u00F3n de modificaci\u00F3n
+APP_CHANGE_VERSION_BTN=Modificar versi\u00F3n
 APP_VERSION_BETA_VERSION=Versi\u00F3n beta
 APP_VERSION_VERSION=Versi\u00F3n
 APP_VERSION_NOT_PRODUCTIVE=- no para uso productivo.
@@ -209,7 +209,7 @@ CODE_BACK_BTN_TOOLTIP=Volver a la muestra
 CODE_API_REFERENCE=Referencia de la API
 CODE_DOWNLOAD_BTN=Descargar
 
-CHANGE_VERSION_DIALOG_TITLE=Versi\u00F3n de modificaci\u00F3n
+CHANGE_VERSION_DIALOG_TITLE=Modificar versi\u00F3n
 CHANGE_VERSION_DIALOG_CLOSE_BTN=Cerrar
 CHANGE_VERSION_DIALOG_APPLY_BTN=Aplicar
 CHANGE_VERSION_DIALOG_LATEST_BTN=\u00DAltimo

package/src/sap/ui/documentation/messagebundle_pt.properties

@@ -5,7 +5,7 @@ APP_TABHEADER_ITEM_API_REFERENCE=Refer\u00EAncia de API
 APP_TABHEADER_ITEM_SAMPLES=Amostras
 APP_TABHEADER_ITEM_DEMO_APPS=Aplicativos de demonstra\u00E7\u00E3o
 APP_TABHEADER_ITEM_TOOLS=Ferramentas
-APP_CHANGE_VERSION_BTN=Vers\u00E3o de modifica\u00E7\u00E3o
+APP_CHANGE_VERSION_BTN=Modificar vers\u00E3o
 APP_VERSION_BETA_VERSION=Vers\u00E3o beta
 APP_VERSION_VERSION=Vers\u00E3o
 APP_VERSION_NOT_PRODUCTIVE=\u2013 n\u00E3o para uso produtivo.
@@ -209,7 +209,7 @@ CODE_BACK_BTN_TOOLTIP=Voltar \u00E0 amostra
 CODE_API_REFERENCE=Refer\u00EAncia de API
 CODE_DOWNLOAD_BTN=Baixar
 
-CHANGE_VERSION_DIALOG_TITLE=Vers\u00E3o de modifica\u00E7\u00E3o
+CHANGE_VERSION_DIALOG_TITLE=Modificar vers\u00E3o
 CHANGE_VERSION_DIALOG_CLOSE_BTN=Encerrar
 CHANGE_VERSION_DIALOG_APPLY_BTN=Aplicar
 CHANGE_VERSION_DIALOG_LATEST_BTN=\u00DAltimo

package/src/sap/ui/documentation/sdk/controller/App.controller.js

@@ -31,7 +31,8 @@ sap.ui.define([
 	"sap/m/Button",
 	"sap/m/Toolbar",
 	"sap/ui/documentation/sdk/util/Resources",
-	'sap/base/util/LoaderExtensions'
+	'sap/base/util/LoaderExtensions',
+	"sap/ui/documentation/sdk/controller/util/ThemePicker"
 ], function(
 	KeyCodes,
 	jQuery,
@@ -59,7 +60,8 @@ sap.ui.define([
 	Button,
 	Toolbar,
 	ResourcesUtil,
-	LoaderExtensions
+	LoaderExtensions,
+	ThemePicker
 ) {
 		"use strict";
 
@@ -94,22 +96,10 @@ sap.ui.define([
 			CHANGE_SETTINGS_TEXT = "settings",
 			CHANGE_COOKIE_PREFERENCES_TEXT = "cookie_preferences",
 			DEMOKIT_DEFAULT_LANGUAGE = "en",
-			DEMOKIT_APPEARANCE_KEY_LIGHT = "light",
-			DEMOKIT_APPEARANCE_KEY_DARK = "dark",
-			DEMOKIT_APPEARANCE_KEY_HCB = "hcb",
-			DEMOKIT_APPEARANCE_KEY_HCW = "hcw",
-			DEMOKIT_APPEARANCE_KEY_AUTO = "auto",
-			DEMOKIT_APPEARANCE = Object.create(null),
 			DEMOKIT_CONFIGURATION_LANGUAGE = "language",
 			DEMOKIT_CONFIGURATION_APPEARANCE = "appearance",
 			SITEMAP = "sitemap";
 
-		DEMOKIT_APPEARANCE[DEMOKIT_APPEARANCE_KEY_LIGHT] = "sap_horizon";
-		DEMOKIT_APPEARANCE[DEMOKIT_APPEARANCE_KEY_DARK] = "sap_horizon_dark";
-		DEMOKIT_APPEARANCE[DEMOKIT_APPEARANCE_KEY_HCB] = "sap_horizon_hcb";
-		DEMOKIT_APPEARANCE[DEMOKIT_APPEARANCE_KEY_HCW] = "sap_horizon_hcw";
-		DEMOKIT_APPEARANCE[DEMOKIT_APPEARANCE_KEY_AUTO] = "sap_horizon"; // fallback if window.matchMedia is not supported
-
 		return BaseController.extend("sap.ui.documentation.sdk.controller.App", {
 			formatter: globalFormatter,
 
@@ -167,7 +157,10 @@ sap.ui.define([
 					"<a href='https://sdk.openui5.org/1.71.46/'>https://sdk.openui5.org/1.71.46/</a>"
 				});
 
-				var oComponent = this.getOwnerComponent();
+				var oComponent = this.getOwnerComponent(),
+					oController = this;
+
+				ThemePicker.init(oController);
 
 				this.MENU_LINKS_MAP = {
 					"legal": "https://www.sap.com/corporate/en/legal/impressum.html",
@@ -225,10 +218,6 @@ sap.ui.define([
 
 				NewsInfo.prepareNewsData(this._oConfigUtil);
 
-				this._bSupportsPrefersColorScheme = !!(window.matchMedia &&
-					(window.matchMedia('(prefers-color-scheme: dark)').matches ||
-					window.matchMedia('(prefers-color-scheme: light)').matches));
-
 				ResizeHandler.register(this.oHeader, this.onHeaderResize.bind(this));
 				this.oRouter.attachRouteMatched(this.onRouteChange.bind(this));
 				this.oRouter.attachBypassed(this.onRouteNotFound.bind(this));
@@ -476,7 +465,7 @@ sap.ui.define([
 					}.bind(this));
 				} else if (sTargetText === CHANGE_VERSION_TEXT) {
 					this.onChangeVersionButtonPress();
-				} else if (DEMOKIT_APPEARANCE[sTargetText]) {
+				} else if (ThemePicker._getTheme()[sTargetText]) {
 					this._updateAppearance(sTargetText);
 				} else if (sTarget === SITEMAP) {
 					this.onSiteMapPress();
@@ -707,67 +696,13 @@ sap.ui.define([
 			 * If the keyword is "auto" the appearance will be updated to light or dark depending on the
 			 * user's OS settings.
 			 * @param {string} sKey the appearance keyword
+			 * @param {object} oComponent the component where the theme will be changed
 			 * @private
 			 */
 			_updateAppearance: function(sKey) {
-				if (sKey === DEMOKIT_APPEARANCE_KEY_AUTO && this._bSupportsPrefersColorScheme) {
-						this._toggleLightOrDarkAppearance(window.matchMedia('(prefers-color-scheme: dark)').matches);
-					this._attachPrefersColorSchemeChangeListener();
-				} else {
-					Core.applyTheme(DEMOKIT_APPEARANCE[sKey]);
-				}
-
-				this._sLastKnownAppearanceKey = sKey;
-
-				this.bus.publish("themeChanged", "onDemoKitThemeChanged", {sThemeActive: DEMOKIT_APPEARANCE[sKey]});
-
-				if (this._oConfigUtil.getCookieValue(this._oCookieNames.ALLOW_REQUIRED_COOKIES) === "1") {
-					this._oConfigUtil.setCookie(DEMOKIT_CONFIGURATION_APPEARANCE, sKey);
-				}
-			},
-
-			/**
-			 * Toggles the appearance of the Demo Kit to light or dark depending on the incoming argument.
-			 * @param {boolean} bIsDark whether the new appearance should be dark
-			 * @private
-			 */
-			_toggleLightOrDarkAppearance: function (bIsDark) {
-				if (bIsDark) {
-					// dark mode
-					Core.applyTheme(DEMOKIT_APPEARANCE[DEMOKIT_APPEARANCE_KEY_DARK]);
-				} else {
-					// light mode or unsupported prefers-color-scheme
-					Core.applyTheme(DEMOKIT_APPEARANCE[DEMOKIT_APPEARANCE_KEY_LIGHT]);
-				}
-			},
-
-			/**
-			 * Attaches an event listener to the 'change' event of the prefers-color-scheme media.
-			 * Depending on the change and the last known appearance, the appearance of the Demo Kit is changed to light, dark, hcb or hcw.
-			 * @private
-			 */
-			_attachPrefersColorSchemeChangeListener: function() {
-				var that = this;
-
-				if (!this._bAttachedPrefersColorSchemeChangeListener) {
-					var oQuery = window.matchMedia('(prefers-color-scheme: dark)');
-					var toggleAppearance = function(e) {
-						if (that._sLastKnownAppearanceKey === DEMOKIT_APPEARANCE_KEY_AUTO) {
-							that._toggleLightOrDarkAppearance(e.matches);
-							that.bus.publish("themeChanged", "onDemoKitThemeChanged", {
-								sThemeActive: DEMOKIT_APPEARANCE[e.matches ? DEMOKIT_APPEARANCE_KEY_DARK : DEMOKIT_APPEARANCE_KEY_LIGHT]
-							});
-						}
-					};
-					if (oQuery.addEventListener) {
-						oQuery.addEventListener('change', toggleAppearance);
-					} else { // Safari 13 and older only supports deprecated MediaQueryList.addListener
-						oQuery.addListener(toggleAppearance);
-					}
-					this._bAttachedPrefersColorSchemeChangeListener = true;
-				}
+				var oComponent = this;
+				ThemePicker._updateAppearance(sKey, oComponent);
 			},
-
 			/**
 			 * Creates configuration for the application regarding the URI input.
 			 * @private
@@ -794,7 +729,7 @@ sap.ui.define([
 					if (sConf === DEMOKIT_CONFIGURATION_LANGUAGE) {
 						Core.getConfiguration().setLanguage(DEMOKIT_DEFAULT_LANGUAGE);
 					} else if (sConf === DEMOKIT_CONFIGURATION_APPEARANCE) {
-						this._updateAppearance(DEMOKIT_APPEARANCE_KEY_AUTO);
+						this._updateAppearance(ThemePicker._getTheme().auto);
 					}
 				}, this);
 
@@ -1181,8 +1116,8 @@ sap.ui.define([
 					bPhoneSize = oViewModel.getProperty("/bPhoneSize");
 
 				// Version switch should not be shown on phone sizes or when no versions are found
-				oViewModel.setProperty("/bShowVersionSwitchInHeader", !bPhoneSize && !!this._aNeoAppVersions);
-				oViewModel.setProperty("/bShowVersionSwitchInMenu", bPhoneSize && !!this._aNeoAppVersions);
+				oViewModel.setProperty("/bShowVersionSwitchInHeader", !bPhoneSize && !!this._aNeoAppVersions.length);
+				oViewModel.setProperty("/bShowVersionSwitchInMenu", bPhoneSize && !!this._aNeoAppVersions.length);
 			},
 
 			_createVersionDialog: function () {
@@ -1645,6 +1580,41 @@ sap.ui.define([
 				});
 			},
 
+			_getCurrentYear: function () {
+				return new Date().getFullYear();
+			},
+
+			_getCurrentQuarter: function () {
+				var oDate = new Date(),
+					iMonth = oDate.getMonth(),
+					iQuarter = Math.floor(iMonth / 3) + 1;
+
+				return iQuarter;
+			},
+
+			/**
+			 * Filters versions in the given JSON object that have passed their end of cloud maintenance date.
+			 * @function
+			 * @param {Object} oVersionOverviewJson - A JSON object containing version information.
+			 * @returns {Array} An array of versions that have not passed their end of cloud maintenance date.
+			 */
+			_filterVersionsPastEOCP: function (oVersionOverviewJson) {
+				var aVersions = oVersionOverviewJson.patches;
+
+				return aVersions.filter(function (oVersion) {
+					var sVersionEOCP = oVersion.extended_eocp || oVersion.eocp || "",
+						iQuarter = Number(sVersionEOCP.substring(1, 2)),
+						iYear = Number(sVersionEOCP.substring(3));
+
+					if (!sVersionEOCP) {
+						return true;
+					}
+
+					return iYear > this._getCurrentYear() ||
+						iYear === this._getCurrentYear() && iQuarter >= this._getCurrentQuarter();
+				}.bind(this));
+			},
+
 			_processVersionOverview: function(oVersionOverviewJson) {
 				var aVersions = oVersionOverviewJson.versions,
 					aResult = [];
@@ -1712,18 +1682,28 @@ sap.ui.define([
 					// Success
 					function(oValues) {
 						var aNeoAppVersions = this._processNeoAppJSON(oValues[0]),
-							aHiddenValues = this._processVersionOverview(oValues[1]);
+							aHiddenValues = this._processVersionOverview(oValues[1]),
+							aFilteredVersionsEOCP = this._filterVersionsPastEOCP(oValues[1]);
 
 						if (Array.isArray(aNeoAppVersions)) {
 							aNeoAppVersions = aNeoAppVersions.filter(function(oVersion) {
 								return aHiddenValues.indexOf(oVersion.version) === -1;
 							});
 
+							// Filters "aNeoAppVersions" array by removing elements
+							// that don't have a matching version in "aFilteredVersionsEOCP" array.
+							aNeoAppVersions = aNeoAppVersions.filter(function(oVersion) {
+								return aFilteredVersionsEOCP.find(function(oFilteredVersion) {
+									return oFilteredVersion.version === oVersion.version;
+								});
+							});
+
 							this._aNeoAppVersions = aNeoAppVersions;
 							// Make version select visible
 							this._updateVersionSwitchVisibility();
 							this.getModel("versionData").setProperty("/latestVersion", this._aNeoAppVersions[0].version);
 						} else {
+							this._aNeoAppVersions = [];
 							Log.warning("No multi-version environment detected");
 						}
 					}.bind(this),

package/src/sap/ui/documentation/sdk/controller/Entity.controller.js

@@ -559,7 +559,9 @@ sap.ui.define([
 				"float",
 				"int",
 				"boolean",
-				"string"
+				"string",
+				"Date",
+				"Object"
 			],
 			_formatTypeNav: function (sType) {
 				return this._baseTypes.indexOf(sType) === -1;

package/src/sap/ui/documentation/sdk/controller/SubApiDetail.controller.js

@@ -42,6 +42,10 @@ sap.ui.define([
 				"fields": "properties",
 				"special settings": "specialsettings"
 			},
+			EXTERNAL_BASE_TYPES: [
+				"Date",
+				"Object"
+			],
 			formatter: formatter,
 
 			onInit: function () {
@@ -391,9 +395,15 @@ sap.ui.define([
 					this._oHeaderLayoutUtil = {
 
 						_getControlSampleBlock: function (oControlData, oEntityData) {
+							var sStereotype = oControlData && oControlData['ui5-metadata'] && oControlData['ui5-metadata'].stereotype || '';
+							if (typeof sStereotype === 'string' && sStereotype.length > 0) {
+								// stereotype with starting capital char and spacer at the end
+								sStereotype = sStereotype.charAt(0).toUpperCase() + sStereotype.slice(1) + ' ';
+							}
+
 							return _getHBox({
 								items: [
-									_getLabel({design: "Bold", text: "Control Sample:"}),
+									_getLabel({design: "Bold", text: sStereotype + "Sample:"}),
 									_getLink({
 										emphasized: true,
 										text: oEntityData.sample,
@@ -448,15 +458,20 @@ sap.ui.define([
 							}, true);
 						},
 						_getExtendsBlock: function (oControlData, oEntityData) {
+							// whether the base class can be linked to
+							var bExtendsAPIEntity =
+								oControlData.isDerived
+								&& !this.EXTERNAL_BASE_TYPES.includes(oControlData.extendsText);
+
 							return _getHBox({
 								items: [
 									_getLabel({text: "Extends:"}),
 									_getLink({
 										text: oControlData.extendsText,
 										href: "api/" + oControlData.extendsText,
-										visible: oControlData.isDerived
+										visible: bExtendsAPIEntity
 									}),
-									_getText({text: oControlData.extendsText, visible: !oControlData.isDerived})
+									_getText({text: oControlData.extendsText, visible: !bExtendsAPIEntity})
 								]
 							}, true);
 						},

package/src/sap/ui/documentation/sdk/controller/util/ThemePicker.js

@@ -0,0 +1,195 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2023 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+sap.ui.define([
+	"sap/ui/core/Core",
+	"sap/base/util/UriParameters"
+], function(
+	Core,
+	UriParameters
+) {
+	"use strict";
+
+	/**
+	 * Utility used for changing the themes inside applications.
+	 *
+	 */
+	var ThemePicker = {};
+
+	var CONFIGURATION_APPEARANCE = "appearance",
+	APPEARANCE_KEY_LIGHT = "light",
+	APPEARANCE_KEY_DARK = "dark",
+	APPEARANCE_KEY_HCB = "hcb",
+	APPEARANCE_KEY_HCW = "hcw",
+	APPEARANCE_KEY_AUTO = "auto",
+	APPEARANCE = Object.create(null);
+
+	APPEARANCE[APPEARANCE_KEY_LIGHT] = "sap_horizon";
+	APPEARANCE[APPEARANCE_KEY_DARK] = "sap_horizon_dark";
+	APPEARANCE[APPEARANCE_KEY_HCB] = "sap_horizon_hcb";
+	APPEARANCE[APPEARANCE_KEY_HCW] = "sap_horizon_hcw";
+	APPEARANCE[APPEARANCE_KEY_AUTO] = "sap_horizon"; // fallback if window.matchMedia is not supported
+
+
+	ThemePicker.init = function(oComponent) {
+		this.oComponent = oComponent;
+
+		this._oConfigUtil = oComponent.getOwnerComponent().getConfigUtil();
+		this._oCookieNames = this._oConfigUtil.COOKIE_NAMES;
+
+		this.bus = Core.getEventBus();
+
+		this._createConfigurationBasedOnURIInput();
+
+		this._bSupportsPrefersColorScheme = !!(window.matchMedia &&
+			(window.matchMedia('(prefers-color-scheme: dark)').matches ||
+			window.matchMedia('(prefers-color-scheme: light)').matches));
+
+		if (this._oConfigUtil.getCookieValue(this._oCookieNames.ALLOW_REQUIRED_COOKIES) === "1" && this._aConfiguration.length > 0) {
+			ThemePicker._applyCookiesConfiguration(this._aConfiguration);
+		} else {
+			ThemePicker._applyDefaultConfiguration(this._aConfiguration);
+		}
+
+	};
+
+	/**
+	 * Stores and returns the available themes.
+	 * @private
+	 */
+
+	ThemePicker._getTheme = function() {
+		return APPEARANCE;
+	};
+
+	/**
+	 * Updates the appearance of the Demo Kit depending of the incoming appearance keyword.
+	 * If the keyword is "auto" the appearance will be updated to light or dark depending on the
+	 * user's OS settings.
+	 * @param {string} sKey the appearance keyword
+	 * @private
+	 */
+	ThemePicker._updateAppearance = function(sKey) {
+
+		if (sKey === APPEARANCE_KEY_AUTO && this._bSupportsPrefersColorScheme) {
+			this._toggleLightOrDarkAppearance(window.matchMedia('(prefers-color-scheme: dark)').matches);
+			this._attachPrefersColorSchemeChangeListener();
+		} else {
+			Core.applyTheme(this._getTheme()[sKey]);
+		}
+
+		this._sLastKnownAppearanceKey = sKey;
+
+		this.bus.publish("themeChanged", "onThemeChanged", {sThemeActive: this._getTheme()[sKey]});
+
+		if (this._oConfigUtil.getCookieValue(this._oCookieNames.ALLOW_REQUIRED_COOKIES) === "1") {
+			this._oConfigUtil.setCookie(CONFIGURATION_APPEARANCE, sKey);
+		}
+	};
+
+	/**
+	 * Toggles the appearance of the Demo Kit to light or dark depending on the incoming argument.
+	 * @param {boolean} bIsDark whether the new appearance should be dark
+	 * @private
+	 */
+	ThemePicker._toggleLightOrDarkAppearance = function (bIsDark) {
+		if (bIsDark) {
+			// dark mode
+			Core.applyTheme(this._getTheme().dark);
+		} else {
+			// light mode or unsupported prefers-color-scheme
+			Core.applyTheme(this._getTheme().light);
+		}
+	};
+
+	/**
+	 * Attaches an event listener to the 'change' event of the prefers-color-scheme media.
+	 * Depending on the change and the last known appearance, the appearance of the Demo Kit is changed to light, dark, hcb or hcw.
+	 * @private
+	 */
+	ThemePicker._attachPrefersColorSchemeChangeListener = function() {
+		var that = this,
+			oQuery,
+			toggleAppearance;
+
+		if (!this._bAttachedPrefersColorSchemeChangeListener) {
+			oQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+			toggleAppearance = function(e) {
+				if (that._sLastKnownAppearanceKey === APPEARANCE_KEY_AUTO) {
+					this._toggleLightOrDarkAppearance(e.matches);
+					that.bus.publish("themeChanged", "onThemeChanged", {
+						sThemeActive: APPEARANCE[e.matches ? APPEARANCE_KEY_DARK : APPEARANCE_KEY_LIGHT]
+					});
+				}
+			};
+
+			if (oQuery.addEventListener) {
+				oQuery.addEventListener('change', toggleAppearance);
+			} else { // Safari 13 and older only supports deprecated MediaQueryList.addListener
+				oQuery.addListener(toggleAppearance);
+			}
+			this._bAttachedPrefersColorSchemeChangeListener = true;
+		}
+	};
+
+	/**
+	 * Applies configuration for the application regarding the cookies.
+	 * @private
+	 */
+	ThemePicker._applyCookiesConfiguration = function () {
+		var sCookieValue, sConf, i;
+
+		for (i = 0; i < this._aConfiguration.length; i++) {
+			sConf = this._aConfiguration[i];
+			sCookieValue = this._oConfigUtil.getCookieValue(sConf);
+
+			if (sCookieValue !== "") {
+				if (sConf === CONFIGURATION_APPEARANCE) {
+					this._updateAppearance(sCookieValue, this.oComponent);
+				}
+
+				// If we have available value for the given cookie we remove it from the configuration array.
+				this._aConfiguration.splice(i, 1);
+				i--;
+			}
+		}
+
+		// If we still have configurations which are not set by their cookie values, we apply their default values.
+		if (this._aConfiguration.length > 0) {
+			this._applyDefaultConfiguration();
+		}
+	};
+
+	/**
+	 * Applies configuration for the application regarding the default values.
+	 * @private
+	 */
+	ThemePicker._applyDefaultConfiguration = function () {
+		this._aConfiguration.forEach(function(sConf){
+		if (sConf === CONFIGURATION_APPEARANCE) {
+				this._updateAppearance(APPEARANCE_KEY_AUTO);
+			}
+		}, this);
+
+	};
+
+	/**
+	* Creates configuration for the application regarding the URI input.
+	* @private
+	*/
+	ThemePicker._createConfigurationBasedOnURIInput = function () {
+	   var oUriParams = UriParameters.fromQuery(window.location.search);
+	   this._aConfiguration = [];
+
+	   if (!(oUriParams.has('sap-ui-theme') || oUriParams.has('sap-theme'))) {
+		   this._aConfiguration.push(CONFIGURATION_APPEARANCE);
+	   }
+   };
+
+	return ThemePicker;
+
+});

package/src/sap/ui/documentation/sdk/controller/util/XML2JSONUtils.js

@@ -5,29 +5,52 @@
  */
 
 sap.ui.define(["sap/ui/thirdparty/jquery"],
-	function(jQuery) {
+	function (jQuery) {
 		"use strict";
 
 		function buildDocuJSON(xml, oConfig) {
 			var xmlDom = xml2dom(xml, oConfig);
 			var aSingles = ["topictitle1", "shortdesc"];
+			var aPreservedSingles = oConfig.preservedContent && oConfig.preservedContent.length
+				&& oConfig.preservedContent.map(function (e) { return e.className; });
 
-			var processSingleNode = function(className, xmlDOMObj) {
+			var getPreservedTags = function (className) {
+				var preservedTags;
+
+				oConfig.preservedContent.forEach(function (item) {
+					if (item.className === className) {
+						preservedTags = item.preservedTags;
+					}
+				});
+
+				return preservedTags;
+			};
+
+			var getNodeText = function (className, nodeHTML) {
+				var bIsNodePreserved = aPreservedSingles && aPreservedSingles.indexOf(className) > -1;
+
+				if (bIsNodePreserved) {
+					return jQuery("<div></div>").html(removeHTMLTags(nodeHTML, getPreservedTags(className))).html();
+				}
+
+				return jQuery("<div></div>").html(removeHTMLTags(nodeHTML)).text();
+			};
+
+			var processSingleNode = function (className, xmlDOMObj) {
 				var oXMLDOM = xmlDOMObj || xmlDom;
 				var oNodes = oXMLDOM.getElementsByClassName(className);
+
 				if (oNodes.length === 0) {
 					return '';
 				}
-				var nodeText = jQuery("<div></div>").html(removeHTMLTags(oNodes[0].innerHTML)).text();
-				return oNodes && oNodes.length > 0 && ("innerHTML" in oNodes[0]) && nodeText || '';
-			};
 
-			var removeHTMLTags = function(txt) {
-				return txt.replace(/<[^>]*>/g, " ")
-						.replace(/\s{2,}/g, ' ');
+				var nodeHTML = oNodes[0].innerHTML,
+					nodeText = getNodeText(className, nodeHTML);
+
+				return oNodes && oNodes.length > 0 && ("innerHTML" in oNodes[0]) && nodeText || '';
 			};
 
-			var fixImgLocation = function(element) {
+			var fixImgLocation = function (element) {
 				var images = element.querySelectorAll("img");
 
 				for (var i = 0; i < images.length; i++) {
@@ -41,7 +64,7 @@ sap.ui.define(["sap/ui/thirdparty/jquery"],
 				return element.innerHTML;
 			};
 
-			var processSections = function() {
+			var processSections = function () {
 				/* "Invalid DOM Elements" (ones that should not be added to the body) are:
 					- all scripts
 					- element with class topictitle1 (this is used as title)
@@ -72,11 +95,11 @@ sap.ui.define(["sap/ui/thirdparty/jquery"],
 
 				fixImgLocation(wrapperContainer);
 
-				json['html'] =  wrapperContainer.innerHTML;
+				json['html'] = wrapperContainer.innerHTML;
 			};
 
 			var json = {}, mdEditLink;
-			aSingles.forEach(function(singleNode, idx){
+			aSingles.forEach(function (singleNode, idx) {
 				json[singleNode] = processSingleNode(singleNode);
 			});
 
@@ -104,10 +127,39 @@ sap.ui.define(["sap/ui/thirdparty/jquery"],
 			}
 		}
 
+		/**
+		 * Removes HTML tags from a string, except for those specified in the preservedTags array.
+		 * @param {string} txt - The input string.
+		 * @param {string[]} [preservedTags] - An optional array of HTML tags to preserve.
+		 * @return {string} The input string with HTML tags removed.
+		 */
+		function removeHTMLTags(txt, preservedTags) {
+			if (preservedTags === undefined || preservedTags.length === 0) {
+				return removeAllHTMLTags(txt);
+			}
+
+			return txt.replace(/<\/?([^>]+)>/g, function (match, tag) {
+				if (preservedTags.indexOf(tag) === -1) {
+					return '';
+				}
+				return match;
+			}).replace(/\s{2,}/g, ' ');
+		}
+
+		/**
+		 * Removes all HTML tags from a string.
+		 * @param {string} txt - The input string.
+		 * @return {string} The input string with all HTML tags removed.
+		 */
+		function removeAllHTMLTags(txt) {
+			return txt.replace(/<[^>]*>/g, ' ').replace(/\s{2,}/g, ' ');
+		}
+
 		return {
-			DomXml2JSON : buildDocuJSON,
+			DomXml2JSON: buildDocuJSON,
 			XML2DOM: xml2dom,
-			XML2JSON: buildDocuJSON
+			XML2JSON: buildDocuJSON,
+			removeHTMLTags: removeHTMLTags
 		};
 
 	});

package/src/sap/ui/documentation/sdk/css/style.css

@@ -318,6 +318,10 @@ html.sap-desktop .sapContrast.sapMSlt.sapUiDocumentationSelect:not(.sapMSltExpan
 	font-family: "72Black", "72Blackfull", "72", "72full", Arial, Helvetica, sans-serif;
 }
 
+.sapUiDocumentationTopicSubtitle code {
+	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
 .sapUiMedia-Std-Phone .sapUiDocumentationTopicTitle {
 	font-size: 1.5rem;
 }
@@ -328,11 +332,13 @@ html.sap-desktop .sapContrast.sapMSlt.sapUiDocumentationSelect:not(.sapMSltExpan
 	padding-right: 2rem;
 }
 
-.sapUiTheme-sap_horizon .sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent .sapMText {
+.sapUiTheme-sap_horizon .sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent .sapMText,
+.sapUiTheme-sap_horizon .sapFDynamicPageHeaderWithContent .sapUiDocumentationTopicSubtitle {
 	color: #556b82;
 }
 
-.sapUiTheme-sap_horizon_dark .sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent .sapMText {
+.sapUiTheme-sap_horizon_dark .sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent .sapMText,
+.sapUiTheme-sap_horizon_dark .sapFDynamicPageHeaderWithContent .sapUiDocumentationTopicSubtitle {
 	color: #8396a8;
 }
 

package/src/sap/ui/documentation/sdk/manifest.json

@@ -72,7 +72,13 @@
 		"config": {
 			"docuPath": "./docs/topics/",
 			"exploredURI": "./",
-			"topicHtmlMainDivId": "d4h5-main-container"
+			"topicHtmlMainDivId": "d4h5-main-container",
+			"preservedContent": [
+				{
+					"className": "shortdesc",
+					"preservedTags": ["code"]
+				}
+			]
 		},
 		"routing": {
 			"config": {

package/src/sap/ui/documentation/sdk/model/formatter.js

@@ -9,8 +9,10 @@ sap.ui.define([
 	"sap/ui/base/Object",
 	"sap/base/util/merge",
 	"sap/ui/documentation/sdk/controller/util/JSDocUtil",
+	"sap/base/security/sanitizeHTML",
+	"sap/ui/documentation/sdk/controller/util/URLUtil",
 	"sap/base/strings/formatMessage"
-], function (BaseObject, merge, JSDocUtil,  formatMessage) {
+], function (BaseObject, merge, JSDocUtil, sanitizeHTML, URLUtil, formatMessage) {
 	"use strict";
 
 	// regexp for an extra route parameter in the format: a single 'p' letter followed by a digit
@@ -281,6 +283,24 @@ sap.ui.define([
 			return formatMessage(sMsg, sParam);
 		},
 
+		//Formatter for links, coming from api.json text in static documentation format
+		formatMessageStripLinks: function (sText) {
+			var bStatic = window['sap-ui-documentation-static'];
+
+			if (sText) {
+
+				sText = sanitizeHTML(sText, {
+					uriRewriter: function(sUrl) {
+						if (bStatic && URLUtil.hasSEOOptimizedFormat("/" + sUrl)) {
+							sUrl = URLUtil.convertToNonSEOFormat(sUrl).replace(/^\//, "");
+						}
+						return sUrl;
+					}
+				});
+			}
+			return sText;
+		},
+
 		/**
 		 * Formats the value of the <code>visibile</code> property of the cards in the Tools section
 		 *

package/src/sap/ui/documentation/sdk/util/DocumentationRouter.js

@@ -249,11 +249,6 @@ sap.ui.define([
 			return;
 		}
 
-		// The links from the static documentation are already preprocessed at build-time
-		// to the correct format, so we do not need to adjust them here at run-time
-		if (window['sap-ui-documentation-static'] && oAnchorElement.classList.contains('sap-doc')) {
-			return;
-		}
 		sTarget = getHref(oAnchorElement);
 
 		bParsed = /^blob:/.test(sTarget)
@@ -305,11 +300,6 @@ sap.ui.define([
 			oUri;
 
 		if (oAnchorElement) {
-			// The links from the static documentation are already preprocessed at build-time
-			// to the correct format, so we do not need to adjust them here at run-time
-			if (window['sap-ui-documentation-static'] && oAnchorElement.classList.contains('sap-doc')) {
-				return;
-			}
 			sTargetHref = getHref(oAnchorElement);
 			bNewWindow = bCtrlHold || !getSameWindow(oAnchorElement);
 		}
@@ -679,7 +669,7 @@ sap.ui.define([
 	}
 
 	function isAnchorElement(oAnchorElement, bSameWindow) {
-		if (oAnchorElement && oAnchorElement.nodeName === "A") {
+		if (oAnchorElement && oAnchorElement.nodeName === "A" || oAnchorElement.nodeName === "AREA") {
 			return bSameWindow ? getSameWindow(oAnchorElement) : true;
 		}
 

package/src/sap/ui/documentation/sdk/view/SubApiDetail.view.xml

@@ -54,7 +54,7 @@
 
 										<template:if test="{=${data>/deprecatedText} !== undefined}">
 											<m:MessageStrip
-												text="{/deprecatedText}"
+												text="{path : '/deprecatedText', formatter: '.formatter.formatMessageStripLinks'}"
 												type="Error"
 												showIcon="true"
 												showCloseButton="false"
@@ -295,7 +295,7 @@
 													</layout:HorizontalLayout>
 													<m:MessageStrip
 														visible="{=${deprecatedText} !== undefined}"
-														text="{deprecatedText}"
+														text="{path : 'deprecatedText', formatter: 'sap.ui.documentation.sdk.model.formatter.formatMessageStripLinks'}"
 														type="Error"
 														showIcon="true"
 														showCloseButton="false"
@@ -497,7 +497,7 @@
 												</layout:HorizontalLayout>
 												<template:if test="{=${event>deprecated} !== undefined}">
 													<m:MessageStrip
-														text="{event>deprecatedText}"
+														text="{path : 'event>deprecatedText', formatter: 'sap.ui.documentation.sdk.model.formatter.formatMessageStripLinks'}"
 														type="Error"
 														showIcon="true"
 														showCloseButton="false"
@@ -526,7 +526,7 @@
 																	<custom:JSDocText sanitizeContent="false" text="{path: 'parameter>description', formatter: 'sap.ui.base.ManagedObject.escapeSettingsValue'}"/>
 																	<m:MessageStrip
 																			visible="{=${parameter>deprecated} !== undefined}"
-																			text="{parameter>deprecatedText}"
+																			text="{path : 'parameter>deprecatedText', formatter: 'sap.ui.documentation.sdk.model.formatter.formatMessageStripLinks'}"
 																			type="Error"
 																			showIcon="true"
 																			showCloseButton="false"
@@ -614,9 +614,9 @@
 														<m:ObjectStatus visible="{=${method>since} !== undefined}" text="Since: {method>since}"/>
 													</layout:HorizontalLayout>
 													</m:FlexBox>
-													<template:if test="{=${method>deprecated} !== undefined}">
+													<template:if test="{=${method>deprecatedText} !== undefined}">
 														<m:MessageStrip
-															text="{method>deprecatedText}"
+															text="{ path: 'method>deprecatedText', formatter: 'sap.ui.documentation.sdk.model.formatter.formatMessageStripLinks' }"
 															type="Error"
 															showIcon="true"
 															showCloseButton="false"

package/src/sap/ui/documentation/sdk/view/TopicDetail.view.xml

@@ -41,9 +41,9 @@
 		</title>
 
 		<header>
-			<DynamicPageHeader pinnable="fale">
+			<DynamicPageHeader pinnable="false">
 				<content>
-					<m:Text text="{/shortdesc}"/>
+					<m:FormattedText htmlText="{/shortdesc}" class="sapUiDocumentationTopicSubtitle"></m:FormattedText>
 				</content>
 			</DynamicPageHeader>
 		</header>

package/src/sap/ui/documentation/sdk/view/Welcome.view.xml

@@ -169,115 +169,13 @@
 					</l:BlockLayoutCell>
 				</l:BlockLayoutRow>
 
-				<l:BlockLayoutRow>
-					<l:BlockLayoutCell
-							backgroundColorSet="ColorSet10"
-							backgroundColorShade="ShadeB">
-						<l:VerticalLayout
-								width="100%">
-							<custom:TitleLink
-								href="topic/bf2d55eaa33b44a78ef95e7946d658e8"
-								text="{i18n>WELCOME_BLOCK_4_TITLE}"
-								class="sapUiSmallMarginBottom"
-								titleStyle="H2"/>
-							<Text
-									text="{i18n>WELCOME_BLOCK_4_TEXT_1}"
-									class="sapUiSmallMarginBottom"/>
-								<HBox>
-									<core:Icon
-											src="sap-icon://accept"
-											size="0.875rem"
-											color="Default"
-											class="sapUiTinyMarginBegin sapUiSmallMarginEnd"/>
-									<Text text="{i18n>WELCOME_BLOCK_4_TEXT_2}"/>
-								</HBox>
-								<HBox>
-									<core:Icon
-											src="sap-icon://accept"
-											size="0.875rem"
-											color="Default"
-											class="sapUiTinyMarginBegin sapUiSmallMarginEnd"/>
-									<Text text="{i18n>WELCOME_BLOCK_4_TEXT_3}"/>
-								</HBox>
-								<HBox>
-									<core:Icon
-											src="sap-icon://accept"
-											size="0.875rem"
-											color="Default"
-											class="sapUiTinyMarginBegin sapUiSmallMarginEnd"/>
-									<Text text="{i18n>WELCOME_BLOCK_4_TEXT_4}"/>
-								</HBox>
-								<HBox>
-									<core:Icon
-											src="sap-icon://accept"
-											size="0.875rem"
-											color="Default"
-											class="sapUiTinyMarginBegin sapUiSmallMarginEnd"/>
-									<Text text="{i18n>WELCOME_BLOCK_4_TEXT_5}"/>
-								</HBox>
-								<HBox>
-									<core:Icon
-											src="sap-icon://accept"
-											size="0.875rem"
-											color="Default"
-											class="sapUiTinyMarginBegin sapUiSmallMarginEnd"/>
-									<Text text="{i18n>WELCOME_BLOCK_4_TEXT_6}"/>
-								</HBox>
-								<HBox>
-									<core:Icon
-											src="sap-icon://accept"
-											size="0.875rem"
-											color="Default"
-											class="sapUiTinyMarginBegin sapUiSmallMarginEnd"/>
-									<Text text="{i18n>WELCOME_BLOCK_4_TEXT_7}"/>
-								</HBox>
-								<HBox>
-									<core:Icon
-											src="sap-icon://accept"
-											size="0.875rem"
-											color="Default"
-											class="sapUiTinyMarginBegin sapUiSmallMarginEnd"/>
-									<Text text="{i18n>WELCOME_BLOCK_4_TEXT_8}"/>
-								</HBox>
-						</l:VerticalLayout>
-					</l:BlockLayoutCell>
-
-					<l:BlockLayoutCell
-							backgroundColorSet="ColorSet10"
-							backgroundColorShade="ShadeA">
-						<l:Grid
-								defaultSpan="L6 M12 S12"
-								hSpacing="0"
-								vSpacing="0">
-							<l:VerticalLayout width="100%">
-								<html:div class="sapUIDisclaimerLink sapUiSmallMarginBottom">
-									<custom:TitleLink
-										href="https://experience.sap.com/fiori-design/"
-										text="{i18n>WELCOME_BLOCK_5_TITLE}"
-										titleStyle="H2"
-										target="_blank"/>
-									<Image
-										src="./resources/sap/ui/documentation/sdk/images/link-sap.png"
-										tooltip="{i18n>LEGAL_DISCLAIMER_EXTERNAL_TOOLTIP}"
-										width="1.25rem"
-										press="onDisclaimerLinkPress"/>
-								</html:div>
-								<Text
-										text="{i18n>WELCOME_BLOCK_5_TEXT}"
-										class="sapUiSmallMarginBottom"/>
-							</l:VerticalLayout>
-							<Image
-									src="./resources/sap/ui/documentation/sdk/images/Fiori_design_examples.png"
-									alt="{i18n>WELCOME_BLOCK_5_IMG_ALT}"
-									densityAware="false"
-									width="100%">
-								<layoutData>
-									<l:GridData span="L6 M12 S12"/>
-								</layoutData>
-							</Image>
-						</l:Grid>
-					</l:BlockLayoutCell>
+				<l:BlockLayoutRow visible="{= ${versionData>/isOpenUI5}}">
+					<core:Fragment fragmentName="sap.ui.documentation.sdk.view.WelcomeCustomRowOpenUI5" type="XML" />
 				</l:BlockLayoutRow>
+				<l:BlockLayoutRow visible="{= !${versionData>/isOpenUI5}}">
+					<core:Fragment fragmentName="sap.ui.documentation.sdk.view.WelcomeCustomRowSAPUI5" type="XML" />
+				</l:BlockLayoutRow>
+
 <!-- This block layout row will be commented until BGSOFUIPIRIN-5473 is completely finished-->
 <!--				<l:BlockLayoutRow>-->
 <!--					<l:BlockLayoutCell-->

package/src/sap/ui/documentation/sdk/view/WelcomeCustomRowOpenUI5.fragment.xml

@@ -0,0 +1,46 @@
+<core:FragmentDefinition
+	xmlns="sap.m"
+	xmlns:core="sap.ui.core"
+	xmlns:custom="sap.ui.documentation"
+	xmlns:html="http://www.w3.org/1999/xhtml"
+	xmlns:l="sap.ui.layout">
+	<l:BlockLayoutCell
+		backgroundColorSet="ColorSet10"
+		backgroundColorShade="ShadeC">
+		<l:VerticalLayout
+			width="100%">
+			<html:div class="sapUIDisclaimerLink sapUiSmallMarginBottom">
+				<custom:TitleLink
+					href="https://experience.sap.com/fiori-design/"
+					text="{i18n>WELCOME_BLOCK_5_TITLE}"
+					titleStyle="H2"
+					target="_blank"/>
+				<Image
+					src="./resources/sap/ui/documentation/sdk/images/link-sap.png"
+					tooltip="{i18n>LEGAL_DISCLAIMER_EXTERNAL_TOOLTIP}"
+					width="1.25rem"
+					press="onDisclaimerLinkPress"/>
+			</html:div>
+			<Text
+				text="{i18n>WELCOME_BLOCK_5_TEXT}"
+				class="sapUiSmallMarginBottom"/>
+		</l:VerticalLayout>
+	</l:BlockLayoutCell>
+
+	<l:BlockLayoutCell
+		backgroundColorSet="ColorSet10"
+		backgroundColorShade="ShadeC">
+		<HBox alignItems="Center" justifyContent="Center" width="100%" height="100%">
+			<Image
+				src="./resources/sap/ui/documentation/sdk/images/Fiori_design_examples.png"
+				densityAware="false"
+				class="sapUiTinyMarginBeginEnd"
+				width="100%"
+				alt="{i18n>WELCOME_BLOCK_5_IMG_ALT}">
+				<layoutData>
+					<FlexItemData maxWidth="37.5rem" />
+				</layoutData>
+			</Image>
+		</HBox>
+	</l:BlockLayoutCell>
+</core:FragmentDefinition>

package/src/sap/ui/documentation/sdk/view/WelcomeCustomRowSAPUI5.fragment.xml

@@ -0,0 +1,114 @@
+<core:FragmentDefinition
+	xmlns="sap.m"
+	xmlns:core="sap.ui.core"
+	xmlns:custom="sap.ui.documentation"
+	xmlns:html="http://www.w3.org/1999/xhtml"
+	xmlns:l="sap.ui.layout">
+	<l:BlockLayoutCell
+			backgroundColorSet="ColorSet10"
+			backgroundColorShade="ShadeB">
+		<l:VerticalLayout
+				width="100%">
+			<custom:TitleLink
+				href="topic/bf2d55eaa33b44a78ef95e7946d658e8"
+				text="{i18n>WELCOME_BLOCK_4_TITLE}"
+				class="sapUiSmallMarginBottom"
+				titleStyle="H2"/>
+			<Text
+					text="{i18n>WELCOME_BLOCK_4_TEXT_1}"
+					class="sapUiSmallMarginBottom"/>
+				<HBox>
+					<core:Icon
+							src="sap-icon://accept"
+							size="0.875rem"
+							color="Default"
+							class="sapUiTinyMarginBegin sapUiSmallMarginEnd"/>
+					<Text text="{i18n>WELCOME_BLOCK_4_TEXT_2}"/>
+				</HBox>
+				<HBox>
+					<core:Icon
+							src="sap-icon://accept"
+							size="0.875rem"
+							color="Default"
+							class="sapUiTinyMarginBegin sapUiSmallMarginEnd"/>
+					<Text text="{i18n>WELCOME_BLOCK_4_TEXT_3}"/>
+				</HBox>
+				<HBox>
+					<core:Icon
+							src="sap-icon://accept"
+							size="0.875rem"
+							color="Default"
+							class="sapUiTinyMarginBegin sapUiSmallMarginEnd"/>
+					<Text text="{i18n>WELCOME_BLOCK_4_TEXT_4}"/>
+				</HBox>
+				<HBox>
+					<core:Icon
+							src="sap-icon://accept"
+							size="0.875rem"
+							color="Default"
+							class="sapUiTinyMarginBegin sapUiSmallMarginEnd"/>
+					<Text text="{i18n>WELCOME_BLOCK_4_TEXT_5}"/>
+				</HBox>
+				<HBox>
+					<core:Icon
+							src="sap-icon://accept"
+							size="0.875rem"
+							color="Default"
+							class="sapUiTinyMarginBegin sapUiSmallMarginEnd"/>
+					<Text text="{i18n>WELCOME_BLOCK_4_TEXT_6}"/>
+				</HBox>
+				<HBox>
+					<core:Icon
+							src="sap-icon://accept"
+							size="0.875rem"
+							color="Default"
+							class="sapUiTinyMarginBegin sapUiSmallMarginEnd"/>
+					<Text text="{i18n>WELCOME_BLOCK_4_TEXT_7}"/>
+				</HBox>
+				<HBox>
+					<core:Icon
+							src="sap-icon://accept"
+							size="0.875rem"
+							color="Default"
+							class="sapUiTinyMarginBegin sapUiSmallMarginEnd"/>
+					<Text text="{i18n>WELCOME_BLOCK_4_TEXT_8}"/>
+				</HBox>
+		</l:VerticalLayout>
+	</l:BlockLayoutCell>
+
+	<l:BlockLayoutCell
+			backgroundColorSet="ColorSet10"
+			backgroundColorShade="ShadeA">
+		<l:Grid
+				defaultSpan="L6 M12 S12"
+				hSpacing="0"
+				vSpacing="0">
+			<l:VerticalLayout width="100%">
+				<html:div class="sapUIDisclaimerLink sapUiSmallMarginBottom">
+					<custom:TitleLink
+						href="https://experience.sap.com/fiori-design/"
+						text="{i18n>WELCOME_BLOCK_5_TITLE}"
+						titleStyle="H2"
+						target="_blank"/>
+					<Image
+						src="./resources/sap/ui/documentation/sdk/images/link-sap.png"
+						tooltip="{i18n>LEGAL_DISCLAIMER_EXTERNAL_TOOLTIP}"
+						width="1.25rem"
+						press="onDisclaimerLinkPress"/>
+				</html:div>
+				<Text
+						text="{i18n>WELCOME_BLOCK_5_TEXT}"
+						class="sapUiSmallMarginBottom"/>
+			</l:VerticalLayout>
+			<Image
+					src="./resources/sap/ui/documentation/sdk/images/Fiori_design_examples.png"
+					alt="{i18n>WELCOME_BLOCK_5_IMG_ALT}"
+					densityAware="false"
+					width="100%">
+				<layoutData>
+					<l:GridData span="L6 M12 S12"/>
+				</layoutData>
+			</Image>
+		</l:Grid>
+	</l:BlockLayoutCell>
+</core:FragmentDefinition>