@openui5/sap.ui.documentation 1.120.7 → 1.121.0

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

@@ -10,8 +10,9 @@ sap.ui.define([
 	'sap/ui/core/routing/History',
 	'sap/ui/thirdparty/hasher',
 	"sap/ui/documentation/sdk/controller/util/ControlsInfo",
+	"sap/ui/documentation/sdk/controller/util/URLUtil",
 	"sap/ui/thirdparty/URI"
-], function(Router, History, Hasher, ControlsInfo, URI) {
+], function(Router, History, Hasher, ControlsInfo, URLUtil, URI) {
 	"use strict";
 
 	// We need to set the global hasher instance to not encode URL's. This is specific for the SDK
@@ -331,7 +332,9 @@ sap.ui.define([
 		// or if the ctrl is hold and left mouse button is clicked
 		// we change the href of the anchor element
 		if (iPressedButton === 2 || iPressedButton === 4 || (bNewWindow && iPressedButton === 1)) {
-			sTargetHref = this.convertToStaticFormat(sTargetHref);
+			if (URLUtil.hasSEOOptimizedFormat(sTargetHref)) {
+				sTargetHref = this.convertToStaticFormat(sTargetHref);
+			}
 			oAnchorElement.setAttribute("href", sTargetHref);
 		}
 	};
@@ -604,7 +607,7 @@ sap.ui.define([
 		DocumentationRouter.prototype.initialize = function () {
 			// hide DemoKit if sample should open standalone
 			this.getRoute("sample").attachPatternMatched(function () {
-				if (new URLSearchParams(window.location.search).has("dk-sample-standalone")) {
+				if (window.location.search.includes("dk-sample-standalone")) {
 					document.body.style.visibility = "hidden";
 				}
 			});

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

@@ -112,7 +112,7 @@
 							<core:Title text="{appView>displayName}"/>
 						</f:title>
 						<f:layout>
-							<f:GridLayout/>
+							<f:ResponsiveGridLayout/>
 						</f:layout>
 						<f:formContainers>
 							<f:FormContainer>

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

@@ -1,35 +1,38 @@
 <mvc:View
-		controllerName="sap.ui.documentation.sdk.controller.ApiMaster"
-		xmlns:mvc="sap.ui.core.mvc"
-		xmlns="sap.m"
-		xmlns:l="sap.ui.layout"
-		xmlns:core="sap.ui.core"
-		xmlns:custom="sap.ui.documentation"
-		class="sapContrast sapContrastPlus">
+	controllerName="sap.ui.documentation.sdk.controller.ApiMaster"
+	xmlns="sap.m"
+	xmlns:l="sap.ui.layout"
+	xmlns:core="sap.ui.core"
+	xmlns:mvc="sap.ui.core.mvc"
+	xmlns:custom="sap.ui.documentation"
+	height="100%"
+	displayBlock="true"
+	class="sapContrast sapContrastPlus">
 
 	<Page
-			id="page"
-			enableScrolling="true"
-			showFooter="false"
-			navButtonPress="onNavBack"
-			showNavButton="false"
-			class="sapUiDocumentationMasterPage">
+		class="sapUiDocumentationMasterPage sapUiDemoKitApiMasterPage"
+		enableScrolling="true"
+		showFooter="false"
+		showNavButton="false">
 
 		<customHeader>
-			<Toolbar width="100%">
-				<SearchField id="searchField" placeholder="{i18n>API_MASTER_PLACEHOLDER}" liveChange="onTreeFilter" class="sapUiDocumentationFilterField"/>
-				<Button id="expandAllButton" icon="sap-icon://expand-all" press="onTreeExpandAll" tooltip="{i18n>API_MASTER_EXPAND_BTN_TOOLTIP}"/>
-				<Button id="collapseAllButton" icon="sap-icon://collapse-all" press="onTreeCollapseAll" tooltip="{i18n>API_MASTER_COLLAPSE_BTN_TOOLTIP}"/>
+			<Toolbar height="100%" width="100%">
+				<SearchField id="searchField" placeholder="{i18n>API_MASTER_PLACEHOLDER}" liveChange="onTreeFilter" />
+				<Button id="expandAllButton" icon="sap-icon://expand-all" press="onTreeExpandAll" tooltip="{i18n>API_MASTER_EXPAND_BTN_TOOLTIP}" />
+				<Button id="collapseAllButton" icon="sap-icon://collapse-all" press="onTreeCollapseAll" tooltip="{i18n>API_MASTER_COLLAPSE_BTN_TOOLTIP}" />
 			</Toolbar>
 		</customHeader>
+
 		<subHeader>
-			<Toolbar>
-				<CheckBox id="includeDeprecated" text="{i18n>API_MASTER_DEPRECATED_CB}" class="sapUiNoMarginBegin" select="onIncludeDeprecatedItemsChange"/>
+			<Toolbar height="100%" width="100%">
+				<FlexBox height="100%" width="100%" alignItems="Start" justifyContent="Start" wrap="Wrap">
+					<CheckBox id="includeDeprecated" text="{i18n>API_MASTER_DEPRECATED_CB}" select="onIncludeDeprecatedItemsChange" />
+					<CheckBox id="includeExperimental" text="{i18n>API_MASTER_EXPERIMENTAL_CB}" select="onIncludeExperimentalItemsChange" />
+				</FlexBox>
 			</Toolbar>
 		</subHeader>
 
 		<content>
-
 			<l:FixFlex fixFirst="false">
 				<l:flexContent>
 					<Tree
@@ -39,21 +42,21 @@
 						selectionChange="onNodeSelect"
 						items="{treeData>/}">
 						<custom:DemokitTreeItem
-								title="{treeData>displayName}"
-								target="{treeData>name}"
-								entityType="{treeData>kind}"
-								section="api"
-								class="sapDemokitTreeItem"
-								deprecated="{treeData>deprecated}"/>
+							title="{treeData>displayName}"
+							target="{treeData>name}"
+							entityType="{treeData>kind}"
+							section="api"
+							class="sapDemokitTreeItem"
+							deprecated="{treeData>deprecated}"
+							experimental="{treeData>experimental}" />
 					</Tree>
 				</l:flexContent>
 				<l:fixContent>
 					<core:Fragment fragmentName="sap.ui.documentation.sdk.view.FooterMaster" type="XML" />
 				</l:fixContent>
 			</l:FixFlex>
-
 		</content>
 
 	</Page>
 
-</mvc:View>
+</mvc:View>

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

@@ -70,9 +70,10 @@
 
 					<OverflowToolbar class="sapUiDemoKitHeaderOTB" style="Clear">
 						<ObjectStatus
-							text="{= ${versionData>/isDevVersion} &amp;&amp; !${appView>/bShowVersionSwitchButton}
-								? [${i18n>APP_VERSION_VERSION}, ${versionData>/version}, ${i18n>APP_VERSION_IN_PROGRESS}].join(' ')
-								: '' }"
+							text="{ parts:
+								['appView>/bShowVersionSwitchButton', 'versionData>/isDevVersion', 'versionData>/version'],
+								formatter: '.formatter.formatVersionStatus'
+							}"
 							state="Information"
 							inverted="false"
 							visible="{= ${appView>/bDesktopSize} &amp;&amp; !${appView>/bSearchMode} }">
@@ -92,7 +93,7 @@
 
 						<OverflowToolbarButton
 							id="surveyButton"
-							class="surveyButton"
+							class="sapUiDemoKitHeaderActionsSurveyButton"
 							icon="sap-icon://feedback"
 							press="launchSurvey"
 							text="{i18n>APP_INFORMATION_BTN_FEEDBACK}"

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

@@ -1,142 +1,190 @@
 <mvc:View
-		controllerName="sap.ui.documentation.sdk.controller.DemoApps"
-		xmlns="sap.m"
-		xmlns:core="sap.ui.core"
-		xmlns:mvc="sap.ui.core.mvc"
-		xmlns:l="sap.ui.layout">
-	<Page
-		id="demoAppsPage"
-		showSubHeader="false"
-		showFooter="false"
-		showHeader="false"
-		class="sapUiDemoApps">
-		<landmarkInfo>
-			<PageAccessibleLandmarkInfo
-				headerRole="Region"
-				headerLabel="Demo Apps"
-				contentRole="Main"
-				contentLabel="Demo Apps by Category"/>
-		</landmarkInfo>
-		<content>
-			<ScrollContainer vertical="true" width="100%" height="100%">
-				<Panel
-					id="rootPage"
-					accessibleRole="Region"
-					class="sapUiNoContentPadding">
-					<l:BlockLayout
-						id="headerLayout"
-						background="Light">
-						<l:BlockLayoutRow>
-							<l:BlockLayoutCell
-								class="sapUiDemokitLandingImageCell sapUiNoContentPadding">
-								<Image
-									id="phoneImage"
-									src="./resources/sap/ui/documentation/sdk/images/DemoApps_S_cropped.jpg"
-									alt="{i18n>DEMO_APPS_IMAGE_PHONE}"
-									width="100%"
-									class="welcomeImage"
-									load=".handleLandingImageLoad"
-									visible="{device>/system/phone}"
-									densityAware="false"/>
-								<Image
-									id="desktopImage"
-									class="desktopImage welcomeImage"
-									src="./resources/sap/ui/documentation/sdk/images/DemoApps_M_and_L_cropped.jpg"
-									alt="{i18n>DEMO_APPS_IMAGE_DESKTOP}"
-									densityAware="false"
-									load=".handleLandingImageLoad"
-									visible="{=!${device>/system/phone}}"
-									width="100%"/>
-								<l:Grid
-									id="landingImageHeadline"
-									width="100%"
-									visible="false"
-									class="headerGrid"
-									hSpacing="0"
-									defaultSpan="L6 M6 S12">
-									<l:VerticalLayout width="100%" class="sapUiTinyMarginTop sapUiTinyMarginEnd">
-										<Text class="headerText" text="{i18n>DEMO_APPS_TEXT}" width="100%" textAlign="Left"/>
-										<l:HorizontalLayout>
-											<Button
-												class="actionButton headerButton"
-												id="download"
-												text="{i18n>DEMO_APPS_DOWNLOAD_BTN}"
-												type="Emphasized"
-												press=".onDownloadButtonPress">
-											</Button>
-											<Button
-												class="actionButton headerButton sapContrast sapContrastPlus sapUiSmallMarginBegin"
-												id="readMoreButton"
-												text="{i18n>DEMO_APPS_READ_MORE_BTN}"
-												press=".onReadMoreButtonPress">
-											</Button>
-										</l:HorizontalLayout>
-									</l:VerticalLayout>
-								</l:Grid>
-							</l:BlockLayoutCell>
-						</l:BlockLayoutRow>
-					</l:BlockLayout>
-				</Panel>
-				<l:VerticalLayout content="{/demoAppsByCategory}" width="100%">
-					<Panel
-						accessibleRole="Region"
-						backgroundDesign="Transparent"
-						class="sapUiNoContentPadding">
-						<headerToolbar>
-							<Toolbar class="headlineCell">
-								<Title
-									text="{
-										path: 'categoryId',
-										formatter: '.formatter.categoryName'
-									}"
-									level="H1"
-									titleStyle="H1"
-									class="sapUiMediumMarginTopBottom"/>
-							</Toolbar>
-						</headerToolbar>
-						<l:BlockLayout
-							content="{
-								 path: 'rows',
-								 templateShareable: false
-							}"
-							background="Light">
-							<l:BlockLayoutRow content="{
-								path: '',
-								factory: '.createDemoAppCellFactory'
-							}"/>
-						</l:BlockLayout>
-					</Panel>
-				</l:VerticalLayout>
-
-				<core:Fragment id="demoAppsFooter" visible="{/bFooterVisible}" fragmentName="sap.ui.documentation.sdk.view.Footer" type="XML" />
-
-			</ScrollContainer>
-		</content>
-		<dependents>
-			<Dialog id="downloadDialog"
-				title="{i18n>DEMO_APPS_DOWNLOAD_DIALOG_TITLE}">
-				<subHeader>
-					<Toolbar>
-						<SearchField id="downloadDialogSearch" liveChange=".onSearch"/>
-					</Toolbar>
-				</subHeader>
-				<List items="{/demoApps}" id="downloadDialogList">
-					<InputListItem
-						visible="{= !!${config} }"
-						label="{name}">
-						<customData>
-							<core:CustomData key="config" value="{config}"/>
-						</customData>
-						<Button
-							text="{i18n>DEMO_APPS_DOWNLOAD_BTN}"
-							type="Emphasized"
-							press=".onDownloadPress"/>
-					</InputListItem>
-				</List>
-				<buttons>
-					<Button text="{i18n>DEMO_APPS_DOWNLOAD_DIALOG_CANCEL_BTN}" press=".onCloseDialog" />
-				</buttons>
-			</Dialog>
-		</dependents>
-	</Page>
-</mvc:View>
+	controllerName="sap.ui.documentation.sdk.controller.DemoApps"
+	xmlns="sap.m"
+	xmlns:f="sap.f"
+	xmlns:card="sap.f.cards"
+	xmlns:mvc="sap.ui.core.mvc"
+	xmlns:grid="sap.ui.layout.cssgrid"
+	xmlns:core="sap.ui.core"
+	xmlns:custom="sap.ui.documentation"
+	displayBlock="true"
+	height="100%">
+
+	<ScrollContainer
+		class="sapUiDemoKitDemoAppsPage"
+		id="sapUiDemoKitDemoAppsPage"
+		width="100%"
+		height="100%"
+		vertical="true"
+		horizontal="false">
+
+		<VBox class="sapUiMediumMargin sapUiLargeMarginBottom">
+			<f:Card class="sapUiDemoKitDemoAppsMainHeaderCard">
+				<f:header>
+					<card:Header
+						title="{i18n>DEMO_APPS_TITLE}"
+						subtitle="{= ${versionData>/isOpenUI5} ? ${i18n>DEMO_APPS_SUBTITLE_OPENUI5} : ${i18n>DEMO_APPS_SUBTITLE_SAPUI5} }"
+						subtitleMaxLines="5" />
+				</f:header>
+				<f:content>
+					<Button text="{i18n>DEMO_APPS_READ_MORE_BTN}" press=".onReadMoreButtonPress" />
+				</f:content>
+			</f:Card>
+		</VBox>
+
+		<grid:CSSGrid class="sapUiDemoKitDemoAppsLayoutPaddingBeginEnd sapUiDemoKitDemoAppsLayoutPaddingBottom">
+			<!-- Page Content Ratio Config -->
+			<grid:customLayout>
+				<grid:GridResponsiveLayout>
+					<grid:layout>
+						<grid:GridSettings gridTemplateColumns="1fr" gridColumnGap="1rem" />
+					</grid:layout>
+					<grid:layoutL>
+						<grid:GridSettings gridTemplateColumns="2fr 1fr" gridColumnGap="1rem" />
+					</grid:layoutL>
+					<grid:layoutXL>
+						<grid:GridSettings gridTemplateColumns="3fr 1fr" gridColumnGap="1rem" />
+					</grid:layoutXL>
+				</grid:GridResponsiveLayout>
+			</grid:customLayout>
+
+			<grid:items>
+				<!-- #1 Page Main Content -->
+				<grid:CSSGrid id="sapUiDemoKitDemoAppsMainContent" class="sapUiDemoKitDemoAppsMainContent"
+					items="{/demoAppsByCategory}">
+					<grid:customLayout>
+						<grid:GridBasicLayout gridRowGap="3rem" />
+					</grid:customLayout>
+
+					<grid:CSSGrid>
+						<grid:customLayout>
+							<grid:GridBasicLayout gridRowGap="1rem" />
+						</grid:customLayout>
+
+						<grid:customData>
+							<core:CustomData
+								key="demo-apps-category"
+								value="{ path: 'categoryId', formatter: '.formatter.getDemoAppsCategoryClass' }"
+								writeToDom="true" />
+						</grid:customData>
+
+						<Title
+							class="sapUiDemoKitDemoAppsCategoryTitle"
+							text="{ path: 'categoryId', formatter: '.formatter.getDemoAppsCategoryTitle' }"
+							level="H3"
+							titleStyle="{= ${device>/system/phone} ? 'H4' : 'H3' }"
+							wrapping="true" />
+
+						<grid:CSSGrid items="{ path: 'rows', templateShareable: false }">
+							<grid:customLayout>
+								<grid:GridResponsiveLayout>
+									<grid:layoutS>
+										<grid:GridSettings
+											gridTemplateColumns="1fr"
+											gridAutoRows="minmax(15rem, auto)"
+											gridGap="1rem" />
+									</grid:layoutS>
+									<grid:layout>
+										<grid:GridSettings
+											gridTemplateColumns="repeat(2, 1fr)"
+											gridAutoRows="minmax(15rem, auto)"
+											gridGap="1rem" />
+									</grid:layout>
+									<grid:layoutXL>
+										<grid:GridSettings
+											gridTemplateColumns="repeat(3, 1fr)"
+											gridAutoRows="minmax(15rem, auto)"
+											gridGap="1rem" />
+									</grid:layoutXL>
+								</grid:GridResponsiveLayout>
+							</grid:customLayout>
+
+							<f:Card class="sapUiDemoKitDemoAppsCommonCard">
+								<f:header>
+									<custom:DemoAppsCardHeader href="{ref}" hrefText="{name}" iconSrc="{= 'sap-icon://' + ${icon} }" />
+								</f:header>
+								<f:content>
+									<VBox class="sapUiDemoKitDemoAppsCardContentPadding" wrap="Wrap">
+										<Text class="sapUiSmallMarginBottom" text="{desc}" >
+											<layoutData>
+												<FlexItemData growFactor="1" />
+											</layoutData>
+										</Text>
+										<VBox
+											class="sapUiTinyMarginBottom"
+											items="{ path: 'links', templateShareable: false }"
+											visible="{= !!${links}.length }"
+											wrap="Wrap">
+											<Link
+												href="{ path: 'ref', formatter: '.formatter.crossLink' }"
+												target="_blank"
+												text="{name}"
+												wrapping="true" />
+										</VBox>
+										<HBox wrap="Wrap">
+											<Label
+												class="sapUiTinyMarginEnd"
+												design="Bold"
+												text="{i18n>DEMO_APPS_LIBRARY}"
+												wrapping="true" />
+											<Link
+												href="{ path: 'lib', formatter: '.formatter.libraryLink' }"
+												target="_blank"
+												text="{lib}"
+												enabled="{ path: 'lib', formatter: '.formatter.libraryLinkEnabled' }"
+												wrapping="true" />
+										</HBox>
+									</VBox>
+								</f:content>
+							</f:Card>
+						</grid:CSSGrid>
+					</grid:CSSGrid>
+
+				</grid:CSSGrid>
+				<!-- #1 Page Main Content End -->
+
+				<!-- #2 Page Aside Content -->
+				<grid:CSSGrid id="sapUiDemoKitDemoAppsAsideContent" class="sapUiDemoKitDemoAppsAsideContent">
+					<VBox class="sapUiDemoKitDemoAppsAsideContentDesktop">
+						<f:Card class="sapUiDemoKitDemoAppsAsideCard">
+							<f:header>
+								<card:Header title="{i18n>DEMO_APPS_DOWNLOAD_OVERVIEW}" />
+							</f:header>
+							<f:content>
+								<List class="sapUiDemoKitDemoAppsDownloadListContentPadding" items="{/demoApps}" showSeparators="None">
+									<InputListItem visible="{= !!${config} }" label="{name}">
+										<customData>
+											<core:CustomData key="config" value="{config}" />
+										</customData>
+										<Button class="sapUiDemoKitDemoAppsCardDownloadButton"
+											type="Transparent" icon="sap-icon://download" press=".onDownloadPress" />
+									</InputListItem>
+								</List>
+							</f:content>
+						</f:Card>
+					</VBox>
+
+					<VBox class="sapUiDemoKitDemoAppsAsideContentMobile" wrap="Wrap">
+						<Panel class="sapUiDemoKitDemoAppsAsidePanel" expandable="true" headerText="{i18n>DEMO_APPS_DOWNLOAD_OVERVIEW}">
+							<List items="{/demoApps}" showSeparators="None">
+								<InputListItem visible="{= !!${config} }" label="{name}">
+									<customData>
+										<core:CustomData key="config" value="{config}" />
+									</customData>
+									<Button class="sapUiDemoKitDemoAppsCardDownloadButton"
+										type="Transparent" icon="sap-icon://download" press=".onDownloadPress" />
+								</InputListItem>
+							</List>
+						</Panel>
+					</VBox>
+				</grid:CSSGrid>
+				<!-- #2 Page Aside Content End -->
+
+			</grid:items>
+
+		</grid:CSSGrid>
+
+		<core:Fragment fragmentName="sap.ui.documentation.sdk.view.Footer" type="XML" />
+	</ScrollContainer>
+
+</mvc:View>