@openui5/sap.ui.webc.fiori 1.98.0 → 1.99.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/sap.ui.webc.fiori",
-  "version": "1.98.0",
+  "version": "1.99.0",
   "description": "OpenUI5 UI Library sap.ui.webc.fiori",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -16,8 +16,8 @@
     "url": "https://github.com/SAP/openui5.git"
   },
   "dependencies": {
-    "@openui5/sap.ui.core": "1.98.0",
-    "@openui5/sap.ui.webc.main": "1.98.0",
-    "@openui5/sap.ui.webc.common": "1.98.0"
+    "@openui5/sap.ui.core": "1.99.0",
+    "@openui5/sap.ui.webc.main": "1.99.0",
+    "@openui5/sap.ui.webc.common": "1.99.0"
   }
 }

package/src/sap/ui/webc/fiori/.library

@@ -3,7 +3,7 @@
 
 	<name>sap.ui.webc.fiori</name>
 	<vendor>SAP SE</vendor>
-	<version>1.98.0</version>
+	<version>1.99.0</version>
 	<copyright>OpenUI5
  * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>

package/src/sap/ui/webc/fiori/Bar.js

@@ -38,20 +38,26 @@ sap.ui.define([
 	 *     <li>bar - Used to style the wrapper of the content of the component</li>
 	 * </ul>
 	 *
+	 * <h3>Keyboard Handling</h3>
+	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
 	 * @since 1.92.0
 	 * @experimental Since 1.92.0 This control is experimental and its API might change significantly.
 	 * @alias sap.ui.webc.fiori.Bar
+	 * @implements sap.ui.webc.fiori.IBar
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	var Bar = WebComponent.extend("sap.ui.webc.fiori.Bar", {
 		metadata: {
 			library: "sap.ui.webc.fiori",
 			tag: "ui5-bar-ui5",
+			interfaces: [
+				"sap.ui.webc.fiori.IBar"
+			],
 			properties: {
 
 				/**
@@ -113,5 +119,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Bar;
 });

package/src/sap/ui/webc/fiori/BarcodeScannerDialog.js

@@ -32,7 +32,7 @@ sap.ui.define([
 	 * For a list of supported barcode formats, see the <ui5-link target="_blank" href="https://github.com/zxing-js/library">zxing-js/library</ui5-link> documentation.
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -100,5 +100,8 @@ sap.ui.define([
 	 * @function
 	 */
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return BarcodeScannerDialog;
 });

package/src/sap/ui/webc/fiori/DynamicSideContent.js

@@ -0,0 +1,243 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+// Provides control sap.ui.webc.fiori.DynamicSideContent.
+sap.ui.define([
+	"sap/ui/webc/common/WebComponent",
+	"./library",
+	"./thirdparty/DynamicSideContent"
+], function(WebComponent, library) {
+	"use strict";
+
+	var SideContentFallDown = library.SideContentFallDown;
+	var SideContentPosition = library.SideContentPosition;
+	var SideContentVisibility = library.SideContentVisibility;
+
+	/**
+	 * Constructor for a new <code>DynamicSideContent</code>.
+	 *
+	 * @param {string} [sId] ID for the new control, generated automatically if no ID is given
+	 * @param {object} [mSettings] Initial settings for the new control
+	 *
+	 * @extends sap.ui.webc.common.WebComponent
+	 * @class
+	 *
+	 * <h3>Overview</h3>
+	 *
+	 * The DynamicSideContent (<code>sap.ui.webc.fiori.DynamicSideContent</code>) is a layout component that allows additional content to be displayed in a way that flexibly adapts to different screen sizes. The side content appears in a container next to or directly below the main content (it doesn't overlay). When the side content is triggered, the main content becomes narrower (if appearing side-by-side). The side content contains a separate scrollbar when appearing next to the main content.
+	 *
+	 * <h3>Usage</h3>
+	 *
+	 * <i>When to use?</i>
+	 *
+	 * Use this component if you want to display relevant information that is not critical for users to complete a task. Users should have access to all the key functions and critical information in the app even if they do not see the side content. This is important because on smaller screen sizes it may be difficult to display the side content in a way that is easily accessible for the user.
+	 *
+	 * <i>When not to use?</i>
+	 *
+	 * Don't use it if you want to display navigation or critical information that prevents users from completing a task when they have no access to the side content.
+	 *
+	 * <h3>Responsive Behavior</h3>
+	 *
+	 * Screen width > 1440px
+	 *
+	 *
+	 * <ul>
+	 *     <li>Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px each).</li>
+	 *     <li>If the application defines a trigger, the side content can be hidden.</li>
+	 * </ul>
+	 *
+	 * Screen width <= 1440px and> 1024px
+	 *
+	 *
+	 *     <ul>
+	 *         <li>Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of 320px each). If the side content width falls below 320 px, it automatically slides under the main content, unless the app development team specifies that it should disappear.</li>
+	 *     </ul>
+	 *
+	 *     Screen width <= 1024px and> 720px
+	 *
+	 *
+	 *         <ul>
+	 *             <li>The side content ratio is fixed to 340px, and the main content takes the rest of the width. Only if the <code>sideContentFallDown</code> is set to <code>OnMinimumWidth</code> and screen width is <= 960px and> 720px the side content falls below the main content.</li>
+	 *         </ul>
+	 *
+	 *         Screen width <= 720px (for example on a mobile device) <ul>
+	 *             <li>In this case, the side content automatically disappears from the screen (unless specified to stay under the content by setting of <code>sideContentVisibility</code> property to <code>AlwaysShow</code>) and can be triggered from a pre-set trigger (specified within the app). When the side content is triggered, it replaces the main content. We recommend that you always place the trigger for the side content in the same location, such as in the app footer.</li>
+	 *             </ul>
+	 *
+	 *             A special case allows switching the comparison mode between the main and side content. In this case, the screen is split into 50:50 percent for main vs. side content. The responsive behavior of the equal split is the same as in the standard view - the side content disappears on screen widths of less than 720 px and can only be viewed by triggering it.
+	 *
+	 * @author SAP SE
+	 * @version 1.99.0
+	 *
+	 * @constructor
+	 * @public
+	 * @since 1.99.0
+	 * @experimental Since 1.99.0 This control is experimental and its API might change significantly.
+	 * @alias sap.ui.webc.fiori.DynamicSideContent
+	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
+	 */
+	var DynamicSideContent = WebComponent.extend("sap.ui.webc.fiori.DynamicSideContent", {
+		metadata: {
+			library: "sap.ui.webc.fiori",
+			tag: "ui5-dynamic-side-content-ui5",
+			properties: {
+
+				/**
+				 * Defines whether the component is in equal split mode. In this mode, the side and the main content take 50:50 percent of the container on all screen sizes except for phone, where the main and side contents are switching visibility using the toggle method.
+				 */
+				equalSplit: {
+					type: "boolean",
+					defaultValue: false
+				},
+
+				/**
+				 * Defines the visibility of the main content.
+				 */
+				hideMainContent: {
+					type: "boolean",
+					defaultValue: false
+				},
+
+				/**
+				 * Defines the visibility of the side content.
+				 */
+				hideSideContent: {
+					type: "boolean",
+					defaultValue: false
+				},
+
+				/**
+				 * Defines on which breakpoints the side content falls down below the main content.
+				 *
+				 * <br>
+				 * <br>
+				 * <b>The available values are:</b>
+				 *
+				 *
+				 * <ul>
+				 *     <li><code>BelowXL</code></li>
+				 *     <li><code>BelowL</code></li>
+				 *     <li><code>BelowM</code></li>
+				 *     <li><code>OnMinimumWidth</code></li>
+				 * </ul>
+				 */
+				sideContentFallDown: {
+					type: "sap.ui.webc.fiori.SideContentFallDown",
+					defaultValue: SideContentFallDown.OnMinimumWidth
+				},
+
+				/**
+				 * Defines whether the side content is positioned before the main content (left side in LTR mode), or after the the main content (right side in LTR mode).
+				 *
+				 * <br>
+				 * <br>
+				 * <b>The available values are:</b>
+				 *
+				 *
+				 * <ul>
+				 *     <li><code>Start</code></li>
+				 *     <li><code>End</code></li>
+				 * </ul>
+				 */
+				sideContentPosition: {
+					type: "sap.ui.webc.fiori.SideContentPosition",
+					defaultValue: SideContentPosition.End
+				},
+
+				/**
+				 * Defines on which breakpoints the side content is visible.
+				 *
+				 * <br>
+				 * <br>
+				 * <b>The available values are:</b>
+				 *
+				 *
+				 * <ul>
+				 *     <li><code>AlwaysShow</code></li>
+				 *     <li><code>ShowAboveL</code></li>
+				 *     <li><code>ShowAboveM</code></li>
+				 *     <li><code>ShowAboveS</code></li>
+				 *     <li><code>NeverShow</code></li>
+				 * </ul>
+				 */
+				sideContentVisibility: {
+					type: "sap.ui.webc.fiori.SideContentVisibility",
+					defaultValue: SideContentVisibility.ShowAboveS
+				}
+			},
+			defaultAggregation: "content",
+			aggregations: {
+
+				/**
+				 * Defines the main content.
+				 */
+				content: {
+					type: "sap.ui.core.Control",
+					multiple: true
+				},
+
+				/**
+				 * Defines the side content.
+				 */
+				sideContent: {
+					type: "sap.ui.core.Control",
+					multiple: true,
+					slot: "sideContent"
+				}
+			},
+			events: {
+
+				/**
+				 * Fires when the current breakpoint has been changed.
+				 */
+				layoutChange: {
+					parameters: {
+						/**
+						 * the current breakpoint.
+						 */
+						currentBreakpoint: {
+							type: "string"
+						},
+
+						/**
+						 * the breakpoint that was active before change to current breakpoint.
+						 */
+						previousBreakpoint: {
+							type: "string"
+						},
+
+						/**
+						 * visibility of the main content.
+						 */
+						mainContentVisible: {
+							type: "boolean"
+						},
+
+						/**
+						 * visibility of the side content.
+						 */
+						sideContentVisible: {
+							type: "boolean"
+						}
+					}
+				}
+			},
+			methods: ["toggleContents"]
+		}
+	});
+
+	/**
+	 * Toggles visibility of main and side contents on S screen size (mobile device).
+	 * @public
+	 * @name sap.ui.webc.fiori.DynamicSideContent#toggleContents
+	 * @function
+	 */
+
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
+	return DynamicSideContent;
+});

package/src/sap/ui/webc/fiori/FilterItem.js

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * <h3>Usage</h3>
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -67,5 +67,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return FilterItem;
 });

package/src/sap/ui/webc/fiori/FilterItemOption.js

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * <h3>Usage</h3>
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -64,5 +64,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return FilterItemOption;
 });

package/src/sap/ui/webc/fiori/FlexibleColumnLayout.js

@@ -39,14 +39,8 @@ sap.ui.define([
 	 * <br>
 	 * <h3>Keyboard Handling</h3>
 	 *
-	 *
-	 * <ul>
-	 *     <li>[SPACE, ENTER, RETURN] - If focus is on the layout toggle button (arrow button), once activated, it triggers the associated action (such as expand/collapse the column).</li>
-	 * </ul> <br>
-	 * <br>
-	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -61,10 +55,20 @@ sap.ui.define([
 			tag: "ui5-flexible-column-layout-ui5",
 			properties: {
 
+				/**
+				 * An object of strings that defines additional accessibility roles for further customization.
+				 *
+				 * It supports the following fields: - <code>startColumnRole</code>: the accessibility role for the <code>startColumn</code> - <code>startArrowContainerRole</code>: the accessibility role for the first arrow container (between the <code>begin</code> and <code>mid</code> columns) - <code>midColumnRole</code>: the accessibility role for the <code>midColumn</code> - <code>endArrowContainerRole</code>: the accessibility role for the second arrow container (between the <code>mid</code> and <code>end</code> columns) - <code>endColumnRole</code>: the accessibility role for the <code>endColumn</code>
+				 */
+				accessibilityRoles: {
+					type: "object",
+					defaultValue: {}
+				},
+
 				/**
 				 * An object of strings that defines several additional accessibility texts for even further customization.
 				 *
-				 * It supports the following fields: - <code>startColumnAccessibleName</code>: the accessibility name for the <code>startColumn</code> region - <code>midColumnAccessibleName</code>: the accessibility name for the <code>midColumn</code> region - <code>endColumnAccessibleName</code>: the accessibility name for the <code>endColumn</code> region - <code>startArrowLeftText</code>: the text that the first arrow (between the <code>begin</code> and <code>mid</code> columns) will have when pointing to the left - <code>startArrowRightText</code>: the text that the first arrow (between the <code>begin</code> and <code>mid</code> columns) will have when pointing to the right - <code>endArrowLeftText</code>: the text that the second arrow (between the <code>mid</code> and <code>end</code> columns) will have when pointing to the left - <code>endArrowRightText</code>: the text that the second arrow (between the <code>mid</code> and <code>end</code> columns) will have when pointing to the right
+				 * It supports the following fields: - <code>startColumnAccessibleName</code>: the accessibility name for the <code>startColumn</code> region - <code>midColumnAccessibleName</code>: the accessibility name for the <code>midColumn</code> region - <code>endColumnAccessibleName</code>: the accessibility name for the <code>endColumn</code> region - <code>startArrowLeftText</code>: the text that the first arrow (between the <code>begin</code> and <code>mid</code> columns) will have when pointing to the left - <code>startArrowRightText</code>: the text that the first arrow (between the <code>begin</code> and <code>mid</code> columns) will have when pointing to the right - <code>endArrowLeftText</code>: the text that the second arrow (between the <code>mid</code> and <code>end</code> columns) will have when pointing to the left - <code>endArrowRightText</code>: the text that the second arrow (between the <code>mid</code> and <code>end</code> columns) will have when pointing to the right - <code>startArrowContainerAccessibleName</code>: the text that the first arrow container (between the <code>begin</code> and <code>mid</code> columns) will have as <code>aria-label</code> - <code>endArrowContainerAccessibleName</code>: the text that the second arrow container (between the <code>mid</code> and <code>end</code> columns) will have as <code>aria-label</code>
 				 */
 				accessibilityTexts: {
 					type: "object",
@@ -162,7 +166,7 @@ sap.ui.define([
 						 * The current layout
 						 */
 						layout: {
-							type: "sap.ui.webc.fiori.FCLLayout"
+							type: "FCLLayout"
 						},
 
 						/**
@@ -248,5 +252,8 @@ sap.ui.define([
 	 * @function
 	 */
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return FlexibleColumnLayout;
 });

package/src/sap/ui/webc/fiori/IllustratedMessage.js

@@ -40,7 +40,7 @@ sap.ui.define([
 	 * <h3>Usage</h3> <code>sap.ui.webc.fiori.IllustratedMessage</code> is meant to be used inside container component, for example a <code>sap.ui.webc.main.Card</code>, a <code>sap.ui.webc.main.Dialog</code> or a <code>sap.ui.webc.fiori.Page</code>
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -110,5 +110,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return IllustratedMessage;
 });

package/src/sap/ui/webc/fiori/MediaGallery.js

@@ -0,0 +1,180 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+// Provides control sap.ui.webc.fiori.MediaGallery.
+sap.ui.define([
+	"sap/ui/webc/common/WebComponent",
+	"./library",
+	"./thirdparty/MediaGallery"
+], function(WebComponent, library) {
+	"use strict";
+
+	var MediaGalleryLayout = library.MediaGalleryLayout;
+	var MediaGalleryMenuHorizontalAlign = library.MediaGalleryMenuHorizontalAlign;
+	var MediaGalleryMenuVerticalAlign = library.MediaGalleryMenuVerticalAlign;
+
+	/**
+	 * Constructor for a new <code>MediaGallery</code>.
+	 *
+	 * @param {string} [sId] ID for the new control, generated automatically if no ID is given
+	 * @param {object} [mSettings] Initial settings for the new control
+	 *
+	 * @extends sap.ui.webc.common.WebComponent
+	 * @class
+	 *
+	 * <h3>Overview</h3>
+	 *
+	 * The <code>ui-media-gallery</code> component allows the user to browse through multimedia items. Currently, the supported items are images and videos. The items should be defined using the <code>sap.ui.webc.fiori.MediaGalleryItem</code> component.
+	 *
+	 * The items are initially displayed as thumbnails. When the user selects a thumbnail, the corresponding item is displayed in larger size. <br>
+	 * The component is responsive by default and adjusts the position of the menu with respect to viewport size, but the application is able to further customize the layout via the provided API.
+	 *
+	 * <h3>Keyboard Handling</h3> The <code>sap.ui.webc.fiori.MediaGallery</code> provides advanced keyboard handling. <br>
+	 * When the thumbnails menu is focused the following keyboard shortcuts allow the user to navigate through the thumbnail items: <br>
+	 *
+	 *
+	 *
+	 * <ul>
+	 *     <li>[UP/DOWN] - Navigates up and down the items</li>
+	 *     <li>[HOME] - Navigates to first item</li>
+	 *     <li>[END] - Navigates to the last item</li>
+	 *     <li>[SPACE/ENTER] - Select an item
+	 * </ul> <br>
+	 *
+	 * @author SAP SE
+	 * @version 1.99.0
+	 *
+	 * @constructor
+	 * @public
+	 * @since 1.99.0
+	 * @experimental Since 1.99.0 This control is experimental and its API might change significantly.
+	 * @alias sap.ui.webc.fiori.MediaGallery
+	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
+	 */
+	var MediaGallery = WebComponent.extend("sap.ui.webc.fiori.MediaGallery", {
+		metadata: {
+			library: "sap.ui.webc.fiori",
+			tag: "ui5-media-gallery-ui5",
+			properties: {
+
+				/**
+				 * If enabled, a <code>display-area-click</code> event is fired when the user clicks or taps on the display area. <br>
+				 * The display area is the central area that contains the enlarged content of the currently selected item.
+				 */
+				interactiveDisplayArea: {
+					type: "boolean",
+					defaultValue: false
+				},
+
+				/**
+				 * Determines the layout of the component. <br>
+				 * <br>
+				 * Available options are:
+				 * <ul>
+				 *     <li><code>Auto</code></li>
+				 *     <li><code>Vertical</code></li>
+				 *     <li><code>Horizontal</code></li>
+				 * </ul>
+				 */
+				layout: {
+					type: "sap.ui.webc.fiori.MediaGalleryLayout",
+					defaultValue: MediaGalleryLayout.Auto
+				},
+
+				/**
+				 * Determines the horizontal alignment of the thumbnails menu vs. the central display area. <br>
+				 * <br>
+				 * Available options are:
+				 * <ul>
+				 *     <li><code>Left</code></li>
+				 *     <li><code>Right</code></li>
+				 * </ul>
+				 */
+				menuHorizontalAlign: {
+					type: "sap.ui.webc.fiori.MediaGalleryMenuHorizontalAlign",
+					defaultValue: MediaGalleryMenuHorizontalAlign.Left
+				},
+
+				/**
+				 * Determines the vertical alignment of the thumbnails menu vs. the central display area. <br>
+				 * <br>
+				 * Available options are:
+				 * <ul>
+				 *     <li><code>Top</code></li>
+				 *     <li><code>Bottom</code></li>
+				 * </ul>
+				 */
+				menuVerticalAlign: {
+					type: "sap.ui.webc.fiori.MediaGalleryMenuVerticalAlign",
+					defaultValue: MediaGalleryMenuVerticalAlign.Bottom
+				},
+
+				/**
+				 * If set to <code>true</code>, all thumbnails are rendered in a scrollable container. If <code>false</code>, only up to five thumbnails are rendered, followed by an overflow button that shows the count of the remaining thumbnails.
+				 */
+				showAllThumbnails: {
+					type: "boolean",
+					defaultValue: false
+				}
+			},
+			defaultAggregation: "items",
+			aggregations: {
+
+				/**
+				 * Defines the component items.
+				 *
+				 * <br>
+				 * <br>
+				 * <b>Note:</b> Only one selected item is allowed.
+				 *
+				 * <br>
+				 * <br>
+				 * <b>Note:</b> Use the <code>sap.ui.webc.fiori.MediaGalleryItem</code> component to define the desired items.
+				 */
+				items: {
+					type: "sap.ui.webc.fiori.IMediaGalleryItem",
+					multiple: true
+				}
+			},
+			events: {
+
+				/**
+				 * Fired when the display area is clicked.<br>
+				 * The display area is the central area that contains the enlarged content of the currently selected item.
+				 */
+				displayAreaClick: {
+					parameters: {}
+				},
+
+				/**
+				 * Fired when the thumbnails overflow button is clicked.
+				 */
+				overflowClick: {
+					parameters: {}
+				},
+
+				/**
+				 * Fired when selection is changed by user interaction.
+				 */
+				selectionChange: {
+					parameters: {
+						/**
+						 * the selected item.
+						 */
+						item: {
+							type: "HTMLElement"
+						}
+					}
+				}
+			}
+		}
+	});
+
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
+	return MediaGallery;
+});