@openui5/sap.ui.webc.main 1.115.1 → 1.116.0

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

@@ -12,6 +12,7 @@ sap.ui.define([
 ], function(WebComponent, library) {
 	"use strict";
 
+	var TabContainerBackgroundDesign = library.TabContainerBackgroundDesign;
 	var TabLayout = library.TabLayout;
 	var TabsOverflowMode = library.TabsOverflowMode;
 
@@ -49,7 +50,7 @@ sap.ui.define([
 	 * <h3>Keyboard Handling</h3>
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.116.0
 	 *
 	 * @constructor
 	 * @public
@@ -71,6 +72,14 @@ sap.ui.define([
 					defaultValue: false
 				},
 
+				/**
+				 * Sets the background color of the Tab Container's content as <code>Solid</code>, <code>Transparent</code>, or <code>Translucent</code>.
+				 */
+				contentBackgroundDesign: {
+					type: "sap.ui.webc.main.TabContainerBackgroundDesign",
+					defaultValue: TabContainerBackgroundDesign.Solid
+				},
+
 				/**
 				 * Defines whether the tabs are in a fixed state that is not expandable/collapsible by user interaction.
 				 */
@@ -79,6 +88,14 @@ sap.ui.define([
 					defaultValue: false
 				},
 
+				/**
+				 * Sets the background color of the Tab Container's header as <code>Solid</code>, <code>Transparent</code>, or <code>Translucent</code>.
+				 */
+				headerBackgroundDesign: {
+					type: "sap.ui.webc.main.TabContainerBackgroundDesign",
+					defaultValue: TabContainerBackgroundDesign.Solid
+				},
+
 				/**
 				 * Defines the height of the control
 				 */
@@ -102,7 +119,7 @@ sap.ui.define([
 				 *
 				 * <br>
 				 * <br>
-				 * <b>Note:</b> The content and the <code>additionalText</code> would be displayed vertically by defualt, but when set to <code>Inline</code>, they would be displayed horizontally.
+				 * <b>Note:</b> The content and the <code>additionalText</code> would be displayed vertically by default, but when set to <code>Inline</code>, they would be displayed horizontally.
 				 *
 				 * <br>
 				 * <br>
@@ -118,7 +135,7 @@ sap.ui.define([
 				},
 
 				/**
-				 * Defines the overflow mode of the tab strip. If you have a large number of tabs, only the tabs that can fit on screen will be visible. All other tabs that can 't fit on the screen are available in an overflow tab "More".
+				 * Defines the overflow mode of the header (the tab strip). If you have a large number of tabs, only the tabs that can fit on screen will be visible. All other tabs that can 't fit on the screen are available in an overflow tab "More".
 				 *
 				 * <br>
 				 * <br>
@@ -182,6 +199,7 @@ sap.ui.define([
 				 * Fired when a tab is selected.
 				 */
 				tabSelect: {
+					allowPreventDefault: true,
 					parameters: {
 						/**
 						 * The selected <code>tab</code>.
@@ -191,7 +209,7 @@ sap.ui.define([
 						},
 
 						/**
-						 * The selected <code>tab</code> index.
+						 * The selected <code>tab</code> index in the flattened array of all tabs and their subTabs, provided by the <code>allItems</code> getter.
 						 */
 						tabIndex: {
 							type: "int"
@@ -199,10 +217,28 @@ sap.ui.define([
 					}
 				}
 			},
+			getters: ["allItems"],
 			designtime: "sap/ui/webc/main/designtime/TabContainer.designtime"
 		}
 	});
 
+	/**
+		* Returns all slotted tabs and their subTabs in a flattened array. The order of tabs is depth-first. For example, given the following slotted elements: <pre><code>
+	&lt;ui5-tabcontainer&gt;
+		&lt;ui5-tab id="First" text="First"&gt;
+			...
+			&lt;ui5-tab slot="subTabs" id="Nested" text="Nested"&gt;...&lt;/ui5-tab&gt;
+		&lt;/ui5-tab&gt;
+		&lt;ui5-tab id="Second" text="Second"&gt;...&lt;/ui5-tab&gt;
+		&lt;ui5-tab-separator id="sep"&gt;&lt;/ui5-tab-separator&gt;
+		&lt;ui5-tab id="Third" text="Third"&gt;...&lt;/ui5-tab&gt;
+	&lt;/ui5-tabcontainer&gt;
+</code></pre> Calling <code>allItems</code> on this TabContainer will return the instances in the following order: <code>[ ui5-tab#First, ui5-tab#Nested, ui5-tab#Second, ui5-tab-separator#sep, ui5-tab#Third ]</code>
+		* @public
+		* @name sap.ui.webc.main.TabContainer#getAllItems
+		* @function
+		*/
+
 	/* CUSTOM CODE START */
 	/* CUSTOM CODE END */
 

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

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.main.TabSeparator</code> represents a vertical line to separate tabs inside a <code>sap.ui.webc.main.TabContainer</code>.
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.116.0
 	 *
 	 * @constructor
 	 * @public
@@ -39,10 +39,18 @@ sap.ui.define([
 			tag: "ui5-tab-separator-ui5",
 			interfaces: [
 				"sap.ui.webc.main.ITab"
-			]
+			],
+			methods: ["getTabInStripDomRef"]
 		}
 	});
 
+	/**
+	 * Returns the DOM reference of the separator that is placed in the header. <b>Note:</b> Tabs and separators, placed in the <code>subTabs</code> slot of other tabs are not shown in the header. Calling this method on such tabs or separators will return <code>null</code>.
+	 * @public
+	 * @name sap.ui.webc.main.TabSeparator#getTabInStripDomRef
+	 * @function
+	 */
+
 	/* CUSTOM CODE START */
 	/* CUSTOM CODE END */
 

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

@@ -56,7 +56,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.116.0
 	 *
 	 * @constructor
 	 * @public
@@ -71,7 +71,7 @@ sap.ui.define([
 			properties: {
 
 				/**
-				 * Defines the accessible aria name of the component.
+				 * Defines the accessible ARIA name of the component.
 				 */
 				accessibleName: {
 					type: "string"

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

@@ -34,7 +34,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.116.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -12,6 +12,8 @@ sap.ui.define([
 ], function(WebComponent, library) {
 	"use strict";
 
+	var TableColumnPopinDisplay = library.TableColumnPopinDisplay;
+
 	/**
 	 * Constructor for a new <code>TableColumn</code>.
 	 *
@@ -34,7 +36,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.116.0
 	 *
 	 * @constructor
 	 * @public
@@ -73,6 +75,24 @@ sap.ui.define([
 					defaultValue: Infinity
 				},
 
+				/**
+				 * Defines how the popin row is displayed.
+				 *
+				 * <br>
+				 * <br>
+				 * <b>The available values are:</b>
+				 *
+				 *
+				 * <ul>
+				 *     <li><code>Block</code></li>
+				 *     <li><code>Inline</code></li>
+				 * </ul>
+				 */
+				popinDisplay: {
+					type: "sap.ui.webc.main.TableColumnPopinDisplay",
+					defaultValue: TableColumnPopinDisplay.Block
+				},
+
 				/**
 				 * The text for the column when it pops in.
 				 */

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

@@ -34,7 +34,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.116.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -37,7 +37,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.116.0
 	 *
 	 * @constructor
 	 * @public
@@ -55,6 +55,14 @@ sap.ui.define([
 			],
 			properties: {
 
+				/**
+				 * Indicates if the table row is navigated.
+				 */
+				navigated: {
+					type: "boolean",
+					defaultValue: false
+				},
+
 				/**
 				 * Defines the row's selected state.
 				 */

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

@@ -41,7 +41,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.116.0
 	 *
 	 * @constructor
 	 * @public
@@ -60,7 +60,7 @@ sap.ui.define([
 			properties: {
 
 				/**
-				 * Defines the accessible aria name of the component.
+				 * Defines the accessible ARIA name of the component.
 				 */
 				accessibleName: {
 					type: "string"
@@ -82,7 +82,6 @@ sap.ui.define([
 				/**
 				 * Enables the component to automatically grow and shrink dynamically with its content. <br>
 				 * <br>
-				 * <b>Note:</b> If set to <code>true</code>, the CSS <code>height</code> property is ignored.
 				 */
 				growing: {
 					type: "boolean",

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

@@ -63,7 +63,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.116.0
 	 *
 	 * @constructor
 	 * @public
@@ -180,14 +180,42 @@ sap.ui.define([
 				 * Fired when the input operation has finished by clicking the "OK" button or when the text in the input field has changed and the focus leaves the input field.
 				 */
 				change: {
-					parameters: {}
+					parameters: {
+						/**
+						 * The submitted value.
+						 */
+						value: {
+							type: "string"
+						},
+
+						/**
+						 * Indicator if the value is in correct format pattern and in valid range.
+						 */
+						valid: {
+							type: "boolean"
+						}
+					}
 				},
 
 				/**
 				 * Fired when the value of the <code>sap.ui.webc.main.TimePicker</code> is changed at each key stroke.
 				 */
 				input: {
-					parameters: {}
+					parameters: {
+						/**
+						 * The current value.
+						 */
+						value: {
+							type: "string"
+						},
+
+						/**
+						 * Indicator if the value is in correct format pattern and in valid range.
+						 */
+						valid: {
+							type: "boolean"
+						}
+					}
 				}
 			},
 			methods: ["closePicker", "formatValue", "isOpen", "isValid", "openPicker"],

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

@@ -29,7 +29,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.main.Title</code> component is used to display titles inside a page. It is a simple, large-sized text with explicit header/title semantics.
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.116.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -44,7 +44,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.116.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -31,7 +31,7 @@ sap.ui.define([
 	 * Clicking or tapping on a <code>sap.ui.webc.main.ToggleButton</code> changes its state to <code>pressed</code>. The button 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.ToggleButton</code>.
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.116.0
 	 *
 	 * @constructor
 	 * @public
@@ -76,10 +76,11 @@ sap.ui.define([
 				},
 
 				/**
-				 * Defines the accessible aria name of the component.
+				 * Defines the accessible ARIA name of the component.
 				 */
 				accessibleName: {
-					type: "string"
+					type: "string",
+					defaultValue: undefined
 				},
 
 				/**

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

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.116.0
 	 *
 	 * @constructor
 	 * @public
@@ -50,14 +50,16 @@ sap.ui.define([
 				 * <b>Note:</b> A read-only component can not be deleted or selected, but still provides visual feedback upon user interaction.
 				 */
 				readonly: {
-					type: "boolean"
+					type: "boolean",
+					defaultValue: false
 				},
 
 				/**
 				 * Defines whether the component is selected or not.
 				 */
 				selected: {
-					type: "boolean"
+					type: "boolean",
+					defaultValue: false
 				},
 
 				/**
@@ -75,7 +77,7 @@ sap.ui.define([
 				 */
 				closeIcon: {
 					type: "sap.ui.webc.main.IIcon",
-					multiple: false,
+					multiple: true,
 					slot: "closeIcon"
 				}
 			},

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

@@ -57,7 +57,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.116.0
 	 *
 	 * @constructor
 	 * @public
@@ -71,6 +71,13 @@ sap.ui.define([
 			tag: "ui5-tree-ui5",
 			properties: {
 
+				/**
+				 * Defines the accessible name of the component.
+				 */
+				accessibleName: {
+					type: "string"
+				},
+
 				/**
 				 * Defines the component footer text.
 				 */
@@ -159,6 +166,21 @@ sap.ui.define([
 					multiple: true
 				}
 			},
+			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: {
 
 				/**
@@ -252,6 +274,13 @@ sap.ui.define([
 						 */
 						previouslySelectedItems: {
 							type: "Array"
+						},
+
+						/**
+						 * The item triggering the event.
+						 */
+						targetItem: {
+							type: "HTMLElement"
 						}
 					}
 				}
@@ -262,7 +291,7 @@ sap.ui.define([
 
 	/**
 	 * Perform Depth-First-Search walk on the tree and run a callback on each node
-	 * @param {function} callback function to execute on each node of the tree with 2 arguments: the node and the level
+	 * @param {function} callback function to execute on each node of the tree with 3 arguments: the node, the level and the index
 	 * @public
 	 * @name sap.ui.webc.main.Tree#walk
 	 * @function

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

@@ -14,6 +14,7 @@ sap.ui.define([
 	"use strict";
 
 	var ValueState = coreLibrary.ValueState;
+	var ListItemType = library.ListItemType;
 
 	/**
 	 * Constructor for a new <code>TreeItem</code>.
@@ -24,12 +25,21 @@ sap.ui.define([
 	 * @extends sap.ui.webc.common.WebComponent
 	 * @class
 	 *
-	 * <h3>Overview</h3> This is the item to use inside a <code>sap.ui.webc.main.Tree</code>. You can represent an arbitrary tree structure by recursively nesting tree items.
+	 * <h3>Overview</h3> The <code>sap.ui.webc.main.TreeItem</code> represents a node in a tree structure, shown as a <code>sap.ui.webc.main.List</code>. <br>
+	 * This is the item to use inside a <code>sap.ui.webc.main.Tree</code>. You can represent an arbitrary tree structure by recursively nesting tree items.
 	 *
-	 * <h3>Usage</h3> <code>sap.ui.webc.main.TreeItem</code> is an abstract element, representing a node in a <code>sap.ui.webc.main.Tree</code>. The tree itself is rendered as a list, and each <code>sap.ui.webc.main.TreeItem</code> is represented by a list item(<code>sap.ui.webc.main.TreeListItem</code>) in that list. Therefore, you should only use <code>sap.ui.webc.main.TreeItem</code> directly in your apps. The <code>sap.ui.webc.main.TreeListItem</code> list item is internal for the list, and not intended for public use.
+	 * <h3>CSS Shadow Parts</h3>
+	 *
+	 * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/::part CSS Shadow Parts} allow developers to style elements inside the Shadow DOM. <br>
+	 * The <code>sap.ui.webc.main.TreeItem</code> exposes the following CSS Shadow Parts:
+	 * <ul>
+	 *     <li>title - Used to style the title of the tree list item</li>
+	 *     <li>additionalText - Used to style the additionalText of the tree list item</li>
+	 *     <li>icon - Used to style the icon of the tree list item</li>
+	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.116.0
 	 *
 	 * @constructor
 	 * @public
@@ -47,16 +57,24 @@ sap.ui.define([
 			],
 			properties: {
 
+				/**
+				 * Defines the accessible name of the component.
+				 */
+				accessibleName: {
+					type: "string"
+				},
+
 				/**
 				 * Defines the <code>additionalText</code>, displayed in the end of the tree item.
 				 */
 				additionalText: {
-					type: "string"
+					type: "string",
+					defaultValue: ""
 				},
 
 				/**
 				 * Defines the state of the <code>additionalText</code>. <br>
-				 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Erorr"</code>.
+				 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Error"</code>.
 				 */
 				additionalTextState: {
 					type: "sap.ui.core.ValueState",
@@ -64,7 +82,7 @@ sap.ui.define([
 				},
 
 				/**
-				 * Defines whether the tree node is expanded or collapsed. Only has visual effect for tree nodes with children.
+				 * Defines whether the tree list item will show a collapse or expand icon inside its toggle button.
 				 */
 				expanded: {
 					type: "boolean",
@@ -81,7 +99,7 @@ sap.ui.define([
 				},
 
 				/**
-				 * If set, an icon will be displayed before the text, representing the tree item.
+				 * If set, an icon will be displayed before the text of the tree list item.
 				 */
 				icon: {
 					type: "string",
@@ -91,7 +109,7 @@ sap.ui.define([
 				/**
 				 * Defines whether the selection of a tree node is displayed as partially selected. <br>
 				 * <br>
-				 * <b>Note:</b> The indeterminate state can be set only programatically and can’t be achieved by user interaction, meaning that the resulting visual state depends on the values of the <code>indeterminate</code> and <code>selected</code> properties:
+				 * <b>Note:</b> The indeterminate state can be set only programmatically and can’t be achieved by user interaction, meaning that the resulting visual state depends on the values of the <code>indeterminate</code> and <code>selected</code> properties:
 				 * <ul>
 				 *     <li> If a tree node has both <code>selected</code> and <code>indeterminate</code> set to <code>true</code>, it is displayed as partially selected.
 				 *     <li> If a tree node has <code>selected</code> set to <code>true</code> and <code>indeterminate</code> set to <code>false</code>, it is displayed as selected.
@@ -105,7 +123,14 @@ sap.ui.define([
 				},
 
 				/**
-				 * Defines whether the tree node is selected by the user. Only has effect if the <code>sap.ui.webc.main.Tree</code> is in one of the following modes: in <code>SingleSelect</code>, <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code> and <code>MultiSelect</code>.
+				 * The navigated state of the list item. If set to <code>true</code>, a navigation indicator is displayed at the end of the list item.
+				 */
+				navigated: {
+					type: "boolean"
+				},
+
+				/**
+				 * Defines the selected state of the <code>ListItem</code>.
 				 */
 				selected: {
 					type: "boolean",
@@ -118,19 +143,47 @@ sap.ui.define([
 				text: {
 					type: "string",
 					defaultValue: ""
+				},
+
+				/**
+				 * Defines the visual indication and behavior of the list items. Available options are <code>Active</code> (by default), <code>Inactive</code>, <code>Detail</code> and <code>Navigation</code>. <br>
+				 * <br>
+				 * <b>Note:</b> When set to <code>Active</code> or <code>Navigation</code>, the item will provide visual response upon press and hover, while with type <code>Inactive</code> and <code>Detail</code> - will not.
+				 */
+				type: {
+					type: "sap.ui.webc.main.ListItemType",
+					defaultValue: ListItemType.Active
 				}
 			},
 			defaultAggregation: "items",
 			aggregations: {
 
 				/**
-				 * Defines the items of this component.
+				 * Defines the delete button, displayed in "Delete" mode. <b>Note:</b> While the slot allows custom buttons, to match design guidelines, please use the <code>sap.ui.webc.main.Button</code> component. <b>Note:</b> When the slot is not present, a built-in delete button will be displayed.
+				 */
+				deleteButton: {
+					type: "sap.ui.webc.main.IButton",
+					multiple: false,
+					slot: "deleteButton"
+				},
+
+				/**
+				 * Defines the items of the component. <br /> <br /> <b>Note:</b> Use <code>sap.ui.webc.main.TreeItem</code> or <code>sap.ui.webc.main.TreeItemCustom</code>
 				 */
 				items: {
 					type: "sap.ui.webc.main.ITreeItem",
 					multiple: true
 				}
 			},
+			events: {
+
+				/**
+				 * Fired when the user clicks on the detail button when type is <code>Detail</code>.
+				 */
+				detailClick: {
+					parameters: {}
+				}
+			},
 			methods: ["toggle"]
 		}
 	});