@openui5/sap.ui.webc.main 1.93.3 → 1.96.2

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

@@ -23,22 +23,16 @@ sap.ui.define([
 	 *
 	 * <h3>Overview</h3>
 	 *
-	 * The <code>sap.ui.webc.main.Card</code> is a component that represents information in the form of a tile with separate header and content areas. The content area of a <code>sap.ui.webc.main.Card</code> can be arbitrary HTML content. The header can be used through several properties, such as: <code>titleText</code>, <code>subtitleText</code>, <code>status</code> and two slots: <code>avatar</code> and <code>action</code>.
+	 * The <code>sap.ui.webc.main.Card</code> is a component that represents information in the form of a tile with separate header and content areas. The content area of a <code>sap.ui.webc.main.Card</code> can be arbitrary HTML content. The header can be used through slot <code>header</code>. For which there is a <code>sap.ui.webc.main.CardHeader</code> component to achieve the card look and fill.
 	 *
-	 * <h3>Keyboard handling</h3> In case you enable <code>headerInteractive</code> property, you can press the <code>sap.ui.webc.main.Card</code> header by Space and Enter keys.
+	 * Note: We recommend the usage of <code>sap.ui.webc.main.CardHeader</code> for the header slot, so advantage can be taken for keyboard handling, styling and accessibility.
 	 *
 	 * <h3>CSS Shadow Parts</h3>
 	 *
-	 * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br>
-	 * The <code>sap.ui.webc.main.Card</code> exposes the following CSS Shadow Parts:
-	 * <ul>
-	 *     <li>title - Used to style the title of the card</li>
-	 *     <li>subtitle - Used to style the subtitle of the card</li>
-	 *     <li>status - Used to style the status of the card</li>
-	 * </ul>
+	 * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
 	 *
 	 * @author SAP SE
-	 * @version 1.93.3
+	 * @version 1.96.2
 	 *
 	 * @constructor
 	 * @public
@@ -53,14 +47,6 @@ sap.ui.define([
 			tag: "ui5-card-ui5",
 			properties: {
 
-				/**
-				 * Defines if the component header would be interactive, e.g gets hover effect, gets focused and <code>headerPress</code> event is fired, when it is pressed.
-				 */
-				headerInteractive: {
-					type: "boolean",
-					defaultValue: false
-				},
-
 				/**
 				 * Defines the height of the control
 				 */
@@ -70,32 +56,6 @@ sap.ui.define([
 					mapping: "style"
 				},
 
-				/**
-				 * Defines the status displayed in the component header. <br>
-				 * <br>
-				 * <b>Note:</b> If the <code>action</code> slot is set, the <code>status</code> will not be displayed, you can either have <code>action</code>, or <code>status</code>.
-				 */
-				status: {
-					type: "string",
-					defaultValue: ""
-				},
-
-				/**
-				 * Defines the subtitle displayed in the component header.
-				 */
-				subtitleText: {
-					type: "string",
-					defaultValue: ""
-				},
-
-				/**
-				 * Defines the title displayed in the component header.
-				 */
-				titleText: {
-					type: "string",
-					defaultValue: ""
-				},
-
 				/**
 				 * Defines the width of the control
 				 */
@@ -109,43 +69,23 @@ sap.ui.define([
 			aggregations: {
 
 				/**
-				 * Defines an action, displayed in the right most part of the header. <br>
-				 * <br>
-				 * <b>Note:</b> If set, the <code>status</code> text will not be displayed, you can either have <code>action</code>, or <code>status</code>.
+				 * Defines the content of the component.
 				 */
-				action: {
+				content: {
 					type: "sap.ui.core.Control",
-					multiple: true,
-					slot: "action"
+					multiple: true
 				},
 
 				/**
-				 * Defines the visual representation in the header of the card. Supports images and icons. <br>
+				 * Defines the header of the component. <br>
 				 * <br>
-				 * <b>Note:</b> SAP-icons font provides numerous options. To find all the available icons, see the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+				 * <b>Note:</b> Use <code>sap.ui.webc.main.CardHeader</code> for the intended design.
 				 */
-				avatar: {
+				header: {
 					type: "sap.ui.core.Control",
 					multiple: true,
-					slot: "avatar"
-				},
-
-				/**
-				 * Defines the content of the component.
-				 */
-				content: {
-					type: "sap.ui.core.Control",
-					multiple: true
+					slot: "header"
 				}
-			},
-			events: {
-
-				/**
-				 * Fired when the component header is activated by mouse/tap or by using the Enter or Space key. <br>
-				 * <br>
-				 * <b>Note:</b> The event would be fired only if the <code>headerInteractive</code> property is set to true.
-				 */
-				headerClick: {}
 			}
 		}
 	});

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

@@ -0,0 +1,127 @@
+/*!
+ * 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.main.CardHeader.
+sap.ui.define([
+	"sap/ui/webc/common/WebComponent",
+	"./library",
+	"./thirdparty/CardHeader"
+], function(WebComponent, library) {
+	"use strict";
+
+	/**
+	 * Constructor for a new <code>CardHeader</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.main.CardHeader</code> is a component, meant to be used as a header of the <code>sap.ui.webc.main.Card</code> component. It displays valuable information, that can be defined with several properties, such as: <code>titleText</code>, <code>subtitleText</code>, <code>status</code> and two slots: <code>avatar</code> and <code>action</code>.
+	 *
+	 * <h3>Keyboard handling</h3> In case you enable <code>interactive</code> property, you can press the <code>sap.ui.webc.main.CardHeader</code> by Space and Enter keys.
+	 *
+	 * <h3>CSS Shadow Parts</h3>
+	 *
+	 * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br>
+	 * The <code>sap.ui.webc.main.Card</code> exposes the following CSS Shadow Parts:
+	 * <ul>
+	 *     <li>title - Used to style the title of the CardHeader</li>
+	 *     <li>subtitle - Used to style the subtitle of the CardHeader</li>
+	 *     <li>status - Used to style the status of the CardHeader</li>
+	 * </ul>
+	 *
+	 * @author SAP SE
+	 * @version 1.96.2
+	 *
+	 * @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.main.CardHeader
+	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
+	 */
+	var CardHeader = WebComponent.extend("sap.ui.webc.main.CardHeader", {
+		metadata: {
+			library: "sap.ui.webc.main",
+			tag: "ui5-card-header-ui5",
+			properties: {
+
+				/**
+				 * Defines if the component would be interactive, e.g gets hover effect, gets focus outline and <code>click</code> event is fired, when pressed.
+				 */
+				interactive: {
+					type: "boolean",
+					defaultValue: false
+				},
+
+				/**
+				 * Defines the status text. <br>
+				 * <br>
+				 * <b>Note:</b> If the <code>action</code> slot is set, the <code>status</code> will not be displayed, you can either have <code>action</code>, or <code>status</code>.
+				 */
+				status: {
+					type: "string",
+					defaultValue: ""
+				},
+
+				/**
+				 * Defines the subtitle text.
+				 */
+				subtitleText: {
+					type: "string",
+					defaultValue: ""
+				},
+
+				/**
+				 * Defines the title text.
+				 */
+				titleText: {
+					type: "string",
+					defaultValue: ""
+				}
+			},
+			aggregations: {
+
+				/**
+				 * Defines an action, displayed in the right most part of the header. <br>
+				 * <br>
+				 * <b>Note:</b> If set, the <code>status</code> text will not be displayed, you can either have <code>action</code>, or <code>status</code>.
+				 */
+				action: {
+					type: "sap.ui.core.Control",
+					multiple: true,
+					slot: "action"
+				},
+
+				/**
+				 * Defines an avatar image, displayed in the left most part of the header.
+				 */
+				avatar: {
+					type: "sap.ui.core.Control",
+					multiple: true,
+					slot: "avatar"
+				}
+			},
+			events: {
+
+				/**
+				 * Fired when the component is activated by mouse/tap or by using the Enter or Space key. <br>
+				 * <br>
+				 * <b>Note:</b> The event would be fired only if the <code>interactive</code> property is set to true.
+				 */
+				click: {
+					parameters: {}
+				}
+			}
+		}
+	});
+
+	return CardHeader;
+});

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

@@ -58,7 +58,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.93.3
+	 * @version 1.96.2
 	 *
 	 * @constructor
 	 * @public
@@ -115,14 +115,6 @@ sap.ui.define([
 					defaultValue: false
 				},
 
-				/**
-				 * Defines when the <code>load-more</code> event is fired. If not applied the event will not be fired.
-				 */
-				infiniteScrollOffset: {
-					type: "int",
-					defaultValue: 1
-				},
-
 				/**
 				 * Defines the number of items per page on large size (more than 1024px). One item per page shown by default.
 				 */
@@ -145,14 +137,6 @@ sap.ui.define([
 				itemsPerPageS: {
 					type: "int",
 					defaultValue: 1
-				},
-
-				/**
-				 * Defines the index of the initially selected item.
-				 */
-				selectedIndex: {
-					type: "int",
-					defaultValue: 0
 				}
 			},
 			defaultAggregation: "content",
@@ -169,26 +153,30 @@ sap.ui.define([
 			events: {
 
 				/**
-				 * Fired for the last items of the component if it is scrolled and the direction of scrolling is to the end. The number of items for which the event is fired is controlled by the <code>infiniteScrollOffset</code> property.
-				 */
-				loadMore: {},
-
-				/**
-				 * Fired whenever the <code>selectedIndex</code> changes due to user interaction, when the user clicks on the navigation arrows or while resizing, based on the <code>items-per-page-l</code>, <code>items-per-page-m</code> and <code>items-per-page-s</code> properties.
+				 * Fired whenever the page changes due to user interaction, when the user clicks on the navigation arrows or while resizing, based on the <code>items-per-page-l</code>, <code>items-per-page-m</code> and <code>items-per-page-s</code> properties.
 				 */
 				navigate: {
 					parameters: {
 						/**
-						 * the current <code>selectedIndex</code>.
+						 * the current selected index
 						 */
 						selectedIndex: {
 							type: "int"
 						}
 					}
 				}
-			}
+			},
+			methods: ["navigateTo"]
 		}
 	});
 
+	/**
+	 * Changes the currently displayed page.
+	 * @param {int} itemIndex The index of the target page
+	 * @public
+	 * @name sap.ui.webc.main.Carousel#navigateTo
+	 * @function
+	 */
+
 	return Carousel;
 });

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

@@ -14,6 +14,7 @@ sap.ui.define([
 	"use strict";
 
 	var ValueState = coreLibrary.ValueState;
+	var WrappingType = library.WrappingType;
 
 	/**
 	 * Constructor for a new <code>CheckBox</code>.
@@ -34,7 +35,7 @@ sap.ui.define([
 	 *
 	 * <h3>Usage</h3>
 	 *
-	 * You can define the checkbox text with via the <code>text</code> property. If the text exceeds the available width, it is truncated by default. In case you prefer text to wrap, use the <code>wrap</code> property. The touchable area for toggling the <code>sap.ui.webc.main.CheckBox</code> ends where the text ends. <br>
+	 * You can define the checkbox text with via the <code>text</code> property. If the text exceeds the available width, it is truncated by default. In case you prefer text to wrap, set the <code>wrappingType</code> property to "Normal". The touchable area for toggling the <code>sap.ui.webc.main.CheckBox</code> ends where the text ends. <br>
 	 * <br>
 	 * You can disable the <code>sap.ui.webc.main.CheckBox</code> by setting the <code>disabled</code> property to <code>true</code>, or use the <code>sap.ui.webc.main.CheckBox</code> in read-only mode by setting the <code>readonly</code> property to <code>true</code>.
 	 *
@@ -49,7 +50,7 @@ sap.ui.define([
 	 * <br>
 	 *
 	 * @author SAP SE
-	 * @version 1.93.3
+	 * @version 1.96.2
 	 *
 	 * @constructor
 	 * @public
@@ -154,11 +155,15 @@ sap.ui.define([
 				/**
 				 * Defines whether the component text wraps when there is not enough space. <br>
 				 * <br>
-				 * <b>Note:</b> By default, the text truncates when there is not enough space.
+				 * Available options are:
+				 * <ul>
+				 *     <li><code>None</code> - The text will be truncated with an ellipsis.</li>
+				 *     <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
+				 * </ul>
 				 */
-				wrap: {
-					type: "boolean",
-					defaultValue: false
+				wrappingType: {
+					type: "sap.ui.webc.main.WrappingType",
+					defaultValue: WrappingType.None
 				}
 			},
 			events: {
@@ -166,7 +171,9 @@ sap.ui.define([
 				/**
 				 * Fired when the component checked state changes.
 				 */
-				change: {}
+				change: {
+					parameters: {}
+				}
 			}
 		}
 	});

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

@@ -21,12 +21,14 @@ sap.ui.define([
 	 * @extends sap.ui.webc.common.WebComponent
 	 * @class
 	 *
-	 * <h3>Overview</h3> The ColorPalette provides the users with a range of predefined colors. The colors are fixed and do not change with the theme. You can set them by using the ColorPaletteItem items as slots.
+	 * <h3>Overview</h3> The ColorPalette provides the users with a range of predefined colors. The colors are fixed and do not change with the theme.
 	 *
-	 * <h3>Usage</h3> The Colorpalette is intended for users that needs to select a color from a predefined set of colors. To allow users select any color from a color picker, enable the <code>show-more-colors</code> property. And, to display the most recent color selection, enable the <code>show-recent-colors</code> property.
+	 * <h3>Usage</h3>
+	 *
+	 * The Colorpalette is meant for users that needs to select a color from a predefined set. To define the colors, use the <code>sap.ui.webc.main.ColorPaletteItem</code> component inside the default slot of the <code>sap.ui.webc.main.ColorPalette</code>.
 	 *
 	 * @author SAP SE
-	 * @version 1.93.3
+	 * @version 1.96.2
 	 *
 	 * @constructor
 	 * @public
@@ -39,29 +41,6 @@ sap.ui.define([
 		metadata: {
 			library: "sap.ui.webc.main",
 			tag: "ui5-color-palette-ui5",
-			properties: {
-
-				/**
-				 * Defines whether the user can choose a custom color from a color picker <b>Note:</b> In order to use this property you need to import the following module: <code>"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"</code>
-				 */
-				showMoreColors: {
-					type: "boolean"
-				},
-
-				/**
-				 * Defines whether the user can see the last used colors in the bottom of the component
-				 */
-				showRecentColors: {
-					type: "boolean"
-				},
-
-				/**
-				 * The selected color.
-				 */
-				value: {
-					type: "sap.ui.core.CSSColor"
-				}
-			},
 			defaultAggregation: "colors",
 			aggregations: {
 
@@ -78,7 +57,7 @@ sap.ui.define([
 				/**
 				 * Fired when the user selects a color.
 				 */
-				change: {
+				itemClick: {
 					parameters: {
 						/**
 						 * the selected color

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

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.main.ColorPaletteItem</code> component represents a color in the the <code>sap.ui.webc.main.ColorPalette</code>.
 	 *
 	 * @author SAP SE
-	 * @version 1.93.3
+	 * @version 1.96.2
 	 *
 	 * @constructor
 	 * @public

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

@@ -35,7 +35,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.93.3
+	 * @version 1.96.2
 	 *
 	 * @constructor
 	 * @public
@@ -64,7 +64,9 @@ sap.ui.define([
 				/**
 				 * Fired when the the selected color is changed
 				 */
-				change: {}
+				change: {
+					parameters: {}
+				}
 			}
 		}
 	});

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

@@ -41,7 +41,7 @@ sap.ui.define([
 	 * <h4>Picker</h4> If the <code>sap.ui.webc.main.ComboBox</code> is focused, you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys. <br>
 	 *
 	 * @author SAP SE
-	 * @version 1.93.3
+	 * @version 1.96.2
 	 *
 	 * @constructor
 	 * @public
@@ -56,6 +56,21 @@ sap.ui.define([
 			tag: "ui5-combobox-ui5",
 			properties: {
 
+				/**
+				 * Sets the accessible aria name of the component.
+				 */
+				accessibleName: {
+					type: "string"
+				},
+
+				/**
+				 * Receives id(or many ids) of the elements that label the combo box
+				 */
+				accessibleNameRef: {
+					type: "string",
+					defaultValue: ""
+				},
+
 				/**
 				 * Defines whether the component is in disabled state. <br>
 				 * <br>
@@ -74,20 +89,6 @@ sap.ui.define([
 					defaultValue: "StartsWithPerTerm"
 				},
 
-				/**
-				 * Defines the "live" value of the component. <br>
-				 * <br>
-				 * <b>Note:</b> The property is updated upon typing.
-				 *
-				 * <br>
-				 * <br>
-				 * <b>Note:</b> Initially the filter value is synced with value.
-				 */
-				filterValue: {
-					type: "string",
-					defaultValue: ""
-				},
-
 				/**
 				 * Indicates whether a loading indicator should be shown in the picker.
 				 */
@@ -198,14 +199,18 @@ sap.ui.define([
 				/**
 				 * Fired when the input operation has finished by pressing Enter, focusout or an item is selected.
 				 */
-				change: {},
+				change: {
+					parameters: {}
+				},
 
 				/**
 				 * Fired when typing in input. <br>
 				 * <br>
 				 * <b>Note:</b> filterValue property is updated, input is changed.
 				 */
-				input: {},
+				input: {
+					parameters: {}
+				},
 
 				/**
 				 * Fired when selection is changed by user interaction

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

@@ -0,0 +1,58 @@
+/*!
+ * 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.main.ComboBoxGroupItem.
+sap.ui.define([
+	"sap/ui/webc/common/WebComponent",
+	"./library",
+	"./thirdparty/ComboBoxGroupItem"
+], function(WebComponent, library) {
+	"use strict";
+
+	/**
+	 * Constructor for a new <code>ComboBoxGroupItem</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
+	 *
+	 * The <code>ui5-combobox-group-item</code> is type of suggestion item, that can be used to split the <code>sap.ui.webc.main.ComboBox</code> suggestions into groups.
+	 *
+	 * @author SAP SE
+	 * @version 1.96.2
+	 *
+	 * @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.main.ComboBoxGroupItem
+	 * @implements sap.ui.webc.main.IComboBoxItem
+	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
+	 */
+	var ComboBoxGroupItem = WebComponent.extend("sap.ui.webc.main.ComboBoxGroupItem", {
+		metadata: {
+			library: "sap.ui.webc.main",
+			tag: "ui5-cb-group-item-ui5",
+			interfaces: [
+				"sap.ui.webc.main.IComboBoxItem"
+			],
+			properties: {
+
+				/**
+				 * Defines the text of the component.
+				 */
+				text: {
+					type: "string",
+					defaultValue: ""
+				}
+			}
+		}
+	});
+
+	return ComboBoxGroupItem;
+});

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

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.main.ComboBoxItem</code> represents the item for a <code>sap.ui.webc.main.ComboBox</code>.
 	 *
 	 * @author SAP SE
-	 * @version 1.93.3
+	 * @version 1.96.2
 	 *
 	 * @constructor
 	 * @public

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

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * The component accepts arbitrary HTML content to allow full customization.
 	 *
 	 * @author SAP SE
-	 * @version 1.93.3
+	 * @version 1.96.2
 	 *
 	 * @constructor
 	 * @public
@@ -89,7 +89,9 @@ sap.ui.define([
 				/**
 				 * Fired when the user clicks on the detail button when type is <code>Detail</code>.
 				 */
-				detailClick: {}
+				detailClick: {
+					parameters: {}
+				}
 			}
 		}
 	});