@openui5/sap.ui.webc.fiori 1.94.0 → 1.97.0

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

@@ -0,0 +1,132 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2021 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+// Provides control sap.ui.webc.fiori.ViewSettingsDialog.
+sap.ui.define([
+	"sap/ui/webc/common/WebComponent",
+	"./library",
+	"./thirdparty/ViewSettingsDialog"
+], function(WebComponent, library) {
+	"use strict";
+
+	/**
+	 * Constructor for a new <code>ViewSettingsDialog</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.ViewSettingsDialog</code> component helps the user to sort data within a list or a table. It consists of several lists like <code>Sort order</code> which is built-in and <code>Sort By</code> and <code>Filter By</code> lists, for which you must be provide items(<code>sap.ui.webc.fiori.SortItem</code> & <code>sap.ui.webc.fiori.FilterItem</code> respectively) These options can be used to create sorters for a table.
+	 *
+	 * The <code>sap.ui.webc.fiori.ViewSettingsDialog</code> interrupts the current application processing as it is the only focused UI element and the main screen is dimmed/blocked. The <code>sap.ui.webc.fiori.ViewSettingsDialog</code> is modal, which means that user action is required before returning to the parent window is possible.
+	 *
+	 * <h3>Structure</h3> A <code>sap.ui.webc.fiori.ViewSettingsDialog</code> consists of a header, content, and a footer for action buttons. The <code>sap.ui.webc.fiori.ViewSettingsDialog</code> is usually displayed at the center of the screen.
+	 *
+	 * <h3>Responsive Behavior</h3> <code>sap.ui.webc.fiori.ViewSettingsDialog</code> stretches on full screen on phones.
+	 *
+	 * @author SAP SE
+	 * @version 1.97.0
+	 *
+	 * @constructor
+	 * @public
+	 * @since 1.95.0
+	 * @experimental Since 1.95.0 This control is experimental and its API might change significantly.
+	 * @alias sap.ui.webc.fiori.ViewSettingsDialog
+	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
+	 */
+	var ViewSettingsDialog = WebComponent.extend("sap.ui.webc.fiori.ViewSettingsDialog", {
+		metadata: {
+			library: "sap.ui.webc.fiori",
+			tag: "ui5-view-settings-dialog-ui5",
+			properties: {
+
+				/**
+				 * Defines the initial sort order.
+				 */
+				sortDescending: {
+					type: "boolean",
+					defaultValue: false
+				}
+			},
+			aggregations: {
+
+				/**
+				 *
+				 */
+				filterItems: {
+					type: "sap.ui.webc.fiori.IFilterItem",
+					multiple: true,
+					slot: "filterItems"
+				},
+
+				/**
+				 *
+				 */
+				sortItems: {
+					type: "sap.ui.webc.fiori.ISortItem",
+					multiple: true,
+					slot: "sortItems"
+				}
+			},
+			events: {
+
+				/**
+				 * Fired when cancel button is activated.
+				 */
+				cancel: {
+					parameters: {
+						/**
+						 * The current sort order selected.
+						 */
+						sortOrder: {
+							type: "string"
+						},
+
+						/**
+						 * The currently selected <code>sap.ui.webc.fiori.SortItem</code> text attribute.
+						 */
+						sortBy: {
+							type: "string"
+						}
+					}
+				},
+
+				/**
+				 * Fired when confirmation button is activated.
+				 */
+				confirm: {
+					parameters: {
+						/**
+						 * The current sort order selected.
+						 */
+						sortOrder: {
+							type: "string"
+						},
+
+						/**
+						 * The currently selected <code>sap.ui.webc.fiori.SortItem</code> text attribute.
+						 */
+						sortBy: {
+							type: "string"
+						}
+					}
+				}
+			},
+			methods: ["show"]
+		}
+	});
+
+	/**
+	 * Shows the dialog.
+	 * @public
+	 * @name sap.ui.webc.fiori.ViewSettingsDialog#show
+	 * @function
+	 */
+
+	return ViewSettingsDialog;
+});

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

@@ -23,14 +23,14 @@ sap.ui.define([
 	 *
 	 * <h3>Overview</h3>
 	 *
-	 * The <code>sap.ui.webc.fiori.Wizard</code> helps users complete a complex task by dividing it into sections and guiding the user through it. It has two main areas - a navigation area at the top showing the step sequence and a content area below it.
+	 * The <code>sap.ui.webc.fiori.Wizard</code> helps users to complete a complex task by dividing it into sections and guiding them through it. It has two main areas - a navigation area at the top showing the step sequence and a content area below it.
 	 *
 	 * <h3>Structure</h3>
 	 * <h4>Navigation area</h4> The top most area of the <code>sap.ui.webc.fiori.Wizard</code> is occupied by the navigation area. It shows the sequence of steps, where the recommended number of steps is between 3 and 8 steps.
 	 * <ul>
 	 *     <li> Steps can have different visual representations - numbers or icons.
 	 *     <li> Steps might have labels for better readability - titleText and subTitleText.</li>
-	 *     <li> Steps are defined by using the <code>sap.ui.webc.fiori.WizardStep</code> as slotted element within the <code>sap.ui.webc.fiori.Wizard</code></li>
+	 *     <li> Steps are defined by using the <code>sap.ui.webc.fiori.WizardStep</code> as slotted element within the <code>sap.ui.webc.fiori.Wizard</code>.</li>
 	 * </ul>
 	 *
 	 * <b>Note:</b> If no selected step is defined, the first step will be auto selected. <br>
@@ -50,21 +50,21 @@ sap.ui.define([
 	 * </code> <code>&#9;&lt;ui5-wizard&gt;&lt;/ui5-wizard&gt;<br>
 	 * </code> <code>&lt;/ui5-dialog&gt;</code>
 	 *
-	 * <h4>Moving to next step</h4> The <code>sap.ui.webc.fiori.WizardStep</code> provides the necessary API and it's up to the user of the component to use it to move to the next step. You have to set its <code>selected</code> property (and remove the <code>disabled</code> one if set) to <code>true</code>. And, the <code>sap.ui.webc.fiori.Wizard</code> will automatically scroll to the content of the newly selected step. <br>
+	 * <h4>Moving to next step</h4> The <code>sap.ui.webc.fiori.WizardStep</code> provides the necessary API and it's up to the user of the component to use it to move to the next step. You have to set its <code>selected</code> property (and remove the <code>disabled</code> one if set) to <code>true</code>. The <code>sap.ui.webc.fiori.Wizard</code> will automatically scroll to the content of the newly selected step. <br>
 	 * <br>
 	 *
 	 *
 	 * The Fiori 3 guidelines recommends having a "nextStep" button in the content area. You can place a button, or any other type of element to trigger step change, inside the <code>sap.ui.webc.fiori.WizardStep</code>, and show/hide it when certain fields are filled or user defined criteria is met.
 	 *
 	 * <h3>Usage</h3>
-	 * <h4>When to use:</h4> When the user has to accomplish a long set of tasks.
+	 * <h4>When to use:</h4> When the user has to accomplish a long or unfamiliar task.
 	 *
 	 * <h4>When not to use:</h4> When the task has less than 3 steps.
 	 *
-	 * <h3>Responsive Behavior</h3> On small widths the step's titleText, subtitleText and separators in the navigation area will start truncate and shrink and from particular point they will hide to free as much space as possible.
+	 * <h3>Responsive Behavior</h3> On small widths the step's titleText, subtitleText and separators in the navigation area shrink and from particular point the steps are grouped together and overlap. Tapping on them will show a popover to select the step to navigate to. On mobile device, the grouped steps are presented within a dialog.
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public
@@ -79,6 +79,14 @@ sap.ui.define([
 			tag: "ui5-wizard-ui5",
 			properties: {
 
+				/**
+				 * Sets the accessible aria name of the component.
+				 */
+				accessibleName: {
+					type: "string",
+					defaultValue: undefined
+				},
+
 				/**
 				 * Defines the height of the control
 				 */
@@ -109,21 +117,21 @@ sap.ui.define([
 				stepChange: {
 					parameters: {
 						/**
-						 * the new step
+						 * The new step.
 						 */
 						step: {
 							type: "HTMLElement"
 						},
 
 						/**
-						 * the previous step
+						 * The previous step.
 						 */
 						previousStep: {
 							type: "HTMLElement"
 						},
 
 						/**
-						 * the step change occurs due to user's click or 'Enter'/'Space' key press on step within the navigation
+						 * The step change occurs due to user's click or 'Enter'/'Space' key press on step within the navigation.
 						 */
 						changeWithClick: {
 							type: "boolean"

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

@@ -23,20 +23,20 @@ sap.ui.define([
 	 *
 	 * <h3>Overview</h3>
 	 *
-	 * A component that represents a logical step as part of the <code>sap.ui.webc.fiori.Wizard</code>. It is meant to aggregate arbitrary HTML elements that forms the content of a single step.
+	 * A component that represents a logical step as part of the <code>sap.ui.webc.fiori.Wizard</code>. It is meant to aggregate arbitrary HTML elements that form the content of a single step.
 	 *
 	 * <h3>Structure</h3>
 	 * <ul>
-	 *     <li>Each wizard step has arbitrary content</li>
-	 *     <li>Each wizard step might have texts - defined by the <code>titleText</code> and <code>subtitleText</code> properties</li>
-	 *     <li>Each wizard step might have an icon - defined by the <code>icon</code> property</li>
-	 *     <li>Each wizard step might display a number in place of the <code>icon</code>, when it's missing</li>
+	 *     <li>Each wizard step has arbitrary content.</li>
+	 *     <li>Each wizard step might have texts - defined by the <code>titleText</code> and <code>subtitleText</code> properties.</li>
+	 *     <li>Each wizard step might have an icon - defined by the <code>icon</code> property.</li>
+	 *     <li>Each wizard step might display a number in place of the <code>icon</code>, when it's missing.</li>
 	 * </ul>
 	 *
 	 * <h3>Usage</h3> The <code>sap.ui.webc.fiori.WizardStep</code> component should be used only as slot of the <code>sap.ui.webc.fiori.Wizard</code> component and should not be used standalone.
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public
@@ -55,6 +55,22 @@ sap.ui.define([
 			],
 			properties: {
 
+				/**
+				 * Sets the accessible aria name of the component.
+				 */
+				accessibleName: {
+					type: "string",
+					defaultValue: ""
+				},
+
+				/**
+				 * Defines the aria-labelledby of the step.
+				 */
+				accessibleNameRef: {
+					type: "string",
+					defaultValue: ""
+				},
+
 				/**
 				 * When <code>branching</code> is enabled a dashed line would be displayed after the step, meant to indicate that the next step is not yet known and depends on user choice in the current step. <br>
 				 * <br>
@@ -84,7 +100,7 @@ sap.ui.define([
 				 * <br>
 				 *
 				 *
-				 * <b>Note:</b> the icon is displayed in the <code>sap.ui.webc.fiori.Wizard</code> navigation header. <br>
+				 * <b>Note:</b> The icon is displayed in the <code>sap.ui.webc.fiori.Wizard</code> navigation header. <br>
 				 * <br>
 				 *
 				 *
@@ -112,8 +128,7 @@ sap.ui.define([
 				 * <br>
 				 *
 				 *
-				 * <b>Note:</b> the text is displayed in the <code>sap.ui.webc.fiori.Wizard</code> navigation header. <br>
-				 * <b>Note:</b> the text will hide on small sizes (about 559 px).
+				 * <b>Note:</b> the text is displayed in the <code>sap.ui.webc.fiori.Wizard</code> navigation header.
 				 */
 				subtitleText: {
 					type: "string",
@@ -125,8 +140,7 @@ sap.ui.define([
 				 * <br>
 				 *
 				 *
-				 * <b>Note:</b> the text is displayed in the <code>sap.ui.webc.fiori.Wizard</code> navigation header. <br>
-				 * <b>Note:</b> the text will hide on small sizes (about 559 px).
+				 * <b>Note:</b> The text is displayed in the <code>sap.ui.webc.fiori.Wizard</code> navigation header.
 				 */
 				titleText: {
 					type: "string",

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

@@ -9,26 +9,30 @@
  */
 sap.ui.define([
 		"sap/ui/webc/common/library",
+		"sap/ui/webc/common/thirdparty/base/CSP",
 		"./thirdparty/Assets"
 	], // library dependency
-	function() {
+	function(commonLibrary, CSP) {
 
 		"use strict";
 
 		// delegate further initialization of this library to the Core
 		sap.ui.getCore().initLibrary({
 			name: "sap.ui.webc.fiori",
-			version: "1.94.0",
+			version: "1.97.0",
 			dependencies: ["sap.ui.core", "sap.ui.webc.common"],
 			noLibraryCSS: true,
 			designtime: "sap/ui/webc/main/designtime/library.designtime",
 			interfaces: [
+				"sap.ui.webc.fiori.IFilterItem",
+				"sap.ui.webc.fiori.IFilterItemOption",
 				"sap.ui.webc.fiori.INotificationAction",
 				"sap.ui.webc.fiori.INotificationListItem",
 				"sap.ui.webc.fiori.IProductSwitchItem",
 				"sap.ui.webc.fiori.IShellBarItem",
 				"sap.ui.webc.fiori.ISideNavigationItem",
 				"sap.ui.webc.fiori.ISideNavigationSubItem",
+				"sap.ui.webc.fiori.ISortItem",
 				"sap.ui.webc.fiori.ITimelineItem",
 				"sap.ui.webc.fiori.IUploadCollectionItem",
 				"sap.ui.webc.fiori.IWizardStep"
@@ -36,12 +40,18 @@ sap.ui.define([
 			types: [
 				"sap.ui.webc.fiori.BarDesign",
 				"sap.ui.webc.fiori.FCLLayout",
+				"sap.ui.webc.fiori.IllustrationMessageType",
 				"sap.ui.webc.fiori.PageBackgroundDesign",
+				"sap.ui.webc.fiori.TimelineLayout",
 				"sap.ui.webc.fiori.UploadState"
 			],
 			controls: [
 				"sap.ui.webc.fiori.Bar",
+				"sap.ui.webc.fiori.BarcodeScannerDialog",
+				"sap.ui.webc.fiori.FilterItem",
+				"sap.ui.webc.fiori.FilterItemOption",
 				"sap.ui.webc.fiori.FlexibleColumnLayout",
+				"sap.ui.webc.fiori.IllustratedMessage",
 				"sap.ui.webc.fiori.NotificationAction",
 				"sap.ui.webc.fiori.NotificationListGroupItem",
 				"sap.ui.webc.fiori.NotificationListItem",
@@ -53,10 +63,12 @@ sap.ui.define([
 				"sap.ui.webc.fiori.SideNavigation",
 				"sap.ui.webc.fiori.SideNavigationItem",
 				"sap.ui.webc.fiori.SideNavigationSubItem",
+				"sap.ui.webc.fiori.SortItem",
 				"sap.ui.webc.fiori.Timeline",
 				"sap.ui.webc.fiori.TimelineItem",
 				"sap.ui.webc.fiori.UploadCollection",
 				"sap.ui.webc.fiori.UploadCollectionItem",
+				"sap.ui.webc.fiori.ViewSettingsDialog",
 				"sap.ui.webc.fiori.Wizard",
 				"sap.ui.webc.fiori.WizardStep"
 			],
@@ -65,12 +77,12 @@ sap.ui.define([
 		});
 
 		/**
-		 * UI5 library: sap.ui.webc.fiori
+		 * SAPUI5 library with controls based on UI5 Web Components
 		 *
 		 * @namespace
 		 * @alias sap.ui.webc.fiori
 		 * @author SAP SE
-		 * @version 1.94.0
+		 * @version 1.97.0
 		 * @public
 		 * @since 1.92.0
 		 * @experimental Since 1.92.0 This API is experimental and might change significantly.
@@ -78,6 +90,28 @@ sap.ui.define([
 		var thisLib = sap.ui.webc.fiori;
 
 
+		/**
+		 * Interface for components that may be slotted inside <code>ui5-view-settings-dialog</code> as filter items
+		 *
+		 * @name sap.ui.webc.fiori.IFilterItem
+		 * @interface
+		 * @public
+		 * @since 1.97.0
+		 * @experimental Since 1.97.0 This API is experimental and might change significantly.
+		 * @ui5-metamodel This enumeration also will be described in the UI5 (legacy) designtime metamodel
+		 */
+
+		/**
+		 * Interface for components that may be slotted inside <code>ui5-filter-item</code> as values
+		 *
+		 * @name sap.ui.webc.fiori.IFilterItemOption
+		 * @interface
+		 * @public
+		 * @since 1.97.0
+		 * @experimental Since 1.97.0 This API is experimental and might change significantly.
+		 * @ui5-metamodel This enumeration also will be described in the UI5 (legacy) designtime metamodel
+		 */
+
 		/**
 		 * Interface for components that may be slotted as an action inside <code>ui5-li-notification</code> and <code>ui5-li-notification-group</code>
 		 *
@@ -144,6 +178,17 @@ sap.ui.define([
 		 * @ui5-metamodel This enumeration also will be described in the UI5 (legacy) designtime metamodel
 		 */
 
+		/**
+		 * Interface for components that may be slotted inside <code>ui5-view-settings-dialog</code> as sort items
+		 *
+		 * @name sap.ui.webc.fiori.ISortItem
+		 * @interface
+		 * @public
+		 * @since 1.97.0
+		 * @experimental Since 1.97.0 This API is experimental and might change significantly.
+		 * @ui5-metamodel This enumeration also will be described in the UI5 (legacy) designtime metamodel
+		 */
+
 		/**
 		 * Interface for components that may be slotted inside <code>ui5-timeline</code> as items
 		 *
@@ -297,6 +342,193 @@ Use to display both a master and a detail page when the user should focus on the
 		};
 
 
+		/**
+		 * Different illustration types of Illustrated Message.
+		 *
+		 * @enum {string}
+		 * @public
+		 * @since 1.95.0
+		 * @experimental Since 1.95.0 This API is experimental and might change significantly.
+		 * @ui5-metamodel This enumeration also will be described in the UI5 (legacy) designtime metamodel
+		 */
+		thisLib.IllustrationMessageType = {
+
+			/**
+			 * "BeforeSearch" illustration type.
+			 * @public
+			 */
+			BeforeSearch: "BeforeSearch",
+
+			/**
+			 * "NoActivities" illustration type.
+			 * @public
+			 */
+			NoActivities: "NoActivities",
+
+			/**
+			 * "NoData" illustration type.
+			 * @public
+			 */
+			NoData: "NoData",
+
+			/**
+			 * "NoEntries" illustration type.
+			 * @public
+			 */
+			NoEntries: "NoEntries",
+
+			/**
+			 * "NoMail" illustration type.
+			 * @public
+			 */
+			NoMail: "NoMail",
+
+			/**
+			 * "NoNotifications" illustration type.
+			 * @public
+			 */
+			NoNotifications: "NoNotifications",
+
+			/**
+			 * "NoSavedItems" illustration type.
+			 * @public
+			 */
+			NoSavedItems: "NoSavedItems",
+
+			/**
+			 * "NoSearchResults" illustration type.
+			 * @public
+			 */
+			NoSearchResults: "NoSearchResults",
+
+			/**
+			 * "NoTasks" illustration type.
+			 * @public
+			 */
+			NoTasks: "NoTasks",
+
+			/**
+			 * "TntCodePlaceholder" illustration type.
+			 * @public
+			 */
+			TntCodePlaceholder: "TntCodePlaceholder",
+
+			/**
+			 * "TntCompany" illustration type.
+			 * @public
+			 */
+			TntCompany: "TntCompany",
+
+			/**
+			 * "TntExternalLink" illustration type.
+			 * @public
+			 */
+			TntExternalLink: "TntExternalLink",
+
+			/**
+			 * "TntFaceID" illustration type.
+			 * @public
+			 */
+			TntFaceID: "TntFaceID",
+
+			/**
+			 * "TntFingerprint" illustration type.
+			 * @public
+			 */
+			TntFingerprint: "TntFingerprint",
+
+			/**
+			 * "TntLock" illustration type.
+			 * @public
+			 */
+			TntLock: "TntLock",
+
+			/**
+			 * "TntMission" illustration type.
+			 * @public
+			 */
+			TntMission: "TntMission",
+
+			/**
+			 * "TntNoApplications" illustration type.
+			 * @public
+			 */
+			TntNoApplications: "TntNoApplications",
+
+			/**
+			 * "TntNoFlows" illustration type.
+			 * @public
+			 */
+			TntNoFlows: "TntNoFlows",
+
+			/**
+			 * "TntNoUsers" illustration type.
+			 * @public
+			 */
+			TntNoUsers: "TntNoUsers",
+
+			/**
+			 * "TntRadar" illustration type.
+			 * @public
+			 */
+			TntRadar: "TntRadar",
+
+			/**
+			 * "TntServices" illustration type.
+			 * @public
+			 */
+			TntServices: "TntServices",
+
+			/**
+			 * "TntSessionExpired" illustration type.
+			 * @public
+			 */
+			TntSessionExpired: "TntSessionExpired",
+
+			/**
+			 * "TntSessionExpiring" illustration type.
+			 * @public
+			 */
+			TntSessionExpiring: "TntSessionExpiring",
+
+			/**
+			 * "TntSuccess" illustration type.
+			 * @public
+			 */
+			TntSuccess: "TntSuccess",
+
+			/**
+			 * "TntSuccessfulAuth" illustration type.
+			 * @public
+			 */
+			TntSuccessfulAuth: "TntSuccessfulAuth",
+
+			/**
+			 * "TntUnlock" illustration type.
+			 * @public
+			 */
+			TntUnlock: "TntUnlock",
+
+			/**
+			 * "TntUnsuccessfulAuth" illustration type.
+			 * @public
+			 */
+			TntUnsuccessfulAuth: "TntUnsuccessfulAuth",
+
+			/**
+			 * "UnableToLoad" illustration type.
+			 * @public
+			 */
+			UnableToLoad: "UnableToLoad",
+
+			/**
+			 * "UnableToUpload" illustration type.
+			 * @public
+			 */
+			UnableToUpload: "UnableToUpload"
+		};
+
+
 		/**
 		 * undefined
 		 *
@@ -328,6 +560,31 @@ Use to display both a master and a detail page when the user should focus on the
 		};
 
 
+		/**
+		 * Different types of Timeline.
+		 *
+		 * @enum {string}
+		 * @public
+		 * @since 1.92.0
+		 * @experimental Since 1.92.0 This API is experimental and might change significantly.
+		 * @ui5-metamodel This enumeration also will be described in the UI5 (legacy) designtime metamodel
+		 */
+		thisLib.TimelineLayout = {
+
+			/**
+			 * Horizontal layout
+			 * @public
+			 */
+			Horizontal: "Horizontal",
+
+			/**
+			 * Vertical layout Default type
+			 * @public
+			 */
+			Vertical: "Vertical"
+		};
+
+
 		/**
 		 * undefined
 		 *
@@ -364,6 +621,8 @@ Use to display both a master and a detail page when the user should focus on the
 			Uploading: "Uploading"
 		};
 
+		CSP.setPackageCSSRoot("@ui5/webcomponents-fiori", sap.ui.require.toUrl("sap/ui/webc/fiori/thirdparty/css/"));
+
 		return thisLib;
 
-	});
+	});