@openui5/sap.ui.webc.main 1.119.1 → 1.120.1

package/src/sap/ui/webc/main/RatingIndicator.js

@@ -43,7 +43,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.119.1
+	 * @version 1.120.1
 	 *
 	 * @constructor
 	 * @public
@@ -99,6 +99,14 @@ sap.ui.define([
 					defaultValue: false
 				},
 
+				/**
+				 * Defines whether the component is required.
+				 */
+				required: {
+					type: "boolean",
+					defaultValue: false
+				},
+
 				/**
 				 * The indicated value of the rating. <br>
 				 * <br>
@@ -122,6 +130,21 @@ sap.ui.define([
 					mapping: "style"
 				}
 			},
+			associations: {
+
+				/**
+				 * Receives id(or many ids) of the controls that label this control.
+				 */
+				ariaLabelledBy: {
+					type: "sap.ui.core.Control",
+					multiple: true,
+					mapping: {
+						type: "property",
+						to: "accessibleNameRef",
+						formatter: "_getAriaLabelledByForRendering"
+					}
+				}
+			},
 			events: {
 
 				/**

package/src/sap/ui/webc/main/ResponsivePopover.js

@@ -41,7 +41,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.119.1
+	 * @version 1.120.1
 	 *
 	 * @constructor
 	 * @public
@@ -64,12 +64,7 @@ sap.ui.define([
 				},
 
 				/**
-				 * Allows setting a custom role. Available options are:
-				 * <ul>
-				 *     <li><code>Dialog</code></li>
-				 *     <li><code>None</code></li>
-				 *     <li><code>AlertDialog</code></li>
-				 * </ul>
+				 * Allows setting a custom role.
 				 */
 				accessibleRole: {
 					type: "sap.ui.webc.main.PopupAccessibleRole",
@@ -111,15 +106,7 @@ sap.ui.define([
 				},
 
 				/**
-				 * Determines the horizontal alignment of the component. <br>
-				 * <br>
-				 * Available options are:
-				 * <ul>
-				 *     <li><code>Center</code></li>
-				 *     <li><code>Left</code></li>
-				 *     <li><code>Right</code></li>
-				 *     <li><code>Stretch</code></li>
-				 * </ul>
+				 * Determines the horizontal alignment of the component.
 				 */
 				horizontalAlign: {
 					type: "sap.ui.webc.main.PopoverHorizontalAlign",
@@ -143,15 +130,7 @@ sap.ui.define([
 				},
 
 				/**
-				 * Determines on which side the component is placed at. <br>
-				 * <br>
-				 * Available options are:
-				 * <ul>
-				 *     <li><code>Left</code></li>
-				 *     <li><code>Right</code></li>
-				 *     <li><code>Top</code></li>
-				 *     <li><code>Bottom</code></li>
-				 * </ul>
+				 * Determines on which side the component is placed at.
 				 */
 				placementType: {
 					type: "sap.ui.webc.main.PopoverPlacementType",
@@ -167,15 +146,7 @@ sap.ui.define([
 				},
 
 				/**
-				 * Determines the vertical alignment of the component. <br>
-				 * <br>
-				 * Available options are:
-				 * <ul>
-				 *     <li><code>Center</code></li>
-				 *     <li><code>Top</code></li>
-				 *     <li><code>Bottom</code></li>
-				 *     <li><code>Stretch</code></li>
-				 * </ul>
+				 * Determines the vertical alignment of the component.
 				 */
 				verticalAlign: {
 					type: "sap.ui.webc.main.PopoverVerticalAlign",

package/src/sap/ui/webc/main/SegmentedButton.js

@@ -30,7 +30,7 @@ sap.ui.define([
 	 * <b>Note:</b> There can be just one selected <code>item</code> at a time.
 	 *
 	 * @author SAP SE
-	 * @version 1.119.1
+	 * @version 1.120.1
 	 *
 	 * @constructor
 	 * @public
@@ -120,17 +120,10 @@ sap.ui.define([
 					}
 				}
 			},
-			getters: ["selectedItem", "selectedItems"]
+			getters: ["selectedItems"]
 		}
 	});
 
-	/**
-	 * Returns the currently selected item.
-	 * @public
-	 * @name sap.ui.webc.main.SegmentedButton#getSelectedItem
-	 * @function
-	 */
-
 	/**
 	 * Returns an array of the currently selected items.
 	 * @public

package/src/sap/ui/webc/main/SegmentedButtonItem.js

@@ -14,6 +14,7 @@ sap.ui.define([
 	"use strict";
 
 	var ButtonDesign = library.ButtonDesign;
+	var ButtonType = library.ButtonType;
 
 	/**
 	 * Constructor for a new <code>SegmentedButtonItem</code>.
@@ -31,7 +32,7 @@ sap.ui.define([
 	 * Clicking or tapping on a <code>sap.ui.webc.main.SegmentedButtonItem</code> changes its state to <code>pressed</code>. The item returns to its initial state when the user clicks or taps on it again. By applying additional custom CSS-styling classes, apps can give a different style to any <code>sap.ui.webc.main.SegmentedButtonItem</code>.
 	 *
 	 * @author SAP SE
-	 * @version 1.119.1
+	 * @version 1.120.1
 	 *
 	 * @constructor
 	 * @public
@@ -151,6 +152,14 @@ sap.ui.define([
 					type: "string",
 					defaultValue: "",
 					mapping: "textContent"
+				},
+
+				/**
+				 * Defines whether the button has special form-related functionality.
+				 */
+				type: {
+					type: "sap.ui.webc.main.ButtonType",
+					defaultValue: ButtonType.Button
 				}
 			},
 			associations: {

package/src/sap/ui/webc/main/Select.js

@@ -10,8 +10,8 @@ sap.ui.define([
 	"./library",
 	"sap/ui/core/EnabledPropagator",
 	"sap/ui/core/library",
-	"./thirdparty/Select",
-	"./thirdparty/features/InputElementsFormSupport"
+	"./thirdparty/features/InputElementsFormSupport",
+	"./thirdparty/Select"
 ], function(WebComponent, library, EnabledPropagator, coreLibrary) {
 	"use strict";
 
@@ -26,7 +26,23 @@ sap.ui.define([
 	 * @extends sap.ui.core.webc.WebComponent
 	 * @class
 	 *
-	 * <h3>Overview</h3> The <code>sap.ui.webc.main.Select</code> component is used to create a drop-down list. The items inside the <code>sap.ui.webc.main.Select</code> define the available options by using the <code>sap.ui.webc.main.Option</code> component.
+	 * <h3>Overview</h3>
+	 *
+	 * The <code>sap.ui.webc.main.Select</code> component is used to create a drop-down list.
+	 *
+	 * <h3>Usage</h3>
+	 *
+	 * There are two main usages of the <code>ui5-select></code>.
+	 *
+	 * 1. With Option (<code>sap.ui.webc.main.Option</code>) web component: <br>
+	 * The available options of the Select are defined by using the Option component. The Option comes with predefined design and layout, including <code>icon</code>, <code>text</code> and <code>additional-text</code>. <br>
+	 * <br>
+	 *
+	 *
+	 * 2. With SelectMenu (<code>sap.ui.webc.main.SelectMenu</code>) and SelectMenuOption (<code>sap.ui.webc.main.SelectMenuOption</code>) web components: <br>
+	 * The SelectMenu can be used as alternative to define the Select's dropdown and can be used via the <code>menu</code> property of the Select to reference SelectMenu by its ID. The component gives the possibility to customize the Select's dropdown by slotting entirely custom options (via the SelectMenuOption component) and adding custom styles.
+	 *
+	 * <b>Note:</b> SelectMenu is a popover and placing it top-level in the HTML page is recommended, because some page styles (for example transitions) can misplace the SelectMenu.
 	 *
 	 * <h3>Keyboard Handling</h3> The <code>sap.ui.webc.main.Select</code> provides advanced keyboard handling. <br>
 	 *
@@ -40,7 +56,7 @@ sap.ui.define([
 	 * </ul> <br>
 	 *
 	 * @author SAP SE
-	 * @version 1.119.1
+	 * @version 1.120.1
 	 *
 	 * @constructor
 	 * @public
@@ -145,6 +161,23 @@ sap.ui.define([
 			defaultAggregation: "options",
 			aggregations: {
 
+				/**
+				 * Defines the HTML element that will be displayed in the component input part, representing the selected option. <br>
+				 * <br>
+				 *
+				 *
+				 * <b>Note:</b> If not specified and <code>sap.ui.webc.main.SelectMenuOption</code> is used, either the option's <code>display-text</code> or its textContent will be displayed. <br>
+				 * <br>
+				 *
+				 *
+				 * <b>Note:</b> If not specified and <code>sap.ui.webc.main.Option</code> is used, the option's textContent will be displayed.
+				 */
+				label: {
+					type: "sap.ui.core.Control",
+					multiple: true,
+					slot: "label"
+				},
+
 				/**
 				 * Defines the component options.
 				 *
@@ -174,6 +207,20 @@ sap.ui.define([
 						to: "accessibleNameRef",
 						formatter: "_getAriaLabelledByForRendering"
 					}
+				},
+
+				/**
+				 * Defines a reference (ID or DOM element) of component's menu of options as alternative to define the select's dropdown. <br>
+				 * <br>
+				 * <b>Note:</b> Usage of <code>sap.ui.webc.main.SelectMenu</code> is recommended.
+				 */
+				menu: {
+					type: "sap.ui.core.Control",
+					multiple: false,
+					mapping: {
+						type: "property",
+						to: "menu"
+					}
 				}
 			},
 			events: {
@@ -200,6 +247,20 @@ sap.ui.define([
 					parameters: {}
 				},
 
+				/**
+				 * Fired when the user navigates through the options, but the selection is not finalized, or when pressing the ESC key to revert the current selection.
+				 */
+				liveChange: {
+					parameters: {
+						/**
+						 * the selected option.
+						 */
+						selectedOption: {
+							type: "HTMLElement"
+						}
+					}
+				},
+
 				/**
 				 * Fired after the component's dropdown menu opens.
 				 */

package/src/sap/ui/webc/main/SelectMenu.js

@@ -0,0 +1,65 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2023 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+// Provides control sap.ui.webc.main.SelectMenu.
+sap.ui.define([
+	"sap/ui/core/webc/WebComponent",
+	"./library",
+	"./thirdparty/SelectMenu"
+], function(WebComponent, library) {
+	"use strict";
+
+	/**
+	 * Constructor for a new <code>SelectMenu</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.core.webc.WebComponent
+	 * @class
+	 *
+	 * <h3>Overview</h3>
+	 *
+	 * The <code>sap.ui.webc.main.SelectMenu</code> is meant to be used together with the <code>sap.ui.webc.main.Select</code> component as alternative to define the select's dropdown. It acts as a popover on desktop and tablet, and as a Dialog on phone. <br>
+	 * </br> The component gives the possibility to the user to customize the <code>sap.ui.webc.main.Select</code>'s dropdown by slotting custom options and adding custom styles.
+	 *
+	 * <h3>Usage</h3>
+	 *
+	 * To use <code>sap.ui.webc.main.Select</code> with a <code>sap.ui.webc.main.SelectMenu</code>, you need to set the <code>sap.ui.webc.main.Select</code> <code>menu</code> property to reference <code>sap.ui.webc.main.SelectMenu</code> either by ID or DOM reference. <br>
+	 * </br>
+	 *
+	 * @author SAP SE
+	 * @version 1.120.1
+	 *
+	 * @constructor
+	 * @public
+	 * @since 1.120.0
+	 * @experimental Since 1.120.0 This control is experimental and its API might change significantly.
+	 * @alias sap.ui.webc.main.SelectMenu
+	 */
+	var SelectMenu = WebComponent.extend("sap.ui.webc.main.SelectMenu", {
+		metadata: {
+			library: "sap.ui.webc.main",
+			tag: "ui5-select-menu-ui5",
+			defaultAggregation: "content",
+			aggregations: {
+
+				/**
+				 * Defines the options of the component.
+				 */
+				content: {
+					type: "sap.ui.webc.main.ISelectMenuOption",
+					multiple: true
+				}
+			}
+		}
+	});
+
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
+	return SelectMenu;
+});

package/src/sap/ui/webc/main/SelectMenuOption.js

@@ -0,0 +1,80 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2023 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+// Provides control sap.ui.webc.main.SelectMenuOption.
+sap.ui.define([
+	"sap/ui/core/webc/WebComponent",
+	"./library",
+	"./thirdparty/SelectMenuOption"
+], function(WebComponent, library) {
+	"use strict";
+
+	/**
+	 * Constructor for a new <code>SelectMenuOption</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.core.webc.WebComponent
+	 * @class
+	 *
+	 * <h3>Overview</h3> The code>ui5-select-menu-option</code> component represents an option in the <code>sap.ui.webc.main.SelectMenu</code>.
+	 *
+	 * <h3>Usage</h3>
+	 *
+	 * @author SAP SE
+	 * @version 1.120.1
+	 *
+	 * @constructor
+	 * @public
+	 * @since 1.120.0
+	 * @experimental Since 1.120.0 This control is experimental and its API might change significantly.
+	 * @alias sap.ui.webc.main.SelectMenuOption
+	 * @implements sap.ui.webc.main.ISelectMenuOption
+	 */
+	var SelectMenuOption = WebComponent.extend("sap.ui.webc.main.SelectMenuOption", {
+		metadata: {
+			library: "sap.ui.webc.main",
+			tag: "ui5-select-menu-option-ui5",
+			interfaces: [
+				"sap.ui.webc.main.ISelectMenuOption"
+			],
+			properties: {
+
+				/**
+				 * Defines the text, displayed inside the <code>sap.ui.webc.main.Select</code> input filed when the option gets selected.
+				 */
+				displayText: {
+					type: "string"
+				},
+
+				/**
+				 * Defines the value of the <code>sap.ui.webc.main.Select</code> inside an HTML Form element when this component is selected. For more information on HTML Form support, see the <code>name</code> property of <code>sap.ui.webc.main.Select</code>.
+				 */
+				value: {
+					type: "string"
+				}
+			},
+			defaultAggregation: "content",
+			aggregations: {
+
+				/**
+				 * Defines the content of the component. <br>
+				 * <br>
+				 */
+				content: {
+					type: "sap.ui.core.Control",
+					multiple: true
+				}
+			}
+		}
+	});
+
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
+	return SelectMenuOption;
+});

package/src/sap/ui/webc/main/Slider.js

@@ -71,7 +71,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.119.1
+	 * @version 1.120.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/main/SplitButton.js

@@ -50,7 +50,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.119.1
+	 * @version 1.120.1
 	 *
 	 * @constructor
 	 * @public
@@ -81,20 +81,6 @@ sap.ui.define([
 
 				/**
 				 * Defines the component design.
-				 *
-				 * <br>
-				 * <br>
-				 * <b>The available values are:</b>
-				 *
-				 *
-				 * <ul>
-				 *     <li><code>Default</code></li>
-				 *     <li><code>Emphasized</code></li>
-				 *     <li><code>Positive</code></li>
-				 *     <li><code>Negative</code></li>
-				 *     <li><code>Transparent</code></li>
-				 *     <li><code>Attention</code></li>
-				 * </ul>
 				 */
 				design: {
 					type: "sap.ui.webc.main.ButtonDesign",

package/src/sap/ui/webc/main/StandardListItem.js

@@ -38,10 +38,16 @@ sap.ui.define([
 	 *     <li>description - Used to style the description of the list item</li>
 	 *     <li>additional-text - Used to style the additionalText of the list item</li>
 	 *     <li>icon - Used to style the icon of the list item</li>
+	 *     <li>native-li - Used to style the main li tag of the list item</li>
+	 *     <li>content - Used to style the content area of the list item</li>
+	 *     <li>detail-button - Used to style the button rendered when the list item is of type detail</li>
+	 *     <li>delete-button - Used to style the button rendered when the list item is in delete mode</li>
+	 *     <li>radio - Used to style the radio button rendered when the list item is in single selection mode</li>
+	 *     <li>checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode</li>
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.119.1
+	 * @version 1.120.1
 	 *
 	 * @constructor
 	 * @public
@@ -59,6 +65,22 @@ sap.ui.define([
 			],
 			properties: {
 
+				/**
+				 * An object of strings that defines several additional accessibility attribute values for customization depending on the use case.
+				 *
+				 * It supports the following fields:
+				 *
+				 *
+				 * <ul>
+				 *     <li><code>ariaSetsize</code>: Defines the number of items in the current set of listitems or treeitems when not all items in the set are present in the DOM. The value of each <code>aria-setsize</code> is an integer reflecting number of items in the complete set. <b>Note: </b> If the size of the entire set is unknown, set <code>aria-setsize="-1"</code>. </li>
+				 *     <li><code>ariaPosinset</code>: Defines an element's number or position in the current set of listitems or treeitems when not all items are present in the DOM. The value of each <code>aria-posinset</code> is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known. </li>
+				 * </ul>
+				 */
+				accessibilityAttributes: {
+					type: "object",
+					defaultValue: {}
+				},
+
 				/**
 				 * Defines the text alternative of the component. Note: If not provided a default text alternative will be set, if present.
 				 */

package/src/sap/ui/webc/main/StepInput.js

@@ -10,8 +10,8 @@ sap.ui.define([
 	"./library",
 	"sap/ui/core/EnabledPropagator",
 	"sap/ui/core/library",
-	"./thirdparty/StepInput",
-	"./thirdparty/features/InputElementsFormSupport"
+	"./thirdparty/features/InputElementsFormSupport",
+	"./thirdparty/StepInput"
 ], function(WebComponent, library, EnabledPropagator, coreLibrary) {
 	"use strict";
 
@@ -52,7 +52,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.119.1
+	 * @version 1.120.1
 	 *
 	 * @constructor
 	 * @public
@@ -170,16 +170,7 @@ sap.ui.define([
 				},
 
 				/**
-				 * Defines the value state of the component. <br>
-				 * <br>
-				 * Available options are:
-				 * <ul>
-				 *     <li><code>None</code></li>
-				 *     <li><code>Error</code></li>
-				 *     <li><code>Warning</code></li>
-				 *     <li><code>Success</code></li>
-				 *     <li><code>Information</code></li>
-				 * </ul>
+				 * Defines the value state of the component.
 				 */
 				valueState: {
 					type: "sap.ui.core.ValueState",

package/src/sap/ui/webc/main/SuggestionGroupItem.js

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.main.SuggestionGroupItem</code> is type of suggestion item, that can be used to split the <code>sap.ui.webc.main.Input</code> suggestions into groups.
 	 *
 	 * @author SAP SE
-	 * @version 1.119.1
+	 * @version 1.120.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/main/SuggestionItem.js

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.main.SuggestionItem</code> represents the suggestion item of the <code>sap.ui.webc.main.Input</code>.
 	 *
 	 * @author SAP SE
-	 * @version 1.119.1
+	 * @version 1.120.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/main/Switch.js

@@ -9,6 +9,7 @@ sap.ui.define([
 	"sap/ui/core/webc/WebComponent",
 	"./library",
 	"sap/ui/core/EnabledPropagator",
+	"./thirdparty/features/InputElementsFormSupport",
 	"./thirdparty/Switch"
 ], function(WebComponent, library, EnabledPropagator) {
 	"use strict";
@@ -43,7 +44,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.119.1
+	 * @version 1.120.1
 	 *
 	 * @constructor
 	 * @public
@@ -103,10 +104,31 @@ sap.ui.define([
 					}
 				},
 
+				/**
+				 * Determines the name with which the component will be submitted in an HTML form.
+				 *
+				 *
+				 * <br>
+				 * <br>
+				 * <b>Note:</b> When set, a native <code>input</code> HTML element will be created inside the component so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form.
+				 */
+				name: {
+					type: "string",
+					defaultValue: ""
+				},
+
+				/**
+				 * Defines whether the component is required.
+				 */
+				required: {
+					type: "boolean",
+					defaultValue: false
+				},
+
 				/**
 				 * Defines the text, displayed when the component is not checked. <br>
 				 * <br>
-				 * <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off). <b>Note:</b> This property will have no effect if the theme is set to <code>sap_horizon</code>.
+				 * <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).
 				 */
 				textOff: {
 					type: "string",
@@ -118,7 +140,7 @@ sap.ui.define([
 				 *
 				 * <br>
 				 * <br>
-				 * <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off). <b>Note:</b> This property will have no effect if the theme is set to <code>sap_horizon</code>.
+				 * <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).
 				 */
 				textOn: {
 					type: "string",

package/src/sap/ui/webc/main/Tab.js

@@ -27,7 +27,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.main.Tab</code> represents a selectable item inside a <code>sap.ui.webc.main.TabContainer</code>. It defines both the item in the tab strip (top part of the <code>sap.ui.webc.main.TabContainer</code>) and the content that is presented to the user once the tab is selected.
 	 *
 	 * @author SAP SE
-	 * @version 1.119.1
+	 * @version 1.120.1
 	 *
 	 * @constructor
 	 * @public