@openui5/sap.ui.documentation 1.97.1 → 1.98.0

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

@@ -17,6 +17,7 @@ sap.ui.define([
     "sap/ui/core/HTML",
     "sap/m/library",
     "sap/base/Log",
+	"sap/base/util/UriParameters",
 	"sap/ui/core/Fragment",
 	"sap/ui/documentation/sdk/util/Resources"
 ], function(
@@ -31,6 +32,7 @@ sap.ui.define([
 	HTML,
 	mobileLibrary,
 	Log,
+	UriParameters,
 	Fragment,
 	ResourcesUtil
 ) {
@@ -39,6 +41,10 @@ sap.ui.define([
 		// shortcut for sap.m.URLHelper
 		var URLHelper = mobileLibrary.URLHelper;
 
+		var COZY = "cozy",
+			COMPACT = "compact",
+			CONDENSED = "condensed";
+
 		return SampleBaseController.extend("sap.ui.documentation.sdk.controller.Sample", {
 			/* =========================================================== */
 			/* lifecycle methods										   */
@@ -54,15 +60,28 @@ sap.ui.define([
 					showNewTab: false,
 					rtaLoaded: false
 				});
+				this._oSampleIframeSettings = {
+					densityMode: COMPACT,
+					themeActive: "sap_fiori_3",
+					rtl: false
+				};
 
 				this._sId = null; // Used to hold sample ID
 				this._sEntityId = null; // Used to hold entity ID for the sample currently shown
 
 				// Load runtime authoring asynchronously
-				Promise.all([
-					sap.ui.getCore().loadLibrary("sap.ui.fl", {async: true}),
-					sap.ui.getCore().loadLibrary("sap.ui.rta", {async: true})
-				]).then(this._loadRTA.bind(this));
+				if (!ResourcesUtil.getHasProxy()) {
+					Promise.all([
+						sap.ui.getCore().loadLibrary("sap.ui.fl", {async: true}),
+						sap.ui.getCore().loadLibrary("sap.ui.rta", {async: true})
+					]).then(function () {
+						sap.ui.require([
+							"sap/ui/fl/Utils",
+							"sap/ui/fl/FakeLrepConnectorLocalStorage",
+							"sap/ui/core/util/reflection/JsControlTreeModifier"
+						], this._loadRTA.bind(this));
+					}.bind(this));
+				}
 
 				this.getView().setModel(this.oModel);
 
@@ -145,11 +164,12 @@ sap.ui.define([
 						var oSampleConfig = oConfig && oConfig.sample || {};
 
 						// only have the option to run standalone if there is an iframe
-						oModelData.showNewTab = !!oSampleConfig.iframe || ResourcesUtil.getHasProxy();
+						oModelData.showNewTab = !!oSampleConfig.iframe || !!ResourcesUtil.getHasProxy();
 						oModelData.id = oSample.id;
 						oModelData.name = oSample.name;
 						oModelData.details = oSample.details;
 						oModelData.description = oSample.description;
+						oModelData.showSettings = !!ResourcesUtil.getHasProxy();
 
 						if (oSampleConfig) {
 
@@ -211,6 +231,141 @@ sap.ui.define([
 					});
 			},
 
+			/**
+			 * Opens the View settings dialog
+			 * @public
+			 */
+			handleSettings: function () {
+				var oSampleFrame = this._oHtmlControl.$()[0].contentWindow,
+					oSampleFrameCore = oSampleFrame.sap.ui.getCore(),
+					oView;
+
+				if (!this._oMessageBundle) {
+					this._oMessageBundle = new oSampleFrame.sap.ui.model.resource.ResourceModel({
+						bundleName: "sap.ui.documentation.messagebundle"
+					});
+				}
+
+				if (!this._oSettingsDialog) {
+					this._oSettingsDialog = new oSampleFrame.sap.ui.xmlfragment("sap.ui.documentation.sdk.view.appSettingsDialog", this);
+
+					oView = oSampleFrameCore.byId("__xmlview0");
+					oView.setModel(this._oMessageBundle, "i18n");
+					oView.addDependent(this._oSettingsDialog);
+				}
+
+				setTimeout(function () {
+					var oAppSettings = oSampleFrameCore.getConfiguration(),
+						oThemeSelect = oSampleFrameCore.byId("ThemeSelect"),
+						sUriParamTheme = UriParameters.fromQuery(window.location.search).get("sap-theme"),
+						bDensityMode = this._oSampleIframeSettings.densityMode;
+
+					// Theme select
+					oThemeSelect.setSelectedKey(sUriParamTheme ? sUriParamTheme : oAppSettings.getTheme());
+
+					// RTL
+					oSampleFrameCore.byId("RTLSwitch").setState(oAppSettings.getRTL());
+
+					// Density mode select
+					oSampleFrameCore.byId("DensityModeSwitch").setSelectedKey(bDensityMode);
+
+					this._oSettingsDialog.open();
+				}.bind(this), 0);
+			},
+
+			/**
+			 * Closes the View settings dialog
+			 * @public
+			 */
+			handleCloseAppSettings: function () {
+				this._oSettingsDialog.close();
+			},
+
+			handleSaveAppSettings: function () {
+				var oSampleFrame = this._oHtmlControl.$()[0].contentWindow,
+					oSampleFrameCore = oSampleFrame.sap.ui.getCore(),
+					sDensityMode = oSampleFrameCore.byId("DensityModeSwitch").getSelectedKey(),
+					sTheme = oSampleFrameCore.byId("ThemeSelect").getSelectedKey(),
+					bRTL = oSampleFrameCore.byId("RTLSwitch").getState(),
+					oView = oSampleFrameCore.byId("__xmlview0");
+
+				this._oSettingsDialog.close();
+
+				// Lazy loading of busy dialog
+				if (!this._oBusyDialog) {
+					oSampleFrame.sap.ui.require(["sap/m/BusyDialog"], function () {
+						this._oBusyDialog = new oSampleFrame.sap.m.BusyDialog();
+						oView.addDependent(this._oBusyDialog);
+						this._handleBusyDialog();
+					}.bind(this));
+				} else {
+					this._handleBusyDialog();
+				}
+
+				// handle settings change
+				this._applyAppConfiguration(sTheme, sDensityMode, bRTL);
+			},
+
+			/**
+			 * Apply content configuration
+			 * @param {string} sThemeActive name of the theme
+			 * @param {string} sDensityMode content density mode
+			 * @param {boolean} bRTL right to left mode
+			 * @private
+			 */
+			_applyAppConfiguration: function(sThemeActive, sDensityMode, bRTL){
+				var oSampleFrame = this._oHtmlControl.$()[0].contentWindow,
+					oSampleFrameCore = oSampleFrame.sap.ui.getCore();
+
+				if (this._oSampleIframeSettings.densityMode !== sDensityMode) {
+					this._oSampleIframeSettings.densityMode = sDensityMode;
+					this._toggleContentDensityClasses(oSampleFrame.jQuery("body"), sDensityMode);
+				}
+
+				if (this._oSampleIframeSettings.rtl !== bRTL) {
+					oSampleFrameCore.getConfiguration().setRTL(bRTL);
+					this._oSampleIframeSettings.rtl = bRTL;
+				}
+
+				if (oSampleFrameCore.getConfiguration().getTheme() !== sThemeActive) {
+					oSampleFrameCore.applyTheme(sThemeActive);
+					this._oSampleIframeSettings.themeActive = sThemeActive;
+				} else if (this._oSampleIframeSettings.densityMode !== sDensityMode) {
+					// Notify Core for content density change only if no theme change happened
+					oSampleFrameCore.notifyContentDensityChanged();
+				}
+			},
+
+			/**
+			 * Toggles content density classes in the provided html body
+			 * @param {object} oBody the html body to set the correct class on
+			 * @param {string} sDensityMode content density mode
+			 * @private
+			 */
+			_toggleContentDensityClasses: function(oBody, sDensityMode){
+				switch (sDensityMode) {
+					case COMPACT:
+						oBody.toggleClass("sapUiSizeCompact", true).toggleClass("sapUiSizeCozy", false).toggleClass("sapUiSizeCondensed", false);
+						break;
+					case CONDENSED:
+						oBody.toggleClass("sapUiSizeCondensed", true).toggleClass("sapUiSizeCozy", false).toggleClass("sapUiSizeCompact", true);
+						break;
+					default:
+						oBody.toggleClass("sapUiSizeCozy", true).toggleClass("sapUiSizeCondensed", false).toggleClass("sapUiSizeCompact", false);
+				}
+			},
+
+			/**
+			 * Handles View settings dialog
+			 * @public
+			 */
+			_handleBusyDialog : function () {
+				this._oBusyDialog.open();
+				setTimeout(function () {
+					this._oBusyDialog.close();
+				}.bind(this), 1000);
+			},
+
 			_updateFileContent: function(sRef, sFile) {
 				this.fetchSourceFile(sRef + "/" + sFile).then(function(vContent) {
 					var aFiles = this.oModel.getProperty("/files");
@@ -325,6 +480,20 @@ sap.ui.define([
 				}
 
 				if (!this._oHtmlControl) {
+					var oComponent = this.getOwnerComponent();
+
+					// Guarantees the sample initially to have the same content density, as the whole Demo Kit
+					switch (oComponent.getContentDensityClass()) {
+						case "sapUiSizeCompact":
+							this._oSampleIframeSettings.densityMode = COMPACT;
+							break;
+						case "sapUiSizeCondensed":
+							this._oSampleIframeSettings.densityMode = CONDENSED;
+							break;
+						default:
+							this._oSampleIframeSettings.densityMode = COZY;
+					}
+
 					this._oHtmlControl = new HTML({
 						id : "sampleFrame",
 						content : '<iframe src="' + this.sIFrameUrl + '" id="sampleFrame" frameBorder="0"></iframe>'
@@ -335,17 +504,58 @@ sap.ui.define([
 							if (!this._oHtmlControl._jQueryHTMLControlLoadEventAttached) {
 								this._oHtmlControl.$().on("load", function () {
 									var oSampleFrame = this._oHtmlControl.$()[0].contentWindow,
-										oSampleFrameCore = oSampleFrame.sap.ui.getCore();
+										oSampleFrameCore = oSampleFrame.sap.ui.getCore(),
+										oFrame = document.getElementById("sampleFrame");
+
+									this._oMessageBundle = null;
+									this._oSettingsDialog = null;
+									this._oBusyDialog = null;
+
+									if (this.oModel.getData().iframe) {
+										Promise.all([
+											oSampleFrameCore.loadLibrary("sap.ui.fl", {async: true}),
+											oSampleFrameCore.loadLibrary("sap.ui.rta", {async: true})
+										]).then(function () {
+											oSampleFrame.sap.ui.require([
+												"sap/ui/fl/Utils",
+												"sap/ui/fl/FakeLrepConnectorLocalStorage",
+												"sap/ui/core/util/reflection/JsControlTreeModifier"
+											], this._loadRTA.bind(this));
+										}.bind(this));
+
+
+										oFrame.onToggleAdaptationMode = function () {
+											oSampleFrame.sap.ui.require([
+												"sap/ui/rta/api/startKeyUserAdaptation"
+											], function (
+												startKeyUserAdaptation
+											) {
+												if (!this._oRTA) {
+													var oContainer = oSampleFrameCore.byId("__container0");
+
+													startKeyUserAdaptation({
+														rootControl : oContainer.getComponentInstance()
+													}).then(function(oRta) {
+														this._oRTA = oRta;
+														oContainer.$().css({"padding-top": "2.5rem", "box-sizing": "border-box"});
+														this._oRTA.attachStop(function () {
+															oContainer.$().css({"padding-top": "0", "box-sizing": "content-box"});
+															this._oRTA.destroy();
+															delete this._oRTA;
+														}.bind(this));
+													}.bind(this));
+												}
+											}.bind(this));
+										};
+									}
 
 									// Apply theme settings to iframe sample
 									oSampleFrame.sap.ui.getCore().attachInit(function () {
-										var bCompact = jQuery(document.body).hasClass("sapUiSizeCompact");
-
-										oSampleFrameCore.applyTheme(ResourcesUtil.getHasProxy() ? this._sDefaultSampleTheme : this._oCore.getConfiguration().getTheme());
-										oSampleFrameCore.getConfiguration().setRTL(this._oCore.getConfiguration().getRTL());
-										oSampleFrame.jQuery('body')
-											.toggleClass("sapUiSizeCompact", bCompact)
-											.toggleClass("sapUiSizeCozy", !bCompact);
+										oSampleFrameCore.applyTheme(ResourcesUtil.getHasProxy() ?
+											this._oSampleIframeSettings.themeActive : this._oCore.getConfiguration().getTheme());
+										oSampleFrameCore.getConfiguration().setRTL(ResourcesUtil.getHasProxy() ?
+											this._oSampleIframeSettings.rtl : this._oCore.getConfiguration().getRTL());
+										this._toggleContentDensityClasses(oSampleFrame.jQuery('body'), this._oSampleIframeSettings.densityMode);
 
 										// Notify Core for content density change
 										oSampleFrameCore.notifyContentDensityChanged();
@@ -395,7 +605,7 @@ sap.ui.define([
 			},
 
 			onDemoKitThemeChanged: function(sChannelId, sEventId, oData) {
-				if (this._oHtmlControl) {
+				if (this._oHtmlControl && !ResourcesUtil.getHasProxy()) {
 					this._oHtmlControl.$()[0].contentWindow.sap.ui.getCore().applyTheme(oData.sThemeActive);
 				}
 				this.setDefaultSampleTheme();
@@ -436,12 +646,7 @@ sap.ui.define([
 				this.sIFrameUrl = this.sIFrameUrl + decodeURI(oIFrameURL.search);
 			},
 
-			_loadRTA: function () {
-				sap.ui.require([
-					"sap/ui/fl/Utils",
-					"sap/ui/fl/FakeLrepConnectorLocalStorage",
-					"sap/ui/core/util/reflection/JsControlTreeModifier"
-				], function (
+			_loadRTA: function (
 					Utils,
 					FakeLrepConnectorLocalStorage,
 					JsControlTreeModifier
@@ -469,18 +674,23 @@ sap.ui.define([
 							this._oRTA = null;
 						}
 					}, this);
-				}.bind(this));
 			},
 
 			onToggleAdaptationMode : function (oEvt) {
+				if (this.oModel.getData().iframe) {
+					window.document.getElementsByTagName("iframe")[0].onToggleAdaptationMode();
+					return;
+				}
 				sap.ui.require([
 					"sap/ui/rta/api/startKeyUserAdaptation"
 				], function (
 					startKeyUserAdaptation
 				) {
 					if (!this._oRTA) {
+						var oContainer = this.byId("page").getContent()[0];
+
 						startKeyUserAdaptation({
-							rootControl : this.byId("page").getContent()[0].getComponentInstance()
+							rootControl : oContainer.getComponentInstance()
 						}).then(function(oRta) {
 							this._oRTA = oRta;
 							this._oRTA.attachStop(function () {

package/src/sap/ui/documentation/sdk/controller/util/datatable/filters/DataTableFilterDropDownRenderer.js

@@ -34,6 +34,7 @@ sap.ui.define([],
             oRm.text('Filter');
             oRm.close('a');
             oRm.openStart("ul", oControl.getId() + "-optionsList");
+			oRm.attr("tabindex", 0);
             if (!oControl.getProperty("expanded")){
                 oRm.style("display", "none");
             }
@@ -56,9 +57,14 @@ sap.ui.define([],
                     oRm.attr("checked", "true");
                 }
                 oRm.attr("type", "checkbox");
+				oRm.attr("id", "dropDownFilterOption" + index);
                 oRm.attr("index", index);
                 oRm.voidEnd();
-                oRm.text(sOption);
+				oRm.openStart("label");
+				oRm.attr("for", "dropDownFilterOption" + index);
+				oRm.openEnd("label");
+				oRm.text(sOption);
+				oRm.close("label");
                 oRm.close("li");
             });
 

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

@@ -1816,12 +1816,21 @@ html[dir="rtl"] .sapUiDemoKitTreeItemIcon {
 .sapUiTheme-sap_fiori_3 .sapTntToolHeader .sapMSlt.menuSelect.sapUiDocumentationSelect .sapMSltLabel:after {
 	content: "";
 	position: absolute;
-	bottom: 0;
+	bottom: 0.188rem;
 	left: 0.5rem;
 	right: 2.5rem;
 	padding-right: 1rem;
 	border-bottom: 0.188rem solid #d1e8ff;
-	border-radius: 0.125rem 0.125rem 0 0;
+	border-radius: 0.125rem;
+}
+
+.sapUiTheme-sap_fiori_3.sapUiMedia-Std-Phone .sapTntToolHeader .sapMSlt.sapUiDocumentationSelect,
+.sap-phone .sapTntToolHeader .sapMSlt.sapUiDocumentationSelect {
+	height: 2.75rem;
+}
+
+.sapUiTheme-sap_fiori_3 .sapTntToolHeader .sapMSlt.menuSelect.sapUiDocumentationSelect .sapMSltLabel {
+	border: none;
 }
 
 /* SAP Quartz Light theme - end */

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

@@ -255,7 +255,9 @@ sap.ui.define([
 		bParsed = /^blob:/.test(sTarget)
 			|| /^https?:\/\//.test(sTarget)
 			|| /^test-resources\//.test(sTarget)
-			|| /^resources\//.test(sTarget);
+			|| /^resources\//.test(sTarget)
+			|| /^tel:/.test(sTarget)
+			|| /^mailto:/.test(sTarget);
 
 		// If we have no target by here we give up
 		if (sTarget && !bParsed) {

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

@@ -2,7 +2,7 @@
 	xmlns="sap.m"
 	xmlns:core="sap.ui.core">
 	<ResponsivePopover
-		id="myPopover"
+		id="newsPopover"
 		placement="Bottom"
 		title="{i18n>APP_NEWS_BTN_TOOLTIP}">
 			<beginButton>
@@ -24,7 +24,7 @@
 			items="{path:  'news>/items', templateShareable: false}"
 			>
 			<layoutData>
-				<FlexItemData maxHeight="450px" />
+				<FlexItemData maxHeight="450px" maxWidth="600px" />
 			</layoutData>
 
 			<NotificationListItem

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

@@ -61,7 +61,7 @@
 							class="sapUiHideOnPhone"
 							tooltip="{i18n>SAMPLE_ADAPT_BTN_TOOLTIP}"
 							press="onToggleAdaptationMode"
-							visible="{= !${/iframe} && ${/rtaLoaded}}" />
+							visible="{= ${/rtaLoaded}}" />
 					<Button
 							id="code"
 							icon="sap-icon://syntax"
@@ -72,6 +72,10 @@
 							tooltip="{i18n>SAMPLE_NEW_TAB_BTN_TOOLTIP}"
 							icon="sap-icon://inspect"
 							press="onNewTab" />
+					<Button id="sampleSettings"
+							visible="{= ${/showSettings}}"
+							icon="sap-icon://action-settings"
+							press="handleSettings" />
 					<Button
 							class="sapUiHideOnPhone"
 							text="{i18n>SAMPLE_DOWNLOAD_BTN_TOOLTIP}"

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

@@ -111,7 +111,7 @@
 								width="100%">
 							<custom:TitleLink
 								text="{i18n>WELCOME_BLOCK_3_TITLE}"
-								href="topic/ec699e0817fb46a0817b0fa276a249f8"
+								href="topic/23cfd955f58142389fa7c9097e11559c"
 								class="sapUiSmallMarginBottom"
 								titleStyle="H2"/>
 							<Text
@@ -149,6 +149,22 @@
 										class="sapUiTinyMarginBegin sapUiSmallMarginEnd"/>
 								<Text text="{i18n>WELCOME_BLOCK_3_TEXT_5}"/>
 							</HBox>
+							<HBox>
+								<core:Icon
+										src="sap-icon://accept"
+										size="0.875rem"
+										color="Default"
+										class="sapUiTinyMarginBegin sapUiSmallMarginEnd"/>
+								<Text text="{i18n>WELCOME_BLOCK_3_TEXT_6}"/>
+							</HBox>
+							<HBox>
+								<core:Icon
+										src="sap-icon://accept"
+										size="0.875rem"
+										color="Default"
+										class="sapUiTinyMarginBegin sapUiSmallMarginEnd"/>
+								<Text text="{i18n>WELCOME_BLOCK_3_TEXT_7}"/>
+							</HBox>
 						</l:VerticalLayout>
 					</l:BlockLayoutCell>
 				</l:BlockLayoutRow>
@@ -160,7 +176,7 @@
 						<l:VerticalLayout
 								width="100%">
 							<custom:TitleLink
-								href="topic/23cfd955f58142389fa7c9097e11559c"
+								href="topic/bf2d55eaa33b44a78ef95e7946d658e8"
 								text="{i18n>WELCOME_BLOCK_4_TITLE}"
 								class="sapUiSmallMarginBottom"
 								titleStyle="H2"/>
@@ -191,6 +207,38 @@
 											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>
 
@@ -230,43 +278,43 @@
 						</l:Grid>
 					</l:BlockLayoutCell>
 				</l:BlockLayoutRow>
-
-				<l:BlockLayoutRow>
-					<l:BlockLayoutCell
-							backgroundColorSet="ColorSet11"
-							backgroundColorShade="ShadeA">
-						<HBox alignItems="Center" justifyContent="Center" width="100%" height="100%">
-							<core:HTML sanitizeContent="true" content='
-								&lt;div class="videoWrapper"&gt;
-									&lt;iframe src="https://www.youtube.com/embed/6_CQYtmRJNg" title="YouTube video player" frameborder="0"
-												 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="true" /&gt;
-								&lt;/div&gt;'>
-								<core:layoutData>
-									<FlexItemData maxWidth="35rem" growFactor="1" />
-								</core:layoutData>
-							</core:HTML>
-						</HBox>
-					</l:BlockLayoutCell>
-					<l:BlockLayoutCell
-							backgroundColorSet="ColorSet11"
-							backgroundColorShade="ShadeD">
-						<l:VerticalLayout
-								width="100%">
-							<custom:TitleLink
-									text="{i18n>WELCOME_VIDEO_BLOCK_TITLE}"
-									class="sapUiSmallMarginBottom"
-									href="https://www.youtube.com/watch?v=6_CQYtmRJNg"
-									target="_blank"
-									titleStyle="H2"/>
-							<Text
-									text="{i18n>WELCOME_VIDEO_BLOCK_TEXT_1}"
-									class="sapUiSmallMarginBottom"/>
-							<FormattedText
-									htmlText="{i18n>WELCOME_VIDEO_BLOCK_TEXT_2}"
-									class="sapUiSmallMarginBottom"/>
-						</l:VerticalLayout>
-					</l:BlockLayoutCell>
-				</l:BlockLayoutRow>
+<!-- This block layout row will be commented until BGSOFUIPIRIN-5473 is completely finished-->
+<!--				<l:BlockLayoutRow>-->
+<!--					<l:BlockLayoutCell-->
+<!--							backgroundColorSet="ColorSet11"-->
+<!--							backgroundColorShade="ShadeA">-->
+<!--						<HBox alignItems="Center" justifyContent="Center" width="100%" height="100%">-->
+<!--							<core:HTML sanitizeContent="true" content='-->
+<!--								&lt;div class="videoWrapper"&gt;-->
+<!--									&lt;iframe src="https://www.youtube.com/embed/6_CQYtmRJNg" title="YouTube video player" frameborder="0"-->
+<!--												 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="true" /&gt;-->
+<!--								&lt;/div&gt;'>-->
+<!--								<core:layoutData>-->
+<!--									<FlexItemData maxWidth="35rem" growFactor="1" />-->
+<!--								</core:layoutData>-->
+<!--							</core:HTML>-->
+<!--						</HBox>-->
+<!--					</l:BlockLayoutCell>-->
+<!--					<l:BlockLayoutCell-->
+<!--							backgroundColorSet="ColorSet11"-->
+<!--							backgroundColorShade="ShadeD">-->
+<!--						<l:VerticalLayout-->
+<!--								width="100%">-->
+<!--							<custom:TitleLink-->
+<!--									text="{i18n>WELCOME_VIDEO_BLOCK_TITLE}"-->
+<!--									class="sapUiSmallMarginBottom"-->
+<!--									href="https://www.youtube.com/watch?v=6_CQYtmRJNg"-->
+<!--									target="_blank"-->
+<!--									titleStyle="H2"/>-->
+<!--							<Text-->
+<!--									text="{i18n>WELCOME_VIDEO_BLOCK_TEXT_1}"-->
+<!--									class="sapUiSmallMarginBottom"/>-->
+<!--							<FormattedText-->
+<!--									htmlText="{i18n>WELCOME_VIDEO_BLOCK_TEXT_2}"-->
+<!--									class="sapUiSmallMarginBottom"/>-->
+<!--						</l:VerticalLayout>-->
+<!--					</l:BlockLayoutCell>-->
+<!--				</l:BlockLayoutRow>-->
 			</l:BlockLayout>
 		</Panel>
 

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

@@ -11,6 +11,7 @@
 			<VBox class="sapUiTinyMarginTop">
 					<Label text="{i18n>APP_SETTINGS_DIALOG_THEME}" design="Standard" labelFor="ThemeSelect" />
 					<Select id="ThemeSelect" width="100%" class="sapUiSmallMarginBottom">
+						<core:Item key="sap_horizon" text="Horizon"/>
 						<core:Item key="sap_fiori_3" text="Quartz Light"/>
 						<core:Item key="sap_fiori_3_dark" text="Quartz Dark"/>
 						<core:Item key="sap_belize" text="Belize"/>