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

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.101.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;
+});

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

@@ -0,0 +1,123 @@
+/*!
+ * 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.MediaGalleryItem.
+sap.ui.define([
+	"sap/ui/webc/common/WebComponent",
+	"./library",
+	"sap/ui/core/EnabledPropagator",
+	"./thirdparty/MediaGalleryItem"
+], function(WebComponent, library, EnabledPropagator) {
+	"use strict";
+
+	var MediaGalleryItemLayout = library.MediaGalleryItemLayout;
+
+	/**
+	 * Constructor for a new <code>MediaGalleryItem</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>sap.ui.webc.fiori.MediaGalleryItem</code> web component represents the items displayed in the <code>sap.ui.webc.fiori.MediaGallery</code> web component. <br>
+	 * <br>
+	 * <b>Note:</b> <code>sap.ui.webc.fiori.MediaGalleryItem</code> is not supported when used outside of <code>sap.ui.webc.fiori.MediaGallery</code>. <br>
+	 * <br>
+	 *
+	 *
+	 * <h3>Keyboard Handling</h3> The <code>sap.ui.webc.fiori.MediaGallery</code> provides advanced keyboard handling. When focused, the user can use the following keyboard shortcuts in order to perform a navigation: <br>
+	 *
+	 * <ul>
+	 *     <li>[SPACE/ENTER/RETURN] - Trigger <code>ui5-click</code> event</li>
+	 * </ul>
+	 *
+	 * @author SAP SE
+	 * @version 1.101.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.MediaGalleryItem
+	 * @implements sap.ui.webc.fiori.IMediaGalleryItem
+	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
+	 */
+	var MediaGalleryItem = WebComponent.extend("sap.ui.webc.fiori.MediaGalleryItem", {
+		metadata: {
+			library: "sap.ui.webc.fiori",
+			tag: "ui5-media-gallery-item-ui5",
+			interfaces: [
+				"sap.ui.webc.fiori.IMediaGalleryItem"
+			],
+			properties: {
+
+				/**
+				 * Defines whether the control is enabled. A disabled control can't be interacted with, and it is not in the tab chain.
+				 */
+				enabled: {
+					type: "boolean",
+					defaultValue: true,
+					mapping: {
+						type: "attribute",
+						to: "disabled",
+						formatter: "_mapEnabled"
+					}
+				},
+
+				/**
+				 * Determines the layout of the item container. <br>
+				 * <br>
+				 * Available options are:
+				 * <ul>
+				 *     <li><code>Square</code></li>
+				 *     <li><code>Wide</code></li>
+				 * </ul>
+				 */
+				layout: {
+					type: "sap.ui.webc.fiori.MediaGalleryItemLayout",
+					defaultValue: MediaGalleryItemLayout.Square
+				},
+
+				/**
+				 * Defines the selected state of the component.
+				 */
+				selected: {
+					type: "boolean",
+					defaultValue: false
+				}
+			},
+			defaultAggregation: "content",
+			aggregations: {
+
+				/**
+				 * Defines the content of the component.
+				 */
+				content: {
+					type: "sap.ui.core.Control",
+					multiple: false
+				},
+
+				/**
+				 * Defines the content of the thumbnail.
+				 */
+				thumbnail: {
+					type: "sap.ui.core.Control",
+					multiple: false,
+					slot: "thumbnail"
+				}
+			}
+		}
+	});
+
+	EnabledPropagator.call(MediaGalleryItem.prototype);
+
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
+	return MediaGalleryItem;
+});

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

@@ -8,9 +8,10 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
+	"sap/ui/core/EnabledPropagator",
 	"sap/ui/webc/main/library",
 	"./thirdparty/NotificationAction"
-], function(WebComponent, library, mainLibrary) {
+], function(WebComponent, library, EnabledPropagator, mainLibrary) {
 	"use strict";
 
 	var ButtonDesign = mainLibrary.ButtonDesign;
@@ -27,7 +28,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.fiori.NotificationAction</code> represents an abstract action, used in the <code>sap.ui.webc.fiori.NotificationListItem</code> and the <code>sap.ui.webc.fiori.NotificationListGroupItem</code> items.
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @public
@@ -66,13 +67,16 @@ sap.ui.define([
 				},
 
 				/**
-				 * Defines if the action is disabled. <br>
-				 * <br>
-				 * <b>Note:</b> a disabled action can't be pressed or focused, and it is not in the tab chain.
+				 * Defines whether the control is enabled. A disabled control can't be interacted with, and it is not in the tab chain.
 				 */
-				disabled: {
+				enabled: {
 					type: "boolean",
-					defaultValue: false
+					defaultValue: true,
+					mapping: {
+						type: "attribute",
+						to: "disabled",
+						formatter: "_mapEnabled"
+					}
 				},
 
 				/**
@@ -96,5 +100,10 @@ sap.ui.define([
 		}
 	});
 
+	EnabledPropagator.call(NotificationAction.prototype);
+
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return NotificationAction;
 });

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

@@ -47,7 +47,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @public
@@ -179,5 +179,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return NotificationListGroupItem;
 });

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

@@ -49,7 +49,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @public
@@ -194,5 +194,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return NotificationListItem;
 });

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

@@ -31,7 +31,7 @@ sap.ui.define([
 	 * <b>Note:</b> <code>sap.ui.webc.fiori.Page</code> occipues the whole available space of its parent. In order to achieve the intended design you have to make sure that there is enough space for the <code>sap.ui.webc.fiori.Page</code> to be rendered.
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @public
@@ -85,7 +85,6 @@ sap.ui.define([
 				 */
 				height: {
 					type: "sap.ui.core.CSSSize",
-					defaultValue: null,
 					mapping: "style"
 				},
 
@@ -102,7 +101,6 @@ sap.ui.define([
 				 */
 				width: {
 					type: "sap.ui.core.CSSSize",
-					defaultValue: null,
 					mapping: "style"
 				}
 			},
@@ -121,8 +119,8 @@ sap.ui.define([
 				 * Defines the footer HTML Element.
 				 */
 				footer: {
-					type: "sap.ui.core.Control",
-					multiple: true,
+					type: "sap.ui.webc.fiori.IBar",
+					multiple: false,
 					slot: "footer"
 				},
 
@@ -130,13 +128,17 @@ sap.ui.define([
 				 * Defines the header HTML Element.
 				 */
 				header: {
-					type: "sap.ui.core.Control",
-					multiple: true,
+					type: "sap.ui.webc.fiori.IBar",
+					multiple: false,
 					slot: "header"
 				}
-			}
+			},
+			designtime: "sap/ui/webc/fiori/designtime/Page.designtime"
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Page;
 });

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

@@ -37,7 +37,7 @@ sap.ui.define([
 	 * <br>
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @public
@@ -64,5 +64,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return ProductSwitch;
 });

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

@@ -34,7 +34,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @public
@@ -119,5 +119,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return ProductSwitchItem;
 });

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

@@ -47,8 +47,10 @@ sap.ui.define([
 	 *     <li>root - Used to style the outermost wrapper of the <code>sap.ui.webc.fiori.ShellBar</code></li>
 	 * </ul>
 	 *
+	 * <h3>Keyboard Handling</h3>
+	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @public
@@ -63,6 +65,16 @@ sap.ui.define([
 			tag: "ui5-shellbar-ui5",
 			properties: {
 
+				/**
+				 * An object of strings that defines several additional accessibility texts for even further customization.
+				 *
+				 * It supports the following fields: - <code>profileButtonTitle</code>: defines the tooltip for the profile button - <code>logoTitle</code>: defines the tooltip for the logo
+				 */
+				accessibilityTexts: {
+					type: "object",
+					defaultValue: {}
+				},
+
 				/**
 				 * Defines the <code>notificationsCount</code>, displayed in the notification icon top-right corner.
 				 */
@@ -209,7 +221,7 @@ sap.ui.define([
 				},
 
 				/**
-				 * Fired, when a menu item is activated <b>Note:</b> You can prevent closing of oveflow popover by calling <code>event.preventDefault()</code>.
+				 * Fired, when a menu item is activated <b>Note:</b> You can prevent closing of overflow popover by calling <code>event.preventDefault()</code>.
 				 */
 				menuItemClick: {
 					parameters: {
@@ -238,7 +250,7 @@ sap.ui.define([
 				},
 
 				/**
-				 * Fired, when the product switch icon is activated. <b>Note:</b> You can prevent closing of oveflow popover by calling <code>event.preventDefault()</code>.
+				 * Fired, when the product switch icon is activated. <b>Note:</b> You can prevent closing of overflow popover by calling <code>event.preventDefault()</code>.
 				 */
 				productSwitchClick: {
 					allowPreventDefault: true,
@@ -320,5 +332,8 @@ sap.ui.define([
 	 * @function
 	 */
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return ShellBar;
 });

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

@@ -24,7 +24,7 @@ sap.ui.define([
 	 *
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @public
@@ -87,5 +87,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return ShellBarItem;
 });

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

@@ -34,8 +34,10 @@ sap.ui.define([
 	 *
 	 * Use the available <code>sap.ui.webc.fiori.SideNavigationItem</code> and <code>sap.ui.webc.fiori.SideNavigationSubItem</code> components to build your menu. The items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level. You must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.
 	 *
+	 * <h3>Keyboard Handling</h3>
+	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @public
@@ -99,6 +101,7 @@ sap.ui.define([
 				 * Fired when the selection has changed via user interaction
 				 */
 				selectionChange: {
+					allowPreventDefault: true,
 					parameters: {
 						/**
 						 * the clicked item.
@@ -112,5 +115,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return SideNavigation;
 });

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

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.fiori.SideNavigationItem</code> is used within <code>sap.ui.webc.fiori.SideNavigation</code> only. Via the <code>sap.ui.webc.fiori.SideNavigationItem</code> you control the content of the <code>SideNavigation</code>.
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @public
@@ -104,5 +104,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return SideNavigationItem;
 });

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

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.fiori.SideNavigationSubItem</code> is intended to be used inside a <code>sap.ui.webc.fiori.SideNavigationItem</code> only.
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @public
@@ -77,5 +77,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return SideNavigationSubItem;
 });

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

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

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

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.fiori.Timeline</code> component shows entries (such as objects, events, or posts) in chronological order. A common use case is to provide information about changes to an object, or events related to an object. These entries can be generated by the system (for example, value XY changed from A to B), or added manually. There are two distinct variants of the timeline: basic and social. The basic timeline is read-only, while the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @public
@@ -43,12 +43,18 @@ sap.ui.define([
 			tag: "ui5-timeline-ui5",
 			properties: {
 
+				/**
+				 * Defines the accessible aria name of the component.
+				 */
+				accessibleName: {
+					type: "string"
+				},
+
 				/**
 				 * Defines the height of the control
 				 */
 				height: {
 					type: "sap.ui.core.CSSSize",
-					defaultValue: null,
 					mapping: "style"
 				},
 
@@ -73,7 +79,6 @@ sap.ui.define([
 				 */
 				width: {
 					type: "sap.ui.core.CSSSize",
-					defaultValue: null,
 					mapping: "style"
 				}
 			},
@@ -91,5 +96,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Timeline;
 });